0.0.620

bahrus · Dec 14, 2024 · 80446cb · 80446cb
1 parent 395269f
commit 80446cb
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -321,7 +321,7 @@ The nice thing is this allows us to reuse the same web component base with diffe
 This assumes the document imports a js file, for example, that registers a custom element with name "plus-minus-base".
 
 
-## Example 4b -- Support for inner script tag [TODO]
+## Example 4b -- Support for inner script tag
 
 ```html
 <hello-world place=Earth>
@@ -336,21 +336,17 @@ This assumes the document imports a js file, for example, that registers a custo
             "div": "greeting"
         }'
     >
-        <script>
-            document.currentScript.o = [
-                (place) => ({
-                    greeting: `Hello, ${place}`
-                })
-            ]
-        </script>
+        <script nomodule>[
+            ({place}) => ({greeting: `Hello, ${place}`})
+        ]</script>
     </xtal-element>
   </template>
 </hello-world>
 <hello-world place=Mars></hello-world>
 <hello-world place=Venus></hello-world>
 ```
 
-Another death-blow [against progressive enhancement](https://github.com/WICG/webcomponents/issues/477).
+
 # Real world examples
 
 ## Example 1 up-down-counter

diff --git a/demo/script/Example4a.html b/demo/script/Example4a.html
@@ -11,21 +11,19 @@
         <template shadowrootmode=open>
         <div></div>
         <xtal-element 
+            prop-defaults='{
+                "place": ""
+            }'
             prop-info='{
-                "place": {},
                 "greeting": {}
             }'
             xform='{
                 "div": "greeting"
             }'
         >
-            <script>
-                document.currentScript.o = [
-                    (place) => ({
-                        greeting: `Hello, ${place}`
-                    })
-                ]
-            </script>
+            <script nomodule=>[
+                ({place}) => ({greeting: `Hello, ${place}`})
+            ]</script>
         </xtal-element>
       </template>
     </hello-world>

diff --git a/imports.html b/imports.html
@@ -3,7 +3,7 @@
         "imports": {
             "blow-dry/": "/node_modules/blow-dry/",
             "mount-observer/": "/node_modules/mount-observer/",
-            "trans-render/": "/trans-render/"
+            "trans-render/": "/node_modules/trans-render/"
         }
     }
 </script>
diff --git a/ts-refs b/ts-refs
diff --git a/xtal-element.js b/xtal-element.js
@@ -189,10 +189,15 @@ export class XtalElement extends O {
                     }
                 }
         }
-        const innerScript = this.querySelector('script');
+        const innerScript = this.querySelector('script[nomodule]');
         let infractions = undefined;
         if (innerScript !== null) {
-            infractions = innerScript.o;
+            const infractionsText = innerScript.innerHTML;
+            const infractionsScript = document.createElement('script');
+            const guid = `a_${crypto.randomUUID()}`;
+            infractionsScript.innerHTML = `document.currentScript['${guid}'] = ${infractionsText}`;
+            document.head.appendChild(infractionsScript);
+            infractions = infractionsScript[guid];
         }
         const ctr = class extends inheritingClass {
             localize = localize;

diff --git a/xtal-element.ts b/xtal-element.ts
@@ -197,10 +197,16 @@ export class XtalElement extends O implements Actions{
                 }
 
         }
-        const innerScript = this.querySelector('script');
+        const innerScript = this.querySelector('script[nomodule]');
         let infractions: Infractions | undefined = undefined;
         if(innerScript !== null){
-            infractions = (<any>innerScript).o as Infractions;
+            const infractionsText = innerScript.innerHTML;
+            const infractionsScript = document.createElement('script');
+            const guid = `a_${crypto.randomUUID()}`;
+            infractionsScript.innerHTML = `document.currentScript['${guid}'] = ${infractionsText}`;
+            document.head.appendChild(infractionsScript);
+
+            infractions = (<any>infractionsScript)[guid] as Infractions;
         }
         const ctr = class extends inheritingClass {
             localize = localize;