ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(core): easy prop access on WebComponent v1.12

Browse source 
- update web-component-base to v1.12
- update site and template examples
This commit is contained in:
Ayo 2023-11-18 00:03:54 +01:00
parent 363f2f9201
commit 0671658197
5 changed files with 15 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -3997,9 +3997,9 @@
}
},
"packages/config/node_modules/@mcflyjs/core": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.3.tgz",
"integrity": "sha512-owZ7ej35juuNn+1hE4VClq49QkGys/cz0+GiDWOUZ8L+FNL3yDSDtXT8gGPbOJh9X/dHN64iZSCf+6PosehBVA==",
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.4.tgz",
"integrity": "sha512-MOclUpMi1csfYuEfImKi2yFeB0QrbFuyR/Kk4oIpjn9Vfa3Oha2tGDDKjNnaj/mEM8JZulOZ8WErLciRGOALgw==",
"dependencies": {
"esprima": "^4.0.1",
"h3": "^1.8.2",
@ -4008,7 +4008,7 @@
},
"packages/core": {
"name": "@mcflyjs/core",
"version": "0.3.4",
"version": "0.4.0",
"license": "MIT",
"dependencies": {
"esprima": "^4.0.1",
@ -4072,9 +4072,9 @@
}
},
"templates/basic/node_modules/@mcflyjs/core": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.3.tgz",
"integrity": "sha512-owZ7ej35juuNn+1hE4VClq49QkGys/cz0+GiDWOUZ8L+FNL3yDSDtXT8gGPbOJh9X/dHN64iZSCf+6PosehBVA==",
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.3.4.tgz",
"integrity": "sha512-MOclUpMi1csfYuEfImKi2yFeB0QrbFuyR/Kk4oIpjn9Vfa3Oha2tGDDKjNnaj/mEM8JZulOZ8WErLciRGOALgw==",
"dependencies": {
"esprima": "^4.0.1",
"h3": "^1.8.2",

3
packages/core/event-handler.js
View file

@ -142,8 +142,7 @@ async function buildRegistry(usedCustomElements, type, storage) {
!isBaseClassImported &&
content.toString().includes("extends WebComponent")
) {
const baseClassImport = `import { WebComponent } from "https://unpkg.com/web-component-base@1.11.4/WebComponent.js";`;
const baseClassImport = `import { WebComponent } from "https://unpkg.com/web-component-base@1.12.2/WebComponent.js";`;
registryScript += baseClassImport;
isBaseClassImported = true;
}

2
packages/core/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@mcflyjs/core",
"version": "0.3.4",
"version": "0.4.0",
"description": "McFly core package",
"type": "module",
"main": "index.js",

8
site/src/components/my-hello-world.js
View file

@ -3,16 +3,14 @@
* @see https://ayco.io/n/web-component-base
*/
class HelloWorld extends WebComponent {
dataName = 'World';
static properties = ["data-name"];
static properties = ["my-name"];
onInit() {
let count = 0;
this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
this.onclick = () => this.props.myName = `Clicked ${++count}x`;
}
get template() {
return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
}
}

9
templates/basic/src/components/my-hello-world.js
View file

@ -3,20 +3,17 @@
* @see https://ayco.io/n/web-component-base
*/
class MyHelloWorld extends WebComponent {
// initialize prop
dataName = 'World';
// tell browser which props to cause render
static properties = ["data-name"];
static properties = ["my-name"];
// Triggered when the component is connected to the DOM
onInit() {
let count = 0;
this.onclick = () => this.dataset.name = `Clicked ${++count}x`
this.onclick = () => this.props.myName = `Clicked ${++count}x`
}
// give readonly template
get template() {
return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
}
}