Skip to content

Commit 6eddb4f

Browse files
SoloJiangChrisCindyRongyan Chen
authored
refactor: runtime structure (#63)
* refactor: runtime structure * chore: lint * feat: support element template diff * chore: lint * feat(compiler): update structure in get template method (#62) * feat: support svg elements (#60) * feat: support svg elements * chore: fix lint and add notes * feat(compiler): update structure in get template method * fix(compiler): lint error * feat(compiler): use handler to distinguish events and on props * chore(compiler): add EventAttributeDescriptor interface Co-authored-by: Rongyan Chen <chenrongyan.cry@alibaba-inc.com> Co-authored-by: 狒狒神 <fushen.jzw@alibaba-inc.com> * feat: html method support new structure * feat: html method support new structure * fix(compiler): inject wrong value in runtime compiler * refactor: reactive node * chore: test case * fix(compiler): replace values with templateData in template result * chore: test case * chore: add test case * refactor: base render * chore: revert code * chore: test case * chore: lint * chore: ts type * chore: test case * chore: add comment * chore: remove useless comment * chore: add test case * chore: optimize code * chore: optimize code * chore: link * chore: optimize code Co-authored-by: NK <yxy0919@foxmail.com> Co-authored-by: Rongyan Chen <chenrongyan.cry@alibaba-inc.com> Co-authored-by: 逆葵 <xianyong.yxy@alibaba-inc.com>
1 parent e5b302d commit 6eddb4f

36 files changed

+2213
-1308
lines changed

‎examples/basic/main.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ class Child extends HTMLElement {
1414
connectedCallback() {
1515
super.connectedCallback();
1616
console.log('connected');
17-
console.log('checked => ', this.checked);
17+
console.log(this.className)
1818
}
1919

2020
get template() {
21-
return html`<div>
21+
return html`<div id="container">
2222
Child ${this.name}
2323
<div>parent class name is ${this.className}</div>
2424
</div>`;
@@ -49,13 +49,13 @@ class CustomElement extends HTMLElement {
4949
onClick() {
5050
this.#data.name += '!';
5151
this.#text += '?';
52-
this.className = this.className === 'green' ? 'red' : 'green';
52+
this.#className = this.#className === 'green' ? 'red' : 'green';
5353
};
5454

5555
get template() {
56-
return html`<div class=${this.className} @click=${this.onClick}>
56+
return html`<div class=${this.#className} @click=${this.onClick}>
5757
${this.#text} - ${this.#data.name}
58-
<child-element name=${this.#data.name} checked=${true} data-class-name=${this.className} />
58+
<child-element name=${this.#data.name} checked=${true} data-class-name=${this.#className} />
5959
</div>`;
6060
}
6161
}

‎examples/list/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Basic</title>
7+
<style>
8+
.red {
9+
color: red;
10+
}
11+
.green {
12+
color: green;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<custom-element>
18+
</custom-element>
19+
<script type="module" src="/main.js"></script>
20+
</body>
21+
</html>

‎examples/list/main.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { reactive, customElement, html } from 'pwc';
2+
3+
@customElement('custom-element')
4+
class CustomElement extends HTMLElement {
5+
@reactive
6+
accessor #title = 'default title';
7+
8+
@reactive
9+
accessor #list = ['item 1', 'item 2', 'item 3', 'item 4'];
10+
11+
onClick() {
12+
this.#list.push('item 5');
13+
}
14+
15+
handleItemClick(index) {
16+
this.#list = [...this.#list.slice(0, index), ...this.#list.slice(index + 1)];
17+
}
18+
19+
get template() {
20+
return html`<div @click=${this.onClick}>
21+
${html`${this.#list.map((item, index) => {
22+
if (item === 'item 2') {
23+
return null;
24+
}
25+
if (item === 'item 3') {
26+
return [1, 2, 3].map((insideItem) => {
27+
return html`<div @click=${() => this.handleItemClick(index)}>inside list: ${insideItem}</div>`;
28+
});
29+
}
30+
return html`<div @click=${() => this.handleItemClick(index)}>${item}</div>`;
31+
})}`}
32+
</div>`;
33+
}
34+
}

‎examples/list/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "basic",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"preview": "vite preview"
8+
},
9+
"devDependencies": {
10+
"rollup": "^2.0.0",
11+
"vite": "^2.7.2",
12+
"vite-plugin-babel": "^1.0.0"
13+
},
14+
"dependencies": {
15+
"pwc": "workspace:*"
16+
},
17+
"browserslist": "chrome > 60"
18+
}

‎examples/list/vite.config.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { defineConfig } from 'vite';
2+
import babel from 'vite-plugin-babel';
3+
4+
export default defineConfig({
5+
plugins: [
6+
babel({
7+
babelConfig: {
8+
presets: [
9+
[
10+
'@babel/preset-env',
11+
{
12+
targets: {
13+
chrome: 99,
14+
},
15+
modules: false,
16+
},
17+
],
18+
],
19+
plugins: [
20+
[
21+
'@babel/plugin-proposal-decorators',
22+
{
23+
version: '2021-12',
24+
},
25+
],
26+
'@babel/plugin-proposal-class-properties',
27+
'@babel/plugin-proposal-class-static-block',
28+
'@babel/plugin-proposal-private-methods'
29+
],
30+
},
31+
}),
32+
],
33+
});

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@types/jest": "^27.4.1",
3535
"@types/node": "^17.0.21",
3636
"chalk": "^4.1.2",
37+
"codecov": "^3.8.3",
3738
"esbuild": "^0.14.27",
3839
"eslint": "^7.32.0",
3940
"esno": "^0.14.1",
@@ -47,6 +48,7 @@
4748
"prettier": "^2.6.0",
4849
"stylelint": "^14.6.0",
4950
"typescript": "^4.6.2",
50-
"codecov": "^3.8.3"
51+
"driver-dom": "^2.2.2",
52+
"rax": "^1.2.2"
5153
}
5254
}

‎packages/pwc-compiler/__tests__/compileScript.test.ts

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const multipleKindsOfUsingBindingsComponent = `
2525
attr3="{{this.data3.arr1[0]}}"
2626
attr4="{{this['data-five']}}"
2727
@click="{{this.#fn}}"
28+
onevent="{{this.#fn}}"
2829
@input="{{this.methods.fn2}}"
2930
>
3031
<div>{{ this.#data1 }}</div>
@@ -63,7 +64,11 @@ describe('compileScript', () => {
6364
const result = compileScript(descriptor);
6465

6566
expect(result.content).toContain(`get template() {
66-
return [\"\\n <p><!--?pwc_t--></p>\\n\", [this.#text]];
67+
return {
68+
templateString: \"\\n <p><!--?pwc_t--></p>\\n\",
69+
templateData: [this.#text],
70+
template: true
71+
};
6772
}`);
6873
});
6974

@@ -105,27 +110,34 @@ export default class CustomElement extends HTMLElement {
105110
};
106111
107112
get template() {
108-
return ["\\n <!--?pwc_p--><div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n </div>\\n", [[{
109-
name: "attr1",
110-
value: this.#data1
111-
}, {
112-
name: "attr2",
113-
value: this.#data2.name1
114-
}, {
115-
name: "attr3",
116-
value: this.data3.arr1[0]
117-
}, {
118-
name: "attr4",
119-
value: this['data-five']
120-
}, {
121-
name: "onclick",
122-
value: this.#fn,
123-
capture: false
124-
}, {
125-
name: "oninput",
126-
value: this.methods.fn2,
127-
capture: false
128-
}], this.#data1, this.#data2.name1, this.data3.arr1[0], this.data4.obj1.name2, this['data-five']]];
113+
return {
114+
templateString: "\\n <!--?pwc_p--><div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n <div><!--?pwc_t--></div>\\n </div>\\n",
115+
templateData: [[{
116+
name: "attr1",
117+
value: this.#data1
118+
}, {
119+
name: "attr2",
120+
value: this.#data2.name1
121+
}, {
122+
name: "attr3",
123+
value: this.data3.arr1[0]
124+
}, {
125+
name: "attr4",
126+
value: this['data-five']
127+
}, {
128+
name: "onclick",
129+
handler: this.#fn,
130+
capture: false
131+
}, {
132+
name: "onevent",
133+
value: this.#fn
134+
}, {
135+
name: "oninput",
136+
handler: this.methods.fn2,
137+
capture: false
138+
}], this.#data1, this.#data2.name1, this.data3.arr1[0], this.data4.obj1.name2, this['data-five']],
139+
template: true
140+
};
129141
}
130142
131143
}`);

0 commit comments

Comments
 (0)