atoms-element v5.0.0

#js

git clone https://git.pyrossh.dev/atoms-element

A simple web component library for defining your custom elements. It works on both client and server.

index.test.js.snapshot
|
|
exports[`createElement styles are scoped and injected via SSR 1`] = `
"@scope (styled-element) {\\n\\n    :scope {\\n      display: flex;\\n    }\\n    .count {\\n      color: magenta;\\n    }\\n  \\n}\\n"
`;

exports[`createElement with plain and declared attrs 1`] = `
"<!--lit-part Nrj3ntAoYvc=-->\\n      <div>\\n        <span>perPage: <!--lit-part-->5<!--/lit-part--></span>\\n        <span>Count: <!--lit-part-->3<!--/lit-part--></span>\\n        <!--lit-node 5--><button >Set</button>\\n      </div>\\n    <!--/lit-part-->"
`;

exports[`createElement without attrs 1`] = `
"<!--lit-part Wd91oPYJke0=--> <div></div> <!--/lit-part-->"
`;

exports[`createPage 1`] = `
"\\n      <!DOCTYPE html>\\n      <html lang=\\"en\\">\\n        <head>\\n          <meta charset=\\"utf-8\\" />\\n          <meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\" />\\n          <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\">\\n          <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no\\">\\n          <link rel=\\"sitemap\\" type=\\"application/xml\\" href=\\"/sitemap.xml\\" />\\n          <link rel=\\"icon\\" type=\\"image/png\\" href=\\"/assets/icon.png\\" />\\n          \\n      <title>123</title>\\n      <meta name=\\"title\\" content=\\"123\\" />\\n      <meta name=\\"description\\" content=\\"123\\" />\\n    \\n          <style id=\\"global\\">\\n            \\n          </style>\\n          <script type=\\"module\\"><script>\\n        </head>\\n        <body>\\n          \\n      <div>\\n        <app-header></app-header>\\n        <main class=\\"flex flex-1 flex-col mt-20 items-center\\">\\n          <h1 class=\\"text-5xl\\">123</h1>\\n        </main>\\n      </div>\\n    \\n          <script>\\n            window.props = {\\"config\\":{\\"title\\":\\"123\\"}};\\n          </script>\\n          <script type=\\"module\\"><script>\\n        </body>\\n      </html>\\n  "
`;

exports[`css tagged template ignores interpolated values 1`] = `
"\\n    :scope {\\n      display: flex;\\n    }\\n    button {\\n      color: ;\\n    }\\n  "
`;

exports[`jsonAttr round-trips array attrs through SSR expansion 1`] = `
"<!--lit-part BlC1BjVGRpM=--><!--lit-node 0--><tag-list tags=\\"[&#39;rust&#39;,&#39;js&#39;]\\"><!--lit-part om80B80ddXw=--><ul><!--lit-part--><!--lit-part PuAyB/F8cHw=--><li><!--lit-part-->rust<!--/lit-part--></li><!--/lit-part--><!--lit-part PuAyB/F8cHw=--><li><!--lit-part-->js<!--/lit-part--></li><!--/lit-part--><!--/lit-part--></ul><!--/lit-part--></tag-list><!--/lit-part-->"
`;

exports[`render attribute keys 1`] = `
"<!--lit-part Jm3yLdRDsSk=-->\\n    <div>\\n      <app-counter name=\\"123\\" perPage=\\"1\\"></app-counter>\\n    </div>\\n  <!--/lit-part-->"
`;

exports[`render attributes within quotes 1`] = `
"<!--lit-part NYzZmKc0ApY=-->\\n    <div>\\n      <!--lit-node 1--><app-counter name=\\"123\\" class=\\"high\\" age=\\"1\\" details1=\\"{&#39;name&#39;:&#39;123&#39;,&#39;address&#39;:{&#39;street&#39;:&#39;1&#39;}}\\" items=\\"[1,2,3]\\"></app-counter>\\n    </div>\\n  <!--/lit-part-->"
`;

exports[`render multi template 1`] = `
"<!--lit-part xbA0QwrFuvM=-->\\n    <div>\\n      <!--lit-part--><!--lit-part iq0TqtY/tw4=-->\\n          <!--lit-node 0--><app-item meta=\\"{&#39;index&#39;:1}\\"  >\\n            <!--lit-node 1--><button >+</button>\\n          </app-item>\\n        <!--/lit-part--><!--lit-part iq0TqtY/tw4=-->\\n          <!--lit-node 0--><app-item meta=\\"{&#39;index&#39;:2}\\"  >\\n            <!--lit-node 1--><button >+</button>\\n          </app-item>\\n        <!--/lit-part--><!--/lit-part-->\\n    </div>\\n  <!--/lit-part-->"
`;

exports[`render single template 1`] = `
"<!--lit-part Wd91oPYJke0=--> <div><!--lit-part 8PHODPkg0Ao=-->NoCountry <!--lit-part-->false<!--/lit-part--><?><!--/lit-part--></div> <!--/lit-part-->"
`;

exports[`render unsafeHTML 1`] = `
"<!--lit-part Wd91oPYJke0=--> <div><!--lit-part MbydkCRGgUo=--><div><p class=\\"123\\">this is unsafe</p></div><!--/lit-part--></div> <!--/lit-part-->"
`;

exports[`renderHtml 1`] = `
"<!--lit-part 4yM259EK+Bs=-->\\n    <div>\\n      <!--lit-node 1--><app-counter name=\\"123\\" class=\\"abc high\\" age=\\"1\\" details1=\\"{&#39;name&#39;:&#39;123&#39;,&#39;address&#39;:{&#39;street&#39;:&#39;1&#39;}}\\" items=\\"[1,2,3]\\"></app-counter>\\n    </div>\\n  <!--/lit-part-->"
`;

exports[`renderHtml escapes text and attribute values 1`] = `
"<!--lit-part PkF/hiJU4II=--><!--lit-node 0--><div class=\\"a&quot; onmouseover=&quot;alert(1)\\"><!--lit-part-->&lt;script&gt;alert(1)&lt;/script&gt;<!--/lit-part--></div><!--/lit-part-->"
`;

exports[`watch resolves attribute values from preceding SSR markup via cheerio 1`] = `
"<!--lit-part vohwtdYoJ0A=-->\\n    <watch-source value=\\"3\\"><!--lit-part 94tjhjhkEYE=--><span><!--lit-part-->3<!--/lit-part--></span><!--/lit-part--></watch-source>\\n    <watch-source value=\\"4\\"><!--lit-part 94tjhjhkEYE=--><span><!--lit-part-->4<!--/lit-part--></span><!--/lit-part--></watch-source>\\n    <watch-total><!--lit-part AEmR7W+R0Ak=--><div><!--lit-part-->3,4<!--/lit-part--></div><!--/lit-part--></watch-total>\\n  <!--/lit-part-->"
`;