feat: add online-demo

1. enhanced code readability 2. update all deps
hemengke1997 · Oct 16, 2023 · d4dcc64 · d4dcc64
1 parent 7700d95
commit d4dcc64
Show file tree

Hide file tree

Showing 21 changed files with 777 additions and 647 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,39 @@
+name: Github Pages Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 8.7.0
+
+      - name: Install Dependencies
+        run: |
+          pnpm install --no-frozen-lockfile
+
+      - name: Build
+        run: |
+          pnpm run build:pages
+
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@releases/v3
+        with:
+          ACCESS_TOKEN: ${{ secrets.ghb_token }}
+          BRANCH: gh-pages
+          FOLDER: playground/spa/dist
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -17,13 +17,13 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           registry-url: https://registry.npmjs.org/
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.31.0
+          version: 8.7.0
 
       - name: Install Dependencies
         run: pnpm install --no-frozen-lockfile

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - run: npx changelogithub
         env:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install dependencies
         run: npx pnpm install --no-frozen-lockfile

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}
diff --git a/README.md b/README.md
@@ -6,6 +6,9 @@
 
 **在vite的运行时或构建时编译指定目录下的typescript文件，供开发者独立使用**
 
+## 在线示例
+[Demo](https://hemengke1997.github.io/vite-plugin-public-typescript/)
+
 ## 为什么要使用此插件
 
 - 假设你想在页面渲染之前就执行一些js代码，应该怎么办？

diff --git a/migrate-1.3.x-1.5.x.md b/migrate-1.3.x-1.5.x.md
diff --git a/package.json b/package.json
@@ -40,38 +40,38 @@
     "preinstall": "npx only-allow pnpm",
     "up": "pnpm update --i --L",
     "taze": "taze -I -r -w",
-    "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "bump": "bumpp package.json -c --all -p -t"
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "bump": "bumpp package.json -c -p -t --all -x \"pnpm run changelog\""
   },
   "peerDependencies": {
     "vite": "3 || 4"
   },
   "dependencies": {
     "debug": "^4.3.4",
-    "esbuild": "^0.19.2",
+    "esbuild": "^0.19.4",
     "fs-extra": "^11.1.1",
-    "magic-string": "^0.30.3",
+    "magic-string": "^0.30.5",
     "on-change": "^4.0.2",
     "parse5": "^7.1.2",
     "tiny-glob": "^0.2.9",
     "watcher": "^2.3.0"
   },
   "devDependencies": {
-    "@minko-fe/eslint-config": "^1.3.3",
-    "@minko-fe/tsconfig": "^1.3.3",
+    "@minko-fe/eslint-config": "^2.0.0",
+    "@minko-fe/tsconfig": "^2.0.0",
     "@types/debug": "^4.1.9",
     "@types/fs-extra": "^11.0.2",
-    "@types/mock-fs": "^4.13.1",
-    "@types/node": "^20.6.5",
+    "@types/mock-fs": "^4.13.2",
+    "@types/node": "^20.8.6",
     "bumpp": "^9.2.0",
     "conventional-changelog-cli": "^4.1.0",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "mock-fs": "^5.2.0",
     "sirv": "^2.0.3",
-    "taze": "^0.11.2",
+    "taze": "^0.11.4",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.4"
+    "vite": "^4.4.11",
+    "vitest": "^0.34.6"
   }
 }
diff --git a/playground/spa/index.html b/playground/spa/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite + React + TS</title>
+  <title>vite-plugin-public-typescript-demo</title>
 </head>
 
 <body>

diff --git a/playground/spa/package.json b/playground/spa/package.json
@@ -15,12 +15,12 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@vitejs/plugin-react": "^4.1.0",
     "cross-env": "^7.0.3",
-    "typescript": "^4.9.5",
-    "vite": "^4.3.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
     "vite-plugin-public-typescript": "workspace:*"
   }
 }
diff --git a/playground/spa/public-typescript/haha.ts b/playground/spa/public-typescript/haha.ts
@@ -1,4 +1,2 @@
 // @ts-expect-error
-console.log(haha)
-// @ts-expect-error
-console.log(app)
+console.log(haha, '来自vite define的环境变量')
diff --git a/playground/spa/public-typescript/index.ts b/playground/spa/public-typescript/index.ts
@@ -1 +1 @@
-console.log(import.meta.env)
+console.log(import.meta.env, '来自 vite 的  import.meta.env')
diff --git a/playground/spa/public-typescript/manifest.json b/playground/spa/public-typescript/manifest.json
@@ -1,5 +1,5 @@
 {
-  "haha": "/spa/out/haha.bdaaba63.js",
-  "index": "/spa/out/index.fd9d9011.js",
-  "test": "/spa/out/test.e29e5748.js"
+  "haha": "/vite-plugin-public-typescript/out/haha.5ff2aef3.js",
+  "index": "/vite-plugin-public-typescript/out/index.d6349a0d.js",
+  "test": "/vite-plugin-public-typescript/out/test.09b479d0.js"
 }
diff --git a/playground/spa/public-typescript/test.ts b/playground/spa/public-typescript/test.ts
@@ -1 +1 @@
-console.log('test')
+console.log('test', '简单打印一个 test 字符串')
diff --git a/playground/spa/src/App.tsx b/playground/spa/src/App.tsx
@@ -1,27 +1,24 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
+import manifest from '../public-typescript/manifest.json'
 import './App.css'
 
-// const a = manifest.haha
+function formatManifst() {
+  return Object.keys(manifest).map((key) => (
+    <div key={key} style={{ display: 'flex' }}>
+      <div>文件 {key}.ts 的 js uri 是：</div>
+      <div>{(manifest as Record<string, string>)[key]}</div>
+    </div>
+  ))
+}
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <div className='App'>
+      <h3>以下都是 vite-plugin-public-typescript 插件编译后，通过 manifest.json 文件获取的：</h3>
+      <div>{formatManifst()}</div>
+
       <div>
-        <a href='https://vitejs.dev' target='_blank' rel='noreferrer'>
-          <img src='/spa/vite.svg' className='logo' alt='Vite logo' />
-        </a>
-        <a href='https://reactjs.org' target='_blank' rel='noreferrer'>
-          <img src={reactLogo} className='logo react' alt='React logo' />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className='card'>
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+        <h4>请打开控制台观察以上文件的打印</h4>
       </div>
-      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
     </div>
   )
 }

diff --git a/playground/spa/vite.config.ts b/playground/spa/vite.config.ts
@@ -1,39 +1,17 @@
-import { type HtmlTagDescriptor, defineConfig } from 'vite'
+import { defineConfig } from 'vite'
 import { injectScripts, publicTypescript } from 'vite-plugin-public-typescript'
 import react from '@vitejs/plugin-react'
 import manifest from './public-typescript/manifest.json'
 
 // https://vitejs.dev/config/
-export default defineConfig((env) => ({
-  base: '/spa',
+export default defineConfig(() => ({
+  base: '/vite-plugin-public-typescript/',
   define: {
     haha: JSON.stringify('custom define!'),
     app: JSON.stringify({ hello: 'world' }),
   },
   plugins: [
     react(),
-    {
-      name: 'transform-demo',
-      async transformIndexHtml(html) {
-        const tags: HtmlTagDescriptor[] = [
-          {
-            tag: 'script',
-            attrs: {
-              'src': manifest.test,
-              'data-vppt': true,
-            },
-            injectTo: 'head-prepend',
-          },
-        ]
-
-        html = html.replace('Vite + React + TS', env.command === 'build' ? 'build' : 'serve')
-
-        return {
-          html,
-          tags,
-        }
-      },
-    },
     publicTypescript({
       inputDir: 'public-typescript',
       manifestName: 'manifest',
@@ -55,6 +33,11 @@ export default defineConfig((env) => ({
         },
         injectTo: 'head-prepend',
       },
+      {
+        attrs: {
+          src: manifest.test,
+        },
+      },
     ]),
   ],
   clearScreen: true,

diff --git a/playground/ssr/package.json b/playground/ssr/package.json
@@ -19,13 +19,13 @@
     "sirv": "^2.0.3"
   },
   "devDependencies": {
-    "@types/express": "^4.17.17",
-    "@types/node": "^18.17.15",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
+    "@types/express": "^4.17.19",
+    "@types/node": "^20.8.6",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
     "cross-env": "^7.0.3",
-    "typescript": "^4.9.5",
-    "vite": "^4.4.9",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
     "vite-plugin-public-typescript": "workspace:*"
   }
 }