Update way to build demo and add comments for different App*.vue vers…

…ions

build_client.sh

@@ -2,4 +2,7 @@
 
 rm -rf client/dist
 (cd client && npm run build)
+
+echo
+echo " -> Copying new assets version to public/debugbar.js"
 cp client/dist/assets/debugbar-*.js public/debugbar.js

build_demo.sh

@@ -1,13 +1,18 @@
 #!/bin/bash
 
 ruby ./build_fixtures.rb
+
 rm -rf client/dist-demo
-(cd client/ && VITE_DEMO_MODE=true npm run build)
+(cd client/ && npm run build:demo)
 
 if [ -d "../debugbar.dev/source/assets/debugbar" ]; then
   echo
   echo "debugbar.dev found in parent directory"
   echo " -> Copying assets"
   rm -f ../debugbar.dev/source/assets/debugbar/*
   cp ./client/dist-demo/assets/* ../debugbar.dev/source/assets/debugbar/
+else
+  echo "####################################################"
+  echo "## debugbar.dev was NOT FOUND in parent directory ##"
+  echo "####################################################"
 fi

client/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "build:demo": "vue-tsc && vite build -c vite.demo.config.ts"
   },
   "dependencies": {
     "@heroicons/vue": "^2.1.1",

client/src/App.vue

@@ -1,3 +1,7 @@
+<!-- This is the component used the build the final production assets. -->
+<!-- It's primary used to load the app in the shadow DOM -->
+<!-- See vite.config.ts and other App*.vue for details -->
+
 <script setup lang="ts">
 import Debugbar from "@/Debugbar.vue"
 import { ShadowRoot, ShadowStyle } from "vue-shadow-dom"

client/src/AppDemo.vue

@@ -1,3 +1,9 @@
+<!-- This file is used when building the demo assets. -->
+<!-- The demo is a self-contained version of the app with fixtures. It's meant to be displayed on debugbar.dev -->
+<!-- The demo is built with `./build_demo.sh` which build the assets with the `vite.demo.config.ts` (via `npm run build:demo`) -->
+<!-- The dedicated config allows is to have sourcemap and vite devtools. -->
+<!-- This component load fixturs onMounted and show the app in a shadow DOM. -->
+
 <script setup lang="ts">
 import Debugbar from "@/Debugbar.vue"
 import { ShadowRoot, ShadowStyle } from "vue-shadow-dom"

client/src/AppDev.vue

@@ -1,3 +1,9 @@
+<!-- This file is used when developing the frontend. -->
+<!-- ./index.html will load `dev.ts` which build the app with this AppDev.vue component. -->
+<!-- This component makes pre-registered calls to a rails backend to load data so you can edit -->
+<!--  the app and with HMR, you never have leave the page. -->
+<!-- Use with `npm run dev` and open http://localhost:5173/ -->
+
 <script setup lang="ts">
 import Debugbar from "@/Debugbar.vue"
 import { onMounted } from "vue"

client/src/Debugbar.vue

@@ -1,3 +1,6 @@
+<!-- This is the main component of the debugbar. -->
+<!--It's imported in the different App*.vue components.-->
+
 <script setup lang="ts">
 import { createConsumer } from "@rails/actioncable"
 import { computed, onMounted, reactive, ref } from "vue"

client/tsconfig.node.json

@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "vite.demo.config.ts"]
 }

client/vite.config.ts

@@ -2,27 +2,13 @@ import { fileURLToPath, URL } from "node:url"
 
 import { defineConfig } from "vite"
 import vue from "@vitejs/plugin-vue"
-import { resolve } from "path"
 
-const entryFile = process.env.VITE_DEMO_MODE ? "./src/demo.ts" : "./src/main.ts"
-
-const currentConfig = {
-  entry: resolve(__dirname, entryFile),
-  fileName: "debugbar.js",
-}
-
-const isNotReallyProd = () => {
-  if (process.env.VITE_DEMO_MODE && process.env.NODE_ENV === "production") {
-    return true
-  }
-
-  return process.env.NODE_ENV != "production"
-}
+const isNotProd = () => process.env.NODE_ENV != "production"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
-    __VUE_PROD_DEVTOOLS__: isNotReallyProd(),
+    __VUE_PROD_DEVTOOLS__: isNotProd(),
   },
   plugins: [
     vue({
@@ -42,12 +28,12 @@ export default defineConfig({
   },
   build: {
     manifest: true,
-    sourcemap: isNotReallyProd(),
+    sourcemap: isNotProd(),
     emptyOutDir: false,
-    outDir: process.env.VITE_DEMO_MODE ? "./dist-demo" : "./dist",
+    outDir: "./dist",
     rollupOptions: {
       input: {
-        debugbar: fileURLToPath(new URL(entryFile, import.meta.url)),
+        debugbar: fileURLToPath(new URL("./src/main.ts", import.meta.url)),
       },
     },
   },

client/vite.demo.config.ts

@@ -0,0 +1,38 @@
+import { fileURLToPath, URL } from "node:url"
+
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: {
+    __VUE_PROD_DEVTOOLS__: true, // nice for demo mode
+  },
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // This is because I embed the ruby logo SVG as a vue component.
+          // There is probably a better way.
+          isCustomElement: (tag) => tag.includes(":"),
+        },
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  build: {
+    manifest: true,
+    sourcemap: true, // very nice for demo mode
+    emptyOutDir: false,
+    outDir: "./dist-demo",
+    rollupOptions: {
+      input: {
+        debugbar: fileURLToPath(new URL("./src/demo.ts", import.meta.url)),
+      },
+    },
+  },
+})