add reflect as a property config

Author: jogibear9988

package.json

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

sample/index.html

@@ -37,18 +37,18 @@ <h1>DSD Demo</h1>
     </my-element>
     <br><br>
     <h1>DCE Demo</h1>
-    <node-projects-dce name="simple-dce-demo" enable-bindings properties='{"list":"Array"}' >
+    <node-projects-dce name="simple-dce-demo" enable-bindings properties='{"list":"Array","ctx":{"type":"String","reflect":true}}' >
         <template>
             <style>h1 {color: blue}</style>
             <h1>Hello World</h1>
+            <div>[[this.ctx]]</div>
             <template repeat:myitem="[[this.list]]">
                 <button>[[myitem]] - [[index]]</button>
             </template>
         </template>
     </node-projects-dce>
 
-    <simple-dce-demo list='["aa","bb"]'>
-
+    <simple-dce-demo list='["aa","bb"]' ctx="test">
     </simple-dce-demo>
 </body>
 

src/BaseCustomWebComponent.ts

@@ -44,7 +44,7 @@ export const cssFromString = function (value: string | CSSStyleSheet | any): CSS
 };
 
 type propertySimpleDefinition = Object | BooleanConstructor | DateConstructor | NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor //| Object //| (new (...args: any[]) => object)
-type propertyComplexDefinition = { type: propertySimpleDefinition; };
+type propertyComplexDefinition = { type: propertySimpleDefinition; reflect?: boolean, attribute?: string, noattribute?: boolean, default?: any };
 type propertyDefinition = propertyComplexDefinition | propertySimpleDefinition;
 
 // decorators

src/DeclaritiveBaseCustomWebcomponent.ts

@@ -42,7 +42,12 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
             if (this.properties[0] === '{') {
                 const obj = JSON.parse(this.properties);
                 for (let i in obj) {
-                    props[i] = window[obj[i]];
+                    if (typeof obj[i] === 'string')
+                        props[i] = window[obj[i]];
+                    else {
+                        props[i] = obj[i];
+                        props[i].type = obj[i].type ? window[obj[i].type] : String;
+                    }
                 }
             } else {
                 props = this.properties.split(/[\s,;]+/).reduce((a, v) => ({ ...a, [v]: String }), {});
@@ -70,6 +75,20 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
                         set(newValue) {
                             if (this['_' + p] !== newValue) {
                                 this['_' + p] = newValue;
+
+                                if (props[p].reflect) {
+                                    if (props[p].type === Boolean) {
+                                        if (newValue === true)
+                                            this.setAttribute(props[p].attribute ?? camelToDashCase(p), '');
+                                        else
+                                            this.removeAttribute(props[p].attribute ?? camelToDashCase(p));
+                                    } else {
+                                        if (props[p].type === Object || props[p].type === Array)
+                                            this.setAttribute(props[p].attribute ?? camelToDashCase(p), JSON.stringify(newValue));
+                                        else
+                                            this.setAttribute(props[p].attribute ?? camelToDashCase(p), newValue);
+                                    }
+                                }
                                 //@ts-ignore
                                 if (this.constructor._enableBindings)
                                     this._bindingsRefresh(p);
@@ -98,4 +117,22 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
     }
 }
 
-customElements.define("node-projects-dce", DeclaritiveBaseCustomWebcomponent);
+customElements.define("node-projects-dce", DeclaritiveBaseCustomWebcomponent);
+
+/*
+<node-projects-dce name="simple-dce-demo" properties='{"list":"Array", "list2":"Array"}' enable-bindings >
+    <template>
+        <style>h1 {color: red}</style>
+        <h1>Hello World</h1>
+        <template repeat:myitem="[[this.list]]">
+            <button>[[myitem.toUpperCase()]] - <b>[[myitem.toLowerCase()]]</b> - [[index]]</button>
+            <ul>
+            <template repeat:myitem2="[[this.list2]]" repeat-index="inneridx">
+                <button>[[myitem.toUpperCase()]] - <b>[[myitem2.toLowerCase()]]</b> - [[inneridx * 100]]</button>
+            </template>
+            </ul>
+        </template>
+    </template>
+</node-projects-dce>
+<simple-dce-demo list='["aa","bb","cc"]' list2='["hello", "you"]' style="position:absolute;left:184px;top:-53px;"></simple-dce-demo>
+*/