Build and dev setup

dnsimple · Dec 19, 2024 · b1fcd20 · b1fcd20
1 parent 8021012
commit b1fcd20
Show file tree

Hide file tree

Showing 7 changed files with 682 additions and 41 deletions.
diff --git a/_widget/index.html b/_widget/index.html
@@ -4,7 +4,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 + Vue</title>
+    <title>DNSimple Support Widget</title>
   </head>
   <body>
     <div id="support-widget"></div>

diff --git a/_widget/package.json b/_widget/package.json
diff --git a/_widget/src/components/app/component.vue b/_widget/src/components/app/component.vue
@@ -19,6 +19,10 @@ import Articles from '../articles/component.vue';
 import Prompt from '../prompt/component.vue';
 import Welcome from '../welcome/component.vue';
 
+import "./reset.scss"
+import "./variables.scss"
+import "./style.scss"
+
 const ANIMATION_TIMEOUT = 500;
 
 export default {
@@ -131,9 +135,3 @@ export default {
 };
 </script>
 
-<style lang="sass">
-// @import "./reset.scss"
-// @import "./variables.scss"
-@import "./style.scss"
-</style>
-
diff --git a/_widget/src/components/header/component.vue b/_widget/src/components/header/component.vue
@@ -32,9 +32,3 @@ export default {
   }
 };
 </script>
-
-<style lang="sass">
-@import "./style.scss"
-</style>
-
-
diff --git a/_widget/vite.config.js b/_widget/vite.config.js
@@ -1,6 +1,22 @@
+import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import includeCss from 'vite-plugin-css-injected-by-js';
 
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue(), includeCss()],
+  build: {
+    outDir: './output/support',
+    lib: {
+      entry: resolve(__dirname, 'src/main.js'),
+      name: 'Support Widget',
+      fileName: 'widget',
+      formats: ['umd']
+    },
+    rollupOptions: {
+      output: {
+        manualChunks: undefined
+      }
+    }
+  }
 });
diff --git a/package.json b/package.json
@@ -2,9 +2,12 @@
   "name": "dnsimple-support",
   "version": "0.0.1",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@vitejs/plugin-vue": "^5.2.1",
     "concurrently": "^9.1.0",
     "copy-webpack-plugin": "^12.0.2",
     "eslint": "^8.57.0",
@@ -15,15 +18,20 @@
     "eslint-plugin-standard": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "rollup-plugin-css-only": "^4.5.2",
+    "sass-embedded": "^1.83.0",
     "tachyons": "^4.12.0",
+    "vite": "^6.0.3",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "webpack": "^5.97.1",
     "webpack-cli": "^5.1.4"
   },
   "scripts": {
-    "build": "./node_modules/.bin/webpack",
+    "build": "./node_modules/.bin/webpack && vite build --config ./_widget/vite.config.js",
     "lint": "eslint content spec --ext .js",
     "lint:fix": "eslint content spec --ext .js --fix",
-    "live": "concurrently 'bundle exec nanoc live' 'bundle exec rake compile'",
+    "live": "concurrently 'bundle exec nanoc live' 'bundle exec rake compile' 'vite serve ./_widget'",
+    "support-widget": "vite serve ./_widget",
     "test": "jest",
     "test:watch": "jest --watch"
   },