atoms-element

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

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

7dc696c6 — Peter John

implement easy html parsing

Files changed (11) hide show

example/app-counter.js +1 -1
example/index.js +1 -2
example/server.js +1 -1
element.d.ts → index.d.ts +41 -1
element.js → index.js +281 -3
element.test.js → index.test.js +76 -1
package-lock.json +4 -5
package.json +0 -3
page.d.ts +0 -40
page.js +0 -62
page.test.js +0 -85

example/app-counter.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createElement, html, object, number, string, unsafeHTML } from '../element.js';
+import { createElement, html, object, number, string, unsafeHTML } from '../index.js';
 const name = () => 'app-counter';

example/index.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { html, css } from '../element.js';
-import { createPage } from '../page.js';
+import { createPage, html, css } from '../index.js';
 import { pageStyles } from './styles.js';
 import './app-counter.js';

example/server.js CHANGED Viewed

@@ -9,7 +9,7 @@ const __dirname = dirname(__filename);
 const port = process.argv[2] || 3000;
 const srcMap = {
-  '/element.js': `${__dirname}/../element.js`,
+  '/index.js': `${__dirname}/../index.js`,
   '/lit-html.js': `${__dirname}/../lit-html.js`,
   '/styles.js': `${__dirname}/styles.js`,
   '/app-counter.js': `${__dirname}/app-counter.js`,

element.d.ts → index.d.ts RENAMED Viewed

@@ -1,4 +1,17 @@
+export declare type Config = {
+  version: string
+  url: string
+  image: string
+  author: string
+  languages: Array<string>
+  title: string
+  description: string
+  keywords: string
-import { Config } from './page';
+  categories: Array<any>
+  tags: Array<any>
+  strings: {[key: string]: any}
+  themes: {[key: string]: any}
+}
 export declare type Location = {
   readonly ancestorOrigins: DOMStringList;
@@ -17,6 +30,9 @@ export declare type Location = {
   toString: () => string;
 }
+export declare type Data = any;
+export declare type Item = any;
 export class AtomsElement {
   static register(): () => void;
   static observedAttributes: Array<string>;
@@ -37,3 +53,27 @@ export type CreateElementProps = {
 }
 export const createElement = (props: CreateElementProps) => CreateElementProps;
+export type HandlerProps = {
+  config: Config;
+  data: Data;
+  item: Item;
+}
+export type Handler = (props: HandlerProps) => string;
+export type CreatePageProps = {
+  route: Handler;
+  datapaths: Handler;
+  head: Handler;
+  body: Handler;
+}
+export type PageRenderProps = {
+  config: Config;
+  data: Data;
+  item: Item;
+  headScript: string;
+  bodyScript: string;
+}
+export const createPage = (props: CreatePageProps) => (props: PageRenderProps) => string;

element.js → index.js RENAMED Viewed

@@ -375,7 +375,7 @@ const classLookup = {
 export const getTWStyleSheet = (template) => {
   const classList = template.strings
     .reduce((acc, item) => {
-      const matches = item.match(/(?:class|className)=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]/gim);
+      const matches = item.match(/class=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]/gim);
       if (matches) {
         matches.forEach((matched) => {
           acc += matched.replace('class="', '').replace('"', '') + ' ';
@@ -417,6 +417,239 @@ const wrapAttribute = (attrName, suffix, text, v) => {
   return buffer;
 };
+const tagRE = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+const whitespaceRE = /^\s*$/;
+const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+const voidElements = {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+};
+const empty = Object.create(null);
+const parseTag = (tag) => {
+  const res = {
+    type: 'tag',
+    name: '',
+    voidElement: false,
+    attrs: {},
+    children: [],
+  };
+  const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
+  if (tagMatch) {
+    res.name = tagMatch[1];
+    if (voidElements[tagMatch[1]] || tag.charAt(tag.length - 2) === '/') {
+      res.voidElement = true;
+    }
+    // handle comment tag
+    if (res.name.startsWith('!--')) {
+      const endIndex = tag.indexOf('-->');
+      return {
+        type: 'comment',
+        comment: endIndex !== -1 ? tag.slice(4, endIndex) : '',
+      };
+    }
+  }
+  const reg = new RegExp(attrRE);
+  let result = null;
+  for (;;) {
+    result = reg.exec(tag);
+    if (result === null) {
+      break;
+    }
+    if (!result[0].trim()) {
+      continue;
+    }
+    if (result[1]) {
+      const attr = result[1].trim();
+      let arr = [attr, ''];
+      if (attr.indexOf('=') > -1) {
+        arr = attr.split('=');
+      }
+      res.attrs[arr[0]] = arr[1];
+      reg.lastIndex--;
+    } else if (result[2]) {
+      res.attrs[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+    }
+  }
+  return res;
+};
+const parseHtml = (html, options) => {
+  options || (options = {});
+  options.components || (options.components = empty);
+  const result = [];
+  const arr = [];
+  let current;
+  let level = -1;
+  let inComponent = false;
+  // handle text at top level
+  if (html.indexOf('<') !== 0) {
+    var end = html.indexOf('<');
+    result.push({
+      type: 'text',
+      content: end === -1 ? html : html.substring(0, end),
+    });
+  }
+  html.replace(tagRE, function (tag, index) {
+    if (inComponent) {
+      if (tag !== '</' + current.name + '>') {
+        return;
+      } else {
+        inComponent = false;
+      }
+    }
+    const isOpen = tag.charAt(1) !== '/';
+    const isComment = tag.startsWith('<!--');
+    const start = index + tag.length;
+    const nextChar = html.charAt(start);
+    let parent;
+    if (isComment) {
+      const comment = parseTag(tag);
+      // if we're at root, push new base node
+      if (level < 0) {
+        result.push(comment);
+        return result;
+      }
+      parent = arr[level];
+      parent.children.push(comment);
+      return result;
+    }
+    if (isOpen) {
+      level++;
+      current = parseTag(tag);
+      if (current.type === 'tag' && options.components[current.name]) {
+        current.type = 'component';
+        inComponent = true;
+      }
+      if (!current.voidElement && !inComponent && nextChar && nextChar !== '<') {
+        current.children.push({
+          type: 'text',
+          content: html.slice(start, html.indexOf('<', start)),
+        });
+      }
+      // if we're at root, push new base node
+      if (level === 0) {
+        result.push(current);
+      }
+      parent = arr[level - 1];
+      if (parent) {
+        parent.children.push(current);
+      }
+      arr[level] = current;
+    }
+    if (!isOpen || current.voidElement) {
+      if (level > -1 && (current.voidElement || current.name === tag.slice(2, -1))) {
+        level--;
+        // move current up a level to match the end tag
+        current = level === -1 ? result : arr[level];
+      }
+      if (!inComponent && nextChar !== '<' && nextChar) {
+        // trailing text node
+        // if we're at the root, push a base text node. otherwise add as
+        // a child to the current node.
+        parent = level === -1 ? result : arr[level].children;
+        // calculate correct end of the content slice in case there's
+        // no tag after the text node.
+        const end = html.indexOf('<', start);
+        let content = html.slice(start, end === -1 ? undefined : end);
+        // if a node is nothing but whitespace, collapse it as the spec states:
+        // https://www.w3.org/TR/html4/struct/text.html#h-9.1
+        if (whitespaceRE.test(content)) {
+          content = ' ';
+        }
+        // don't add whitespace-only text nodes if they would be trailing text nodes
+        // or if they would be leading whitespace-only text nodes:
+        //  * end > -1 indicates this is not a trailing text node
+        //  * leading node is when level is -1 and parent has length 0
+        if ((end > -1 && level + parent.length >= 0) || content !== ' ') {
+          parent.push({
+            type: 'text',
+            content: content,
+          });
+        }
+      }
+    }
+  });
+  return result;
+};
+const stringifyAttrs = (attrs) => {
+  const buff = [];
+  for (let key in attrs) {
+    buff.push(key + '="' + attrs[key] + '"');
+  }
+  if (!buff.length) {
+    return '';
+  }
+  return ' ' + buff.join(' ');
+};
+const stringifyHtml = (buff, doc) => {
+  switch (doc.type) {
+    case 'text':
+      return buff + doc.content;
+    case 'tag':
+      buff += '<' + doc.name + (doc.attrs ? stringifyAttrs(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
+      if (doc.voidElement) {
+        return buff;
+      }
+      return buff + doc.children.reduce(stringifyHtml, '') + '</' + doc.name + '>';
+    case 'comment':
+      buff += '<!--' + doc.comment + '-->';
+      return buff;
+  }
+};
+const hydrate = (node) => {
+  if (node.children) {
+    for (const child of node.children) {
+      const Clazz = AtomsElement.getElement(child.name);
+      if (Clazz) {
+        const instance = new Clazz(child.attrs);
+        const res = instance.renderTemplate();
+        child.children.push(...parseHtml(res));
+      }
+      if (child.children) {
+        hydrate(child);
+      }
+    }
+  }
+};
 export const render = isBrowser
   ? litRender
   : (template) => {
@@ -460,7 +693,14 @@ export const render = isBrowser
           // console.log('value', value);
         }
       });
+      const nodes = parseHtml(js);
+      for (const node of nodes) {
+        hydrate(node);
+      }
+      const html = nodes.reduce((acc, node) => {
+        return acc + stringifyHtml('', node);
+      }, '');
-      return js;
+      return html;
     };
 const previousValues = new WeakMap();
@@ -705,7 +945,7 @@ export class AtomsElement extends BaseElement {
   get attrs() {
     return Object.keys(this.constructor.attrTypes).reduceRight((acc, key) => {
       const attrType = this.constructor.attrTypes[key];
-      const newValue = isBrowser ? this.getAttribute(key.toLowerCase()) : this.ssrAttributes.find((item) => item.name === key.toLowerCase())?.value;
+      const newValue = isBrowser ? this.getAttribute(key.toLowerCase()) : this.ssrAttributes[key.toLowerCase()];
       const data = attrType.parse(newValue);
       attrType.validate(`<${this.constructor.name}> ${key}`, data);
       acc[key] = data;
@@ -791,3 +1031,41 @@ export const createElement = ({ name, attrTypes, stateTypes, computedTypes, rend
   Element.register();
   return { name, attrTypes, stateTypes, computedTypes, render };
 };
+export const createPage = ({ route, datapaths, head, body }) => {
+  return ({ config, data, item, headScript, bodyScript }) => {
+    const isProd = process.env.NODE_ENV === 'production';
+    const props = { config, data, item };
+    const headHtml = render(head(props));
+    const bodyTemplate = body(props);
+    const bodyHtml = render(bodyTemplate);
+    return `
+      <!DOCTYPE html>
+      <html lang="${config.lang}">
+        <head>
+          <meta charset="utf-8" />
+          <meta http-equiv="x-ua-compatible" content="ie=edge" />
+          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no">
+          <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+          <link rel="icon" type="image/png" href="/assets/icon.png" />
+          ${headHtml}
+          <style>
+            ${getTWStyleSheet(bodyTemplate)}
+          </style>
+          ${headScript}
+        </head>
+        <body>
+          ${bodyHtml}
+          <script>
+            window.__DEV__ = ${!isProd};
+            window.config = ${JSON.stringify(config)};
+            window.data = ${JSON.stringify(data)};
+            window.item = ${JSON.stringify(item)};
+          </script>
+          ${bodyScript}
+        </body>
+      </html>
+  `;
+  };
+};

element.test.js → index.test.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { expect, test, jest } from '@jest/globals';
-import { AtomsElement, html, render, number, boolean, string, array, object, unsafeHTML, css, classMap, createElement } from './element.js';
+import { AtomsElement, createElement, createPage, html, render, number, boolean, string, array, object, unsafeHTML, css, classMap } from './index.js';
 global.__DEV = true;
@@ -389,3 +389,78 @@ test('createElement ', async () => {
   const res = instance.renderTemplate();
   expect(res).toEqual(` <div></div> `);
 });
+test('Page', () => {
+  const route = () => {
+    const langPart = this.config.lang === 'en' ? '' : `/${this.config.lang}`;
+    return `${langPart}`;
+  };
+  const head = ({ config }) => {
+    return html`
+      <title>${config.title}</title>
+      <meta name="title" content=${config.title} />
+      <meta name="description" content=${config.title} />
+    `;
+  };
+  const body = ({ config }) => {
+    return html`
+      <div>
+        <app-header></app-header>
+        <main class="flex flex-1 flex-col mt-20 items-center">
+          <h1 class="text-5xl">${config.title}</h1>
+        </main>
+      </div>
+    `;
+  };
+  const renderPage = createPage({
+    route,
+    head,
+    body,
+  });
+  const scripts = '<script type="module"><script>';
+  const res = renderPage({ config: { lang: 'en', title: '123' }, headScript: scripts, bodyScript: scripts });
+  expect(res).toEqual(`
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta http-equiv="x-ua-compatible" content="ie=edge" />
+          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no">
+          <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+          <link rel="icon" type="image/png" href="/assets/icon.png" />
+      <title>123</title>
+      <meta name="title" content="123">
+      <meta name="description" content="123">
+          <style>
+            .div-1gao8uk {
+  color: red;
+}
+          </style>
+          <script type="module"><script>
+        </head>
+        <body>
+      <div>
+        <app-header></app-header>
+        <main class="flex flex-1 flex-col mt-20 items-center">
+          <h1 class="text-5xl">123</h1>
+        </main>
+      </div>
+          <script>
+            window.__DEV__ = true;
+            window.config = {"lang":"en","title":"123"};
+            window.data = undefined;
+            window.item = undefined;
+          </script>
+          <script type="module"><script>
+        </body>
+      </html>
+  `);
+});

package-lock.json CHANGED Viewed

@@ -7,9 +7,6 @@
     "": {
       "version": "2.3.0",
       "license": "MIT",
-      "dependencies": {
-        "parse5": "^6.0.1"
-      },
       "devDependencies": {
         "jest": "^27.0.5"
       },
@@ -3198,7 +3195,8 @@
     "node_modules/parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "dev": true
     },
     "node_modules/path-exists": {
       "version": "4.0.0",
@@ -6426,7 +6424,8 @@
     "parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "dev": true
     },
     "path-exists": {
       "version": "4.0.0",

package.json CHANGED Viewed

@@ -41,8 +41,5 @@
     "singleQuote": true,
     "arrowParens": "always",
     "trailingComma": "all"
-  },
-  "dependencies": {
-    "parse5": "^6.0.1"
   }
 }

page.d.ts DELETED Viewed

@@ -1,40 +0,0 @@
-export declare type Config = {
-  version: string
-  url: string
-  image: string
-  author: string
-  languages: Array<string>
-  title: string
-  description: string
-  keywords: string
-  categories: Array<any>
-  tags: Array<any>
-  strings: {[key: string]: any}
-  themes: {[key: string]: any}
-}
-export declare type Data = any;
-export declare type Item = any;
-export type find = (node: any) => void;
-export type ssr = (template: any) => string;
-export type Props = {
-  config: Config;
-  data: Data;
-  item: Item;
-}
-export type Handler = (props: Props) => string;
-export type CreatePageProps = {
-  route: Handler;
-  datapaths: Handler;
-  head: Handler;
-  body: Handler;
-}
-export type PageRenderProps = {
-  config: Config;
-  data: Data;
-  item: Item;
-  headScript: string;
-  bodyScript: string;
-}
-export const createPage = (props: CreatePageProps) => (props: PageRenderProps) => string;

page.js DELETED Viewed

@@ -1,62 +0,0 @@
-import parse5 from 'parse5';
-import { AtomsElement, render, getTWStyleSheet } from './element.js';
-export const find = (node) => {
-  for (const child of node.childNodes) {
-    if (AtomsElement.getElement(child.tagName)) {
-      const Clazz = AtomsElement.getElement(child.tagName);
-      const instance = new Clazz(child.attrs);
-      const res = instance.renderTemplate();
-      const frag = parse5.parseFragment(res);
-      child.childNodes.push(...frag.childNodes);
-    }
-    if (child.childNodes) {
-      find(child);
-    }
-  }
-};
-export const ssr = (template) => {
-  const text = render(template);
-  const h = parse5.parseFragment(text);
-  find(h);
-  return parse5.serialize(h);
-};
-export const createPage = ({ route, datapaths, head, body, styles }) => {
-  return ({ config, data, item, headScript, bodyScript }) => {
-    const isProd = process.env.NODE_ENV === 'production';
-    const props = { config, data, item };
-    const headHtml = ssr(head(props));
-    const bodyTemplate = body(props);
-    const bodyHtml = ssr(bodyTemplate);
-    return `
-      <!DOCTYPE html>
-      <html lang="${config.lang}">
-        <head>
-          <meta charset="utf-8" />
-          <meta http-equiv="x-ua-compatible" content="ie=edge" />
-          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no">
-          <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
-          <link rel="icon" type="image/png" href="/assets/icon.png" />
-          ${headHtml}
-          <style>
-            ${getTWStyleSheet(bodyTemplate)}
-          </style>
-          ${headScript}
-        </head>
-        <body>
-          ${bodyHtml}
-          <script>
-            window.__DEV__ = ${!isProd};
-            window.config = ${JSON.stringify(config)};
-            window.data = ${JSON.stringify(data)};
-            window.item = ${JSON.stringify(item)};
-          </script>
-          ${bodyScript}
-        </body>
-      </html>
-  `;
-  };
-};

page.test.js DELETED Viewed

@@ -1,85 +0,0 @@
-import { expect, test } from '@jest/globals';
-import { html, css } from './element.js';
-import { createPage } from './page.js';
-test('Page', () => {
-  const route = () => {
-    const langPart = this.config.lang === 'en' ? '' : `/${this.config.lang}`;
-    return `${langPart}`;
-  };
-  const styles = css({
-    div: {
-      color: 'red',
-    },
-  });
-  const head = ({ config }) => {
-    return html`
-      <title>${config.title}</title>
-      <meta name="title" content=${config.title} />
-      <meta name="description" content=${config.title} />
-    `;
-  };
-  const body = ({ config }) => {
-    return html`
-      <div>
-        <app-header></app-header>
-        <main class="flex flex-1 flex-col mt-20 items-center">
-          <h1 class="text-5xl">${config.title}</h1>
-        </main>
-      </div>
-    `;
-  };
-  const renderPage = createPage({
-    route,
-    head,
-    body,
-    styles,
-  });
-  const scripts = '<script type="module"><script>';
-  const res = renderPage({ config: { lang: 'en', title: '123' }, headScript: scripts, bodyScript: scripts });
-  expect(res).toEqual(`
-      <!DOCTYPE html>
-      <html lang="en">
-        <head>
-          <meta charset="utf-8" />
-          <meta http-equiv="x-ua-compatible" content="ie=edge" />
-          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no">
-          <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
-          <link rel="icon" type="image/png" href="/assets/icon.png" />
-      <title>123</title>
-      <meta name="title" content="123">
-      <meta name="description" content="123">
-          <style>
-            .div-1gao8uk {
-  color: red;
-}
-          </style>
-          <script type="module"><script>
-        </head>
-        <body>
-      <div>
-        <app-header></app-header>
-        <main class="flex flex-1 flex-col mt-20 items-center">
-          <h1 class="text-5xl">123</h1>
-        </main>
-      </div>
-          <script>
-            window.__DEV__ = true;
-            window.config = {"lang":"en","title":"123"};
-            window.data = undefined;
-            window.item = undefined;
-          </script>
-          <script type="module"><script>
-        </body>
-      </html>
-  `);
-});

~repos /atoms-element

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

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