Monorepo structure

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
           deno-version: v1.x
 
       - name: Run `zig build`
-        run: zig build
+        run: cd packages/core && zig build
 
       - name: Run `deno test`
-        run: deno test -A
+        run: cd packages/core && deno test -A

.gitignore

@@ -3,3 +3,4 @@
 zig-out
 *.wasm
 *.zip
+node_modules

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "vendor/md4c"]
-	path = vendor/md4c
+[submodule "md4c"]
+	path = packages/core/vendor/md4c
 	url = https://github.com/mity/md4c

package.json

@@ -1,29 +1,17 @@
 {
-  "name": "md4w",
-  "description": "A Markdown renderer written in Zig & C, compiled to WebAssymbly for all JS runtimes.",
-  "version": "0.2.6",
+  "name": "md4w-monorepo",
+  "version": "1.0.0",
+  "description": "",
   "type": "module",
-  "module": "./js/index.js",
-  "main": "./js/index.js",
-  "types": "./js/md4w.d.ts",
-  "exports": {
-    ".": {
-      "unwasm": "./js/unwasm.js",
-      "workerd": "./js/workerd.js",
-      "import": "./js/index.js",
-      "types": "./js/md4w.d.ts"
-    }
+  "license": "MIT",
+  "packageManager": "[email protected]",
+  "engines": {
+    "pnpm": "^9.0.0"
   },
-  "scripts": {
-    "prepublishOnly": "zig build"
-  },
-  "files": [
-    "js/",
-    "README.md"
-  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/ije/md4w"
   },
-  "license": "MIT"
+  "scripts": {},
+  "devDependencies": {}
 }

packages/core/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "md4w",
+  "description": "A Markdown renderer written in Zig & C, compiled to WebAssymbly for all JS runtimes.",
+  "version": "0.2.6",
+  "type": "module",
+  "module": "./js/index.js",
+  "main": "./js/index.js",
+  "types": "./js/md4w.d.ts",
+  "exports": {
+    ".": {
+      "unwasm": "./js/unwasm.js",
+      "workerd": "./js/workerd.js",
+      "import": "./js/index.js",
+      "types": "./js/md4w.d.ts"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "zig build"
+  },
+  "files": [
+    "js/",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ije/md4w"
+  },
+  "license": "MIT"
+}

packages/webcomponent/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/webcomponent/README.md

@@ -0,0 +1,64 @@
+# md4wc
+
+A Web component for rendering Markdown to HTML.
+
+## Features
+
+- ⚡ Insane fast rendering using [md4w](https://github.com/ije/md4w) (written in Zig)
+- ✨ Declarative usage
+- 💡 Lightweight
+- 📘 ESM modules
+
+## Installation
+
+```sh
+npm install md4wc md4c
+# or pnpm install md4wc md4c
+```
+
+## How to use
+
+### Register
+
+Register the `MarkdownContent` and optionally `MarkdownContext`.
+
+```js
+import { MarkdownContent } from "md4wc";
+customElements.define("md-content", new MarkdownContent());
+```
+
+Or you can use the static helper
+
+```js
+import { MarkdownContent } from "md4wc";
+class YourComponent extends MarkdownContent {
+  static {
+    this.register("md-content", YourComponent);
+  }
+}
+
+export default MarkdownContextComponent;
+```
+
+### Usage
+
+Declare your markup and pass the `WASM` module path as `href`. This will initialize the `md4c` module under to hood. But you can do the same thing manually using `import { init } from "md4w`.
+
+```html
+<md-context href="/path/to/md4w.wasm">
+  <md-content></md-content>
+</md-context>
+```
+
+```js
+const md = this.querySelector("md-content");
+md.dispatchEvent(new CustomEvent("render", { detail: "Markdown content" }));
+```
+
+## References
+
+- https://developer.mozilla.org/en-US/docs/Web/API/Web_components
+
+```
+
+```

packages/webcomponent/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "md4wc",
+  "repository": "https://github.com/karesztrk/md4wc",
+  "version": "1.0.1",
+  "description": "",
+  "type": "module",
+  "types": "./types/index.d.ts",
+  "module": "./dist/index.js",
+  "scripts": {
+    "build": "rollup -c && pnpm generate:types",
+    "generate:types": "node ./scripts/generate-types.js",
+    "prepublishOnly": "pnpm build"
+  },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@karesztrk/webcomponent-base": "^1.0.9"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "dts-buddy": "^0.5.1",
+    "prettier": "^3.3.3",
+    "rollup": "^4.19.0"
+  },
+  "peerDependencies": {
+    "md4w": "workspace:*"
+  }
+}

packages/webcomponent/rollup.config.js

@@ -0,0 +1,19 @@
+import terser from "@rollup/plugin-terser";
+import resolve from "@rollup/plugin-node-resolve";
+import { defineConfig } from "rollup";
+
+export default defineConfig({
+  input: "src/index.js",
+  output: [
+    {
+      dir: "dist",
+      format: "es",
+      exports: "named",
+      preserveModules: true,
+      preserveModulesRoot: "src",
+      sourcemap: true,
+    },
+  ],
+  external: ["md4w"],
+  plugins: [resolve(), terser()],
+});

packages/webcomponent/scripts/generate-types.js

@@ -0,0 +1,13 @@
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { createBundle } from "dts-buddy";
+
+const dir = fileURLToPath(new URL("..", import.meta.url));
+const pkg = JSON.parse(fs.readFileSync(`${dir}/package.json`, "utf-8"));
+
+await createBundle({
+  output: `${dir}/types/index.d.ts`,
+  modules: {
+    [pkg.name]: `${dir}/src/index.d.ts`,
+  },
+});

packages/webcomponent/src/MarkdownContent.js

@@ -0,0 +1,29 @@
+import { mdToHtml } from "md4w";
+import { LightElement } from "@karesztrk/webcomponent-base";
+
+class MarkdownContent extends LightElement {
+  /**
+   * @type {string| undefined} content
+   */
+  content;
+
+  constructor() {
+    super();
+
+    this.addEventListener("render", (e) => {
+      if (e instanceof CustomEvent) {
+        const content = e.detail;
+        this.content = content;
+        this.render();
+      }
+    });
+  }
+
+  render() {
+    if (this.content) {
+      this.innerHTML = mdToHtml(this.content);
+    }
+  }
+}
+
+export default MarkdownContent;

packages/webcomponent/src/MarkdownContext.js

@@ -0,0 +1,35 @@
+import { init } from "md4w";
+import { LightElement } from "@karesztrk/webcomponent-base";
+
+class MarkdownContext extends LightElement {
+  constructor() {
+    super();
+    this.init();
+  }
+
+  /**
+   * Initializes the context.
+   * @returns {Promise<void>} href
+   */
+  init() {
+    return new Promise((resolve, reject) => {
+      if (this.href) {
+        init(this.href)
+          .then(() => {
+            resolve();
+          })
+          .catch(() => reject());
+      } else {
+        reject();
+      }
+    });
+  }
+
+  get href() {
+    return this.getAttribute("href");
+  }
+
+  render() {}
+}
+
+export default MarkdownContext;

packages/webcomponent/src/index.js

@@ -0,0 +1,4 @@
+import MarkdownContext from "./MarkdownContext";
+import MarkdownContent from "./MarkdownContent";
+
+export { MarkdownContext, MarkdownContent };

packages/webcomponent/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": ["./*.js", "./src/"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "noEmitOnError": true,
+    "noErrorTruncation": true,
+    "allowSyntheticDefaultImports": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true
+  }
+}

packages/webcomponent/types/index.d.ts

@@ -0,0 +1,23 @@
+declare module 'md4wc' {
+	import type { LightElement } from '@karesztrk/webcomponent-base';
+	export default MarkdownContext;
+	class MarkdownContext extends LightElement {
+		/**
+		 * Initializes the context.
+		 * @returns href
+		 */
+		init(): Promise<void>;
+		get href(): string | null;
+	}
+	export default MarkdownContent;
+	class MarkdownContent extends LightElement {
+		/**
+		 * @type {string| undefined} content
+		 */
+		content: string | undefined;
+	}
+
+	export { MarkdownContext, MarkdownContent };
+}
+
+//# sourceMappingURL=index.d.ts.map

packages/webcomponent/types/index.d.ts.map

@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [],
+	"sources": [],
+	"sourcesContent": [],
+	"mappings": "",
+	"ignoreList": []
+}