figure

commit bf37cbd34651a10feb5264567f73f7e01c8cb07b
parent c2e0ed2e15e9bb827e5df4d6a99fa4da1b24888d
Author: typable <contact@typable.dev>
Date:   Mon, 19 Sep 2022 15:31:48 +0200

Added dynamic component injection

Diffstat:
M
mods.js
 | 
8
++++----
M
segment.js
 | 
38
++++++++++++++++++++++++++------------

2 files changed, 30 insertions(+), 16 deletions(-)
diff --git a/mods.js b/mods.js
@@ -1,6 +1,6 @@
 export const defCss = ({html, compose, feed}) => {
-  return (parts, ...props) => {
-    const [css, refs] = compose(parts, props);
+  return (strings, ...props) => {
+    const [css, refs] = compose(strings, props);
     return html`
       <style type="text/css">
         ${feed(css, refs).join('')}
@@ -10,8 +10,8 @@ export const defCss = ({html, compose, feed}) => {
 }
 
 export const defStyle = ({compose, feed}) => {
-  return (parts, ...props) => {
-    const [css, refs] = compose(parts, props);
+  return (strings, ...props) => {
+    const [css, refs] = compose(strings, props);
     const styles = {};
     for(const item of css.split(';')) {
       if(item.trim().length === 0) {
diff --git a/segment.js b/segment.js
@@ -7,6 +7,17 @@ const segment = ({createElement}) => {
 }
 
 const html = (strings, ...props) => {
+  const elements = parse(strings, ...props);
+  if(elements.length === 0) {
+    throw 'No DOM element was returned!';
+  }
+  if(elements.length > 1) {
+    console.warn('Only one DOM element can be returned!');
+  }
+  return elements[0];
+}
+
+const parse = (strings, ...props) => {
   const [html, refs] = compose(strings, props);
   let dom;
   try {
@@ -16,15 +27,8 @@ const html = (strings, ...props) => {
     console.error(error);
     throw 'Invalid DOM structure!';
   }
-  const node = dom.body.childNodes[0] ?? dom.head.childNodes[0];
-  const elements = render(node, refs);
-  if(elements.length === 0) {
-    throw 'No DOM element was returned!';
-  }
-  if(elements.length > 1) {
-    console.warn('Only one DOM element can be returned!');
-  }
-  return elements[0];
+  const nodes = [...dom.head.childNodes, ...dom.body.childNodes];
+  return nodes.map((node) => render(node, refs));
 }
 
 /**
@@ -37,12 +41,16 @@ const html = (strings, ...props) => {
  * @return {any[]} The joined HTML string and the properties mapped to there references.
  */
 const compose = (strings, props) => {
+  if(strings === undefined) {
+    // handles dyn function without body
+    return ['', {}];
+  }
   const refs = {};
   let string = '';
   for(let i = 0; i < strings.length; i++) {
     string += strings[i];
     if(props[i] !== undefined) {
-      const uid = `$tlx-${count++}`;
+      const uid = `$seg-${count++}`;
       refs[uid] = props[i];
       string += uid ?? '';
     }
@@ -58,7 +66,7 @@ const compose = (strings, props) => {
  * @return {any[]} The string populate with the passed properties
  */
 const feed = (string, refs) => {
-  const expr = /\$tlx-\d+/g;
+  const expr = /\$seg-\d+/g;
   let values = [];
   let match = null;
   let last = 0;
@@ -77,6 +85,12 @@ const feed = (string, refs) => {
   return values;
 }
 
+const dyn = (element, props) => {
+  return (strings, ...childProps) => {
+    return create(element, props, ...parse(strings, ...childProps));
+  };
+}
+
 const render = (node, refs) => {
   if(node.nodeType === Node.TEXT_NODE) {
     return feed(node.textContent, refs);
@@ -138,4 +152,4 @@ import {defCss, defStyle} from './mods.js';
 const css = defCss({html, compose, feed});
 const style = defStyle({html, compose, feed});
 
-export { segment, html, css, style };
+export { segment, html, dyn, css, style };