fix: component without shadow dom

KevinBLT · Mar 9, 2024 · d5a483d · d5a483d
1 parent bb53119
commit d5a483d
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 186 deletions.
diff --git a/packages/@hec.js/ui/dist/hec.esm.min.js b/packages/@hec.js/ui/dist/hec.esm.min.js
diff --git a/packages/@hec.js/ui/dist/hec.min.js b/packages/@hec.js/ui/dist/hec.min.js
diff --git a/packages/@hec.js/ui/example/component/index.html b/packages/@hec.js/ui/example/component/index.html
@@ -7,21 +7,21 @@
     <script type="module" async src="./component.js"></script>
 
     <style>
-      my-counter {
+      [data-component="my-counter"] {
         min-height: 10rem;
         display: block;
       }
     </style>
   </head>
   <body>
 
-    <my-counter data-lazy data-for="let e of list" camelCase="{{ e.count }}" count="{{ e.count }}"></my-counter>
+    <div data-component="my-counter" data-lazy data-for="let e of list" camelCase="{{ e.count }}" count="{{ e.count }}"></div>
 
     <script type="module">
       import { templateByNode } from '../../lib/index.js';
 
       templateByNode(document.body, {
-        list: Array.from({ length: Math.round(Math.random() * 1000)}, () => (
+        list: Array.from({ length: Math.round(Math.random() * 10)}, () => (
           { count: Math.round(Math.random() * 0xffffff) })
         ),
       });

diff --git a/packages/@hec.js/ui/example/lazy/index.html b/packages/@hec.js/ui/example/lazy/index.html
@@ -38,7 +38,7 @@
           Inline 4 {{ name }}
         </div>  
 
-        <my-test data-lazy data-test="{{ name }}"></my-test>
+        <div data-component="my-test" data-lazy data-test="{{ name }}"></div>
 
         <div  data-test="{{ name }}" data-lazy="--loading" data-include="include.html"></div>
       </div>  
@@ -48,6 +48,6 @@
 
     <div hidden data-lazy data-include="include.html"></div>
 
-    <my-test hidden data-lazy></my-test>
+    <div data-component="my-test" hidden data-lazy></div>
   </body>
 </html>
diff --git a/packages/@hec.js/ui/example/lazy/lazy.js b/packages/@hec.js/ui/example/lazy/lazy.js
@@ -37,20 +37,20 @@ component('my-test', {}, () => {
 
   setInterval(() => person.age(person.age() + 1), 1500);
 
-  return templateByString('<my-a data-if="visible" data-lazy person="person" date="{{ date }}"></my-b>', { 
+  return templateByString('<div data-component="my-a" data-if="visible" data-lazy person="person" date="{{ date }}"></div>', { 
     date, person, visible
   });
 });
 
 component('my-a', { date: '', person: null }, (props) => templateByString(`
   <strong>{{ date }}, {{ person.name }} ist: {{ person.age }}</strong>
-  <my-b data-lazy person="person" date="{{ date }}"></my-b>
+  <div data-component="my-b" data-lazy person="person" date="{{ date }}"></div>
   <div style="height: 1000px"></div>
-  <my-b data-lazy person="person" date="{{ date }}"></my-b>
+  <div data-component="my-b" data-lazy person="person" date="{{ date }}"></div>
   <div style="height: 1000px"></div>
-  <my-b data-lazy person="person" date="{{ date }}"></my-b>
+  <div data-component="my-b" data-lazy person="person" date="{{ date }}"></div>
   <div style="height: 1000px"></div>
-  <my-b data-lazy person="person" date="{{ date }}"></my-b>
+  <div data-component="my-b" data-lazy person="person" date="{{ date }}"></div>
 
   {{ unkownTestValue }}
 
@@ -61,7 +61,7 @@ component('my-a', { date: '', person: null }, (props) => templateByString(`
 component('my-b', { date: '', person: null }, (props) => templateByString(`
 
   <span>{{ date }}, {{ person.name }} ist: {{ person.age }}</span>
-  <my-c data-lazy person="person" date="{{ date }}"></my-c>
+  <div data-component="my-c" data-lazy person="person" date="{{ date }}"></div>
 
 `, props));
 

diff --git a/packages/@hec.js/ui/example/nested-component/a.html b/packages/@hec.js/ui/example/nested-component/a.html
@@ -1,6 +1,4 @@
 <div>{{ text }}</div>
 
-<slot>
-  <c-b text="e.text" data-for="let e of list"></c-b>
-  <c-c person="e" data-for="let e of list"></c-c>
-</slot>
+<div data-component="c-b" text="e.text" data-for="let e of list"></div>
+<div data-component="c-c" person="e" data-for="let e of list"></div>
diff --git a/packages/@hec.js/ui/example/nested-component/a.js b/packages/@hec.js/ui/example/nested-component/a.js
@@ -1,6 +1,6 @@
-import { component, templateByName } from '../../lib/index.js';
+import { templateByName, view } from '../../lib/index.js';
 
-component('c-a', { text: 'Hi' }, (props) => {
+view('a', { text: 'Hi' }, (props) => {
 
   const list = Array.from({ length: 2 }, () => ({ text: props.text }));
 

diff --git a/packages/@hec.js/ui/example/nested-component/index.html b/packages/@hec.js/ui/example/nested-component/index.html
@@ -10,9 +10,9 @@
   </head>
   <body>
 
-    <c-a text="Peter"></c-a>
-    <c-a text="Herbert"></c-a>
-    <c-a text="Paula"></c-a>
+    <div data-view="a" text="Peter"></div>
+    <div data-view="a" text="Herbert"></div>
+    <div data-view="a" text="Paula"></div>
 
   </body>
 </html>
diff --git a/packages/@hec.js/ui/example/resource/index.html b/packages/@hec.js/ui/example/resource/index.html
@@ -8,6 +8,6 @@
     <script type="module" async src="./resource.js"></script>
   </head>
   <body>
-    <my-beer></my-beer>
+    <div data-component="my-beer"></div>
   </body>
 </html>
diff --git a/packages/@hec.js/ui/example/resource/resource.js b/packages/@hec.js/ui/example/resource/resource.js
@@ -2,7 +2,7 @@ import { component, resource, templateByString } from '../../lib/index.js';
 
 component('my-beer', {}, () => {
 
-  const beer = resource(() => fetch('https://random-data-api.com/api/v2/beers').then(r => r.hhjson()));
+  const beer = resource(() => fetch('https://random-data-api.com/api/v2/beers').then(r => r.json()));
 
   const jsonText = beer.map(e => e && JSON.stringify(e, null, 2));