fix(render-ssr-error): cyclic dep

quasarframework · Apr 25, 2024 · bd663b5 · bd663b5
1 parent 0be8b2b
commit bd663b5
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 65 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/utils/render-ssr-error/compiled-assets/after-injection b/utils/render-ssr-error/compiled-assets/after-injection
diff --git a/utils/render-ssr-error/compiled-assets/before-injection b/utils/render-ssr-error/compiled-assets/before-injection
diff --git a/utils/render-ssr-error/package.json b/utils/render-ssr-error/package.json
@@ -7,9 +7,9 @@
   "module": "src/index.js",
   "scripts": {
     "lint": "eslint ./ --ext .js,.vue --fix --report-unused-disable-directives",
-    "dev": "cd src-ui && quasar dev",
+    "dev": "cd src-ui && vite",
     "build": "pnpm build:ui && pnpm build:package",
-    "build:ui": "cd src-ui && quasar build",
+    "build:ui": "cd src-ui && vite build",
     "build:package": "node ./build/index.js"
   },
   "author": {
@@ -38,15 +38,16 @@
     "stack-trace": "^1.0.0-pre2"
   },
   "devDependencies": {
-    "@quasar/app-vite": "workspace:*",
     "@quasar/extras": "workspace:*",
+    "@quasar/vite-plugin": "workspace:^",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-quasar": "workspace:*",
     "fs-extra": "^11.1.1",
     "postcss": "^8.4.38",
     "prismjs": "^1.29.0",
     "quasar": "workspace:*",
+    "vite": "^5.2.10",
     "vue": "^3.4.24",
     "vue-router": "^4.3.2"
   }

diff --git a/utils/render-ssr-error/src-ui/.eslintrc.cjs b/utils/render-ssr-error/src-ui/.eslintrc.cjs
@@ -1,4 +1 @@
-
-const lintConfig = require('../.eslintrc.cjs')
-
-module.exports = lintConfig
+module.exports = require('../.eslintrc.cjs')
diff --git a/utils/render-ssr-error/src-ui/index.html b/utils/render-ssr-error/src-ui/index.html
@@ -7,7 +7,7 @@
     <meta name="description" content="<%= productDescription %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 
     <link rel="icon" type="image/png" sizes="128x128" href="https://cdn.quasar.dev/logo-v2/favicon/favicon-128x128.png">
     <link rel="icon" type="image/png" sizes="96x96" href="https://cdn.quasar.dev/logo-v2/favicon/favicon-96x96.png">
@@ -16,6 +16,7 @@
     <link rel="icon" type="image/ico" href="https://cdn.quasar.dev/logo-v2/favicon/favicon.ico">
   </head>
   <body>
-    <!-- quasar:entry-point -->
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/utils/render-ssr-error/src-ui/package.json b/utils/render-ssr-error/src-ui/package.json
@@ -1,5 +1,6 @@
 {
   "name": "do-not-publish-this-folder",
   "version": "1.0.0",
-  "private": true
+  "private": true,
+  "type": "module"
 }
diff --git a/utils/render-ssr-error/src-ui/postcss.config.js b/utils/render-ssr-error/src-ui/postcss.config.js
@@ -1,6 +1,8 @@
-module.exports = {
+import autoprefixer from 'autoprefixer'
+
+export default {
   plugins: [
-    require('autoprefixer')({
+    autoprefixer({
       overrideBrowserslist: [
         'last 4 Chrome versions',
         'last 4 Firefox versions',

diff --git a/utils/render-ssr-error/src-ui/quasar.config.js b/utils/render-ssr-error/src-ui/quasar.config.js
diff --git a/utils/render-ssr-error/src-ui/src/assets/data.js b/utils/render-ssr-error/src-ui/src/assets/data.js
@@ -1,4 +1,4 @@
-export default process.env.DEV
+export default import.meta.env.DEV
   ? {
       error: {
         name: 'ReferenceError',

diff --git a/utils/render-ssr-error/src-ui/src/main.js b/utils/render-ssr-error/src-ui/src/main.js
@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import { Quasar } from 'quasar'
+
+// Import icon libraries
+import '@quasar/extras/roboto-font/roboto-font.css'
+import '@quasar/extras/material-icons/material-icons.css'
+
+// Import Quasar css
+import 'quasar/src/css/index.sass'
+
+// Assumes your root component is App.vue
+// and placed in same folder as main.js
+import App from './App.vue'
+
+const myApp = createApp(App)
+
+myApp.use(Quasar)
+myApp.mount('#app')
diff --git a/...rror/src-ui/src/css/quasar.variables.sass → ...sr-error/src-ui/src/quasar.variables.sass b/...rror/src-ui/src/css/quasar.variables.sass → ...sr-error/src-ui/src/quasar.variables.sass
diff --git a/utils/render-ssr-error/src-ui/vite.config.js b/utils/render-ssr-error/src-ui/vite.config.js
@@ -0,0 +1,50 @@
+import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vitePluginChecker from 'vite-plugin-checker'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+
+import singleFile from './build/vite.plugin.single-file.js'
+
+const rootFolder = fileURLToPath(new URL('.', import.meta.url))
+const resolve = _path => join(rootFolder, _path)
+
+export default defineConfig(() => {
+  return {
+    plugins: [
+      vue({
+        template: { transformAssetUrls }
+      }),
+
+      quasar({
+        sassVariables: 'src/quasar.variables.sass',
+        autoImportComponentCase: 'combined'
+      }),
+
+      vitePluginChecker({
+        root: resolve('../'),
+        eslint: {
+          lintCommand: 'eslint --report-unused-disable-directives "./**/*.{js,mjs,cjs,vue}"'
+        }
+      }),
+
+      singleFile()
+    ],
+
+    resolve: {
+      alias: {
+        src: resolve('src'),
+        quasar: resolve('../../../ui')
+      }
+    },
+
+    build: {
+      outDir: 'dist'
+    },
+
+    server: {
+      open: '/'
+    }
+  }
+})