[add] first Testing version

EasyWebApp · Jan 24, 2024 · 2bf4ecc · 2bf4ecc
commit 2bf4ecc
Show file tree

Hide file tree

Showing 9 changed files with 3,085 additions and 0 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,26 @@
+name: CI & CD
+on:
+    push:
+        tags:
+            - v*
+jobs:
+    Build-and-Publish:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - uses: pnpm/action-setup@v2
+              with:
+                  version: 8
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  registry-url: https://registry.npmjs.org
+                  cache: pnpm
+            - name: Install Dependencies
+              run: pnpm i --frozen-lockfile
+
+            - name: Build & Publish
+              run: npm publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+package-lock.json
+yarn.lock
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+
+. "$(dirname "$0")/_/husky.sh"
+
+npm test
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,2 @@
+.husky/
+.github/
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers = false
diff --git a/ReadMe.md b/ReadMe.md
@@ -0,0 +1,88 @@
+# Parcel MDX transformer
+
+Unofficial [MDX][1] 3 [transformer plugin][2] for [Parcel][3] 2
+
+## React usage
+
+### Installation
+
+```shell
+npm init -y
+npm i react react-dom
+npm i parcel @parcel/config-default parcel-transformer-mdx -D
+```
+
+### `package.json`
+
+```json
+{
+    "scripts": {
+        "start": "parcel ./src/index.html",
+        "build": "parcel build ./src/index.html --public-url ."
+    }
+}
+```
+
+### `.parcelrc`
+
+```json
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{md,mdx}": ["parcel-transformer-mdx"]
+    }
+}
+```
+
+### `index.html`
+
+```html
+<!doctype html>
+<html>
+    <head>
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/prismjs@1.29.0/themes/prism-okaidia.css"
+        />
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <script type="module" src="index.jsx"></script>
+    </body>
+</html>
+```
+
+### `index.jsx`
+
+```jsx
+import { createRoot } from 'react-dom/client';
+
+import Index from './index.mdx';
+
+const root = createRoot(document.querySelector('#root'));
+
+root.render(<Index />);
+```
+
+### `index.mdx`
+
+```markdown
+---
+title: Hello MDX
+---
+
+# Hello MDX
+
+https://react.dev/
+
+https://www.youtube.com/watch?v=VEoMT8pAxMA
+```
+
+## JSX compatible engines usage
+
+-   WebCell example: https://github.com/EasyWebApp/BootCell-document
+
+[1]: https://mdxjs.com/
+[2]: https://parceljs.org/plugin-system/transformer/
+[3]: https://parceljs.org/
diff --git a/index.js b/index.js
@@ -0,0 +1,41 @@
+import { Transformer } from '@parcel/plugin';
+import { compile } from '@mdx-js/mdx';
+import RemarkGFM from 'remark-gfm';
+import RehypePrism from '@mapbox/rehype-prism';
+import remarkEmbedder from '@remark-embedder/core';
+import oembedTransformer from '@remark-embedder/transformer-oembed';
+import RemarkFrontmatter from 'remark-frontmatter';
+
+const RemarkEmbedder = remarkEmbedder['default'],
+    OembedTransformer = oembedTransformer['default'];
+
+export default new Transformer({
+    async loadConfig({ config }) {
+        const { contents } = await config.getConfig(['tsconfig.json']);
+
+        return contents;
+    },
+    async transform({ asset, config }) {
+        /**
+         * @type {import('types-tsconfig').TSConfigJSON['compilerOptions']}
+         */
+        const { jsx, jsxImportSource } = config.compilerOptions;
+
+        const source = await asset.getCode();
+
+        const vFile = await compile(source, {
+            jsxRuntime: jsx === 'react' ? 'classic' : 'automatic',
+            jsxImportSource,
+            remarkPlugins: [
+                RemarkGFM,
+                [RemarkEmbedder, { transformers: [OembedTransformer] }],
+                RemarkFrontmatter
+            ],
+            rehypePlugins: [RehypePrism]
+        });
+        asset.type = 'jsx';
+        asset.setCode(vFile + '');
+
+        return [asset];
+    }
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+    "name": "parcel-transformer-mdx",
+    "version": "0.3.0",
+    "license": "LGPL-3.0-or-later",
+    "author": "shiy2008@gmail.com",
+    "type": "module",
+    "main": "index.js",
+    "dependencies": {
+        "@mapbox/rehype-prism": "^0.9.0",
+        "@mdx-js/mdx": "^3.0.0",
+        "@parcel/plugin": "^2.11.0",
+        "@remark-embedder/core": "^3.0.2",
+        "@remark-embedder/transformer-oembed": "^3.0.0",
+        "remark-frontmatter": "^5.0.0",
+        "remark-gfm": "^4.0.0",
+        "types-tsconfig": "^2.0.2"
+    },
+    "devDependencies": {
+        "husky": "^8.0.3",
+        "lint-staged": "^15.2.0",
+        "prettier": "^3.2.4"
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "tabWidth": 4
+    },
+    "lint-staged": {
+        "*.{md,json,yml,js}": "prettier --write"
+    },
+    "scripts": {
+        "prepare": "husky install",
+        "test": "lint-staged"
+    }
+}