chore: convert docpage to vite

ulixee · Feb 1, 2024 · 6117454 · 6117454
1 parent 55ab824
commit 6117454
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 3,380 deletions.
diff --git a/.github/workflows/js-branch.yml b/.github/workflows/js-branch.yml
@@ -49,8 +49,11 @@ jobs:
         run: yarn build
         working-directory: ./hero
 
+      - name: Set timeout
+        run: yarn config set network-timeout 1000000 -g
+
       - name: Build modules
-        run: yarn && yarn build:dist --network-timeout 1000000
+        run: yarn && yarn build:dist
 
       - name: Publish branch
         run: |

diff --git a/cloud/main/env.ts b/cloud/main/env.ts
@@ -1,6 +1,5 @@
-import { loadEnv, parseEnvBool, parseEnvList, parseEnvPath } from '@ulixee/commons/lib/envUtils';
+import { loadEnv, parseEnvBool, parseEnvPath } from '@ulixee/commons/lib/envUtils';
 import Identity from '@ulixee/crypto/lib/Identity';
-import * as Path from 'path';
 
 loadEnv(process.cwd());
 loadEnv(__dirname);

diff --git a/datastore/core/endpoints/DocpageRoutes.ts b/datastore/core/endpoints/DocpageRoutes.ts
@@ -77,9 +77,7 @@ export default class DocpageRoutes {
     }
 
     if (
-      params[2].startsWith('/js/') ||
-      params[2].startsWith('/css/') ||
-      params[2].startsWith('/img/') ||
+      params[2].startsWith('/assets/') ||
       params[2] === '/favicon.ico'
     ) {
       req.url = params[2];

diff --git a/datastore/docpage/babel.config.js b/datastore/docpage/babel.config.js
diff --git a/datastore/docpage/index.html b/datastore/docpage/index.html
@@ -1,19 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Ulixee</title>
   </head>
   <body>
     <noscript>
       <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
-        JavaScript enabled. Please enable it to continue.</strong
+        >We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it
+        to continue.</strong
       >
     </noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/datastore/docpage/package.json b/datastore/docpage/package.json
@@ -2,27 +2,21 @@
   "name": "@ulixee/datastore-docpage",
   "version": "2.0.0-alpha.25",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --mode production",
-    "build:dist": "cross-env BUILD_DIR=\"build-dist\" vue-cli-service build --mode production",
-    "lint": "vue-cli-service lint"
+    "serve": "vite",
+    "watch": "vite build -w",
+    "build": "vite build",
+    "build:dist": "cross-env BUILD_DIR=\"build-dist\" vite build",
+    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
     "@headlessui/vue": "^1.5.0",
     "@heroicons/vue": "^2.0.16",
     "@tailwindcss/forms": "^0.5.0",
     "@types/lodash.kebabcase": "^4.1.7",
     "@types/node": "^18.19.10",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/compiler-sfc": "^3.2.21",
     "autoprefixer": "^10.4.2",
     "axios": "^1.6.7",
-    "babel-plugin-prismjs": "^2.1.0",
     "concurrently": "^6.2.2",
-    "core-js": "^3.21.1",
     "eslint": "^8.17.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
@@ -55,12 +49,15 @@
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2",
     "vue": "^3.2.45",
-    "vue-inline-svg": "^3.1.0",
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
     "@ulixee/datastore-packager": "2.0.0-alpha.25",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "^2.5.4",
+    "vite-plugin-prismjs": "^0.0.11",
+    "vite-svg-loader": "^5.1.0",
+    "@vitejs/plugin-vue": "^1.6.1"
   },
   "nohoist": [
     "**/@typescript-eslint",
@@ -71,9 +68,5 @@
     "**/vue-loader",
     "**/vue-template-compiler",
     "**/postcss"
-  ],
-  "resolutions": {
-    "**/@achrinza/node-ipc": "10.1.6",
-    "**/@achrinza/event-pubsub": ""
-  }
+  ]
 }
diff --git a/datastore/docpage/src/assets/icons/datastore.svg b/datastore/docpage/src/assets/icons/datastore.svg
diff --git a/datastore/docpage/src/layouts/Navbar.vue b/datastore/docpage/src/layouts/Navbar.vue
@@ -3,7 +3,7 @@
     <div class="flex w-full flex-row">
       <ul class="flex w-full flex-row gap-x-3 divide-x">
         <li>
-          <inline-svg :src="require('@/assets/icons/datastore.svg')" class="inline" :height="20" />
+          <DatastoreIcon class="inline" :height="20" />
           <router-link :to="{ name: 'home' }" active-class="font-medium">Documentation</router-link>
         </li>
         <li class="pl-3">
@@ -27,10 +27,12 @@
 </template>
 
 <script lang="ts">
-import * as Vue from 'vue';
+import DatastoreIcon from '@/assets/icons/datastore.svg';
 import { getCredit } from '@/lib/Utils';
+import * as Vue from 'vue';
 
 export default Vue.defineComponent({
+  components: { DatastoreIcon },
   setup() {
     const hasCredit = !!getCredit();
     return { freeCredits: Vue.ref(hasCredit) };

diff --git a/datastore/docpage/src/main.ts b/datastore/docpage/src/main.ts
@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
-import InlineSvg from 'vue-inline-svg';
 import IDocpageConfig from '@ulixee/datastore-packager/interfaces/IDocpageConfig';
 import App from './App.vue';
 import router from './router';
@@ -15,5 +14,4 @@ export const docpageConfigPromise = fetch('docpage.json')
 
 export const app = createApp(App);
 app.use(router);
-app.component('InlineSvg', InlineSvg);
 app.mount('#app');
diff --git a/datastore/docpage/src/vite-env.d.ts b/datastore/docpage/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-svg-loader" />
diff --git a/datastore/docpage/vite.config.js b/datastore/docpage/vite.config.js
@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite';
+import { fileURLToPath } from 'node:url';
+import prismjs from 'vite-plugin-prismjs';
+import vue from '@vitejs/plugin-vue';
+import svgLoader from 'vite-svg-loader';
+
+const outDir = process.env.BUILD_DIR ?? 'build';
+const isDevelopment = !['production', 'test'].includes(process.env.NODE_ENV);
+
+export default defineConfig({
+  base: isDevelopment ? undefined : './',
+  build: {
+    rollupOptions: {
+      input: {
+        index: fileURLToPath(new URL('./index.html', import.meta.url)),
+      },
+    },
+    outDir: fileURLToPath(new URL(`../../${outDir}/datastore/docpage/dist`, import.meta.url)),
+    // needed for commonjs to be activated for @ulixee deps
+    commonjsOptions: { include: [] },
+    emptyOutDir: true,
+    sourcemap: 'inline',
+  },
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          whitespace: 'preserve',
+        },
+      },
+    }),
+    svgLoader({
+      svgoConfig: {
+        multipass: true
+      }
+    }),
+    prismjs({
+      languages: ['javascript', 'typescript', 'shell'],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});
diff --git a/datastore/docpage/vue.config.js b/datastore/docpage/vue.config.js