[add] GitHub actions of Vercel preview

[fix] many detail bugs
EasyWebApp · Jan 17, 2024 · 48d0798 · 48d0798
1 parent b5f1a69
commit 48d0798
Show file tree

Hide file tree

Showing 20 changed files with 588 additions and 193 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -5,21 +5,40 @@ on:
             - master
 jobs:
     Build-and-Deploy:
+        env:
+            VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+            VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+            VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
         runs-on: ubuntu-latest
         steps:
-            - name: Checkout
-              uses: actions/checkout@v2
-            - name: Use Node.js
-              uses: actions/setup-node@v2-beta
+            - uses: actions/checkout@v3
+
+            - uses: pnpm/action-setup@v2
               with:
-                  node-version: '14'
-            - name: Install & build
+                  version: 8
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: pnpm
+            - name: Install & Build
               run: |
-                  npm install
-                  npm run build
-            - name: Deploy
+                  pnpm i --frozen-lockfile
+                  pnpm build
+
+            - name: Deploy to GitHub pages
               uses: peaceiris/actions-gh-pages@v3
               with:
-                  publish_dir: ./docs
+                  publish_dir: ./dist
                   personal_token: ${{ secrets.GITHUB_TOKEN }}
                   force_orphan: true
+
+            - name: Deploy to Vercel
+              uses: amondnet/vercel-action@v25
+              if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+              with:
+                  vercel-token: ${{ secrets.VERCEL_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+                  vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+                  working-directory: ./dist
+                  vercel-args: --prod
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -0,0 +1,35 @@
+name: Commit preview
+on:
+    push:
+        branches-ignore:
+            - master
+jobs:
+    Build-and-Deploy:
+        env:
+            VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+            VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+            VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+        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
+                  cache: pnpm
+            - name: Install & Build
+              run: |
+                  pnpm i --frozen-lockfile
+                  pnpm build
+
+            - uses: amondnet/vercel-action@v25
+              if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+              with:
+                  vercel-token: ${{ secrets.VERCEL_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+                  vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+                  working-directory: ./dist
diff --git a/.gitignore b/.gitignore
@@ -19,7 +19,7 @@ yarn.lock
 
 # Bundle
 dist/
-.cache/
+.parcel-cache/
 docs/
 
 # IDE

diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,6 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+    }
+}
diff --git a/ReadMe.md b/ReadMe.md
@@ -2,8 +2,8 @@
 
 [Web Components][1] library for GitHub based on [WebCell][2]
 
-[![NPM Dependency](https://david-dm.org/TechQuery/GitHub-Web-Widget.svg)][3]
-[![CI & CD](https://github.com/EasyWebApp/GitHub-Web-Widget/workflows/CI%20&%20CD/badge.svg)][4]
+[![NPM Dependency](https://img.shields.io/librariesio/github/TechQuery/GitHub-Web-Widget.svg)][3]
+[![CI & CD](https://github.com/TechQuery/GitHub-Web-Widget/actions/workflows/main.yml/badge.svg)][4]
 
 [![NPM](https://nodei.co/npm/github-web-widget.png?downloads=true&downloadRank=true&stars=true)][5]
 
@@ -21,56 +21,93 @@ https://tech-query.me/GitHub-Web-Widget/demo/
 
 ## Usage
 
+### Installation
+
 ```shell
-npm install github-web-widget
+npm install dom-renderer web-cell github-web-widget
+npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
+```
+
+### `package.json`
+
+```json
+{
+    "scripts": {
+        "start": "parcel source/index.html --open",
+        "build": "parcel build source/index.html --public-url ."
+    }
+}
+```
+
+### `tsconfig.json`
+
+```json
+{
+    "compilerOptions": {
+        "target": "ES6",
+        "module": "ES2020",
+        "moduleResolution": "Node",
+        "useDefineForClassFields": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "dom-renderer"
+    }
+}
+```
+
+### `.parcelrc`
+
+```json
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+    }
+}
 ```
 
-[`source/index.html`][12]
+### [`source/index.html`][12]
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <title>Your Blog</title>
         <link
             rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+            href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
         />
         <link
             rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css"
+            href="https://unpkg.com/github-markdown-css@5.5.0/github-markdown.css"
         />
         <link
             rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-okaidia.css"
+            href="https://unpkg.com/prismjs@1.29.0/themes/prism-okaidia.css"
         />
-        <script
-            crossorigin
-            src="https://polyfill.app/api/polyfill?features=es.string.match-all,es.array.flat,es.object.from-entries,intersection-observer"
-        ></script>
-        <script src="https://cdn.jsdelivr.net/npm/details-element-polyfill@2.4.0/dist/details-element-polyfill.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/custom-elements-es5-adapter.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/webcomponents-bundle.js"></script>
+        <script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
+        <script src="https://polyfill.web-cell.dev/feature/WebComponents.js"></script>
+        <script src="https://polyfill.web-cell.dev/feature/ElementInternals.js"></script>
+        <script src="https://polyfill.web-cell.dev/feature/Detail.js"></script>
     </head>
     <body>
-        <script src="index.tsx"></script>
+        <script type="module" src="index.tsx"></script>
     </body>
 </html>
 ```
 
-[`source/index.tsx`][13]
+### [`source/index.tsx`][13]
 
-```JavaScript
-import { render, createCell } from 'web-cell';
+```tsx
+import { DOMRenderer } from 'dom-renderer';
 import {
     CommandLine,
     GithubRepository,
     GithubIssue,
     GithubProfile,
     GithubEvents
-} from 'github-web-widget/source';
+} from 'github-web-widget';
 
-render(
+new DOMRenderer().render(
     <main className="container">
         <h1>GitHub Web Widget</h1>
 
@@ -108,8 +145,8 @@ render(
 
 [1]: https://www.webcomponents.org/
 [2]: https://web-cell.dev/
-[3]: https://david-dm.org/TechQuery/GitHub-Web-Widget
-[4]: https://github.com/EasyWebApp/WebCell/actions
+[3]: https://libraries.io/npm/github-web-widget
+[4]: https://github.com/EasyWebApp/GitHub-Web-Widget/actions/workflows/main.yml
 [5]: https://nodei.co/npm/github-web-widget/
 [6]: https://tech-query.me/GitHub-Web-Widget/classes/commandline.commandline-1.html
 [7]: https://tech-query.me/GitHub-Web-Widget/interfaces/profile.githubprofileprops.html

diff --git a/package.json b/package.json
@@ -25,10 +25,10 @@
     "module": "dist/index.js",
     "scripts": {
         "prepare": "husky install",
-        "start": "cd test/  &&  parcel index.html -d ../docs/demo/ --open",
-        "pack-demo": "cd test/  &&  parcel build index.html --public-url . -d ../docs/demo/",
+        "start": "rm -rf .parcel-cache/ docs/demo/  &&  cd test/  &&  parcel index.html --dist-dir ../docs/demo/ --open",
+        "pack-demo": "cd test/  &&  parcel build index.html --public-url . --dist-dir ../docs/demo/",
         "test": "lint-staged",
-        "pack-dist": "cross-env NODE_ENV=build  microbundle --external web-cell,classnames,marked,koajax,prismjs,.+\\.png --globals web-cell=WebCell,classnames=classNames,koajax=KoAJAX,prismjs=Prism --name GithubWebWidget --css-modules true",
+        "pack-dist": "rm -rf .parcel-cache/ dist/  &&  parcel build",
         "pack-docs": "rm -rf docs/  &&  typedoc source/  &&  npm run pack-demo",
         "build": "rm -rf dist/  &&  npm run pack-dist  &&  npm run pack-docs",
         "help": "npm run pack-docs  &&  open-cli docs/index.html",
@@ -48,7 +48,13 @@
     },
     "devDependencies": {
         "@octokit/openapi-types": "^19.1.0",
+        "@parcel/config-default": "~2.11.0",
+        "@parcel/packager-ts": "~2.11.0",
+        "@parcel/transformer-less": "~2.11.0",
+        "@parcel/transformer-typescript-tsc": "~2.11.0",
+        "@parcel/transformer-typescript-types": "~2.11.0",
         "@types/prismjs": "^1.26.3",
+        "@typescript-eslint/eslint-plugin": "^6.19.0",
         "@typescript-eslint/parser": "^6.19.0",
         "cross-env": "^7.0.3",
         "element-internals-polyfill": "^1.3.10",
@@ -58,9 +64,10 @@
         "iterable-observer": "^1.0.1",
         "lint-staged": "^15.2.0",
         "open-cli": "^8.0.0",
-        "parcel": "^2.11.0",
+        "parcel": "~2.11.0",
         "prettier": "^3.2.2",
         "typedoc": "^0.25.7",
+        "typedoc-plugin-mdn-links": "^3.1.12",
         "typescript": "~5.3.3",
         "web-utility": "^4.1.3"
     },