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

feat: attach-effect (#2)

Browse source 
We are now able to attach "side effects" to property value changes, from inside the component and outside.
This commit is contained in:
Ayo Ayco 2023-12-01 08:42:10 +01:00 committed by GitHub
parent 54a3819b83
commit 73dd374a3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 186 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -40,7 +40,7 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c
Import using [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component. We will use this in the rest of our [usage examples](#usage).
```js
import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
```
## Installation via npm
@ -56,7 +56,7 @@ In your component class:
```js
// HelloWorld.mjs
import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class HelloWorld extends WebComponent {
static properties = ["my-name", "emotion"];
@ -153,7 +153,7 @@ Here is an example of using a custom element in a single .html file.
<head>
<title>WC Base Test</title>
<script type="module">
import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class HelloWorld extends WebComponent {
static properties = ["my-name"];
@ -186,7 +186,7 @@ Define behavior when certain events in the component's life cycle is triggered b
- Best for setting up the component
```js
import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class ClickableText extends WebComponent {
// gets called when the component is used in an HTML document
@ -223,7 +223,7 @@ class ClickableText extends WebComponent {
- best for undoing any setup done in `onInit()`
```js
import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class ClickableText extends WebComponent {
@ -250,7 +250,7 @@ class ClickableText extends WebComponent {
- Triggered when an attribute value changed
```js
import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class ClickableText extends WebComponent {
// gets called when an attribute value changes

25
attach-effect/Counter.mjs Normal file
View file

@ -0,0 +1,25 @@
// @ts-check
import WebComponent from "../src/WebComponent.js";
import { attachEffect } from "../src/attach-effect.js";
export class Counter extends WebComponent {
static properties = ["count"];
onInit() {
this.props.count = 0;
this.onclick = () => ++this.props.count;
attachEffect(
this.props.count,
(count) => console.log(count)
);
}
afterViewInit(){
attachEffect(this.props.count, (count) => console.log(count + 100));
}
get template() {
return `<button id="btn">${this.props.count}</button>`;
}
}
customElements.define("my-counter", Counter);

13
attach-effect/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title>
<script type="module" src="Counter.mjs"></script>
</head>
<body>
<h1>Attach Effect Test</h1>
<my-counter></my-counter>
</body>
</html>

2
examples/demo/BooleanPropTest.mjs
View file

@ -1,4 +1,4 @@
import WebComponent from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
export class BooleanPropTest extends WebComponent {
static properties = ["is-inline", "anotherone"];

2
examples/demo/Counter.mjs
View file

@ -1,5 +1,5 @@
// @ts-check
import WebComponent from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
export class Counter extends WebComponent {
static properties = ["count"];

2
examples/demo/HelloWorld.mjs
View file

@ -1,5 +1,5 @@
// @ts-check
import WebComponent from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
export class HelloWorld extends WebComponent {
static properties = ["count", "emotion"];

3
examples/demo/SimpleText.mjs
View file

@ -1,6 +1,5 @@
// @ts-check
import { WebComponent } from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
class SimpleText extends WebComponent {
clickCallback() {

8
examples/demo/index.html
View file

@ -4,10 +4,10 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title>
<script type="module" src="HelloWorld.mjs"></script>
<script type="module" src="SimpleText.mjs"></script>
<script type="module" src="BooleanPropTest.mjs"></script>
<script type="module" src="Counter.mjs"></script>
<script type="module" src="./HelloWorld.mjs"></script>
<script type="module" src="./SimpleText.mjs"></script>
<script type="module" src="./BooleanPropTest.mjs"></script>
<script type="module" src="./Counter.mjs"></script>
</head>
<body>
<hello-world emotion="sad"></hello-world>

58
examples/pens/counter-toggle.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title>
<style>
* {
font-size: larger;
}
</style>
<script type="module">
import WebComponent from "https://unpkg.com/web-component-base@1.13.3/WebComponent.min.js";
/**
* @see https://ayco.io/n/web-component-base
*/
class Counter extends WebComponent {
static properties = ["count"];
onInit() {
this.props.count = 0;
this.onclick = () => ++this.props.count;
}
onChanges(changes) {
console.log(changes);
// now click the button & check your devtools console
}
get template() {
return `<button>${this.props.count}</button>`;
}
}
class Toggle extends WebComponent {
static properties = ["toggle"];
onInit() {
this.props.toggle = false;
this.onclick = () => (this.props.toggle = !this.props.toggle);
}
get template() {
return `<button>${this.props.toggle ? "On" : "Off"}</button>`;
}
}
customElements.define("my-counter", Counter);
customElements.define("my-toggle", Toggle);
</script>
</head>
<body>
<div>
Counter:
<my-counter />
</div>
<div>
Toggle:
<my-toggle />
</div>
</body>
</html>

2
examples/type-restore/Counter.mjs
View file

@ -1,5 +1,5 @@
// @ts-check
import WebComponent from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
export class Counter extends WebComponent {
static properties = ["count"];

2
examples/type-restore/HelloWorld.mjs
View file

@ -1,4 +1,4 @@
import WebComponent from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
export class HelloWorld extends WebComponent {
static properties = ["name"];

2
examples/type-restore/Object.mjs
View file

@ -1,4 +1,4 @@
import WebComponent from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
export class ObjectText extends WebComponent {
static properties = ["object"];

2
examples/type-restore/Toggle.mjs
View file

@ -1,5 +1,5 @@
// @ts-check
import WebComponent from "../src/WebComponent.js";
import WebComponent from "../../src/WebComponent.js";
export class Toggle extends WebComponent {
static properties = ["toggle"];

8
examples/type-restore/index.html
View file

@ -4,10 +4,10 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title>
<script type="module" src="Counter.mjs"></script>
<script type="module" src="Toggle.mjs"></script>
<script type="module" src="HelloWorld.mjs"></script>
<script type="module" src="Object.mjs"></script>
<script type="module" src="./Counter.mjs"></script>
<script type="module" src="./Toggle.mjs"></script>
<script type="module" src="./HelloWorld.mjs"></script>
<script type="module" src="./Object.mjs"></script>
<style>
* {
font-size: larger

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "web-component-base",
"version": "1.13.3",
"version": "1.14.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "web-component-base",
"version": "1.13.3",
"version": "1.14.6",
"license": "MIT",
"workspaces": [
"site"

27
package.json
View file

@ -1,9 +1,27 @@
{
"name": "web-component-base",
"version": "1.13.3",
"version": "1.14.6",
"description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
"main": "WebComponent.js",
"type": "module",
"main": "WebComponent.js",
"exports": {
".": {
"types": "./index.d.ts",
"import": "./index.js"
},
"./WebComponent": {
"types": "./WebComponent.d.ts",
"import": "./WebComponent.js"
},
"./WebComponent.min.js": {
"types": "./WebComponent.d.ts",
"import": "./WebComponent.min.js"
},
"./attach-effect": {
"types": "./attach-effect.d.ts",
"import": "./attach-effect.js"
}
},
"scripts": {
"start": "npx simple-server .",
"demo": "npx simple-server .",
@ -14,9 +32,12 @@
"generate:types": "tsc --allowJs src/* --outDir dist --declaration --emitDeclarationOnly",
"copy:meta": "node prepare.js && cp README.md ./dist && cp LICENSE ./dist",
"copy:source": "cp ./src/* ./dist",
"pub": "npm run clean && npm run build && cd ./dist && npm publish --access public",
"pub": "npm run clean && npm run build && cd ./dist && npm publish",
"pub:beta": "npm run clean && npm run build && cd ./dist && npm publish --tag beta",
"publish:patch": "npm version patch && npm run pub",
"publish:patch:beta": "npm version patch && npm run pub:beta",
"publish:minor": "npm version minor && npm run pub",
"publish:minor:beta": "npm version minor && npm run pub:beta",
"check:size": "npm run build && size-limit ./dist/WebComponent.js"
},
"repository": "https://github.com/ayoayco/web-component-base",

2
site/.npmrc
View file

@ -1,2 +0,0 @@
shamefully-hoist=true
strict-peer-dependencies=false

3
site/nitro.config.mjs
View file

@ -1,2 +1 @@
import McFly from "@mcflyjs/config";
export default defineNitroConfig({ ...McFly() });
export default defineNitroConfig({ extends: '@mcflyjs/config' });

36
src/WebComponent.js
View file

@ -22,9 +22,9 @@ export class WebComponent extends HTMLElement {
/**
* Read-only property containing camelCase counterparts of observed attributes.
* @typedef {{[name: string]: any}} PropStringMap
* @see https://www.npmjs.com/package/web-component-base#prop-access
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
* @typedef {{[name: string]: any}} PropStringMap
* @type {PropStringMap}
*/
get props() {
@ -53,11 +53,12 @@ export class WebComponent extends HTMLElement {
/**
* Triggered when an attribute value changes
* @param {{
* @typedef {{
* property: string,
* previousValue: any,
* currentValue: any
* }} changes
* }} Changes
* @param {Changes} changes
*/
onChanges(changes) {}
@ -94,7 +95,7 @@ export class WebComponent extends HTMLElement {
this[property] = currentValue === "" || currentValue;
this[camelCaps] = this[property]; // remove on v2
this.#handleUpdateProp(camelCaps, currentValue);
this.#handleUpdateProp(camelCaps, this[property]);
this.render();
this.onChanges({ property, previousValue, currentValue });
@ -125,7 +126,11 @@ export class WebComponent extends HTMLElement {
}
};
#handler(setter, typeMap) {
#effectsMap = {};
#handler(setter, meta) {
const effectsMap = meta.#effectsMap;
const typeMap = meta.#typeMap;
const getKebab = (str) => {
return str.replace(
/[A-Z]+(?![a-z])|[A-Z]/g,
@ -141,14 +146,28 @@ export class WebComponent extends HTMLElement {
typeMap[prop] = typeof value;
}
if (oldValue !== value) {
if (value.attach === "effect") {
if (!effectsMap[prop]) {
effectsMap[prop] = [];
}
effectsMap[prop].push(value.callback);
} else if (oldValue !== value) {
obj[prop] = value;
effectsMap[prop]?.forEach((f) => f(value));
const kebab = getKebab(prop);
setter(kebab, value);
}
return true;
},
get(obj, prop) {
// TODO: handle non-objects
if(obj[prop] !== null && obj[prop] !== undefined) {
Object.getPrototypeOf(obj[prop]).proxy = meta.#props;
Object.getPrototypeOf(obj[prop]).prop = prop;
}
return obj[prop];
},
};
}
@ -156,10 +175,7 @@ export class WebComponent extends HTMLElement {
if (!this.#props) {
this.#props = new Proxy(
{},
this.#handler(
(key, value) => this.setAttribute(key, value),
this.#typeMap
)
this.#handler((key, value) => this.setAttribute(key, value), this)
);
}
}

13
src/attach-effect.js Normal file
View file

@ -0,0 +1,13 @@
/**
* Attach a "side effect" function that gets triggered on property value changes
* @param {Object} obj
* @param {(newValue: any) => void} callback
*/
export function attachEffect(obj, callback) {
const { proxy, prop } = Object.getPrototypeOf(obj);
proxy[prop] = {
attach: "effect",
callback,
};
}

2
src/index.js Normal file
View file

@ -0,0 +1,2 @@
export {attachEffect} from './attach-effect.js';
export {default as WebComponent} from './WebComponent.js';