web-component-wrapper 0.0.600 → 0.0.601
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -3
- package/polyfill.html.ejs +74 -0
- package/readme.md +28 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "web-component-wrapper",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.601",
|
|
4
4
|
"description": "Generic web-component base class and framework specific wrapper.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"component",
|
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
"files": [
|
|
42
|
-
"dist"
|
|
42
|
+
"dist",
|
|
43
|
+
"polyfill.html.ejs"
|
|
43
44
|
],
|
|
44
45
|
"repository": {
|
|
45
46
|
"type": "git",
|
|
@@ -92,7 +93,7 @@
|
|
|
92
93
|
"react": "^19.2.7",
|
|
93
94
|
"react-dom": "^19.2.7",
|
|
94
95
|
"typescript-eslint": "^8.61.0",
|
|
95
|
-
"web-documentation": "^1.0.
|
|
96
|
+
"web-documentation": "^1.0.39",
|
|
96
97
|
"weboptimizer": "^3.0.24",
|
|
97
98
|
"webpack-dev-server": "^5.2.5"
|
|
98
99
|
},
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Promise: React uses for rendering.
|
|
3
|
+
|
|
4
|
+
NOTE: "Array.from", "Object.assign" and "Promise" will be polyfilled by the
|
|
5
|
+
webcomponent polyfill.
|
|
6
|
+
-->
|
|
7
|
+
<%_
|
|
8
|
+
const features = new Set([
|
|
9
|
+
// Most polyfills are determined via "create-polyfill-service-url".
|
|
10
|
+
'Array.from',
|
|
11
|
+
'Array.isArray',
|
|
12
|
+
'Array.prototype.entries',
|
|
13
|
+
'Array.prototype.filter',
|
|
14
|
+
// Is used by "Object.entries" polyfill.
|
|
15
|
+
'Array.prototype.flat',
|
|
16
|
+
// clientnode - Usage.
|
|
17
|
+
'Array.prototype.includes',
|
|
18
|
+
'Array.prototype.keys',
|
|
19
|
+
'Array.prototype.map',
|
|
20
|
+
'Array.prototype.values',
|
|
21
|
+
// Usual array interaction.
|
|
22
|
+
'Array.prototype.@@iterator',
|
|
23
|
+
'ArrayBuffer',
|
|
24
|
+
'console',
|
|
25
|
+
'CustomEvent',
|
|
26
|
+
'DataView',
|
|
27
|
+
'document',
|
|
28
|
+
// Usual dom interactions.
|
|
29
|
+
'DOMTokenList.prototype.@@iterator',
|
|
30
|
+
'Function.prototype.bind',
|
|
31
|
+
'JSON',
|
|
32
|
+
'Map',
|
|
33
|
+
// Usual dom interactions.
|
|
34
|
+
'NodeList.prototype.@@iterator',
|
|
35
|
+
'Object.defineProperty',
|
|
36
|
+
// Iterating over mapping objects everywhere.
|
|
37
|
+
'Object.entries',
|
|
38
|
+
// Applying a scope object during template function call.
|
|
39
|
+
'Object.keys',
|
|
40
|
+
'Object.values',
|
|
41
|
+
'Promise',
|
|
42
|
+
'Set',
|
|
43
|
+
// Many usages e.g. in clientnode.
|
|
44
|
+
'String.prototype.endsWith',
|
|
45
|
+
'String.prototype.includes',
|
|
46
|
+
'String.prototype.startsWith',
|
|
47
|
+
'String.prototype.trim',
|
|
48
|
+
// Used by react to identify its own entities.
|
|
49
|
+
'Symbol',
|
|
50
|
+
'Symbol.for',
|
|
51
|
+
'Symbol.iterator',
|
|
52
|
+
'Symbol.toStringTag',
|
|
53
|
+
'WeakMap',
|
|
54
|
+
'WeakSet'
|
|
55
|
+
].concat(
|
|
56
|
+
typeof _.additionalFeatures === 'undefined' ? [] : _.additionalFeatures
|
|
57
|
+
))
|
|
58
|
+
_%>
|
|
59
|
+
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=<%- encodeURIComponent(Array.from(features).sort().join(',')) %>"></script>
|
|
60
|
+
|
|
61
|
+
<%_ if (typeof _.webComponents === 'undefined' || _.webComponents) { _%>
|
|
62
|
+
<script>
|
|
63
|
+
/*
|
|
64
|
+
Only provide the shadow dom polyfill and avoid to patch a lot of
|
|
65
|
+
dom apis.
|
|
66
|
+
*/
|
|
67
|
+
window.ShadyDOM = {noPatch: true}
|
|
68
|
+
</script>
|
|
69
|
+
<script src="/@webcomponents/webcomponentsjs/webcomponents-bundle.js">
|
|
70
|
+
</script>
|
|
71
|
+
<script
|
|
72
|
+
src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
|
|
73
|
+
></script>
|
|
74
|
+
<%_ } _%>
|
package/readme.md
CHANGED
|
@@ -127,11 +127,37 @@ export class MyWebComponent<
|
|
|
127
127
|
customElements.define('my-web-component', MyWebComponent)
|
|
128
128
|
```
|
|
129
129
|
|
|
130
|
+
<!--showExample:hidden-->
|
|
131
|
+
|
|
132
|
+
```HTML
|
|
133
|
+
<script
|
|
134
|
+
src="https://unpkg.com/web-component-wrapper@latest/dist/bundle/Web.js"
|
|
135
|
+
></script>
|
|
136
|
+
<script
|
|
137
|
+
src="https://unpkg.com/web-component-wrapper@latest/dist/bundle/decorator.js"
|
|
138
|
+
></script>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
<!--showExample:JavaScript-->
|
|
142
|
+
|
|
143
|
+
```JavaScript
|
|
144
|
+
class MyGreeting extends webComponentWrapper.Web {
|
|
145
|
+
static doRender: true
|
|
146
|
+
static evaluateSlots: true
|
|
147
|
+
static observedAttributes = ['name']
|
|
148
|
+
static content = '<div>Hello ${name}</div>'
|
|
149
|
+
|
|
150
|
+
@property()
|
|
151
|
+
name = 'string'
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
customElements.define('my-greeting', MyGreeting)
|
|
155
|
+
```
|
|
156
|
+
|
|
130
157
|
<!--showExample-->
|
|
131
158
|
|
|
132
159
|
```HTML
|
|
133
|
-
<
|
|
134
|
-
</script>
|
|
160
|
+
<my-greeting name="World"></my-greeting>
|
|
135
161
|
```
|
|
136
162
|
|
|
137
163
|
## Data-Flow
|