feat: use shadow dom host (#41)
This commit is contained in:
parent
29fa864ca2
commit
e78030ab13
4 changed files with 18 additions and 18 deletions
|
@ -1,4 +1,4 @@
|
||||||
#!/usr/bin/env sh
|
#!/usr/bin/env sh
|
||||||
. "$(dirname -- "$0")/_/husky.sh"
|
. "$(dirname -- "$0")/_/husky.sh"
|
||||||
|
|
||||||
npm run lint
|
npm run lint
|
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
@ -1,4 +1,4 @@
|
||||||
{
|
{
|
||||||
"js/ts.implicitProjectConfig.checkJs": true,
|
"js/ts.implicitProjectConfig.checkJs": true,
|
||||||
"editor.formatOnSave": true
|
"editor.formatOnSave": true
|
||||||
}
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "web-component-base",
|
"name": "web-component-base",
|
||||||
"version": "2.1.0-beta.2",
|
"version": "2.1.0-beta.3",
|
||||||
"description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily",
|
"description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"exports": {
|
"exports": {
|
||||||
|
|
|
@ -16,6 +16,12 @@ import {
|
||||||
* @see https://WebComponent.io
|
* @see https://WebComponent.io
|
||||||
*/
|
*/
|
||||||
export class WebComponent extends HTMLElement {
|
export class WebComponent extends HTMLElement {
|
||||||
|
#host;
|
||||||
|
#prevDOM;
|
||||||
|
#props;
|
||||||
|
#typeMap = {};
|
||||||
|
#effectsMap = {};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Array of strings that tells the browsers which attributes will cause a render
|
* Array of strings that tells the browsers which attributes will cause a render
|
||||||
* @type {Array<string>}
|
* @type {Array<string>}
|
||||||
|
@ -54,11 +60,6 @@ export class WebComponent extends HTMLElement {
|
||||||
return this.#props;
|
return this.#props;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {PropStringMap}
|
|
||||||
*/
|
|
||||||
#props;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Triggered after view is initialized
|
* Triggered after view is initialized
|
||||||
*/
|
*/
|
||||||
|
@ -89,6 +90,7 @@ export class WebComponent extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.#initializeProps();
|
this.#initializeProps();
|
||||||
|
this.#initializeHost();
|
||||||
}
|
}
|
||||||
|
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
|
@ -128,9 +130,6 @@ export class WebComponent extends HTMLElement {
|
||||||
if (restored !== this.props[key]) this.props[key] = restored;
|
if (restored !== this.props[key]) this.props[key] = restored;
|
||||||
}
|
}
|
||||||
|
|
||||||
#typeMap = {};
|
|
||||||
#effectsMap = {};
|
|
||||||
|
|
||||||
#handler(setter, meta) {
|
#handler(setter, meta) {
|
||||||
const effectsMap = meta.#effectsMap;
|
const effectsMap = meta.#effectsMap;
|
||||||
const typeMap = meta.#typeMap;
|
const typeMap = meta.#typeMap;
|
||||||
|
@ -188,24 +187,25 @@ export class WebComponent extends HTMLElement {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#initializeHost() {
|
||||||
|
this.#host = this;
|
||||||
|
if (this.constructor.shadowRootInit) {
|
||||||
|
this.#host = this.attachShadow(this.constructor.shadowRootInit);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#prevDOM;
|
|
||||||
render() {
|
render() {
|
||||||
if (typeof this.template === "string") {
|
if (typeof this.template === "string") {
|
||||||
this.innerHTML = this.template;
|
this.innerHTML = this.template;
|
||||||
} else if (typeof this.template === "object") {
|
} else if (typeof this.template === "object") {
|
||||||
let host = this;
|
|
||||||
if (this.constructor.shadowRootInit) {
|
|
||||||
host = this.attachShadow(this.constructor.shadowRootInit);
|
|
||||||
}
|
|
||||||
const tree = this.template;
|
const tree = this.template;
|
||||||
|
|
||||||
// TODO: smart diffing
|
// TODO: smart diffing
|
||||||
if (JSON.stringify(this.#prevDOM) !== JSON.stringify(tree)) {
|
if (JSON.stringify(this.#prevDOM) !== JSON.stringify(tree)) {
|
||||||
const el = createElement(tree);
|
const el = createElement(tree);
|
||||||
if (el) {
|
if (el) {
|
||||||
if (Array.isArray(el)) host.replaceChildren(...el);
|
if (Array.isArray(el)) this.#host.replaceChildren(...el);
|
||||||
else host.replaceChildren(el);
|
else this.#host.replaceChildren(el);
|
||||||
}
|
}
|
||||||
this.#prevDOM = tree;
|
this.#prevDOM = tree;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue