Works!

garlic-astro/README.md

@@ -0,0 +1,35 @@
+# Astro Starter Kit: Component Package
+
+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
+
+```
+npm create astro@latest -- --template component
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
+
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── index.ts
+├── src
+│   └── MyComponent.astro
+├── tsconfig.json
+├── package.json
+```
+
+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
+
+## 🧞 Commands
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                           |
+| :--------------------- | :----------------------------------------------- |
+| `npm link`              | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components
+| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser)

garlic-astro/index.ts

@@ -0,0 +1,5 @@
+import Garlic from '/home/velocitatem/Documents/Projects/garlic/garlic-astro/src/Garlic.astro';
+import Clove from '/home/velocitatem/Documents/Projects/garlic/garlic-astro/src/Clove.astro';
+
+// export both
+export { Garlic, Clove };

garlic-astro/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "garlic-astro",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "scripts": {},
+  "devDependencies": {
+    "astro": "^2.0.17"
+  },
+  "peerDependencies": {
+    "astro": "^2.0.0-beta.0"
+  },
+  "dependencies": {
+    "jsdom": "^21.1.0"
+  }
+}

garlic-astro/src/Clove.astro

@@ -0,0 +1,29 @@
+---
+let html = Astro.slots.render('default')
+html = await html
+// clean html, remove tabs and new lines and spaces that are not between tags
+html = html.replace(/>\s+</g, '><')
+html = html.replace(/(\r\n|\n|\r|\t)/gm, '')
+html = html.replace(/ +(?= )/g, '')
+import { JSDOM } from "jsdom";
+const dom = new JSDOM(html);
+function encodeTextNodes(node) {
+  if (node.nodeType === 3) {
+    node.nodeValue = Buffer.from(node.nodeValue).toString('base64')
+  } else {
+    for (let i = 0; i < node.childNodes.length; i++) {
+      let val = node.childNodes[i].nodeValue
+      val = val ? val.trim() : val
+      if (node.childNodes[i].nodeType === 3 && val) {
+        node.childNodes[i].nodeValue = Buffer.from(val).toString('base64')
+      } else {
+        encodeTextNodes(node.childNodes[i])
+       }
+    }
+  }
+}
+encodeTextNodes(dom.window.document.body)
+let encodedHtml = dom.serialize()
+---
+<div set:html={encodedHtml}>
+</div>

garlic-astro/src/Garlic.astro

@@ -0,0 +1,5 @@
+---
+---
+<div id="root">
+<slot />
+</div>

garlic-astro/src/MyComponent.astro

@@ -0,0 +1,8 @@
+---
+// Write your component code in this file!
+export interface Props {
+	prefix?: string;
+}
+---
+
+<div>{Astro.props.prefix} My special component</div>

garlic-astro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}