actions: add docs build workflow config

Author: ChrisUser

.eslintrc.cjs

@@ -2,16 +2,16 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", "docs", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },

.github/workflows/docs.yml

@@ -0,0 +1,30 @@
+name: Build and Deploy
+on:
+  push:
+    paths: ["src/**"] # Trigger the action only when files change in the folders defined here
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+      - name: Install and Build 🔧
+        run: | # Install packages and build the demo project
+          yarn install
+          yarn build-docs
+      - name: Get commit info
+        shell: bash
+        run: |
+          echo "sha_short=$(git rev-parse --short "$GITHUB_SHA")" >> "$GITHUB_ENV"
+      - name: Deploy 🚀
+        uses: crazy-max/ghaction-github-pages@v3
+        with:
+          target_branch: docs
+          build_dir: docs
+          commit_message: "Deploying to docs from ${{ env.sha_short }}"
+          keep_history: false
+          jekyll: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+docs
 dist
 dist-ssr
 *.local

package.json

@@ -29,7 +29,8 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "build": "tsc --p ./tsconfig-build.json && vite build --mode production",
+    "build-docs": "tsc --p ./tsconfig-build-docs.json && vite build --mode docs",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prepublishOnly": "yarn build"

src/App.css

@@ -1,3 +1,29 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .full-width {
   width: 100%;
 }

src/index.css

@@ -1,10 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App.tsx"
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 )

src/main.tsx

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["lib"]
+}

tsconfig-build-docs.json

@@ -6,34 +6,63 @@ import react from "@vitejs/plugin-react-swc"
 import dts from "vite-plugin-dts"
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), dts({ include: ["lib"] })],
-  build: {
-    lib: {
-      entry: resolve(__dirname, "lib/main.ts"),
-      formats: ["es"],
-    },
-    rollupOptions: {
-      external: ["react", "react/jsx-runtime"],
-      input: Object.fromEntries(
-        // https://rollupjs.org/configuration-options/#input
-        glob.sync("lib/**/*.{ts,tsx}").map((file) => [
-          // 1. The name of the entry point
-          // lib/nested/foo.js becomes nested/foo
-          relative("lib", file.slice(0, file.length - extname(file).length)),
-          // 2. The absolute path to the entry file
-          // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
-          fileURLToPath(new URL(file, import.meta.url)),
-        ])
-      ),
-      output: {
-        // assetFileNames: '[name][extname]',
-        assetFileNames: (assetInfo) => {
-          const assetName = assetInfo.name?.split(".").at(0)
-          return `${assetName === "style" ? "index" : "[name]"}[extname]`
+export default defineConfig(({ mode }) => {
+  if (mode === "docs") {
+    return {
+      plugins: [react(), dts({ exclude: ["lib"] })],
+      build: { outDir: "docs" },
+      /* build: {
+        rollupOptions: {
+          external: ["react", "react/jsx-runtime"],
+          input: resolve(__dirname, "index.html"),
+          output: {
+            dir: resolve(__dirname, "docs"),
+            // assetFileNames: '[name][extname]',
+            assetFileNames: (assetInfo) => {
+              const assetName = assetInfo.name?.split(".").at(0)
+              return `${assetName === "style" ? "index" : "[name]"}[extname]`
+            },
+            entryFileNames: "[name].js",
+          },
+        },
+      },*/
+    }
+  }
+  if (mode === "production") {
+    return {
+      plugins: [react(), dts({ include: ["lib"] })],
+      build: {
+        lib: {
+          entry: resolve(__dirname, "lib/main.ts"),
+          formats: ["es"],
+        },
+        rollupOptions: {
+          external: ["react", "react/jsx-runtime"],
+          input: Object.fromEntries(
+            // https://rollupjs.org/configuration-options/#input
+            glob.sync("lib/**/*.{ts,tsx}").map((file) => [
+              // 1. The name of the entry point
+              // lib/nested/foo.js becomes nested/foo
+              relative(
+                "lib",
+                file.slice(0, file.length - extname(file).length)
+              ),
+              // 2. The absolute path to the entry file
+              // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
+              fileURLToPath(new URL(file, import.meta.url)),
+            ])
+          ),
+          output: {
+            // assetFileNames: '[name][extname]',
+            assetFileNames: (assetInfo) => {
+              const assetName = assetInfo.name?.split(".").at(0)
+              return `${assetName === "style" ? "index" : "[name]"}[extname]`
+            },
+            entryFileNames: "[name].js",
+          },
         },
-        entryFileNames: "[name].js",
       },
-    },
-  },
+    }
+  }
+  return {}
 })