Skip to content

Commit df02f00

Browse files
jogibear9988jogibear9988
committed
add a dce class and sample
1 parent 5900a48 commit df02f00

4 files changed

Lines changed: 105 additions & 6 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"description": "Base Custom Webcomponent",
33
"name": "@node-projects/base-custom-webcomponent",
4-
"version": "0.24.1",
4+
"version": "0.25.0",
55
"type": "module",
66
"main": "./dist/index.js",
77
"author": "",

‎sample/index.html‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,11 @@
2222

2323
customElements.define("my-element", MyElement);
2424
</script>
25-
<style>
26-
27-
</style>
25+
<script type="module" src="../dist/DeclaritiveBaseCustomWebcomponent.js"></script>
2826
</head>
2927

3028
<body>
29+
<h1>DSD Demo</h1>
3130
<my-element list='["aa","bb"]' style="display: flex; flex-direction: column; gap: 5px;">
3231
<template shadowrootmode="open">
3332
<button id="test">Test</button>
@@ -36,6 +35,21 @@
3635
</template>
3736
</template>
3837
</my-element>
38+
<br><br>
39+
<h1>DCE Demo</h1>
40+
<node-projects-dce name="simple-dce-demo" enable-bindings properties='{"list":"Array"}' >
41+
<template>
42+
<style>h1 {color: blue}</style>
43+
<h1>Hello World</h1>
44+
<template repeat:myitem="[[this.list]]">
45+
<button>[[myitem]] - [[index]]</button>
46+
</template>
47+
</template>
48+
</node-projects-dce>
49+
50+
<simple-dce-demo list='["aa","bb"]'>
51+
52+
</simple-dce-demo>
3953
</body>
4054

4155
</html>

‎src/DeclaritiveBaseCustomWebcomponent.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { BaseCustomWebComponentConstructorAppend, BaseCustomWebComponentNoAttachedTemplate, css } from "./BaseCustomWebComponent.js";
2+
3+
function camelToDashCase(text: string) {
4+
return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
5+
}
6+
7+
class BaseDeclaritiveWebcomponent extends BaseCustomWebComponentConstructorAppend {
8+
constructor() {
9+
super();
10+
this._bindingsParse(null, true);
11+
}
12+
13+
async connectedCallback() {
14+
this._parseAttributesToProperties();
15+
this._bindingsRefresh();
16+
}
17+
}
18+
19+
class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttachedTemplate {
20+
21+
public static style = css`:host{display:none;}`;
22+
23+
public name: string;
24+
public enableBindings: boolean;
25+
public properties: string;
26+
27+
public static readonly properties = {
28+
name: String,
29+
enableBindings: Boolean,
30+
properties: String
31+
}
32+
33+
constructor() {
34+
super();
35+
this._parseAttributesToProperties();
36+
const template = this.querySelector('template');
37+
let props = {};
38+
if (this.properties) {
39+
if (this.properties[0] === '{') {
40+
const obj = JSON.parse(this.properties);
41+
for (let i in obj) {
42+
props[i] = window[obj[i]];
43+
}
44+
} else {
45+
props = this.properties.split(/[\s,;]+/).reduce((a, v) => ({ ...a, [v]: String }), {});
46+
}
47+
}
48+
const name = this.name;
49+
window[name] = function () {
50+
const instance = Reflect.construct(BaseDeclaritiveWebcomponent, [], window[name]);
51+
52+
for (let p in props) {
53+
Object.defineProperty(instance, p, {
54+
get() {
55+
return this['_' + p];
56+
},
57+
set(newValue) {
58+
if (this['_' + p] !== newValue) {
59+
this['_' + p] = newValue;
60+
this._bindingsRefresh(p);
61+
instance.dispatchEvent(new CustomEvent(camelToDashCase(p) + '-changed', { detail: { newValue } }));
62+
}
63+
},
64+
enumerable: true,
65+
configurable: true,
66+
});
67+
if (props[p].default) {
68+
instance['_' + p] = props[p].default;
69+
}
70+
}
71+
return instance;
72+
}
73+
74+
75+
window[name].template = template;
76+
//window[name].style = style;
77+
window[name].properties = props;
78+
window[name]._propertiesDictionary = null;
79+
window[name].prototype = Object.create(BaseDeclaritiveWebcomponent.prototype, { constructor: { value: window[name] } })
80+
if (!customElements.get(name))
81+
customElements.define(name, window[name]);
82+
}
83+
}
84+
85+
customElements.define("node-projects-dce", DeclaritiveBaseCustomWebcomponent);

0 commit comments

Comments
 (0)