build: separate app and lib configs

.github/workflows/build.yaml

@@ -20,7 +20,10 @@ jobs:
         run: npm ci
 
       - name: Build the app
-        run: npm run build
+        run: npm run build:app
+
+      - name: Build in lib mode
+        run: npm run build:lib
 
   lint:
     runs-on: ubuntu-latest

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
         run: npm ci
 
       - name: Build the app
-        run: npm run build
+        run: npm run build:app
 
       - name: Configure CNAME
         run: echo spex.zazuko.com > dist/CNAME

package.json

@@ -5,9 +5,10 @@
   "type": "module",
   "scripts": {
     "serve": "vite",
-    "build": "vite build",
+    "build:app": "vite build",
+    "build:lib": "vite build -c vite.umd.config.js",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
-    "prepack": "npm run build",
+    "prepack": "npm run build:lib",
     "release": "changeset publish"
   },
   "main": "dist/spex.js",

src/registerServiceWorker.ts

@@ -2,8 +2,10 @@
 
 import { register } from 'register-service-worker'
 
+const baseUrl = process.env.BASE_URL || ''
+
 if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
+  register(`${baseUrl}/sw.js`, {
     ready() {
       console.log(
         'App is being served from cache by a service worker.\n' +

src/views/ShaclEditor.vue

@@ -52,8 +52,8 @@ import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 import '@rdfjs-elements/rdf-editor'
 import rdfEnvironment from '@zazuko/env/web'
-import { tablesFromSHACL } from '../shacl.js'
-import { rdf, sh } from '../namespace.js'
+import { tablesFromSHACL } from '../shacl'
+import { rdf, sh } from '../namespace'
 import ResourceCard from '../components/ResourceCard.vue'
 
 const formats = [...parsers.keys()]

vite.config.js

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
-import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
 
@@ -73,16 +72,6 @@ export default defineConfig({
   },
   build: {
     outDir: '../dist',
-    sourcemap: true,
-    rollupOptions: {
-      plugins: [
-        rollupNodePolyFill(),
-      ],
-    },
-    lib: {
-      entry: 'index.ts',
-      name: 'spex',
-      fileName: 'spex'
-    }
-  },
+    emptyOutDir: true,
+  }
 })

vite.umd.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
+import config from './vite.config.js'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  ...config,
+  build: {
+    outDir: '../dist',
+    emptyOutDir: true,
+    sourcemap: true,
+    rollupOptions: {
+      plugins: [
+        rollupNodePolyFill(),
+      ],
+    },
+    lib: {
+      entry: 'index.ts',
+      name: 'spex',
+      fileName: 'spex'
+    }
+  },
+})