@projectevergreen/astro-wcc 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# astro-wcc
+
+An [Astro](https://astro.build/) integration for SSR Web Components using [WCC](https://github.com/ProjectEvergreen/wcc).
+
+## Usage
+
+1. Install the plugin into your Astro project
+    ```sh
+    $ npm i astro-wcc
+    ```
+1. Then add it to your Astro configuration file
+    ```js
+    import { defineConfig } from 'astro/config';
+    import astroWcc from 'astro-wcc';
+
+    export default defineConfig({
+      integrations: [ astroWcc() ]
+    });
+    ```
+
+## Caveats
+
+- Currently assumes `<x-${tagName}>` maps to _src/components/${tagName}.js_
+- Client hints (e.g. `<x-greeting client:visible>`) are not supported

package/TODO.md

@@ -0,0 +1,15 @@
+1. [ ] Create as npm package
+1. [ ] Client hints - track as issue
+  ```
+  <x-greeting client:visible></x-greeting>
+  ```
+1. [ ] auto mapping imports - track as issue
+1. [ ] additional plugin configurations? - track as question
+  ```js
+  injectScript("head-inline", readFileSync(new URL("./client-shim.min.js", import.meta.url), { encoding: "utf-8" }));
+
+  // https://github.com/thepassle/custom-elements-ssr/blob/master/astro.js#L3
+  updateConfig({
+    vite: getViteConfiguration()
+  });
+  ```

package/index.js

@@ -0,0 +1,13 @@
+export default function astroWCC() {
+  return {
+    name: "wcc-ssr",
+    hooks: {
+      "astro:config:setup": ({ updateConfig, addRenderer, injectScript }) => {
+        addRenderer({
+          name: "astro-wcc",
+          serverEntrypoint: "astro-wcc/server.js"
+        });
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@projectevergreen/astro-wcc",
+  "version": "0.1.0",
+  "description": "An Astro integration for SSR Web Components using WCC",
+  "main": "index.js",
+  "type": "module",
+  "author": "Owen Buckley <owen@thegreenhouse.io>",
+  "homepage": "https://github.com/ProjectEvergreen/astro-wcc#readme",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ProjectEvergreen/astro-wcc.git"
+  },
+  "keywords": [
+    "Astro",
+    "WCC",
+    "Web Components",
+    "SSR"
+  ],
+  "peerDependencies": {
+    "astro": "^4.8.6"
+  },
+  "dependencies": {
+    "wc-compiler": "^0.13.0"
+  }
+}

package/server.js

@@ -0,0 +1,22 @@
+import { renderFromHTML } from 'wc-compiler';
+
+const CWD_URL = new URL(`file://${process.cwd()}/`);
+
+async function check(tagName) {
+  return tagName.indexOf('-') > 0; 
+}
+
+async function renderToStaticMarkup(tagName, props, slots) {
+  console.log('renderToStaticMarkup', { tagName, props, slots })
+  const suffix = tagName.split('-')[1];
+  const attributes = Object.entries(props).map(([key, value]) => ` ${key}="${value}"`).join('');
+
+  const { html } = await renderFromHTML(`<${tagName} ${attributes}></${tagName}>`, [
+    new URL(`./src/components/${suffix}.js`, CWD_URL)
+  ]);
+  console.log({ html });
+
+  return { html };
+}
+
+export default { check, renderToStaticMarkup };