@livestore/devtools-expo 0.3.0-dev.36 → 0.3.0-dev.38

package/dist/metro-config.cjs

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
-const { Effect } = require('@livestore/utils/effect');
+const { Effect, Logger, LogLevel } = require('@livestore/utils/effect');
+// eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
+const { PlatformNode } = require('@livestore/utils/node');
 /**
  * Patches the Metro config to add a middleware via `config.server.enhanceMiddleware`.
  */
@@ -10,32 +12,42 @@ const addLiveStoreDevtoolsMiddleware = (config, options) => {
     if (process.env.CI || !process.stdout.isTTY) {
         return;
     }
-    const viteMiddleware = makeLiveStoreDevtoolsMiddleware(options);
+    const host = options.host ?? 'localhost';
+    const port = options.port ?? 4242;
+    // Needed for @livestore/adapter-expo
+    process.env.EXPO_PUBLIC_LIVESTORE_DEVTOOLS_URL = `http://${host}:${port}`;
+    import('@livestore/adapter-node/devtools')
+        .then(async ({ startDevtoolsServer }) => {
+        startDevtoolsServer({
+            clientSessionInfo: undefined,
+            schemaPath: options.schemaPath,
+            host,
+            port,
+        }).pipe(Effect.provide(PlatformNode.NodeHttpClient.layer), Effect.provide(Logger.prettyWithThread('@livestore/devtools-expo:metro-config')), Logger.withMinimumLogLevel(LogLevel.Debug), Effect.tapCauseLogPretty, Effect.runPromise);
+    })
+        .catch((error) => {
+        console.error(error);
+    });
     const previousEnhanceMiddleware = config.server.enhanceMiddleware;
+    /** Redirects requests to LiveStore DevTools to `http://${host}:${port}/_livestore/${...}` */
+    const redirectMiddleware = (req, res, next) => {
+        if (req.url?.startsWith('/_livestore') == false) {
+            return next();
+        }
+        const redirectUrl = `http://${host}:${port}/_livestore/${req.url.slice('/_livestore'.length)}`;
+        res.writeHead(302, { Location: redirectUrl });
+        res.end();
+    };
     const enhanceMiddleware = (metroMiddleware, server) => {
         const enhancedMiddleware = previousEnhanceMiddleware(metroMiddleware, server);
         return (req, res, next) => req.url?.startsWith('/_livestore')
-            ? viteMiddleware(req, res, () => enhancedMiddleware(req, res, next))
+            ? redirectMiddleware(req, res, () => enhancedMiddleware(req, res, next))
             : enhancedMiddleware(req, res, next);
     };
     config.server.enhanceMiddleware = enhanceMiddleware;
 };
-const makeLiveStoreDevtoolsMiddleware = (options) => {
-    // TODO Once Expo supports proper ESM, we can make this a static import
-    // const viteServerPromise = makeViteServer(options)
-    const viteMiddlewarePromise = import('@livestore/adapter-node/devtools').then(({ makeViteMiddleware }) => makeViteMiddleware({ ...options, mode: { _tag: 'expo' } }).pipe(Effect.runPromise));
-    const middleware = async (req, res, next) => {
-        if (req.url?.startsWith('/_livestore') == false) {
-            return next();
-        }
-        const viteMiddleware = await viteMiddlewarePromise;
-        return viteMiddleware.middlewares(req, res, next);
-    };
-    return middleware;
-};
 // eslint-disable-next-line unicorn/prefer-module
 module.exports = {
     addLiveStoreDevtoolsMiddleware,
-    makeLiveStoreDevtoolsMiddleware,
 };
 //# sourceMappingURL=metro-config.cjs.map

package/dist/metro-config.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"metro-config.cjs","sourceRoot":"","sources":["../src/metro-config.cts"],"names":[],"mappings":";;AAEA,uJAAuJ;AACvJ,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,yBAAyB,CAAwF,CAAA;AAM5I;;GAEG;AACH,MAAM,8BAA8B,GAAG,CAAC,MAAgC,EAAE,OAAgB,EAAE,EAAE;IAC5F,kCAAkC;IAClC,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAC5C,OAAM;IACR,CAAC;IAED,MAAM,cAAc,GAAG,+BAA+B,CAAC,OAAO,CAAC,CAAA;IAE/D,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,CAAC,iBAGjC,CAAA;IAEf,MAAM,iBAAiB,GAAG,CAAC,eAA2B,EAAE,MAAW,EAAc,EAAE;QACjF,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;QAE7E,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,CACxB,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,aAAa,CAAC;YAChC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;YACpE,CAAC,CAAC,kBAAkB,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;IAC1C,CAAC,CAAA;IAED,MAAM,CAAC,MAAM,CAAC,iBAAiB,GAAG,iBAAiB,CAAA;AACrD,CAAC,CAAA;AAED,MAAM,+BAA+B,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC3D,uEAAuE;IACvE,oDAAoD;IACpD,MAAM,qBAAqB,GAAG,MAAM,CAAC,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CACvG,kBAAkB,CAAC,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CACnF,CAAA;IAED,MAAM,UAAU,GAAG,KAAK,EAAE,GAAyB,EAAE,GAAwB,EAAE,IAAgB,EAAE,EAAE;QACjG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,aAAa,CAAC,IAAI,KAAK,EAAE,CAAC;YAChD,OAAO,IAAI,EAAE,CAAA;QACf,CAAC;QAED,MAAM,cAAc,GAAG,MAAM,qBAAqB,CAAA;QAElD,OAAO,cAAc,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;IACnD,CAAC,CAAA;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAOD,iDAAiD;AACjD,MAAM,CAAC,OAAO,GAAG;IACf,8BAA8B;IAC9B,+BAA+B;CAChC,CAAA"}
+{"version":3,"file":"metro-config.cjs","sourceRoot":"","sources":["../src/metro-config.cts"],"names":[],"mappings":"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"}

package/dist/metro-config.d.cts

@@ -1,15 +1,13 @@
-import type * as http from 'node:http';
 import type { MetroConfig } from 'expo/metro-config';
 import type { Options } from './types.js';
 /**
  * Patches the Metro config to add a middleware via `config.server.enhanceMiddleware`.
  */
 declare const addLiveStoreDevtoolsMiddleware: (config: MutableDeep<MetroConfig>, options: Options) => void;
-declare const makeLiveStoreDevtoolsMiddleware: (options: Options) => (req: http.IncomingMessage, res: http.ServerResponse, next: () => void) => Promise<void>;
 /** Remove readonly from all properties */
 type MutableDeep<T> = {
     -readonly [P in keyof T]: MutableDeep<T[P]>;
 };
-export type { addLiveStoreDevtoolsMiddleware, makeLiveStoreDevtoolsMiddleware };
+export type { addLiveStoreDevtoolsMiddleware };
 export type { Options } from './types.js';
 //# sourceMappingURL=metro-config.d.cts.map

package/dist/metro-config.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"metro-config.d.cts","sourceRoot":"","sources":["../src/metro-config.cts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,IAAI,MAAM,WAAW,CAAA;AAKtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,KAAK,EAAc,OAAO,EAAE,MAAM,YAAY,CAAA;AAErD;;GAEG;AACH,QAAA,MAAM,8BAA8B,GAAI,QAAQ,WAAW,CAAC,WAAW,CAAC,EAAE,SAAS,OAAO,SAuBzF,CAAA;AAED,QAAA,MAAM,+BAA+B,GAAI,SAAS,OAAO,WAOxB,IAAI,CAAC,eAAe,OAAO,IAAI,CAAC,cAAc,QAAQ,MAAM,IAAI,kBAWhG,CAAA;AAED,0CAA0C;AAC1C,KAAK,WAAW,CAAC,CAAC,IAAI;IACpB,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5C,CAAA;AAQD,YAAY,EAAE,8BAA8B,EAAE,+BAA+B,EAAE,CAAA;AAC/E,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"metro-config.d.cts","sourceRoot":"","sources":["../src/metro-config.cts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,KAAK,EAAc,OAAO,EAAE,MAAM,YAAY,CAAA;AAErD;;GAEG;AACH,QAAA,MAAM,8BAA8B,GAAI,QAAQ,WAAW,CAAC,WAAW,CAAC,EAAE,SAAS,OAAO,SAwDzF,CAAA;AAED,0CAA0C;AAC1C,KAAK,WAAW,CAAC,CAAC,IAAI;IACpB,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5C,CAAA;AAOD,YAAY,EAAE,8BAA8B,EAAE,CAAA;AAC9C,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@livestore/devtools-expo",
-  "version": "0.3.0-dev.36",
+  "version": "0.3.0-dev.38",
   "sideEffects": false,
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@livestore/adapter-node": "0.3.0-dev.36",
-    "@livestore/utils": "0.3.0-dev.36"
+    "@livestore/adapter-node": "0.3.0-dev.38",
+    "@livestore/utils": "0.3.0-dev.38"
   },
   "devDependencies": {
     "@types/node": "^22.13.10",
@@ -14,6 +14,7 @@
   },
   "files": [
     "package.json",
+    "webui",
     "src",
     "dist"
   ],

package/src/metro-config.cts

@@ -1,7 +1,8 @@
-import type * as http from 'node:http'
+// eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
+const { Effect, Logger, LogLevel } = require('@livestore/utils/effect') as typeof import('@livestore/utils/effect', { with: { "resolution-mode": "import" } })
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
-const { Effect } = require('@livestore/utils/effect') as typeof import('@livestore/utils/effect', { with: { "resolution-mode": "import" } })
+const { PlatformNode } = require('@livestore/utils/node') as typeof import('@livestore/utils/node', { with: { "resolution-mode": "import" } })
 
 import type { MetroConfig } from 'expo/metro-config'
 
@@ -15,46 +16,59 @@ const addLiveStoreDevtoolsMiddleware = (config: MutableDeep<MetroConfig>, option
   if (process.env.CI || !process.stdout.isTTY) {
     return
   }
-
-  const viteMiddleware = makeLiveStoreDevtoolsMiddleware(options)
+  const host = options.host ?? 'localhost'
+  const port = options.port ?? 4242
+
+  // Needed for @livestore/adapter-expo
+  process.env.EXPO_PUBLIC_LIVESTORE_DEVTOOLS_URL = `http://${host}:${port}`
+
+  import('@livestore/adapter-node/devtools')
+    .then(async ({ startDevtoolsServer }) => {
+      startDevtoolsServer({
+        clientSessionInfo: undefined,
+        schemaPath: options.schemaPath,
+        host,
+        port,
+      }).pipe(
+        Effect.provide(PlatformNode.NodeHttpClient.layer),
+        Effect.provide(Logger.prettyWithThread('@livestore/devtools-expo:metro-config')),
+        Logger.withMinimumLogLevel(LogLevel.Debug),
+        Effect.tapCauseLogPretty,
+        Effect.runPromise,
+      )
+    })
+    .catch((error) => {
+      console.error(error)
+    })
 
   const previousEnhanceMiddleware = config.server.enhanceMiddleware as (
     metroMiddleware: Middleware,
     server: any,
   ) => Middleware
 
+  /** Redirects requests to LiveStore DevTools to `http://${host}:${port}/_livestore/${...}` */
+  const redirectMiddleware: Middleware = (req, res, next) => {
+    if (req.url?.startsWith('/_livestore') == false) {
+      return next()
+    }
+
+    const redirectUrl = `http://${host}:${port}/_livestore/${req.url!.slice('/_livestore'.length)}`
+    res.writeHead(302, { Location: redirectUrl })
+    res.end()
+  }
+
   const enhanceMiddleware = (metroMiddleware: Middleware, server: any): Middleware => {
     const enhancedMiddleware = previousEnhanceMiddleware(metroMiddleware, server)
 
     return (req, res, next) =>
       req.url?.startsWith('/_livestore')
-        ? viteMiddleware(req, res, () => enhancedMiddleware(req, res, next))
+        ? redirectMiddleware(req, res, () => enhancedMiddleware(req, res, next))
         : enhancedMiddleware(req, res, next)
   }
 
   config.server.enhanceMiddleware = enhanceMiddleware
 }
 
-const makeLiveStoreDevtoolsMiddleware = (options: Options) => {
-  // TODO Once Expo supports proper ESM, we can make this a static import
-  // const viteServerPromise = makeViteServer(options)
-  const viteMiddlewarePromise = import('@livestore/adapter-node/devtools').then(({ makeViteMiddleware }) =>
-    makeViteMiddleware({ ...options, mode: { _tag: 'expo' } }).pipe(Effect.runPromise),
-  )
-
-  const middleware = async (req: http.IncomingMessage, res: http.ServerResponse, next: () => void) => {
-    if (req.url?.startsWith('/_livestore') == false) {
-      return next()
-    }
-
-    const viteMiddleware = await viteMiddlewarePromise
-
-    return viteMiddleware.middlewares(req, res, next)
-  }
-
-  return middleware
-}
-
 /** Remove readonly from all properties */
 type MutableDeep<T> = {
   -readonly [P in keyof T]: MutableDeep<T[P]>
@@ -63,8 +77,7 @@ type MutableDeep<T> = {
 // eslint-disable-next-line unicorn/prefer-module
 module.exports = {
   addLiveStoreDevtoolsMiddleware,
-  makeLiveStoreDevtoolsMiddleware,
 }
 
-export type { addLiveStoreDevtoolsMiddleware, makeLiveStoreDevtoolsMiddleware }
+export type { addLiveStoreDevtoolsMiddleware }
 export type { Options } from './types.js'

package/src/types.d.ts

@@ -13,4 +13,16 @@ export type Options = {
    * Example: `./src/schema.ts`
    */
   schemaPath: string
+  /**
+   * The port to listen on for the devtools server
+   *
+   * @default 4242
+   */
+  port: number
+  /**
+   * The host to listen on for the devtools server
+   *
+   * @default 'localhost'
+   */
+  host: string
 }

package/webui/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LiveStore DevTools Redirect</title>
+    <script>
+        const currentUrl = new URL(window.location.href);
+        const redirectUrl = `http://localhost:${currentUrl.port}/_livestore/node?autoconnect`;
+        window.location.href = redirectUrl;
+    </script>
+</head>
+<body>
+    <p>If you are not redirected, <a href="javascript:void(0);" onclick="window.location.href=redirectUrl">click here</a>.</p>
+</body>
+</html>