wc-compiler 0.1.0 → 0.2.0
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/README.md +4 -10
- package/package.json +1 -1
- package/src/wcc.js +48 -12
package/README.md
CHANGED
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
# wcc
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[](https://github.com/thescientist13/wcc/tags)
|
|
5
|
-
|
|
6
|
-
[](https://github.com/thescientist13/wcc/issues)
|
|
7
|
-
[](https://raw.githubusercontent.com/thescientist13/wcc/master/LICENSE.md)
|
|
3
|
+
<img src="https://merry-caramel-524e61.netlify.app/assets/wcc-logo.png" width="30%"/>
|
|
8
4
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
> _It's Web Components all the way down._ 🐢
|
|
5
|
+
> _Experimental Web Components compiler. It's Web Components all the way down!_ 🐢
|
|
12
6
|
|
|
13
7
|
## Overview
|
|
14
8
|
|
|
@@ -79,12 +73,12 @@ WCC exposes a few utilities to render your Web Components. Below is one example
|
|
|
79
73
|
```js
|
|
80
74
|
import { renderToString } from 'wc-compiler';
|
|
81
75
|
|
|
82
|
-
const { html } = renderToString(new URL('./path/to/footer.js', import.meta.url));
|
|
76
|
+
const { html } = await renderToString(new URL('./path/to/footer.js', import.meta.url));
|
|
83
77
|
|
|
84
78
|
console.debug({ html })
|
|
85
79
|
```
|
|
86
80
|
|
|
87
|
-
1. You will get the following
|
|
81
|
+
1. You will get the following HTML output that can be used in conjunction with your preferred site framework or templating solution.
|
|
88
82
|
```html
|
|
89
83
|
<wcc-footer>
|
|
90
84
|
<template shadowroot="open">
|
package/package.json
CHANGED
package/src/wcc.js
CHANGED
|
@@ -9,6 +9,20 @@ import fs from 'node:fs/promises';
|
|
|
9
9
|
|
|
10
10
|
let definitions;
|
|
11
11
|
|
|
12
|
+
function getParse(html) {
|
|
13
|
+
return html.indexOf('<html>') >= 0 || html.indexOf('<body>') || html.indexOf('<head>')
|
|
14
|
+
? parse
|
|
15
|
+
: parseFragment;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function isCustomElementDefinitionNode(node) {
|
|
19
|
+
const { expression } = node;
|
|
20
|
+
|
|
21
|
+
return expression.type === 'CallExpression' && expression.callee && expression.callee.object
|
|
22
|
+
&& expression.callee.property && expression.callee.object.name === 'customElements'
|
|
23
|
+
&& expression.callee.property.name === 'define';
|
|
24
|
+
}
|
|
25
|
+
|
|
12
26
|
async function renderComponentRoots(tree, includeShadowRoots = true) {
|
|
13
27
|
for (const node of tree.childNodes) {
|
|
14
28
|
if (node.tagName && node.tagName.indexOf('-') > 0) {
|
|
@@ -48,16 +62,12 @@ async function registerDependencies(moduleURL) {
|
|
|
48
62
|
await registerDependencies(dependencyModuleURL);
|
|
49
63
|
},
|
|
50
64
|
async ExpressionStatement(node) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
&& expression.callee.property && expression.callee.object.name === 'customElements'
|
|
55
|
-
&& expression.callee.property.name === 'define') {
|
|
56
|
-
|
|
57
|
-
const tagName = node.expression.arguments[0].value;
|
|
65
|
+
if (isCustomElementDefinitionNode(node)) {
|
|
66
|
+
const { arguments: args } = node.expression;
|
|
67
|
+
const tagName = args[0].value;
|
|
58
68
|
|
|
59
69
|
definitions[tagName] = {
|
|
60
|
-
instanceName:
|
|
70
|
+
instanceName: args[1].name,
|
|
61
71
|
moduleURL
|
|
62
72
|
};
|
|
63
73
|
}
|
|
@@ -65,6 +75,25 @@ async function registerDependencies(moduleURL) {
|
|
|
65
75
|
});
|
|
66
76
|
}
|
|
67
77
|
|
|
78
|
+
async function getTagName(moduleURL) {
|
|
79
|
+
const moduleContents = await fs.readFile(moduleURL, 'utf-8');
|
|
80
|
+
let tagName;
|
|
81
|
+
|
|
82
|
+
walk.simple(acorn.parse(moduleContents, {
|
|
83
|
+
ecmaVersion: 'latest',
|
|
84
|
+
sourceType: 'module'
|
|
85
|
+
}), {
|
|
86
|
+
async ExpressionStatement(node) {
|
|
87
|
+
if (isCustomElementDefinitionNode(node)) {
|
|
88
|
+
|
|
89
|
+
tagName = node.expression.arguments[0].value;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
return tagName;
|
|
95
|
+
}
|
|
96
|
+
|
|
68
97
|
async function initializeCustomElement(elementURL, tagName, attrs = []) {
|
|
69
98
|
await registerDependencies(elementURL);
|
|
70
99
|
|
|
@@ -93,14 +122,21 @@ async function renderToString(elementURL, options = {}) {
|
|
|
93
122
|
|
|
94
123
|
const { lightMode = false } = options;
|
|
95
124
|
const includeShadowRoots = !lightMode;
|
|
96
|
-
|
|
125
|
+
const elementTagName = await getTagName(elementURL);
|
|
97
126
|
const elementInstance = await initializeCustomElement(elementURL);
|
|
127
|
+
|
|
98
128
|
const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots });
|
|
99
|
-
const elementTree =
|
|
129
|
+
const elementTree = getParse(elementHtml)(elementHtml);
|
|
100
130
|
const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
|
|
131
|
+
const html = !lightMode && elementTagName ? `
|
|
132
|
+
<${elementTagName}>
|
|
133
|
+
${serialize(finalTree)}
|
|
134
|
+
</${elementTagName}
|
|
135
|
+
`
|
|
136
|
+
: serialize(finalTree);
|
|
101
137
|
|
|
102
138
|
return {
|
|
103
|
-
html
|
|
139
|
+
html,
|
|
104
140
|
metadata: definitions
|
|
105
141
|
};
|
|
106
142
|
}
|
|
@@ -115,7 +151,7 @@ async function renderFromHTML(html, elements = [], options = {}) {
|
|
|
115
151
|
await initializeCustomElement(url);
|
|
116
152
|
}
|
|
117
153
|
|
|
118
|
-
const elementTree =
|
|
154
|
+
const elementTree = getParse(html)(html);
|
|
119
155
|
const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
|
|
120
156
|
|
|
121
157
|
return {
|