@livestore/devtools-vite 0.3.0-dev.12 → 0.3.0-dev.14

package/dist/plugin.js

@@ -1,52 +1,76 @@
-import fs from 'node:fs';
 import path from 'node:path';
 export const livestoreDevtoolsPlugin = (options) => {
     return {
-        name: 'devtools-vite',
+        name: '@livestore/devtools-vite',
         // `vite dev` support
         configureServer: (server) => {
-            server.middlewares.use('/_devtools.html', async (_, res) => {
+            server.middlewares.use('/_livestore', async (_, res) => {
                 res.setHeader('Content-Type', 'text/html');
-                const template = makeIndexHtml({ schemaPath: options.schemaPath });
-                const html = await server.transformIndexHtml('/_devtools.html', template);
-                res.end(html);
+                const schemaPath = path.resolve(options.schemaPath);
+                const bundleDir = path.join(import.meta.dirname, '..', 'dist', 'devtools-bundle');
+                const bundlePath = path.resolve(bundleDir, 'index.js');
+                const cssPath = path.resolve(bundleDir, 'devtools-vite.css');
+                const template = makeIndexHtml({ schemaPath, bundlePath, cssPath });
+                const html = await server.transformIndexHtml('/_livestore', template);
+                // Remove line that contains `vinxi/runtime`
+                const trimmedHtml = html
+                    .split('\n')
+                    .filter((line) => !line.includes('vinxi/runtime'))
+                    .join('\n');
+                res.end(trimmedHtml);
             });
         },
-        // `vite build` support below
         config: (config) => {
-            if (config.build === undefined) {
-                config.build = {};
-            }
-            if (config.build.rollupOptions === undefined) {
-                config.build.rollupOptions = {};
+            if (config.optimizeDeps === undefined) {
+                config.optimizeDeps = {};
             }
-            if (config.build.rollupOptions.input === undefined) {
-                config.build.rollupOptions.input = {
-                    main: path.resolve('./index.html'),
-                };
+            if (config.optimizeDeps.exclude === undefined) {
+                config.optimizeDeps.exclude = [];
             }
-            if (isRecord(config.build.rollupOptions.input)) {
-                config.build.rollupOptions.input.devtools = 'virtual:_devtools.html';
-                // config.build.rollupOptions.input.devtools = '_devtools.html'
+            const toAdd = ['@livestore/devtools-vite', '@livestore/wa-sqlite'];
+            for (const dep of toAdd) {
+                if (!config.optimizeDeps.exclude.includes(dep)) {
+                    config.optimizeDeps.exclude.push(dep);
+                }
             }
             return config;
         },
-        writeBundle: (_) => {
-            fs.renameSync(path.join(_.dir, 'virtual:_devtools.html'), path.join(_.dir, '_devtools.html'));
-        },
-        resolveId: (id) => {
-            if (id === 'virtual:_devtools.html') {
-                return id;
-            }
-        },
-        load: (id) => {
-            if (id === 'virtual:_devtools.html') {
-                return makeIndexHtml({ schemaPath: options.schemaPath });
-            }
-        },
+        // `vite build` support below
+        // TODO maybe bring back at some point
+        // config: (config) => {
+        //   if (config.build === undefined) {
+        //     config.build = {}
+        //   }
+        //   if (config.build.rollupOptions === undefined) {
+        //     config.build.rollupOptions = {}
+        //   }
+        //   if (config.build.rollupOptions.input === undefined) {
+        //     config.build.rollupOptions.input = {
+        //       main: path.resolve('./index.html'),
+        //     }
+        //   }
+        //   if (isRecord(config.build.rollupOptions.input)) {
+        //     config.build.rollupOptions.input.devtools = 'virtual:_devtools.html'
+        //     // config.build.rollupOptions.input.devtools = '_devtools.html'
+        //   }
+        //   return config
+        // },
+        // writeBundle: (_) => {
+        //   fs.renameSync(path.join(_.dir!, 'virtual:_devtools.html'), path.join(_.dir!, '_devtools.html'))
+        // },
+        // resolveId: (id) => {
+        //   if (id === 'virtual:_devtools.html') {
+        //     return id
+        //   }
+        // },
+        // load: (id) => {
+        //   if (id === 'virtual:_devtools.html') {
+        //     return makeIndexHtml({ schemaPath: options.schemaPath })
+        //   }
+        // },
     };
 };
-const makeIndexHtml = ({ schemaPath }) => {
+const makeIndexHtml = ({ schemaPath, bundlePath, cssPath, }) => {
     return /*html*/ `
 <!doctype html>
 <html lang="en">
@@ -59,25 +83,24 @@ const makeIndexHtml = ({ schemaPath }) => {
   <body>
     <div id="root"></div>
     <script type="module">
+      import '${cssPath}'
       // NOTE we need to re-export dependencies from "@livestore/devtools-react"
       // as it's not a direct dependency of the Vite setup of a plugin user
-      import '@livestore/devtools-vite/index.css'
-      import { mountDevtools } from '@livestore/devtools-vite/devtools'
-      import sharedWorker from '@livestore/web/shared-worker?sharedworker'
-      import { schema } from '${path.resolve(schemaPath)}'
+      import { run } from '${bundlePath}'
+      import { schema } from '${schemaPath}'
+      import sharedWorker from '@livestore/adapter-web/shared-worker?sharedworker'
 
-      mountDevtools({
+      run({
         schema,
-        rootEl: document.getElementById('root'),
-        sharedWorker,
         license: ${process.env.LSD_LICENSE} ? '${process.env.LSD_LICENSE}' : undefined,
         // Mode will be provided via URL search params
         mode: undefined,
+        sharedWorker,
       })
     </script>
   </body>
 </html>
 	`;
 };
-const isRecord = (value) => typeof value === 'object' && value !== null;
+// const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null
 //# sourceMappingURL=plugin.js.map

package/package.json

@@ -1,32 +1,12 @@
 {
   "name": "@livestore/devtools-vite",
-  "version": "0.3.0-dev.12",
+  "version": "0.3.0-dev.14",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/plugin.d.ts",
       "default": "./dist/plugin.js"
     },
-    "./devtools": {
-      "types": "./dist/devtools.d.ts",
-      "default": "./dist/devtools.js"
-    },
-    "./index.css": {
-      "default": "./index.css"
-    }
-  },
-  "dependencies": {
-    "@livestore/devtools-react": "0.3.0-dev.12",
-    "@livestore/web": "0.3.0-dev.12"
-  },
-  "devDependencies": {
-    "vite": "^6.0.11"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch"
+    "./build": "./build.ts"
   }
 }