work on decl. wc

Author: jogibear9988

package.json

@@ -1,25 +1,25 @@
-{
-  "description": "Base Custom Webcomponent",
-  "name": "@node-projects/base-custom-webcomponent",
-  "version": "0.25.6",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "BSD-3-Clause",
-  "scripts": {
-    "tsc": "tsc",
-    "start": "web-dev-server --node-resolve --open sample/index.html"
-  },
-  "devDependencies": {
-    "typescript": "^5.4.3",
-    "@web/dev-server": "^0.4.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/base-custom-webcomponent.git"
-  },
-  "bugs": {
-    "url": "https://github.com/node-projects/base-custom-webcomponent/issues"
-  },
-  "homepage": "https://github.com/node-projects/base-custom-webcomponent#readme"
-}
+{
+  "description": "Base Custom Webcomponent",
+  "name": "@node-projects/base-custom-webcomponent",
+  "version": "0.25.7",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "tsc": "tsc",
+    "start": "web-dev-server --node-resolve --open sample/index.html"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.3",
+    "@web/dev-server": "^0.4.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/base-custom-webcomponent.git"
+  },
+  "bugs": {
+    "url": "https://github.com/node-projects/base-custom-webcomponent/issues"
+  },
+  "homepage": "https://github.com/node-projects/base-custom-webcomponent#readme"
+}

sample/index.html

@@ -37,19 +37,51 @@ <h1>DSD Demo</h1>
     </my-element>
     <br><br>
     <h1>DCE Demo</h1>
-    <node-projects-dce name="simple-dce-demo" enable-bindings properties='{"list":"Array","ctx":{"type":"String","reflect":true}}' >
+    <node-projects-dce name="simple-dce-demo" enable-bindings
+        properties='{"list":"Array","ctx":{"type":"String","reflect":true}}'>
         <template>
-            <style>h1 {color: blue}</style>
+            <style>
+                h1 {
+                    color: blue
+                }
+            </style>
             <h1>Hello World</h1>
             <div>[[this.ctx]]</div>
             <template repeat:myitem="[[this.list]]">
-                <button>[[myitem]] - [[index]]</button>
+                <button @click="{{this.ctx = myitem}}"
+                    $aaaonclick="[['this.getRootNode().host.ctx = \'' + myitem + '\'']]">[[myitem]] - [[index]]</button>
+            </template>
+        </template>
+    </node-projects-dce>
+
+    <simple-dce-demo list='["aa","bb"]' ctx="test">
+    </simple-dce-demo>
+
+    <br><br>
+
+    <node-projects-dce id="a" name="simple-dce-demo" enable-bindings
+        properties='{"list":"Array","ctx":{"type":"String","reflect":true}}'>
+        <template>
+            <style>
+                h1 {
+                    color: red
+                }
+            </style>
+            <h1>Hello World</h1>
+            <div>[[this.ctx]]</div>
+            <template repeat:myitem="[[this.list]]">
+                <button @click="{{this.ctx = myitem}}"
+                    $aaaonclick="[['this.getRootNode().host.ctx = \'' + myitem + '\'']]">[[myitem]] - [[index]]</button>
             </template>
         </template>
     </node-projects-dce>
 
     <simple-dce-demo list='["aa","bb"]' ctx="test">
     </simple-dce-demo>
+
+    <script>
+        setTimeout(() => a.upgradeAllInstances(), 2000);
+    </script>
 </body>
 
 </html>

src/DeclaritiveBaseCustomWebcomponent.ts

@@ -1,19 +1,32 @@
-import { BaseCustomWebComponentConstructorAppend, BaseCustomWebComponentNoAttachedTemplate, css } from "./BaseCustomWebComponent.js";
+import { BaseCustomWebComponentNoAttachedTemplate, css } from "./BaseCustomWebComponent.js";
 import { WeakArray } from "./WeakArray.js";
 
 function camelToDashCase(text: string) {
     return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
 }
 
-class BaseDeclaritiveWebcomponent extends BaseCustomWebComponentConstructorAppend {
+const instanceMap = new Map<string, WeakArray<BaseDeclaritiveWebcomponent>>();
+class BaseDeclaritiveWebcomponent extends BaseCustomWebComponentNoAttachedTemplate {
+    #firstConnect = false;
+
     constructor() {
         super();
-        //@ts-ignore
-        if (this.constructor._enableBindings)
-            this._bindingsParse(null, true);
     }
 
     async connectedCallback() {
+        if (!this.#firstConnect) {
+            this.#firstConnect = true;
+            if (window[this.localName].template === undefined) {
+                window[this.localName].template = window[this.localName]._definingElement.querySelector('template');
+            }
+            //@ts-ignore
+            this._rootDocumentFragment = this.constructor.template.content.cloneNode(true);
+            //@ts-ignore
+            if (this.constructor._enableBindings)
+                this._bindingsParse(null, true);
+            this.shadowRoot.appendChild(this._rootDocumentFragment);
+        }
+
         this._parseAttributesToProperties();
         //@ts-ignore
         if (this.constructor._enableBindings)
@@ -32,8 +45,6 @@ class BaseDeclaritiveWebcomponent extends BaseCustomWebComponentConstructorAppen
     }
 }
 
-const instanceMap = new Map<string, WeakArray<BaseDeclaritiveWebcomponent>>();
-
 class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttachedTemplate {
 
     public static style = css`:host{display:none;}`;
@@ -69,21 +80,15 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
         }
         const name = this.name;
         if (window[name]) {
-            window[name].template = this.querySelector('template');
-            //window[name].style = style;
+            window[name].template = undefined;
             window[name].properties = props;
             window[name]._propertiesDictionary = null;
             window[name]._enableBindings = this.enableBindings;
             window[name]._definingElement = this;
-            const instanceArray = instanceMap.get(name);
-            for (const i of instanceArray)
-                i._reapplyTemplateAfterUpdate();
         } else {
             const instanceArray = new WeakArray<BaseDeclaritiveWebcomponent>();
             instanceMap.set(name, instanceArray);
             window[name] = function () {
-                if (window[name].template === undefined)
-                    window[name].template = window[name]._definingElement.querySelector('template');
                 const instance = Reflect.construct(BaseDeclaritiveWebcomponent, [], window[name]);
                 instanceArray.add(instance);
 
@@ -135,6 +140,13 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
                 customElements.define(name, window[name]);
         }
     }
+
+    upgradeAllInstances(template?: HTMLTemplateElement) {
+        window[this.name].template = template ?? this.querySelector('template');
+        const instanceArray = instanceMap.get(this.name);
+        for (const i of instanceArray)
+            i._reapplyTemplateAfterUpdate();
+    }
 }
 
 customElements.define("node-projects-dce", DeclaritiveBaseCustomWebcomponent);