work on conditional template, dce elements

Author: jogibear9988

README.md

@@ -63,15 +63,21 @@ class:className="[[boolExpression]]" to set/remove a css class
 
 $attribute="[[expression]]" to bind to Attributes instead of properties.
 
+?booleanAttribute="[[expression]]" to bind to a boolean Attribute.
+
 .property="[[expression]]" to bind to Proertys without using the attribute name (to disable side effects).
 
 sub <template></template> elements are not bound, so elements like <iron-list> of polymer also work
 
-use repeat:nameOfItem=[[enumerableExpression]] on a Template Element to repeat it for every instance of the enumerable.
+css type adopted-css
+
+use repeat:nameOfItem="[[enumerableExpression]]" on a template element to repeat it for every instance of the enumerable.
 You could also use 'index' variable in the repeat binding for the current number. The attribute "repeat-index" could be used to change the name of the index variable.
 on a repeat you could use the repeat-changed-item-callback="[[this.itemCreated(item, nodes)]]
 !!caution!! => the repeat binding is only a preview at the moment, it redraws all items on array change
 
+use if="[[expression]]" an a template element to show it conditionally
+
 ## Event Code Bindings
 
 with for example @click="[[this.aa(event)]]" you could create a event binding wich could run any javascript code inside of the brackets.

package.json

@@ -1,7 +1,7 @@
 {
   "description": "Base Custom Webcomponent",
   "name": "@node-projects/base-custom-webcomponent",
-  "version": "0.25.9",
+  "version": "0.25.10",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",

sample/index.html

@@ -52,6 +52,11 @@ <h1>Hello World</h1>
                     $aaaonclick="[['this.getRootNode().host.ctx = \'' + myitem + '\'']]">[[myitem]] - [[index]]</button>
             </template>
         </template>
+        <style type="adopted-css">
+            button {
+                color: green;
+            }
+        </style>
     </node-projects-dce>
 
     <simple-dce-demo list='["aa","bb"]' ctx="test">
@@ -72,7 +77,18 @@ <h1>Hello World</h1>
             <template repeat:myitem="[[this.list]]">
                 <button @click="[[this.ctx = myitem]]">[[myitem]] - [[index]]</button>
             </template>
+            <template if="[[this.list == null]]">
+                <button>111</button>
+            </template>
+            <template if="[[this.list != null]]">
+                <button @click="[[this.list = null]]">222</button>
+            </template>
         </template>
+        <style type="adopted-css">
+            button {
+                color: blue;
+            }
+        </style>
     </node-projects-dce>
 
     <simple-dce-demo list='["aa","bb"]' ctx="test">

src/BaseCustomWebComponent.ts

@@ -188,8 +188,14 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
                             const b = () => this._bindingSetElementClass(<HTMLElement | SVGElement>node, camelCased, value, repeatBindingItems, host, context);
                             this._bindings.push([b, null]);
                             b();
-                        } else if (a.name == 'repeat-changed-item-callback') {
+                        } else if (a.name.length === 28 && a.name === 'repeat-changed-item-callback') {
                             //do nothing
+                        } else if (a.name === 'if' && node instanceof HTMLTemplateElement) {
+                            const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                            const elementsCache: Node[] = [];
+                            const b = () => this._bindingConditional(<HTMLTemplateElement>node, value, repeatBindingItems, elementsCache, host, context);
+                            this._bindings.push([b, null]);
+                            b();
                         } else if (a.name.startsWith('repeat:')) {
                             const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
                             const bindingItemVariableName = a.name.substring(7, a.name.length).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
@@ -220,7 +226,7 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
                         } else {
                             let value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
                             let camelCased = a.name
-                            if (a.name[0] !== '$')
+                            if (a.name[0] !== '$' && a.name[0] !== '?')
                                 camelCased = a.name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
                             let noNull = false;
                             if (value[0] === '?') {
@@ -357,6 +363,30 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
         return value;
     }
 
+    private _bindingConditional(node: HTMLTemplateElement, expression: string, repeatBindingItems: repeatBindingItem[], elementsCache: Node[], host: any, context: any) {
+        try {
+            const value = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
+
+            if (!value && elementsCache.length > 0) {
+                for (let c of elementsCache) {
+                    c.parentNode.removeChild(c);
+                }
+                elementsCache.length = 0;
+            }
+
+            if (value && elementsCache.length === 0) {
+                let nd = <DocumentFragment>node.content.cloneNode(true);
+                elementsCache.push(...nd.children);
+                this._bindingsInternalParse(nd, repeatBindingItems, true, host, context);
+
+                node.parentNode.insertBefore(nd, node);
+            }
+        } catch (error) {
+            if (!this._noWarningOnBindingErrors)
+                console.warn((<Error>error).message, 'Failed to bind Conditional to expression "' + expression + '"', node);
+        }
+    }
+
     private _bindingRepeat(node: HTMLTemplateElement, bindingProperty: string, bindingIndexName: string, expression: string, callback: string, repeatBindingItems: repeatBindingItem[], elementsCache: Node[], host: any, context: any) {
         try {
             const values = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
@@ -445,6 +475,11 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
                             (<Element>node).removeAttribute(property.substring(1));
                         else
                             (<Element>node).setAttribute(property.substring(1), value);
+                    } else if (property[0] === '?') {
+                        if (!value == true)
+                            (<Element>node).setAttribute(property.substring(1), '');
+                        else
+                            (<Element>node).removeAttribute(property.substring(1));
                     }
                     else if (property == 'class')
                         (<Element>node).setAttribute(property, value);

src/DeclaritiveBaseCustomWebcomponent.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentNoAttachedTemplate, css } from "./BaseCustomWebComponent.js";
+import { BaseCustomWebComponentNoAttachedTemplate, css, cssFromString } from "./BaseCustomWebComponent.js";
 import { WeakArray } from "./WeakArray.js";
 
 function camelToDashCase(text: string) {
@@ -18,10 +18,18 @@ class BaseDeclaritiveWebcomponent extends BaseCustomWebComponentNoAttachedTempla
             this.#firstConnect = true;
             if (window[this.localName].template === undefined) {
                 window[this.localName].template = window[this.localName]._definingElement.querySelector('template');
+                const styles: HTMLStyleElement[] = window[this.localName]._definingElement.querySelectorAll('style[type=adopted-css]');
+                if (styles?.length)
+                    window[this.localName]._styles = Array.from(styles).map(x => cssFromString(x.textContent));
             }
             //@ts-ignore
             this._rootDocumentFragment = this.constructor.template.content.cloneNode(true);
             //@ts-ignore
+            if (this.constructor._styles) {
+                //@ts-ignore
+                this.shadowRoot.adoptedStyleSheets = this.constructor._styles;
+            }
+            //@ts-ignore
             if (this.constructor._enableBindings)
                 this._bindingsParse(null, true);
             this.shadowRoot.appendChild(this._rootDocumentFragment);
@@ -36,6 +44,12 @@ class BaseDeclaritiveWebcomponent extends BaseCustomWebComponentNoAttachedTempla
     _reapplyTemplateAfterUpdate() {
         this._bindings = null;
         this.shadowRoot.innerHTML = '';
+        this.shadowRoot.adoptedStyleSheets = [];
+        //@ts-ignore
+        if (this.constructor._styles) {
+            //@ts-ignore
+            this.shadowRoot.adoptedStyleSheets = this.constructor._styles;
+        }
         //@ts-ignore
         this._rootDocumentFragment = this.constructor.template.content.cloneNode(true);
         this.shadowRoot.appendChild(this._rootDocumentFragment);
@@ -85,6 +99,7 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
             window[name]._propertiesDictionary = null;
             window[name]._enableBindings = this.enableBindings;
             window[name]._definingElement = this;
+            window[name]._styles = null;
         } else {
             const instanceArray = new WeakArray<BaseDeclaritiveWebcomponent>();
             instanceMap.set(name, instanceArray);
@@ -135,6 +150,7 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
             window[name]._propertiesDictionary = null;
             window[name]._enableBindings = this.enableBindings;
             window[name]._definingElement = this;
+            window[name]._styles = null;
             window[name].prototype = Object.create(BaseDeclaritiveWebcomponent.prototype, { constructor: { value: window[name] } })
             if (!customElements.get(name))
                 customElements.define(name, window[name]);
@@ -143,6 +159,9 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
 
     upgradeAllInstances(template?: HTMLTemplateElement) {
         window[this.name].template = template ?? this.querySelector('template');
+        const styles = this.querySelectorAll('style[type=adopted-css]');
+        if (styles?.length)
+            window[this.name]._styles = Array.from(styles).map(x => cssFromString(x.textContent));
         const instanceArray = instanceMap.get(this.name);
         for (const i of instanceArray)
             i._reapplyTemplateAfterUpdate();