@projectevergreen/astro-wcc 0.1.2 → 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/.nvmrc +1 -0
- package/README.md +15 -1
- package/TODO.md +4 -4
- package/package.json +3 -3
- package/server.js +0 -2
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
24.4.0
|
package/README.md
CHANGED
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
An [Astro](https://astro.build/) integration for SSR Web Components using [WCC](https://github.com/ProjectEvergreen/wcc).
|
|
4
4
|
|
|
5
|
+
> See this [demonstration repo](https://github.com/thescientist13/astro-wcc) for an example of using this plugin.
|
|
6
|
+
|
|
5
7
|
## Usage
|
|
6
8
|
|
|
7
9
|
1. Install the plugin into your Astro project
|
|
8
10
|
```sh
|
|
9
|
-
$ npm i @projectevergreen/astro-wcc
|
|
11
|
+
$ npm i -D @projectevergreen/astro-wcc
|
|
10
12
|
```
|
|
11
13
|
1. Then add it to your Astro configuration file
|
|
12
14
|
```js
|
|
@@ -17,6 +19,18 @@ An [Astro](https://astro.build/) integration for SSR Web Components using [WCC](
|
|
|
17
19
|
integrations: [ astroWcc() ]
|
|
18
20
|
});
|
|
19
21
|
```
|
|
22
|
+
1. You can now use a component in an Astro file
|
|
23
|
+
```html
|
|
24
|
+
<!-- src/pages/index.astro -->
|
|
25
|
+
<html lang="en">
|
|
26
|
+
<head>
|
|
27
|
+
<script src="../components/greeting.js"></script>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<x-greeting></x-greeting>
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|
|
33
|
+
```
|
|
20
34
|
|
|
21
35
|
## Caveats
|
|
22
36
|
|
package/TODO.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
1. [
|
|
2
|
-
1. [
|
|
1
|
+
1. [x] Create as npm package
|
|
2
|
+
1. [x] clean up console logs - https://github.com/ProjectEvergreen/astro-wcc/issues/1
|
|
3
3
|
1. [ ] Client hints - track as issue
|
|
4
4
|
```
|
|
5
5
|
<x-greeting client:visible></x-greeting>
|
|
6
6
|
```
|
|
7
|
-
1. [
|
|
8
|
-
1. [
|
|
7
|
+
1. [x] auto mapping imports - track as issue - https://github.com/ProjectEvergreen/astro-wcc/issues/2
|
|
8
|
+
1. [x] additional plugin configurations? - track as question - https://github.com/ProjectEvergreen/astro-wcc/issues/3
|
|
9
9
|
```js
|
|
10
10
|
injectScript("head-inline", readFileSync(new URL("./client-shim.min.js", import.meta.url), { encoding: "utf-8" }));
|
|
11
11
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@projectevergreen/astro-wcc",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "An Astro integration for SSR Web Components using WCC",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"SSR"
|
|
22
22
|
],
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"astro": "^
|
|
24
|
+
"astro": "^5.16.6"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"wc-compiler": "
|
|
27
|
+
"wc-compiler": "~0.18.0"
|
|
28
28
|
}
|
|
29
29
|
}
|
package/server.js
CHANGED
|
@@ -7,14 +7,12 @@ async function check(tagName) {
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
async function renderToStaticMarkup(tagName, props, slots) {
|
|
10
|
-
console.log('renderToStaticMarkup', { tagName, props, slots })
|
|
11
10
|
const suffix = tagName.split('-')[1];
|
|
12
11
|
const attributes = Object.entries(props).map(([key, value]) => ` ${key}="${value}"`).join('');
|
|
13
12
|
|
|
14
13
|
const { html } = await renderFromHTML(`<${tagName} ${attributes}></${tagName}>`, [
|
|
15
14
|
new URL(`./src/components/${suffix}.js`, CWD_URL)
|
|
16
15
|
]);
|
|
17
|
-
console.log({ html });
|
|
18
16
|
|
|
19
17
|
return { html };
|
|
20
18
|
}
|