Prototyping template tag (wip) (#7)

enlezlab · Jun 1, 2024 · dcbd6fb · dcbd6fb
1 parent 43cb57e
commit dcbd6fb
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 8 deletions.
diff --git a/dist/piq.dist.js → dist/piq/core/piq.js b/dist/piq.dist.js → dist/piq/core/piq.js
diff --git a/dist/piq/utils/template-tag.js b/dist/piq/utils/template-tag.js
@@ -0,0 +1,11 @@
+// src/utils/template-tag.js
+var html = (s, ...v) => {
+  return s.reduce((acc, str, i) => acc + str + (v[i] || ""), "");
+};
+var css = (s, ...v) => {
+  return s.reduce((acc, str, i) => acc + str + (v[i] || ""), "");
+};
+export {
+  css,
+  html
+};
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <title></title>
+  <!-- <script type="module" src="/dist/piq/core/piq.js"></script> -->
+  <!-- <script type="module" src="/dist/piq/utils/template-tag.js"></script> -->
   <script type="module" src="/src/main.js"></script>
 </head>
 <body>

diff --git a/scripts/build.sh b/scripts/build.sh
@@ -3,4 +3,4 @@
 rm -rf dist
 mkdir dist
 
-esbuild ./src/core/piq.js --bundle --format=esm --outfile=./dist/piq.dist.js
+esbuild ./src/utils/template-tag.js ./src/core/piq.js --bundle --format=esm --outdir=./dist/piq
diff --git a/src/core/piq.js b/src/core/piq.js
@@ -1,4 +1,5 @@
 import scopedStyle from '../utils/scoped-style.js';
+
 /* main entry point */
 class piq extends HTMLElement {
 

diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,8 @@
 
-import piq from '/src/core/piq.js';
-// import piq from '../dist/piq.dist.js';
+// import piq from '/src/core/piq.js';
+// import {html, css} from '/src/utils/template-tag.js';
+import piq from '../dist/piq/core/piq.js';
+import {html, css} from '../dist/piq/utils/template-tag.js';
 
 // Mock use case
 class TheThing extends piq {
@@ -21,7 +23,7 @@ class TheThing extends piq {
   };
 
   style() {
-    return `
+    return css`
 
       .child-class {
         /*test scope*/
@@ -51,7 +53,7 @@ class TheThing extends piq {
   };
 
   template() {
-    return `
+    return html`
       <div>===========fisrt level</div>
         <well-then type="${this.data('type')}" label="789"></well-then>
         <div class="test-name"> ${this.data('type')} </div>
@@ -86,8 +88,8 @@ class WellThen extends piq {
   };
 
   style() {
-    return `
-      ${this.name()} {
+    return css`
+      {
         display: block;
         border: 1px solid orange;
         padding: 1rem;
@@ -96,7 +98,7 @@ class WellThen extends piq {
   };
 
   template() {
-    return `
+    return html`
       <div>====second level</div>
       <div> ${this.data('type')} </div>
       <div> ${this.data('label')} </div>

diff --git a/src/utils/template-tag.js b/src/utils/template-tag.js
@@ -0,0 +1,13 @@
+const html = (s, ...v) => {
+    return s.reduce((acc, str, i) => acc + str + (v[i] || ''), '');
+};
+
+const css = (s, ...v) => {
+    return s.reduce((acc, str, i) => acc + str + (v[i] || ''), '');
+};
+
+export {
+    html,
+    css
+}
+