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

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

@ -142,8 +142,7 @@ async function buildRegistry(usedCustomElements, type, storage) {
!isBaseClassImported && !isBaseClassImported &&
content.toString().includes("extends WebComponent") 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; registryScript += baseClassImport;
isBaseClassImported = true; isBaseClassImported = true;
} }

2
packages/core/package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@mcflyjs/core", "name": "@mcflyjs/core",
"version": "0.3.4", "version": "0.4.0",
"description": "McFly core package", "description": "McFly core package",
"type": "module", "type": "module",
"main": "index.js", "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 * @see https://ayco.io/n/web-component-base
*/ */
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
dataName = 'World'; static properties = ["my-name"];
static properties = ["data-name"];
onInit() { onInit() {
let count = 0; let count = 0;
this.onclick = () => this.dataset.name = `Clicked ${++count}x`; this.onclick = () => this.props.myName = `Clicked ${++count}x`;
} }
get template() { 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 * @see https://ayco.io/n/web-component-base
*/ */
class MyHelloWorld extends WebComponent { class MyHelloWorld extends WebComponent {
// initialize prop
dataName = 'World';
// tell browser which props to cause render // tell browser which props to cause render
static properties = ["data-name"]; static properties = ["my-name"];
// Triggered when the component is connected to the DOM // Triggered when the component is connected to the DOM
onInit() { onInit() {
let count = 0; let count = 0;
this.onclick = () => this.dataset.name = `Clicked ${++count}x` this.onclick = () => this.props.myName = `Clicked ${++count}x`
} }
// give readonly template // give readonly template
get template() { get template() {
return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`; return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
} }
} }