├── .browserslistrc
├── .commitlintrc
├── .editorconfig
├── .eslintrc
├── .github
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .husky
    ├── .gitignore
    ├── commit-msg
    └── pre-commit
├── .lintstagedrc
├── .npmignore
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── benchmarks
    ├── generate-tachometer-config.js
    ├── index.html
    └── template-tachometer.json
├── docs
    └── browserstack-logo.svg
├── package.json
├── src
    ├── transform.js
    ├── transform.spec.js
    ├── wrap.d.ts
    ├── wrap.js
    └── wrap.spec.js
├── wallaby.js
├── web-test-runner.bs.config.mjs
├── web-test-runner.config.mjs
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | last 2 Chrome major versions
2 | last 2 Firefox major versions
3 | last 2 Safari major versions
4 | last 2 Edge major versions
5 | last 2 ChromeAndroid major versions
6 | last 2 iOS major versions
7 | Firefox ESR
8 | Edge 18
9 | 


--------------------------------------------------------------------------------
/.commitlintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["@commitlint/config-conventional"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.js]
12 | block_comment_start = /*
13 | block_comment = *
14 | block_comment_end = */
15 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["airbnb-base", "prettier"],
 3 |   "parser": "babel-eslint",
 4 |   "env": {
 5 |     "browser": true
 6 |   },
 7 |   "rules": {
 8 |     "import/no-extraneous-dependencies": [
 9 |       "error",
10 |       {
11 |         "devDependencies": ["src/**/*.spec.js", "*.config.mjs"]
12 |       }
13 |     ],
14 |     "import/extensions": 0
15 |   },
16 |   "overrides": [
17 |     {
18 |       "files": ["index.js"],
19 |       "rules": {
20 |         "import/prefer-default-export": 0
21 |       }
22 |     },
23 |     {
24 |       "files": ["src/**/*.spec.js"],
25 |       "env": {
26 |         "mocha": true
27 |       },
28 |       "rules": {
29 |         "max-classes-per-file": 0,
30 |         "no-unused-expressions": 0,
31 |         "import/prefer-default-export": 0
32 |       }
33 |     }
34 |   ]
35 | }
36 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [main]
 6 |   pull_request:
 7 |     branches: [main]
 8 | 
 9 | jobs:
10 |   ci:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: 14.x
17 |       - run: yarn install --frozen-lockfile
18 |       - run: yarn lint
19 |       - run: yarn test:bs
20 |         env:
21 |           BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
22 |           BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | benchmarks/tachometer.json
2 | coverage/
3 | node_modules/
4 | .vscode/
5 | results.json
6 | *.log
7 | 


--------------------------------------------------------------------------------
/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | yarn commitlint --edit $1
5 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | yarn lint-staged
5 | 


--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "*": [
 3 |     "eclint fix"
 4 |   ],
 5 |   "*.js": [
 6 |     "eslint --fix",
 7 |     "prettier --write"
 8 |   ],
 9 |   "*.md": [
10 |     "prettier --write"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | /.github/
 2 | /.husky/
 3 | /.vscode/
 4 | /benchmarks/
 5 | /coverage/
 6 | *.spec.js
 7 | .browserslistrc
 8 | .commitlintrc
 9 | .editorconfig
10 | .eslintrc
11 | .lintstagedrc
12 | .prettierignore
13 | .prettierrc
14 | results.json
15 | wallaby.js
16 | web-test-runner.bs.config.mjs
17 | web-test-runner.config.mjs
18 | *.log
19 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | /coverage/
2 | CHANGELOG.md
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 120,
3 |   "singleQuote": true,
4 |   "trailingComma": "all"
5 | }
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | <a name="0.1.5"></a>
 6 | ## [0.1.5](https://github.com/bashmish/carehtml/compare/v0.1.4...v0.1.5) (2022-04-23)
 7 | 
 8 | 
 9 | ### Bug Fixes
10 | 
11 | * comply with Custom Elements name constraints ([2881679](https://github.com/bashmish/carehtml/commit/2881679))
12 | 
13 | 
14 | 
15 | <a name="0.1.4"></a>
16 | ## [0.1.4](https://github.com/bashmish/carehtml/compare/v0.1.3...v0.1.4) (2022-04-21)
17 | 
18 | 
19 | ### Features
20 | 
21 | * support Lit 2.x ([c5f40b3](https://github.com/bashmish/carehtml/commit/c5f40b3))
22 | 
23 | 
24 | ### Bug Fixes
25 | 
26 | * define types in package.json correctly to be auto loaded ([dd96c9a](https://github.com/bashmish/carehtml/commit/dd96c9a))
27 | 
28 | 
29 | 
30 | <a name="0.1.3"></a>
31 | ## [0.1.3](https://github.com/bashmish/carehtml/compare/v0.1.2...v0.1.3) (2021-04-01)
32 | 
33 | 
34 | ### Features
35 | 
36 | * cache template to avoid rerendering when strings reference changes ([067b39d](https://github.com/bashmish/carehtml/commit/067b39d))
37 | 
38 | 
39 | 
40 | <a name="0.1.2"></a>
41 | ## [0.1.2](https://github.com/bashmish/carehtml/compare/v0.1.1...v0.1.2) (2021-03-20)
42 | 
43 | 
44 | ### Features
45 | 
46 | * add TypeScript definitions (#22) ([a788861](https://github.com/bashmish/carehtml/commit/a788861))
47 | 
48 | 
49 | ### Bug Fixes
50 | 
51 | * fix(transform): do not throw on nullish value (#19) ([d5b3706](https://github.com/bashmish/carehtml/commit/d5b3706))
52 | 
53 | 
54 | 
55 | <a name="0.1.1"></a>
56 | ## [0.1.1](https://github.com/bashmish/carehtml/compare/v0.1.0...v0.1.1) (2019-08-22)
57 | 
58 | 
59 | ### Bug Fixes
60 | 
61 | * generate name correctly in Safari if constructor has no name ([f9af239](https://github.com/bashmish/carehtml/commit/f9af239))
62 | 
63 | 
64 | 
65 | <a name="0.1.0"></a>
66 | # 0.1.0 (2018-12-22)
67 | 
68 | 
69 | ### Features
70 | 
71 | * auto register Custom Element classes with different names and in different circumstances ([8aad0bb](https://github.com/bashmish/carehtml/commit/8aad0bb))
72 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Mikhail Bashkirov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # carehtml (Custom Auto Registered Elements HTML)
  2 | 
  3 | Templates with automatic registration of Custom Elements.
  4 | 
  5 | ```js
  6 | const template = html`<${CustomElement}></${CustomElement}>`;
  7 | ```
  8 | 
  9 | Inspired by [JSX](https://reactjs.org/docs/introducing-jsx.html) in general and [htm](https://www.npmjs.com/package/htm) in particular.
 10 | 
 11 | ## Motivation
 12 | 
 13 | There are 2 main reasons Web Components need something like this:
 14 | 
 15 | 1. Lack of scoping when registering Custom Elements which creates issues in tests and makes it impossible to have 2 different components with the same name.
 16 | 2. Inability to have 2 different versions of the same Custom Element when refactoring from an old to a new version, especially when having nested node modules.
 17 | 
 18 | ## Usage with Lit
 19 | 
 20 | You need to wrap the Lit `html` tag:
 21 | 
 22 | ```js
 23 | import { LitElement, html as litHtml } from 'lit';
 24 | import takeCareOf from 'carehtml';
 25 | 
 26 | const html = takeCareOf(litHtml);
 27 | 
 28 | class MySearchBar extends LitElement {
 29 |   render() {
 30 |     return html`
 31 |       <${MyInput} name="query"></${MyInput}>
 32 |       <${MyButton}>
 33 |         <${MyIcon} icon="search"></${MyIcon}>
 34 |         Search
 35 |       </${MyButton}>
 36 |     `;
 37 |   }
 38 | }
 39 | ```
 40 | 
 41 | > Wrapping is extra work which might seem unnecessary in the user code, but that allows to decouple `carehtml` from `lit`, primarily in terms of npm dependencies.
 42 | > This allows to use `carehtml` with any version of `lit` and develop `carehtml` with its independent release cycle.
 43 | 
 44 | ## Usage with Other Templating Libraries Based on Tagged Templates
 45 | 
 46 | In fact it can work with any other templating library which relies on [tagged templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates).
 47 | For example with `htm` allowing to mix Custom Element classes with Preact components (and any other components supported by `htm` including React ones).
 48 | 
 49 | This is an example taken from the `htm` docs with one change: instead of simple `<button>` there is a Custom Element based `Button` from new [Material Web Components](https://github.com/material-components/material-components-web-components).
 50 | 
 51 | ```js
 52 | import htm from 'htm';
 53 | import { h, Component, render } from 'preact';
 54 | import { Button } from '@material/mwc-button';
 55 | import takeCareOf from 'carehtml';
 56 | 
 57 | const html = takeCareOf(htm.bind(h));
 58 | 
 59 | class App extends Component {
 60 |   addTodo() {
 61 |     const { todos = [] } = this.state;
 62 |     this.setState({ todos: todos.concat(`Item ${todos.length}`) });
 63 |   }
 64 |   render({ page }, { todos = [] }) {
 65 |     return html`
 66 |       <div class="app">
 67 |         <${Header} name="ToDo's (${page})" />
 68 |         <ul>
 69 |           ${todos.map((todo) => html`<li>${todo}</li>`)}
 70 |         </ul>
 71 |         <${Button} onClick=${this.addTodo.bind(this)}>Add Todo</${Button}>
 72 |         <${Footer}>footer content here<//>
 73 |       </div>
 74 |     `;
 75 |   }
 76 | }
 77 | 
 78 | render(html`<${App} page="All" />`, document.body);
 79 | ```
 80 | 
 81 | ## Usage in Tests
 82 | 
 83 | ```js
 84 | import { html as litHtml, render } from 'lit';
 85 | import takeCareOf from 'carehtml';
 86 | 
 87 | const html = takeCareOf(litHtml);
 88 | 
 89 | describe('MyMixin', () => {
 90 |   it('does something', () => {
 91 |     class MyElement extends MyMixin(HTMLElement) {
 92 |       // define extra behavior
 93 |     }
 94 | 
 95 |     // create fixture
 96 |     // (html`` in this context returns TemplateResult as if it was Lit itself)
 97 |     const element = fixture(html`<${MyElement}></${MyElement}>`);
 98 | 
 99 |     // test mixin/element behavior
100 |   });
101 | });
102 | 
103 | function fixture(litTemplate) {
104 |   // please use smth like this in real life
105 |   // https://open-wc.org/recommendations/testing-helpers.html#test-a-custom-element-with-properties
106 |   const wrapper = document.createElement('div');
107 |   render(litTemplate, wrapper);
108 |   document.body.appendChild(wrapper);
109 |   return wrapper.children[0];
110 | }
111 | ```
112 | 
113 | ## Benchmarks
114 | 
115 | Runtime performance is not the key requirement for `carehtml` since the end goal is to compile the code and have static and still unique tag names in the production code.
116 | But some numbers might be interesting to show the impact of such solution on local development and the potential runtime usage in production for projects that want to stay compilation-free.
117 | 
118 | There are 2 things which `carehtml` can slow down and which can be measured: creating a template and rendering a template.
119 | Both can be measured together as well.
120 | 
121 | The original idea was that the benchmarks need to compare the most minimalistic template possible, e.g. `<my-element></my-element>` where `MyElement` does not render any internal template, otherwise the benchmarks will measure the DOM update caused by the internal template instead of the `carehtml` overhead.
122 | It turned out to be quite difficult to see the `carehtml` impact in such benchmarks, because it's insignificant as compared to even rendering such a minimalistic `<my-element></my-element>` template.
123 | You can play around with this by using `yarn bench:create-and-render:chrome` script and alike and modifying the `benchmarks/index.html` to your needs, e.g. by removing the constructors of the measured elements.
124 | 
125 | The only thing that makes sense to measure in this situation is the rerendering.
126 | The idea is to check if it does not rerender unnecessarily second time when the classes stay the same meaning that the actual template is also the same.
127 | That's what makes Lit so fast after all and `carehml` should not break this essential optimisation.
128 | In such benchmarks the `<my-element></my-element>` should have an internal template which will take most of the time of each render, so that the rerendering (if it happens) is close to being 2 times slower due to that internal template being rendered again.
129 | The end setup has `MyElement` with a shadow root with 100000 divs containing some text.
130 | The script `yarn bench:create-and-render-twice` can be used to measure that.
131 | The goal is to have the same numbers when using Lit `html` directly or wrapped with `carehtml`.
132 | 
133 | These are the results for Chrome which clearly show no overhead on rerendering when wrapping with `carehtml`:
134 | 
135 | | Benchmark            |          Avg time |                                vs direct |                               vs wrapped |                  vs wrapped with classes |
136 | | -------------------- | ----------------: | ---------------------------------------: | ---------------------------------------: | ---------------------------------------: |
137 | | direct               | 52.30ms - 53.12ms |                                        - | unsure<br>-2% - +1%<br>-0.99ms - +0.44ms | unsure<br>-2% - +0%<br>-1.08ms - +0.04ms |
138 | | wrapped              | 52.40ms - 53.57ms | unsure<br>-1% - +2%<br>-0.44ms - +0.99ms |                                        - | unsure<br>-2% - +1%<br>-0.94ms - +0.46ms |
139 | | wrapped with classes | 52.85ms - 53.61ms | unsure<br>-0% - +2%<br>-0.04ms - +1.08ms | unsure<br>-1% - +2%<br>-0.46ms - +0.94ms |                                        - |
140 | 
141 | Measurements in other browsers are similar.
142 | 
143 | ## Special Thanks
144 | 
145 | [![BrowserStack](./docs/browserstack-logo.svg)](https://www.browserstack.com)
146 | 
147 | For their awesome cross-browser testing automation solution!
148 | 


--------------------------------------------------------------------------------
/benchmarks/generate-tachometer-config.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const templateJson = require('./template-tachometer.json');
 3 | 
 4 | const templateJsonString = JSON.stringify(templateJson, null, 2);
 5 | 
 6 | const args = process.argv.slice(2);
 7 | const params = Object.fromEntries(args.map((arg) => arg.slice(1).split('=')));
 8 | 
 9 | const tachomaterJsonString = templateJsonString
10 |   .replace(new RegExp('{{measurement}}', 'g'), params.m)
11 |   .replace(new RegExp('{{browser}}', 'g'), params.b);
12 | 
13 | fs.writeFileSync(`${__dirname}/tachometer.json`, tachomaterJsonString);
14 | 


--------------------------------------------------------------------------------
/benchmarks/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <script type="module">
 3 |   import { html as litHtml, render } from 'lit';
 4 |   import wrap from '../src/wrap.js';
 5 | 
 6 |   const queryParams = new URL(document.location).searchParams;
 7 | 
 8 |   class DefinedElement extends HTMLElement {
 9 |     constructor() {
10 |       super();
11 |       this.attachShadow({ mode: 'open' });
12 |       for (let i = 0; i < 100000; i++) {
13 |         const div = document.createElement('div');
14 |         div.innerText = 'text';
15 |         this.shadowRoot.appendChild(div);
16 |       }
17 |     }
18 |   }
19 |   window.customElements.define('defined-element', DefinedElement);
20 | 
21 |   class UndefinedElement extends HTMLElement {
22 |     constructor() {
23 |       super();
24 |       this.attachShadow({ mode: 'open' });
25 |       for (let i = 0; i < 100000; i++) {
26 |         const div = document.createElement('div');
27 |         div.innerText = 'text';
28 |         this.shadowRoot.appendChild(div);
29 |       }
30 |     }
31 |   }
32 | 
33 |   const careHtml = wrap(litHtml);
34 | 
35 |   let getTemplate;
36 | 
37 |   if (queryParams.has('direct')) {
38 |     getTemplate = () => litHtml`<defined-element></defined-element>`;
39 |   } else if (queryParams.has('wrapped')) {
40 |     getTemplate = () => careHtml`<defined-element></defined-element>`;
41 |   } else if (queryParams.has('wrapped-with-classes')) {
42 |     getTemplate = () => careHtml`<${UndefinedElement}></${UndefinedElement}>`;
43 |   }
44 | 
45 |   performance.mark('create-and-render-twice-mark');
46 | 
47 |   performance.mark('create-and-render-mark');
48 |   performance.mark('create-mark');
49 |   let template = getTemplate();
50 |   performance.measure('create', 'create-mark');
51 |   performance.mark('render-mark');
52 |   render(template, document.body);
53 |   performance.measure('render', 'render-mark');
54 |   performance.measure('create-and-render', 'create-and-render-mark');
55 | 
56 |   performance.mark('recreate-and-rerender-mark');
57 |   performance.mark('recreate-mark');
58 |   template = getTemplate();
59 |   performance.measure('recreate', 'recreate-mark');
60 |   performance.mark('rerender-mark');
61 |   render(template, document.body);
62 |   performance.measure('rerender', 'rerender-mark');
63 |   performance.measure('recreate-and-rerender', 'recreate-and-rerender-mark');
64 | 
65 |   performance.measure('create-and-render-twice', 'create-and-render-twice-mark');
66 | </script>
67 | 


--------------------------------------------------------------------------------
/benchmarks/template-tachometer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://raw.githubusercontent.com/Polymer/tachometer/v0.5.10/config.schema.json",
 3 |   "sampleSize": 30,
 4 |   "timeout": 0,
 5 |   "benchmarks": [
 6 |     {
 7 |       "browser": "{{browser}}",
 8 |       "measurement": [
 9 |         {
10 |           "mode": "performance",
11 |           "entryName": "{{measurement}}"
12 |         }
13 |       ],
14 |       "expand": [
15 |         {
16 |           "name": "direct",
17 |           "url": "benchmarks/index.html?direct"
18 |         },
19 |         {
20 |           "name": "wrapped",
21 |           "url": "benchmarks/index.html?wrapped"
22 |         },
23 |         {
24 |           "name": "wrapped with classes",
25 |           "url": "benchmarks/index.html?wrapped-with-classes"
26 |         }
27 |       ]
28 |     }
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/docs/browserstack-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 490.1 105.6" style="enable-background:new 0 0 490.1 105.6;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#F4B960;}
 7 | 	.st1{fill:#E66F32;}
 8 | 	.st2{fill:#E43C41;}
 9 | 	.st3{fill:#BDD041;}
10 | 	.st4{fill:#6DB54C;}
11 | 	.st5{fill:#AEDAE6;}
12 | 	.st6{fill:#56B8DE;}
13 | 	.st7{fill:#00B1D5;}
14 | 	.st8{fill:url(#SVGID_1_);}
15 | 	.st9{fill:#221F1F;}
16 | 	.st10{fill:#FFFFFF;}
17 | 	.st11{fill:#000111;}
18 | </style>
19 | <title>Browserstack-logo-white</title>
20 | <circle class="st0" cx="52.8" cy="52.8" r="52.8"/>
21 | <circle class="st1" cx="47.5" cy="47.5" r="47.5"/>
22 | <circle class="st2" cx="53.8" cy="41.1" r="41.1"/>
23 | <circle class="st3" cx="57.1" cy="44.4" r="37.8"/>
24 | <circle class="st4" cx="54.3" cy="47.2" r="35.1"/>
25 | <circle class="st5" cx="48.8" cy="41.7" r="29.5"/>
26 | <circle class="st6" cx="53.6" cy="36.8" r="24.7"/>
27 | <circle class="st7" cx="56.6" cy="39.9" r="21.7"/>
28 | <radialGradient id="SVGID_1_" cx="53.45" cy="63.02" r="18.57" gradientTransform="matrix(1 0 0 -1 0 106)" gradientUnits="userSpaceOnUse">
29 | 	<stop  offset="0" style="stop-color:#797979"/>
30 | 	<stop  offset="1" style="stop-color:#4C4C4C"/>
31 | </radialGradient>
32 | <circle class="st8" cx="53.5" cy="43" r="18.6"/>
33 | <circle class="st9" cx="53.5" cy="43" r="18.6"/>
34 | <ellipse transform="matrix(0.4094 -0.9123 0.9123 0.4094 2.8913 76.9251)" class="st10" cx="60.9" cy="36.2" rx="5.7" ry="3.7"/>
35 | <path class="st11" d="M122.5,32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h16.6c9.5,0,13.9,4.4,13.9,11c0.2,3.7-1.8,7.2-5.2,8.8v0.1
36 | 	c3.7,1.5,6.1,5.2,6,9.3c0,8.2-5.6,12.2-15.4,12.2h-16c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1L122.5,32.6L122.5,32.6z M139.6,49.1
37 | 	c3.9,0,6.4-2.2,6.4-5.4s-2.4-5.5-6.4-5.5h-8.9c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.2c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0
38 | 	H139.6L139.6,49.1z M130.6,66.9h9.3c4.3,0,6.8-2.3,6.8-5.8s-2.4-5.7-6.7-5.7h-9.3c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.7
39 | 	C130.3,66.8,130.4,66.9,130.6,66.9C130.6,66.9,130.6,66.9,130.6,66.9L130.6,66.9z"/>
40 | <path class="st11" d="M159.9,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
41 | 	c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
42 | 	c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
43 | 	H159.9L159.9,73.3z"/>
44 | <path class="st11" d="M182.9,65.8c-0.8-2.3-1.1-4.8-1.1-7.2c-0.1-2.5,0.3-4.9,1.1-7.2c1.8-5.1,6.6-8.1,13.1-8.1s11.2,3,13,8.1
45 | 	c0.8,2.3,1.1,4.8,1.1,7.2c0.1,2.5-0.3,4.9-1.1,7.2c-1.8,5.1-6.6,8.1-13,8.1S184.7,71,182.9,65.8z M201.9,64c0.5-1.7,0.8-3.6,0.7-5.4
46 | 	c0.1-1.8-0.1-3.7-0.7-5.4c-0.9-2.5-3.3-4-5.9-3.8c-2.6-0.2-5.1,1.4-6,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.4
47 | 	c0.9,2.5,3.4,4,6,3.8C198.6,68,201,66.5,201.9,64L201.9,64z"/>
48 | <path class="st11" d="M241.9,73.3c-0.4,0-0.7-0.3-0.8-0.6L235,53.9h-0.1l-6.2,18.7c-0.1,0.4-0.4,0.6-0.8,0.6h-5.4
49 | 	c-0.4,0-0.7-0.3-0.8-0.6l-10-28.1c-0.1-0.2,0-0.5,0.2-0.6c0.1,0,0.2-0.1,0.3,0h6.3c0.4,0,0.8,0.2,0.9,0.6l6.1,19.3h0.1l6-19.3
50 | 	c0.1-0.4,0.5-0.6,0.9-0.6h4.7c0.4,0,0.7,0.2,0.9,0.6l6.4,19.3h0.1l5.8-19.3c0.1-0.4,0.5-0.7,0.9-0.6h6.3c0.2-0.1,0.5,0.1,0.5,0.3
51 | 	c0,0.1,0,0.2,0,0.3l-10,28.1c-0.1,0.4-0.4,0.6-0.8,0.6L241.9,73.3L241.9,73.3z"/>
52 | <path class="st11" d="M259.3,69.3c-0.2-0.2-0.3-0.6-0.1-0.8c0,0,0,0,0.1-0.1l3.7-3.6c0.3-0.2,0.7-0.2,0.9,0c2.6,2.1,5.9,3.3,9.3,3.3
53 | 	c3.9,0,5.9-1.5,5.9-3.5c0-1.8-1.1-2.9-5.2-3.2l-3.4-0.3c-6.4-0.6-9.7-3.6-9.7-8.6c0-5.7,4.4-9.2,12.3-9.2c4.2-0.1,8.4,1.2,11.9,3.6
54 | 	c0.3,0.2,0.3,0.5,0.2,0.8c0,0,0,0,0,0.1l-3.2,3.6c-0.2,0.3-0.6,0.3-0.9,0.1c-2.5-1.5-5.4-2.4-8.3-2.4c-3.1,0-4.8,1.3-4.8,3
55 | 	s1.1,2.7,5.2,3.1l3.4,0.3c6.6,0.6,9.8,3.8,9.8,8.6c0,5.8-4.6,9.9-13.3,9.9C268,74,263.2,72.4,259.3,69.3z"/>
56 | <path class="st11" d="M291.2,65.8c-0.8-2.3-1.2-4.7-1.1-7.2c-0.1-2.5,0.3-4.9,1-7.2c1.8-5.1,6.6-8.1,12.9-8.1c6.5,0,11.2,3.1,13,8.1
57 | 	c0.7,2.1,1,4.1,1,8.8c0,0.3-0.3,0.6-0.6,0.6c0,0-0.1,0-0.1,0h-19.5c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1c0,0.8,0.2,1.5,0.5,2.2
58 | 	c1,2.9,3.5,4.4,7.1,4.4c2.7,0.1,5.4-0.9,7.4-2.8c0.2-0.3,0.7-0.4,1-0.1c0,0,0,0,0,0l3.9,3.2c0.2,0.1,0.3,0.5,0.2,0.7
59 | 	c0,0.1-0.1,0.1-0.1,0.1c-2.7,2.9-7.2,5-13,5C297.8,73.9,293,70.9,291.2,65.8z M310.4,52.8c-0.9-2.4-3.2-3.8-6.2-3.8
60 | 	s-5.4,1.4-6.2,3.8c-0.3,0.8-0.4,1.6-0.4,2.5c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h12.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1
61 | 	C310.8,54.5,310.6,53.6,310.4,52.8L310.4,52.8z"/>
62 | <path class="st11" d="M323.6,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
63 | 	c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
64 | 	c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
65 | 	H323.6L323.6,73.3z"/>
66 | <path class="st11" d="M346.5,68.5c-0.3-0.2-0.4-0.6-0.2-0.9c0,0,0,0,0,0l4.1-4.4c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0
67 | 	c3.5,2.7,7.7,4.2,12.1,4.4c5.3,0,8.4-2.5,8.4-6c0-3-2-4.9-8.1-5.7l-2.4-0.3c-8.6-1.1-13.5-4.9-13.5-11.8c0-7.5,5.9-12.4,15.1-12.4
68 | 	c5.1-0.1,10.1,1.4,14.5,4.2c0.3,0.1,0.4,0.4,0.2,0.7c0,0.1-0.1,0.1-0.1,0.2l-3.1,4.5c-0.2,0.3-0.6,0.4-0.9,0.2
69 | 	c-3.2-2.1-6.9-3.2-10.7-3.2c-4.5,0-7,2.3-7,5.5c0,2.9,2.2,4.8,8.2,5.6l2.4,0.3c8.6,1.1,13.3,4.9,13.3,12c0,7.3-5.7,12.8-16.8,12.8
70 | 	C356.3,73.9,350,71.5,346.5,68.5z"/>
71 | <path class="st11" d="M393.3,73.8c-6.4,0-8.8-2.9-8.8-8.6V49.8c0-0.2-0.1-0.3-0.3-0.4c0,0,0,0-0.1,0H382c-0.3,0-0.6-0.2-0.7-0.5
72 | 	c0,0,0,0,0-0.1v-4.1c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h2.1c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-8c0-0.3,0.3-0.6,0.6-0.6
73 | 	c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v8c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h4.2c0.3,0,0.6,0.2,0.7,0.5
74 | 	c0,0,0,0,0,0.1v4.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-4.2c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1V65c0,2.1,0.9,2.7,3,2.7h1.6
75 | 	c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v4.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0L393.3,73.8L393.3,73.8z"/>
76 | <path class="st11" d="M421.2,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1v-2.1h0c-1.5,2-4.5,3.4-8.9,3.4c-5.8,0-10.6-2.8-10.6-8.9
77 | 	c0-6.4,4.9-9.3,12.7-9.3h6.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-1.4c0-3.3-1.7-4.9-7-4.9c-2.6-0.1-5.1,0.6-7.2,2
78 | 	c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1l-2.4-4c-0.2-0.2-0.1-0.6,0.1-0.8c0,0,0,0,0,0c2.6-1.7,6-2.9,11.2-2.9
79 | 	c9.6,0,13.2,3,13.2,10.2v19.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0H421.2L421.2,73.3z M420.4,63.4v-2.2c0-0.2-0.1-0.3-0.3-0.4
80 | 	c0,0,0,0-0.1,0h-5.2c-4.7,0-6.8,1.2-6.8,3.9c0,2.4,1.9,3.6,5.5,3.6C417.9,68.4,420.4,66.8,420.4,63.4L420.4,63.4z"/>
81 | <path class="st11" d="M433.1,65.8c-0.7-2.3-1.1-4.8-1-7.2c-0.1-2.4,0.3-4.9,1-7.2c1.8-5.2,6.7-8.1,13.1-8.1c4.2-0.2,8.2,1.5,11,4.6
82 | 	c0.2,0.2,0.2,0.6,0,0.8c0,0,0,0-0.1,0.1l-4.1,3.3c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1c-1.5-1.7-3.6-2.6-5.9-2.5
83 | 	c-2.8,0-5,1.3-5.9,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.5c0.9,2.5,3.1,3.8,5.9,3.8c2.2,0.1,4.4-0.9,5.9-2.6
84 | 	c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0l4.1,3.3c0.3,0.2,0.3,0.5,0.1,0.8c0,0,0,0-0.1,0.1c-2.9,3-6.9,4.6-11,4.5
85 | 	C439.8,73.9,435,71.1,433.1,65.8z"/>
86 | <path class="st11" d="M482.8,73.3c-0.4,0-0.8-0.2-1-0.6l-8-12.3l-4.3,4.6v7.7c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-6
87 | 	c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v23.8
88 | 	l10.8-11.8c0.3-0.4,0.8-0.6,1.2-0.6h6.7c0.2,0,0.4,0.1,0.4,0.3c0,0.1,0,0.3-0.1,0.3l-10.1,10.7L490,72.7c0.1,0.2,0.1,0.4,0,0.5
89 | 	c-0.1,0.1-0.2,0.1-0.3,0.1H482.8L482.8,73.3z"/>
90 | </svg>
91 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "carehtml",
 3 |   "version": "0.1.5",
 4 |   "description": "Templates with automatic registration of Custom Elements.",
 5 |   "license": "MIT",
 6 |   "author": "Mikhail Bashkirov <bashmish@gmail.com>",
 7 |   "repository": "github:bashmish/carehtml",
 8 |   "homepage": "https://github.com/bashmish/carehtml#readme",
 9 |   "main": "src/wrap.js",
10 |   "types": "src/wrap.d.ts",
11 |   "devDependencies": {
12 |     "@commitlint/cli": "^12.1.1",
13 |     "@commitlint/config-conventional": "^12.1.1",
14 |     "@esm-bundle/chai": "^4.3.4-fix.0",
15 |     "@ungap/global-this": "^0.4.4",
16 |     "@web/dev-server-legacy": "^1.0.0",
17 |     "@web/test-runner": "^0.13.27",
18 |     "@web/test-runner-browserstack": "^0.5.0",
19 |     "@web/test-runner-playwright": "^0.8.8",
20 |     "babel-eslint": "^10.1.0",
21 |     "browserslist": "^4.16.3",
22 |     "browserslist-browserstack": "^3.1.1",
23 |     "eclint": "^2.8.1",
24 |     "eslint": "^7.23.0",
25 |     "eslint-config-airbnb-base": "^14.2.1",
26 |     "eslint-config-prettier": "^8.1.0",
27 |     "eslint-plugin-import": "^2.22.1",
28 |     "htm": "^3.0.4",
29 |     "husky": "^6.0.0",
30 |     "lint-staged": "^10.5.4",
31 |     "lit": "^2.2.2",
32 |     "preact": "^10.5.13",
33 |     "prettier": "^2.2.1",
34 |     "tachometer": "^0.5.10",
35 |     "wallaby-webpack": "^3.9.16",
36 |     "webpack": "^4.46.0"
37 |   },
38 |   "scripts": {
39 |     "bench:create": "yarn bench:create:chrome && yarn bench:create:firefox && yarn bench:create:safari",
40 |     "bench:create:chrome": "yarn tachometer:generate-config -m=create -b=chrome-headless && yarn tachometer:run",
41 |     "bench:create:firefox": "yarn tachometer:generate-config -m=create -b=firefox-headless && yarn tachometer:run",
42 |     "bench:create:safari": "yarn tachometer:generate-config -m=create -b=safari && yarn tachometer:run",
43 |     "bench:render": "yarn bench:render:chrome && yarn bench:render:firefox && yarn bench:render:safari",
44 |     "bench:render:chrome": "yarn tachometer:generate-config -m=render -b=chrome-headless && yarn tachometer:run",
45 |     "bench:render:firefox": "yarn tachometer:generate-config -m=render -b=firefox-headless && yarn tachometer:run",
46 |     "bench:render:safari": "yarn tachometer:generate-config -m=render -b=safari && yarn tachometer:run",
47 |     "bench:create-and-render": "yarn bench:create-and-render:chrome && yarn bench:create-and-render:firefox && yarn bench:create-and-render:safari",
48 |     "bench:create-and-render:chrome": "yarn tachometer:generate-config -m=create-and-render -b=chrome-headless && yarn tachometer:run",
49 |     "bench:create-and-render:firefox": "yarn tachometer:generate-config -m=create-and-render -b=firefox-headless && yarn tachometer:run",
50 |     "bench:create-and-render:safari": "yarn tachometer:generate-config -m=create-and-render -b=safari && yarn tachometer:run",
51 |     "bench:recreate": "yarn bench:recreate:chrome && yarn bench:recreate:firefox && yarn bench:recreate:safari",
52 |     "bench:recreate:chrome": "yarn tachometer:generate-config -m=recreate -b=chrome-headless && yarn tachometer:run",
53 |     "bench:recreate:firefox": "yarn tachometer:generate-config -m=recreate -b=firefox-headless && yarn tachometer:run",
54 |     "bench:recreate:safari": "yarn tachometer:generate-config -m=recreate -b=safari && yarn tachometer:run",
55 |     "bench:rerender": "yarn bench:rerender:chrome && yarn bench:rerender:firefox && yarn bench:rerender:safari",
56 |     "bench:rerender:chrome": "yarn tachometer:generate-config -m=rerender -b=chrome-headless && yarn tachometer:run",
57 |     "bench:rerender:firefox": "yarn tachometer:generate-config -m=rerender -b=firefox-headless && yarn tachometer:run",
58 |     "bench:rerender:safari": "yarn tachometer:generate-config -m=rerender -b=safari && yarn tachometer:run",
59 |     "bench:recreate-and-rerender": "yarn bench:recreate-and-rerender:chrome && yarn bench:recreate-and-rerender:firefox && yarn bench:recreate-and-rerender:safari",
60 |     "bench:recreate-and-rerender:chrome": "yarn tachometer:generate-config -m=recreate-and-rerender -b=chrome-headless && yarn tachometer:run",
61 |     "bench:recreate-and-rerender:firefox": "yarn tachometer:generate-config -m=recreate-and-rerender -b=firefox-headless && yarn tachometer:run",
62 |     "bench:recreate-and-rerender:safari": "yarn tachometer:generate-config -m=recreate-and-rerender -b=safari && yarn tachometer:run",
63 |     "bench:create-and-render-twice": "yarn bench:create-and-render:chrome && yarn bench:create-and-render-twice:firefox && yarn bench:create-and-render:safari",
64 |     "bench:create-and-render-twice:chrome": "yarn tachometer:generate-config -m=create-and-render-twice -b=chrome-headless && yarn tachometer:run",
65 |     "bench:create-and-render-twice:firefox": "yarn tachometer:generate-config -m=create-and-render-twice -b=firefox-headless && yarn tachometer:run",
66 |     "bench:create-and-render-twice:safari": "yarn tachometer:generate-config -m=create-and-render-twice -b=safari && yarn tachometer:run",
67 |     "format": "yarn format:eclint && yarn format:eslint && yarn format:prettier",
68 |     "format:eclint": "eclint fix $(git ls-files)",
69 |     "format:eslint": "eslint '**/*.js' --fix",
70 |     "format:prettier": "prettier '**/*.{js,md}' --write",
71 |     "lint": "yarn lint:eclint && yarn lint:eslint",
72 |     "lint:eclint": "eclint check $(git ls-files)",
73 |     "lint:eslint": "eslint '**/*.js'",
74 |     "prepare": "husky install",
75 |     "tachometer:generate-config": "node benchmarks/generate-tachometer-config.js",
76 |     "tachometer:run": "tach --config benchmarks/tachometer.json",
77 |     "test": "web-test-runner",
78 |     "test:bs": "web-test-runner --config=web-test-runner.bs.config.mjs"
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/src/transform.js:
--------------------------------------------------------------------------------
  1 | const registeredElements = new Map();
  2 | const cache = new Map();
  3 | const CACHE_SEPARATOR = '$$carehtml_separator$$';
  4 | 
  5 | function toDashCase(name) {
  6 |   const dashCaseLetters = [];
  7 |   for (let i = 0; i < name.length; i += 1) {
  8 |     const letter = name[i];
  9 |     const letterLowerCase = letter.toLowerCase();
 10 |     if (letter !== letterLowerCase && i !== 0) {
 11 |       dashCaseLetters.push('-');
 12 |     }
 13 |     dashCaseLetters.push(letterLowerCase);
 14 |   }
 15 |   return dashCaseLetters.join('');
 16 | }
 17 | 
 18 | function removeInvalidCharacters(name) {
 19 |   return name.replace(/^[^a-z]+/, '').replace(/[^a-z0-9-]/g, '');
 20 | }
 21 | 
 22 | function incrementTagName(tag, counter, start = 1) {
 23 |   const newName = counter === start ? tag : `${tag}-${counter}`;
 24 |   const elementRegistered = !!customElements.get(newName);
 25 |   if (elementRegistered) {
 26 |     return incrementTagName(tag, counter + 1, start);
 27 |   }
 28 |   return newName;
 29 | }
 30 | 
 31 | function getClassUniqueTag(klass) {
 32 |   let tag = registeredElements.get(klass);
 33 | 
 34 |   if (tag) {
 35 |     return tag;
 36 |   }
 37 | 
 38 |   if (Object.prototype.hasOwnProperty.call(klass, 'name') && klass.name) {
 39 |     tag = removeInvalidCharacters(toDashCase(klass.name));
 40 |     if (tag.indexOf('-') === -1) {
 41 |       tag = `c-${tag}`;
 42 |     }
 43 |     tag = incrementTagName(tag, 1);
 44 |   } else {
 45 |     tag = incrementTagName('c', 1, 0);
 46 |   }
 47 | 
 48 |   customElements.define(tag, klass);
 49 |   registeredElements.set(klass, tag);
 50 | 
 51 |   return tag;
 52 | }
 53 | 
 54 | export default function transform(strings, values) {
 55 |   if (values.length === 0) {
 56 |     return [strings];
 57 |   }
 58 |   const newStrings = [];
 59 |   newStrings.raw = [];
 60 |   const result = [0]; // first index is reserved for strings
 61 |   let mergeWithLastString = false;
 62 |   values.forEach((value, index) => {
 63 |     const string = strings[index];
 64 |     const stringRaw = strings.raw[index];
 65 |     if (value && value.prototype instanceof HTMLElement) {
 66 |       const tag = getClassUniqueTag(value);
 67 |       if (mergeWithLastString) {
 68 |         const lastString = newStrings[newStrings.length - 1];
 69 |         const lastStringRaw = newStrings.raw[newStrings.raw.length - 1];
 70 |         newStrings[newStrings.length - 1] = `${lastString}${tag}${strings[index + 1]}`;
 71 |         newStrings.raw[newStrings.raw.length - 1] = String.raw`${lastStringRaw}${tag}${strings.raw[index + 1]}`;
 72 |       } else {
 73 |         newStrings.push(`${string}${tag}${strings[index + 1]}`);
 74 |         newStrings.raw.push(String.raw`${stringRaw}${tag}${strings.raw[index + 1]}`);
 75 |       }
 76 |       mergeWithLastString = true;
 77 |     } else {
 78 |       if (!mergeWithLastString) {
 79 |         newStrings.push(string);
 80 |         newStrings.raw.push(stringRaw);
 81 |       }
 82 |       result.push(value);
 83 |       mergeWithLastString = false;
 84 |     }
 85 |   });
 86 |   if (!mergeWithLastString) {
 87 |     newStrings.push(strings[strings.length - 1]);
 88 |     newStrings.raw.push(strings.raw[strings.raw.length - 1]);
 89 |   }
 90 | 
 91 |   const cacheKey = newStrings.join(CACHE_SEPARATOR);
 92 |   const cachedStrings = cache.get(cacheKey);
 93 |   if (cachedStrings) {
 94 |     result[0] = cachedStrings;
 95 |   } else {
 96 |     result[0] = newStrings;
 97 |     cache.set(cacheKey, newStrings);
 98 |   }
 99 | 
100 |   return result;
101 | }
102 | 


--------------------------------------------------------------------------------
/src/transform.spec.js:
--------------------------------------------------------------------------------
  1 | import { expect } from '@esm-bundle/chai';
  2 | import transform from './transform.js';
  3 | 
  4 | const testhtml = (strings, ...values) => [strings, values];
  5 | const getNameForCEClass = (klass) => {
  6 |   const strings = ['', ''];
  7 |   strings.raw = ['', ''];
  8 |   return transform(strings, [klass])[0][0];
  9 | };
 10 | 
 11 | describe('transform', () => {
 12 |   it('registers names for Custom Element classes in values and concatenates strings with those names', () => {
 13 |     class MyTulip extends HTMLElement {}
 14 |     const [strings, ...values] = transform(...testhtml`<${MyTulip} id="${'my-id'}">${'my text'}</${MyTulip}>`);
 15 |     expect(strings).to.deep.equal(['<my-tulip id="', '">', '</my-tulip>']);
 16 |     expect(strings.raw).to.deep.equal(['<my-tulip id="', '">', '</my-tulip>']);
 17 |     expect(values).to.deep.equal(['my-id', 'my text']);
 18 |     expect(customElements.get('my-tulip')).to.equal(MyTulip);
 19 |   });
 20 | 
 21 |   it('does not throw on nullish values', () => {
 22 |     class MyHops extends HTMLElement {}
 23 |     expect(() => transform(...testhtml`<${MyHops} attribute=${null}></${MyHops}>`)).to.not.throw();
 24 |     expect(() => transform(...testhtml`<${MyHops} attribute=${undefined}></${MyHops}>`)).to.not.throw();
 25 |     expect(() => transform(...testhtml`<${MyHops}>${null}</${MyHops}>`)).to.not.throw();
 26 |     expect(() => transform(...testhtml`<${MyHops}>${undefined}</${MyHops}>`)).to.not.throw();
 27 |   });
 28 | 
 29 |   describe('concatenation', () => {
 30 |     it('concatenates element names with no other expressions', () => {
 31 |       class MyViolet extends HTMLElement {}
 32 |       const [strings, ...values] = transform(...testhtml`<${MyViolet}></${MyViolet}>`);
 33 |       expect(strings).to.deep.equal(['<my-violet></my-violet>']);
 34 |       expect(strings.raw).to.deep.equal(['<my-violet></my-violet>']);
 35 |       expect(values).to.deep.equal([]);
 36 |       expect(customElements.get('my-violet')).to.equal(MyViolet);
 37 |     });
 38 | 
 39 |     it('concatenates element names with a text node expression', () => {
 40 |       class MyDaisy extends HTMLElement {}
 41 |       const [strings, ...values] = transform(...testhtml`<${MyDaisy}>${'my text'}</${MyDaisy}>`);
 42 |       expect(strings).to.deep.equal(['<my-daisy>', '</my-daisy>']);
 43 |       expect(strings.raw).to.deep.equal(['<my-daisy>', '</my-daisy>']);
 44 |       expect(values).to.deep.equal(['my text']);
 45 |       expect(customElements.get('my-daisy')).to.equal(MyDaisy);
 46 |       const [strings2, ...values2] = transform(...testhtml`<${MyDaisy}>my text</${MyDaisy}>`);
 47 |       expect(strings2).to.deep.equal(['<my-daisy>my text</my-daisy>']);
 48 |       expect(strings2.raw).to.deep.equal(['<my-daisy>my text</my-daisy>']);
 49 |       expect(values2).to.deep.equal([]);
 50 |     });
 51 | 
 52 |     it('concatenates element names with an attribute value expression', () => {
 53 |       class MySunflower extends HTMLElement {}
 54 |       const [strings, ...values] = transform(...testhtml`<${MySunflower} id="${'my-id'}"></${MySunflower}>`);
 55 |       expect(strings).to.deep.equal(['<my-sunflower id="', '"></my-sunflower>']);
 56 |       expect(strings.raw).to.deep.equal(['<my-sunflower id="', '"></my-sunflower>']);
 57 |       expect(values).to.deep.equal(['my-id']);
 58 |       expect(customElements.get('my-sunflower')).to.equal(MySunflower);
 59 |       const [strings2, ...values2] = transform(...testhtml`<${MySunflower} id="my-id"></${MySunflower}>`);
 60 |       expect(strings2).to.deep.equal(['<my-sunflower id="my-id"></my-sunflower>']);
 61 |       expect(strings2.raw).to.deep.equal(['<my-sunflower id="my-id"></my-sunflower>']);
 62 |       expect(values2).to.deep.equal([]);
 63 |     });
 64 | 
 65 |     it('keeps untouched when there are no expressions', () => {
 66 |       class MyRose extends HTMLElement {}
 67 |       const [strings, ...values] = transform(...testhtml`<my-rose></my-rose>`);
 68 |       expect(strings).to.deep.equal(['<my-rose></my-rose>']);
 69 |       expect(strings.raw).to.deep.equal(['<my-rose></my-rose>']);
 70 |       expect(values).to.deep.equal([]);
 71 |       expect(customElements.get('my-rose')).to.not.equal(MyRose);
 72 |     });
 73 | 
 74 |     it('ignores unrelated classes', () => {
 75 |       class MyMagnolia {}
 76 |       const [strings, ...values] = transform(...testhtml`<${MyMagnolia}></${MyMagnolia}>`);
 77 |       expect(strings).to.deep.equal(['<', '></', '>']);
 78 |       expect(strings.raw).to.deep.equal(['<', '></', '>']);
 79 |       expect(values).to.deep.equal([MyMagnolia, MyMagnolia]);
 80 |       expect(customElements.get('my-magnolia')).to.not.exist;
 81 |       const [strings2, ...values2] = transform(...testhtml`<${MyMagnolia}/>`);
 82 |       expect(strings2).to.deep.equal(['<', '/>']);
 83 |       expect(strings2.raw).to.deep.equal(['<', '/>']);
 84 |       expect(values2).to.deep.equal([MyMagnolia]);
 85 |     });
 86 |   });
 87 | 
 88 |   describe('name generator', () => {
 89 |     it('derives a name from the constructor by transforming it to dash-case', () => {
 90 |       class MyCrocus extends HTMLElement {}
 91 |       expect(getNameForCEClass(MyCrocus)).to.equal('my-crocus');
 92 |       expect(customElements.get('my-crocus')).to.equal(MyCrocus);
 93 |     });
 94 | 
 95 |     it('ignores certain characters to comply with Custom Elements name constraints', () => {
 96 |       class _MyCampanula extends HTMLElement {}
 97 |       expect(getNameForCEClass(_MyCampanula)).to.equal('my-campanula');
 98 |       expect(customElements.get('my-campanula')).to.equal(_MyCampanula);
 99 |       class $MyLathyrus extends HTMLElement {}
100 |       expect(getNameForCEClass($MyLathyrus)).to.equal('my-lathyrus');
101 |       expect(customElements.get('my-lathyrus')).to.equal($MyLathyrus);
102 |       class $1MyGrandiflora2 extends HTMLElement {}
103 |       expect(getNameForCEClass($1MyGrandiflora2)).to.equal('my-grandiflora2');
104 |       expect(customElements.get('my-grandiflora2')).to.equal($1MyGrandiflora2);
105 |       class _1My$Campanula_Lathyrus2Grandiflora3 extends HTMLElement {} // eslint-disable-line camelcase
106 |       expect(getNameForCEClass(_1My$Campanula_Lathyrus2Grandiflora3)).to.equal('my-campanula-lathyrus2-grandiflora3');
107 |       expect(customElements.get('my-campanula-lathyrus2-grandiflora3')).to.equal(_1My$Campanula_Lathyrus2Grandiflora3);
108 |     });
109 | 
110 |     it('does not register the same class twice', () => {
111 |       class MyIris extends HTMLElement {}
112 |       expect(getNameForCEClass(MyIris)).to.equal('my-iris');
113 |       expect(getNameForCEClass(MyIris)).to.equal('my-iris');
114 |       expect(customElements.get('my-iris')).to.equal(MyIris);
115 |     });
116 | 
117 |     it('adds an incremented index to the name if the same constructor name is encountered', () => {
118 |       const name1 = (() => {
119 |         class MyPrimrose extends HTMLElement {}
120 |         return getNameForCEClass(MyPrimrose);
121 |       })();
122 |       const name2 = (() => {
123 |         class MyPrimrose extends HTMLElement {}
124 |         return getNameForCEClass(MyPrimrose);
125 |       })();
126 |       expect(name1).to.equal('my-primrose');
127 |       expect(name2).to.equal('my-primrose-2');
128 |     });
129 | 
130 |     it('adds an incremented index to the name if the same name was registered natively before', () => {
131 |       customElements.define('my-hibiscus', class extends HTMLElement {});
132 |       const name2 = (() => {
133 |         class MyHibiscus extends HTMLElement {}
134 |         return getNameForCEClass(MyHibiscus);
135 |       })();
136 |       expect(name2).to.equal('my-hibiscus-2');
137 |       customElements.define('my-hibiscus-3', class extends HTMLElement {});
138 |       const name4 = (() => {
139 |         class MyHibiscus extends HTMLElement {}
140 |         return getNameForCEClass(MyHibiscus);
141 |       })();
142 |       expect(name4).to.equal('my-hibiscus-4');
143 |     });
144 | 
145 |     it('adds a prefix "c-" if constructor name in dash-case has no dash', () => {
146 |       const name1 = (() => {
147 |         class Moonflower extends HTMLElement {}
148 |         return getNameForCEClass(Moonflower);
149 |       })();
150 |       const name2 = (() => {
151 |         class Moonflower extends HTMLElement {}
152 |         return getNameForCEClass(Moonflower);
153 |       })();
154 |       expect(name1).to.equal('c-moonflower');
155 |       expect(name2).to.equal('c-moonflower-2');
156 |       customElements.define('c-moonflower-3', class extends HTMLElement {});
157 |       const name4 = (() => {
158 |         class Moonflower extends HTMLElement {}
159 |         return getNameForCEClass(Moonflower);
160 |       })();
161 |       expect(name4).to.equal('c-moonflower-4');
162 |     });
163 | 
164 |     it('fallbacks to a name "c-%index%" if constructor has no name', () => {
165 |       const createAnonymousCEClass = () => eval('(() => class extends HTMLElement {})()'); // eslint-disable-line no-eval
166 |       const name1 = (() => {
167 |         const MyOrchid = createAnonymousCEClass();
168 |         return getNameForCEClass(MyOrchid);
169 |       })();
170 |       const name2 = (() => {
171 |         const MyOrchid = createAnonymousCEClass();
172 |         return getNameForCEClass(MyOrchid);
173 |       })();
174 |       expect(name1).to.equal('c-1');
175 |       expect(name2).to.equal('c-2');
176 |       customElements.define('c-3', class extends HTMLElement {});
177 |       const name4 = (() => {
178 |         const MyOrchid = createAnonymousCEClass();
179 |         return getNameForCEClass(MyOrchid);
180 |       })();
181 |       expect(name4).to.equal('c-4');
182 |     });
183 |   });
184 | });
185 | 


--------------------------------------------------------------------------------
/src/wrap.d.ts:
--------------------------------------------------------------------------------
1 | export default function wrap<T>(
2 |   html: (strings: TemplateStringsArray, ...values: unknown[]) => T,
3 | ): (strings: TemplateStringsArray, ...values: unknown[]) => T;
4 | 


--------------------------------------------------------------------------------
/src/wrap.js:
--------------------------------------------------------------------------------
1 | import transform from './transform.js';
2 | 
3 | export default function wrap(html) {
4 |   // eslint-disable-next-line prefer-spread
5 |   return (strings, ...values) => html.apply(null, transform(strings, values));
6 | }
7 | 


--------------------------------------------------------------------------------
/src/wrap.spec.js:
--------------------------------------------------------------------------------
  1 | import '@ungap/global-this';
  2 | import { expect } from '@esm-bundle/chai';
  3 | import wrap from './wrap.js';
  4 | 
  5 | describe('wrap', () => {
  6 |   it('passes strings and values as tagged templates expect', () => {
  7 |     let calledCount = 0;
  8 |     let calledArgs;
  9 |     const html = wrap((...args) => {
 10 |       calledCount += 1;
 11 |       calledArgs = args;
 12 |     });
 13 |     class MyLily extends HTMLElement {}
 14 | 
 15 |     html`<${MyLily} id="${'my-id'}">${'my text'}</${MyLily}>`;
 16 |     expect(calledCount).to.equal(1);
 17 |     expect(calledArgs).to.deep.equal([['<my-lily id="', '">', '</my-lily>'], 'my-id', 'my text']);
 18 |   });
 19 | 
 20 |   it('returns same array reference for caching in html literal implementation', () => {
 21 |     const calledArgs = [];
 22 |     const html = wrap((...args) => {
 23 |       calledArgs.push(args);
 24 |     });
 25 |     class MyZinnia extends HTMLElement {}
 26 |     const render = () => html`<${MyZinnia} id="${'my-id'}">${'my text'}</${MyZinnia}>`;
 27 |     render();
 28 |     render();
 29 |     expect(calledArgs[0][0]).to.equal(calledArgs[1][0]);
 30 |   });
 31 | 
 32 |   it('integrates with lit', async () => {
 33 |     const { html: litHtml, render } = await import('lit');
 34 | 
 35 |     const html = wrap(litHtml);
 36 |     class MyAzalea extends HTMLElement {}
 37 | 
 38 |     const template = html`<${MyAzalea} id="${'my-id'}">${'my text'}</${MyAzalea}>`;
 39 | 
 40 |     const fixture = document.createElement('div');
 41 |     document.body.appendChild(fixture);
 42 |     render(template, fixture);
 43 | 
 44 |     const el = fixture.children[0];
 45 | 
 46 |     expect(el).to.be.instanceof(MyAzalea);
 47 |     expect(el.getAttribute('id')).to.equal('my-id');
 48 |     expect(el.textContent).to.equal('my text');
 49 | 
 50 |     document.body.removeChild(fixture);
 51 |   });
 52 | 
 53 |   it('integrates with htm', async () => {
 54 |     const { default: htm } = await import('htm');
 55 |     const { h, Component: PreactComponent, render } = await import('preact');
 56 | 
 57 |     const html = wrap(htm.bind(h));
 58 | 
 59 |     const PreactButton = (props) => html`<button ...${props}>${props.children}</button>`;
 60 | 
 61 |     class CustomHello extends HTMLElement {
 62 |       constructor() {
 63 |         super();
 64 |         this.attachShadow({ mode: 'open' });
 65 |         this.shadowRoot.innerHTML = this.render();
 66 |       }
 67 | 
 68 |       static get observedAttributes() {
 69 |         return ['name'];
 70 |       }
 71 | 
 72 |       attributeChangedCallback() {
 73 |         this.shadowRoot.innerHTML = this.render();
 74 |       }
 75 | 
 76 |       render() {
 77 |         return `<p>Hello, ${this.nameValue}!</p>`;
 78 |       }
 79 | 
 80 |       get nameValue() {
 81 |         return this.getAttribute('name') || 'unknown';
 82 |       }
 83 |     }
 84 | 
 85 |     class PreactApp extends PreactComponent {
 86 |       // eslint-disable-next-line class-methods-use-this
 87 |       render() {
 88 |         const clickHandler = () => {
 89 |           document.querySelector('#hello').setAttribute('name', 'world');
 90 |         };
 91 |         return html`
 92 |           <div class="app">
 93 |             <${PreactButton} onClick="${clickHandler}">Say hello to the world!<//>
 94 |             <${CustomHello} id="hello"></${CustomHello}>
 95 |           </div>
 96 |         `;
 97 |       }
 98 |     }
 99 | 
100 |     const fixture = document.createElement('div');
101 |     document.body.appendChild(fixture);
102 | 
103 |     render(html`<${PreactApp} />`, fixture);
104 | 
105 |     expect(fixture.children.length).to.equal(1);
106 | 
107 |     const appElement = fixture.children[0];
108 |     expect(appElement.tagName).to.equal('DIV');
109 |     expect(appElement.className).to.equal('app');
110 |     expect(appElement.children.length).to.equal(2);
111 | 
112 |     const buttonElement = appElement.children[0];
113 |     expect(buttonElement.tagName).to.equal('BUTTON');
114 |     expect(buttonElement.innerText).to.equal('Say hello to the world!');
115 | 
116 |     const helloElement = appElement.children[1];
117 |     expect(helloElement.tagName).to.equal('CUSTOM-HELLO');
118 |     expect(helloElement.id).to.equal('hello');
119 |     expect(helloElement.shadowRoot.children.length).to.equal(1);
120 | 
121 |     expect(helloElement.shadowRoot.children[0].tagName).to.equal('P');
122 |     expect(helloElement.shadowRoot.children[0].innerText).to.equal('Hello, unknown!');
123 | 
124 |     buttonElement.click();
125 |     expect(helloElement.shadowRoot.children[0].innerText).to.equal('Hello, world!');
126 | 
127 |     document.body.removeChild(fixture);
128 |   });
129 | });
130 | 


--------------------------------------------------------------------------------
/wallaby.js:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line import/no-extraneous-dependencies
 2 | const wallabyWebpack = require('wallaby-webpack');
 3 | 
 4 | const wallabyPostprocessor = wallabyWebpack();
 5 | 
 6 | module.exports = {
 7 |   files: [{ pattern: 'src/**/*.js', load: false }, '!src/**/*.spec.js'],
 8 |   tests: [{ pattern: 'src/**/*.spec.js', load: false }],
 9 |   testFramework: 'mocha',
10 |   env: {
11 |     kind: 'chrome',
12 |   },
13 |   postprocessor: wallabyPostprocessor,
14 |   setup: () => {
15 |     window.__moduleBundler.loadTests(); // eslint-disable-line no-underscore-dangle
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/web-test-runner.bs.config.mjs:
--------------------------------------------------------------------------------
 1 | import { legacyPlugin } from '@web/dev-server-legacy';
 2 | import { browserstackLauncher } from '@web/test-runner-browserstack';
 3 | import browserslist from 'browserslist';
 4 | import browserslistBrowserstack from 'browserslist-browserstack';
 5 | import config from './web-test-runner.config.mjs';
 6 | 
 7 | const getCapabilities = browserslistBrowserstack.default;
 8 | 
 9 | function filterUniqueCapabilities(capabilities) {
10 |   return capabilities.filter((c) => (
11 |     c === capabilities.find((c2) => (
12 |       c2.browser === c.browser && c2.browser_version === c.browser_version
13 |     ))
14 |   ));
15 | }
16 | 
17 | const allCapabilities = await getCapabilities({
18 |   username: process.env.BROWSERSTACK_USERNAME,
19 |   accessKey: process.env.BROWSERSTACK_ACCESS_KEY,
20 |   browserslist: { queries: browserslist() },
21 |   formatForSelenium: true,
22 | });
23 | 
24 | const uniqueCapabilities = filterUniqueCapabilities(allCapabilities);
25 | 
26 | const browsers = uniqueCapabilities.map(capability => {
27 |   return browserstackLauncher({
28 |     capabilities: {
29 |       'browserstack.user': process.env.BROWSERSTACK_USERNAME,
30 |       'browserstack.key': process.env.BROWSERSTACK_ACCESS_KEY,
31 |       project: 'carehtml',
32 |       name: 'specs',
33 |       build: `carehtml local run at ${Date.now()}`,
34 |       ...capability,
35 |     }
36 |   });
37 | });
38 | 
39 | export default {
40 |   ...config,
41 |   concurrentBrowsers: 5,
42 |   browsers,
43 |   plugins: [
44 |     legacyPlugin(),
45 |   ],
46 | };
47 | 


--------------------------------------------------------------------------------
/web-test-runner.config.mjs:
--------------------------------------------------------------------------------
 1 | import { playwrightLauncher } from '@web/test-runner-playwright';
 2 | 
 3 | export default {
 4 |   files: 'src/**/*.spec.js',
 5 |   coverage: true,
 6 |   nodeResolve: true,
 7 |   browsers: [
 8 |     playwrightLauncher({ product: 'chromium' }),
 9 |     playwrightLauncher({ product: 'firefox' }),
10 |     playwrightLauncher({ product: 'webkit' }),
11 |   ],
12 | };
13 | 


--------------------------------------------------------------------------------