1
+ /**
2
+ * @license MIT <https://opensource.org/licenses/MIT>
3
+ * @author Ayo Ayco <https://ayo.ayco.io>
4
+ */
5
+
1
6
import {
2
7
createElement ,
3
8
getKebabCase ,
@@ -8,9 +13,7 @@ import {
8
13
9
14
/**
10
15
* A minimal base class to reduce the complexity of creating reactive custom elements
11
- * @license MIT <https://opensource.org/licenses/MIT>
12
- * @author Ayo Ayco <https://ayo.ayco.io>
13
- * @see https://www.npmjs.com/package/web-component-base#readme
16
+ * @see https://WebComponent.io
14
17
*/
15
18
export class WebComponent extends HTMLElement {
16
19
/**
@@ -21,6 +24,8 @@ export class WebComponent extends HTMLElement {
21
24
22
25
/**
23
26
* Blueprint for the Proxy props
27
+ * @typedef {{[name: string]: any} } PropStringMap
28
+ * @type {PropStringMap }
24
29
*/
25
30
static props ;
26
31
@@ -35,7 +40,6 @@ export class WebComponent extends HTMLElement {
35
40
36
41
/**
37
42
* Read-only property containing camelCase counterparts of observed attributes.
38
- * @typedef {{[name: string]: any} } PropStringMap
39
43
* @see https://www.npmjs.com/package/web-component-base#prop-access
40
44
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
41
45
* @type {PropStringMap }
@@ -141,7 +145,7 @@ export class WebComponent extends HTMLElement {
141
145
throw TypeError (
142
146
`Cannot assign ${ typeof value } to ${
143
147
typeMap [ prop ]
144
- } property (setting '${ prop } ' of ${ meta . constructor . name } )`,
148
+ } property (setting '${ prop } ' of ${ meta . constructor . name } )`
145
149
) ;
146
150
} else if ( oldValue !== value ) {
147
151
obj [ prop ] = value ;
@@ -176,7 +180,7 @@ export class WebComponent extends HTMLElement {
176
180
if ( ! this . #props) {
177
181
this . #props = new Proxy (
178
182
initialProps ,
179
- this . #handler( ( key , value ) => this . setAttribute ( key , value ) , this ) ,
183
+ this . #handler( ( key , value ) => this . setAttribute ( key , value ) , this )
180
184
) ;
181
185
}
182
186
}
@@ -185,13 +189,11 @@ export class WebComponent extends HTMLElement {
185
189
render ( ) {
186
190
if ( typeof this . template === "string" ) {
187
191
this . innerHTML = this . template ;
188
- return ;
189
192
} else if ( typeof this . template === "object" ) {
190
193
const tree = this . template ;
191
194
192
195
// TODO: smart diffing
193
196
if ( JSON . stringify ( this . #prevDOM) !== JSON . stringify ( tree ) ) {
194
- // render
195
197
const el = createElement ( tree ) ;
196
198
if ( el ) {
197
199
if ( Array . isArray ( el ) ) this . replaceChildren ( ...el ) ;
0 commit comments