refactor(demo): build demo using rollup (microformats#242)

aimee-gm · web-flow · commit 625813ce82c7 · 2023-09-14T08:56:04.000+01:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,7 @@
     "plugin:import/typescript",
     "prettier"
   ],
-  "ignorePatterns": ["node_modules/", "dist/", "public/"],
+  "ignorePatterns": ["node_modules/", "dist/", "public/", "**/*.html"],
   "settings": {
     "import/resolver": {
       "node": { "extensions": [".ts"] }
diff --git a/.github/workflows/build_and_test.yaml b/.github/workflows/build_and_test.yaml
@@ -28,8 +28,6 @@ jobs:
         run: yarn test
       - name: Build package
         run: yarn build
-      - name: Build demo
-        run: yarn demo:build
       - name: Upload build artifacts
         uses: actions/upload-artifact@v3
         with:
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
@@ -27,8 +27,6 @@ jobs:
         run: yarn publish --non-interactive
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Build demo pages
-        run: yarn demo:build
       - name: Deploy pages
         uses: peaceiris/actions-gh-pages@v3
         with:
diff --git a/.gitignore b/.gitignore
@@ -104,4 +104,6 @@ dist
 .tern-port
 
 public
-demo/index.html
+demo/dist
+
+.DS_Store
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,3 @@
 dist/
 .nyc_output/
-.cache
+.cache
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -39,7 +39,7 @@ We're more than happy to help with any TypeScript, linting or test problems, or
 
 ### Testing your changes
 
-You can test your changes using the interactive demo. Just run `yarn demo` and visit `http://localhost:1234` to parse a real-world example.
+You can test your changes using the interactive demo. Just run `yarn build` and `yarn demo` and visit `http://localhost:8080` to parse a real-world example.
 
 ## Microformats specifications
 
diff --git a/demo/demo.js b/demo/demo.js
@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/no-unresolved
 import { mf2 } from "../dist/index.mjs";
+import "./demo.css";
 
 const setResult = (result) => {
   const escaped = JSON.stringify(result, null, 2)
diff --git a/demo/index.tpl.html b/demo/index.tpl.html
@@ -1,15 +1,16 @@
 <!doctype html>
 <html>
   <head>
-    <title>{{ name }} demo</title>
-    <link rel="stylesheet" href="./demo.css" />
+    <title>{{ title }}</title>
     <link
       href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"
       rel="stylesheet"
     />
+    {{ links }}
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="{{ description }}" />
     <meta name="keywords" content="{{ keywords }}" />
+    {{ metas }}
   </head>
   <body>
     <nav>
@@ -99,6 +100,6 @@ <h2>Output</h2>
         <a href="{{ licenseUrl }}">{{ license }} Licensed</a>
       </div>
     </footer>
-    <script src="./demo.js" type="module"></script>
+    {{ scripts }}
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -18,11 +18,9 @@
   ],
   "scripts": {
     "prepare": "husky install",
-    "demo:prebuild": "yarn posthtml -o demo/index.html -c posthtml.config.cjs demo/index.tpl.html",
-    "demo": "yarn demo:prebuild && parcel serve demo/index.html",
-    "demo:build": "yarn demo:prebuild && parcel build demo/index.html --out-dir public --public-url ./",
     "prebuild": "rm -rf ./dist",
     "build": "rollup -c",
+    "demo": "http-server public",
     "lint": "eslint --cache './**/*.{ts,js}'",
     "prettier:list": "prettier '**/*.{ts,json,md,html}' --list-different",
     "prettier:fix": "prettier '**/*.{ts,json,md,html}' --write",
@@ -45,6 +43,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-html": "^1.0.2",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.3",
@@ -61,16 +60,15 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.26.0",
     "glob": "^10.3.4",
+    "http-server": "^14.1.1",
     "husky": ">=4",
     "lint-staged": ">=10",
     "microformat-tests": "https://github.com/microformats/tests",
     "mocha": "^10.0.0",
-    "parcel-bundler": "^1.12.5",
-    "posthtml-cli": "^0.10.0",
-    "posthtml-expressions": "^1.9.0",
     "prettier": "^3.0.3",
     "rollup": "^3.25.0",
     "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-import-css": "^3.3.3",
     "source-map-support": "^0.5.19",
     "ts-node": "^10.8.0",
     "typescript": "^4.0.2"
diff --git a/rollup.config.js b/rollup.config.js
@@ -3,6 +3,12 @@ import commonjs from "@rollup/plugin-commonjs";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import terser from "@rollup/plugin-terser";
 import { dts } from "rollup-plugin-dts";
+import html, { makeHtmlAttributes } from "@rollup/plugin-html";
+import { readFileSync } from "fs";
+import css from "rollup-plugin-import-css";
+
+import pkg from "./package.json" assert { type: "json" };
+const { name, description, version, repository, license, keywords } = pkg;
 
 export default [
   {
@@ -43,4 +49,67 @@ export default [
     output: [{ file: "dist/index.d.ts", format: "es" }],
     plugins: [dts()],
   },
+  {
+    input: "./demo/demo.js",
+    output: {
+      dir: "./public",
+      format: "esm",
+      entryFileNames: "assets/bundle-[hash].js",
+    },
+    plugins: [
+      nodeResolve(),
+      commonjs({
+        ignoreGlobal: true,
+      }),
+      css(),
+      html({
+        title: `${name} demo`,
+        template: ({ attributes, files, meta, publicPath, title }) => {
+          const repo = repository.replace("git+", "").replace(".git", "");
+          const scripts = (files.js || [])
+            .map(({ fileName }) => {
+              const attrs = makeHtmlAttributes(attributes.script);
+              return `<script src="${publicPath}${fileName}"${attrs}></script>`;
+            })
+            .join("\n");
+
+          const links = (files.css || [])
+            .map(({ fileName }) => {
+              const attrs = makeHtmlAttributes(attributes.link);
+              return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
+            })
+            .join("\n");
+
+          const metas = meta
+            .map((input) => {
+              const attrs = makeHtmlAttributes(input);
+              return `<meta${attrs}>`;
+            })
+            .join("\n");
+
+          const replacements = {
+            scripts,
+            links,
+            title,
+            name,
+            description,
+            metas,
+            version: `v${version}`,
+            repo,
+            releases: `${repo}/releases`,
+            licenseUrl: `${repo}/blob/main/LICENSE`,
+            npm: `https://npmjs.org/package/${name}`,
+            license,
+            keywords: keywords.join(", "),
+          };
+
+          let template = readFileSync("./demo/index.tpl.html", "utf-8");
+          Object.entries(replacements).forEach(([key, value]) => {
+            template = template.replaceAll(`{{ ${key} }}`, value);
+          });
+          return template;
+        },
+      }),
+    ],
+  },
 ];
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 dist/
 .nyc_output/
 -.cache
 +.cache