structured-fw 0.8.71 → 0.9.0

package/build/system/server/Component.js

@@ -137,14 +137,13 @@ export class Component extends EventEmitter {
         }
     }
     async initChildren(passData) {
-        const componentTags = this.document.application.components.componentNames;
-        const childNodes = this.dom.queryByTagName(...componentTags);
-        for (let i = 0; i < childNodes.length; i++) {
-            const childNode = childNodes[i];
-            const component = this.document.application.components.getByName(childNode.tagName);
+        const potentialComponents = this.dom.components();
+        for (let i = 0; i < potentialComponents.length; i++) {
+            const potentialComponent = potentialComponents[i];
+            const component = this.document.application.components.getByName(potentialComponent.tagName);
             if (component) {
-                const child = new Component(component.name, childNode, this, false);
-                await child.init(childNode.outerHTML, passData);
+                const child = new Component(component.name, potentialComponent, this, false);
+                await child.init(potentialComponent.outerHTML, passData);
                 this.children.push(child);
             }
         }

package/build/system/server/dom/DOMFragment.js

@@ -1,6 +1,6 @@
 import { DOMNode } from "./DOMNode.js";
 export class DOMFragment extends DOMNode {
     constructor() {
-        super('body');
+        super(null, null, 'body');
     }
 }

package/build/system/server/dom/DOMNode.d.ts

@@ -1,3 +1,4 @@
+import { DOMFragment } from "./DOMFragment.js";
 type DOMNodeAttribute = {
     name: string;
     value: string | true;
@@ -9,20 +10,27 @@ type JSONNode = {
     strings: Array<string>;
 };
 export declare const selfClosingTags: ReadonlyArray<string>;
+export declare const recognizedHTMLTags: ReadonlyArray<string>;
 export declare class DOMNode {
     tagName: string;
+    root: DOMFragment;
     parentNode: DOMNode | null;
     children: Array<DOMNode | string>;
+    isRoot: boolean;
     attributes: Array<DOMNodeAttribute>;
     attributeMap: Record<string, DOMNodeAttribute>;
     style: Partial<CSSStyleDeclaration>;
     selfClosing: boolean;
-    constructor(tagName: string);
+    potentialComponentChildren: Record<string, Array<DOMNode>>;
+    constructor(root: DOMFragment | null, parentNode: DOMNode | null, tagName: string);
     appendChild(node: DOMNode | string): void;
     setAttribute(attributeName: string, attributeValue: string | true): void;
     hasAttribute(attributeName: string): boolean;
     queryByTagName(...tagNames: Array<string>): Array<DOMNode>;
     queryByHasAttribute(...attributeNames: Array<string>): Array<DOMNode>;
+    isPotentialComponent(): boolean;
+    registerPotentialComponent(node: DOMNode): void;
+    components(): Array<DOMNode>;
     get innerHTML(): string;
     set innerHTML(html: string);
     get outerHTML(): string;

package/build/system/server/dom/DOMNode.js

@@ -1,14 +1,22 @@
 import { HTMLParser } from "./HTMLParser.js";
 export const selfClosingTags = ['br', 'hr', 'input', 'img', 'link', 'meta', 'source', 'embed', 'path', 'area'];
+export const recognizedHTMLTags = ['body', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'b', 'i', 'a', 'em', 'strong', 'br', 'hr', 'abbr', 'address', 'bdi', 'bdo', 'blockquote', 'cite', 'code', 'del', 'dfn', 'ins', 'kbd', 'mark', 'pre', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small', 'span', 'sub', 'sup', 'time', 'u', 'var', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'img', 'area', 'map', 'object', 'param', 'picture', 'table', 'tr', 'td', 'th', 'caption', 'colgroup', 'col', 'form', 'input', 'label', 'select', 'option', 'textarea', 'button', 'fieldset', 'legend', 'datalist', 'output', 'iframe', 'audio', 'video', 'source', 'track', 'script', 'noscript', 'div', 'nav', 'aside', 'article', 'section', 'main', 'canvas', 'details', 'dialog', 'embed', 'figure', 'figcaption', 'hgroup', 'meter', 'progress', 'template'];
 export class DOMNode {
-    constructor(tagName) {
+    constructor(root, parentNode, tagName) {
         this.parentNode = null;
         this.children = [];
         this.attributes = [];
         this.attributeMap = {};
         this.style = {};
+        this.potentialComponentChildren = {};
+        this.root = root === null ? this : root;
+        this.isRoot = root === null;
+        this.parentNode = parentNode;
         this.tagName = tagName;
         this.selfClosing = selfClosingTags.includes(tagName);
+        if (this.isPotentialComponent()) {
+            this.registerPotentialComponent(this);
+        }
     }
     appendChild(node) {
         if (typeof node !== 'string') {
@@ -63,6 +71,27 @@ export class DOMNode {
         }
         return nodes;
     }
+    isPotentialComponent() {
+        return !recognizedHTMLTags.includes(this.tagName.toLowerCase());
+    }
+    registerPotentialComponent(node) {
+        if (this.parentNode !== null) {
+            if (this.parentNode.isRoot || this.parentNode.isPotentialComponent()) {
+                if (!(node.tagName in this.parentNode.potentialComponentChildren)) {
+                    this.parentNode.potentialComponentChildren[node.tagName] = [];
+                }
+                this.parentNode.potentialComponentChildren[node.tagName].push(node);
+            }
+            else {
+                this.parentNode.registerPotentialComponent(node);
+            }
+        }
+    }
+    components() {
+        return Object.values(this.potentialComponentChildren).reduce((prev, curr) => {
+            return prev.concat(curr);
+        }, []);
+    }
     get innerHTML() {
         return this.children.reduce((html, child) => {
             if (typeof child === 'string') {
@@ -76,6 +105,7 @@ export class DOMNode {
     set innerHTML(html) {
         const fragment = new HTMLParser(html).dom();
         this.children = fragment.children;
+        this.potentialComponentChildren = fragment.potentialComponentChildren;
     }
     get outerHTML() {
         const attributes = this.attributes.reduce((attributes, attribute) => {

package/build/system/server/dom/HTMLParser.js

@@ -64,7 +64,7 @@ export class HTMLParser {
                 if (this.tokenCurrent.length === 0) {
                     throw this.error(`Found an empty HTML tag <>`);
                 }
-                const node = new DOMNode(this.tokenCurrent);
+                const node = new DOMNode(this.fragment, this.context, this.tokenCurrent);
                 this.context.appendChild(node);
                 this.state = 'idle';
                 this.tokenCurrent = '';
@@ -79,7 +79,7 @@ export class HTMLParser {
                     return true;
                 }
                 this.state = 'attributeName';
-                const node = new DOMNode(this.tokenCurrent);
+                const node = new DOMNode(this.fragment, this.context, this.tokenCurrent);
                 this.context.appendChild(node);
                 this.tokenCurrent = '';
                 if (!node.selfClosing) {

package/package.json

@@ -14,7 +14,7 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "0.8.71",
+  "version": "0.9.0",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.js",