everything-dev 0.1.4 → 0.1.5

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "everything-dev",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./types": "./src/types.ts"
+    "./types": "./src/types.ts",
+    "./ui": "./src/ui/index.ts",
+    "./ui/types": "./src/ui/types.ts",
+    "./ui/runtime": "./src/ui/runtime.ts",
+    "./ui/head": "./src/ui/head.ts"
   },
   "files": [
     "src"
@@ -50,6 +54,8 @@
     "zod": "4.3.5"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-router": "^1.0.0",
     "@types/bun": "^1.3.8",
     "@types/gradient-string": "^1.1.6",
     "@types/react": "^18.3.0",
@@ -57,5 +63,17 @@
     "playwright": "^1.58.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
+    "@tanstack/react-router": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@tanstack/react-router": {
+      "optional": true
+    }
   }
 }

package/src/lib/process.ts

@@ -1,8 +1,8 @@
 import { Command } from "@effect/platform";
 import { Deferred, Effect, Fiber, Ref, Stream } from "every-plugin/effect";
-import { type BosConfig, getConfigDir, getPortsFromConfig, type SourceMode } from "../config";
 import type { ProcessStatus } from "../components/dev-view";
-import { loadSecretsFor } from "./secrets";
+import { type BosConfig, getConfigDir, getPortsFromConfig, type RemoteConfig, type SourceMode } from "../config";
+import type { RuntimeConfig } from "../types";
 
 export interface DevProcess {
   name: string;
@@ -68,7 +68,7 @@ export const getProcessConfig = (
   if (!base) return null;
 
   const ports = getPortsFromConfig();
-  
+
   let port: number;
   if (pkg === "host") {
     port = portOverride ?? ports.host;
@@ -157,9 +157,47 @@ const killProcessTree = (pid: number) =>
     }
   });
 
+export function buildRuntimeConfig(
+  bosConfig: BosConfig,
+  options: {
+    uiSource: SourceMode;
+    apiSource: SourceMode;
+    hostUrl: string;
+    proxy?: string;
+    env?: "development" | "production";
+  }
+): RuntimeConfig {
+  const uiConfig = bosConfig.app.ui as RemoteConfig;
+  const apiConfig = bosConfig.app.api as RemoteConfig;
+
+  return {
+    env: options.env ?? "development",
+    account: bosConfig.account,
+    title: bosConfig.app.host.title,
+    hostUrl: options.hostUrl,
+    shared: (bosConfig as { shared?: { ui?: Record<string, unknown> } }).shared as RuntimeConfig["shared"],
+    ui: {
+      name: uiConfig.name,
+      url: options.uiSource === "remote" ? uiConfig.production : uiConfig.development,
+      ssrUrl: options.uiSource === "remote" ? uiConfig.ssr : undefined,
+      source: options.uiSource,
+      exposes: uiConfig.exposes || {},
+    },
+    api: {
+      name: apiConfig.name,
+      url: options.apiSource === "remote" ? apiConfig.production : apiConfig.development,
+      source: options.apiSource,
+      proxy: options.proxy,
+      variables: apiConfig.variables,
+      secrets: apiConfig.secrets,
+    },
+  };
+}
+
 export const spawnDevProcess = (
   config: DevProcess,
-  callbacks: ProcessCallbacks
+  callbacks: ProcessCallbacks,
+  runtimeConfig?: RuntimeConfig
 ) =>
   Effect.gen(function* () {
     const configDir = getConfigDir();
@@ -169,15 +207,20 @@ export const spawnDevProcess = (
 
     callbacks.onStatus(config.name, "starting");
 
+    const envVars: Record<string, string> = {
+      ...process.env as Record<string, string>,
+      ...config.env,
+      FORCE_COLOR: "1",
+      ...(config.port > 0 ? { PORT: String(config.port) } : {}),
+    };
+
+    if (runtimeConfig && config.name === "host") {
+      envVars.BOS_RUNTIME_CONFIG = JSON.stringify(runtimeConfig);
+    }
+
     const cmd = Command.make(config.command, ...config.args).pipe(
       Command.workingDirectory(fullCwd),
-      Command.env({
-        ...process.env,
-        ...config.env,
-        BOS_CONFIG_PATH: "../bos.config.json",
-        FORCE_COLOR: "1",
-        ...(config.port > 0 ? { PORT: String(config.port) } : {}),
-      })
+      Command.env(envVars)
     );
 
     const proc = yield* Command.start(cmd);
@@ -247,13 +290,8 @@ interface ServerHandle {
   shutdown: () => Promise<void>;
 }
 
-interface BootstrapConfig {
-  config?: BosConfig;
-  secrets?: Record<string, string>;
-  host?: { url?: string };
-  ui?: { source?: SourceMode };
-  api?: { source?: SourceMode; proxy?: string };
-  database?: { url?: string };
+interface ServerInput {
+  config: RuntimeConfig;
 }
 
 const patchConsole = (
@@ -300,7 +338,7 @@ const patchConsole = (
 export const spawnRemoteHost = (
   config: DevProcess,
   callbacks: ProcessCallbacks,
-  bosConfig?: BosConfig
+  runtimeConfig: RuntimeConfig
 ) =>
   Effect.gen(function* () {
     const remoteUrl = config.env?.HOST_REMOTE_URL;
@@ -317,27 +355,6 @@ export const spawnRemoteHost = (
 
     callbacks.onStatus(config.name, "starting");
 
-    let hostUrl = `http://localhost:${config.port}`;
-    if (process.env.HOST_URL) {
-      hostUrl = process.env.HOST_URL;
-    }
-
-    const hostSecrets = loadSecretsFor("host");
-    const apiSecrets = loadSecretsFor("api");
-    const allSecrets = { ...hostSecrets, ...apiSecrets };
-
-    const uiSource = (config.env?.UI_SOURCE as SourceMode) ?? "local";
-    const apiSource = (config.env?.API_SOURCE as SourceMode) ?? "local";
-    const apiProxy = config.env?.API_PROXY;
-
-    const bootstrap: BootstrapConfig = {
-      config: bosConfig,
-      secrets: allSecrets,
-      host: { url: hostUrl },
-      ui: { source: uiSource },
-      api: { source: apiSource, proxy: apiProxy },
-    };
-
     callbacks.onLog(config.name, `Remote: ${remoteUrl}`);
 
     const restoreConsole = patchConsole(config.name, callbacks);
@@ -369,7 +386,7 @@ export const spawnRemoteHost = (
     callbacks.onLog(config.name, `Loading host from ${remoteEntryUrl}...`);
 
     const hostModule = yield* Effect.tryPromise({
-      try: () => mf.loadRemote<{ runServer: (bootstrap?: BootstrapConfig) => ServerHandle }>("host/Server"),
+      try: () => mf.loadRemote<{ runServer: (input: ServerInput) => ServerHandle }>("host/Server"),
       catch: (e) => new Error(`Failed to load host module: ${e}`),
     });
 
@@ -378,7 +395,7 @@ export const spawnRemoteHost = (
     }
 
     callbacks.onLog(config.name, "Starting server...");
-    const serverHandle = hostModule.runServer(bootstrap);
+    const serverHandle = hostModule.runServer({ config: runtimeConfig });
 
     yield* Effect.tryPromise({
       try: () => serverHandle.ready,
@@ -415,8 +432,29 @@ export const makeDevProcess = (
       return yield* Effect.fail(new Error(`Unknown package: ${pkg}`));
     }
 
-    if (pkg === "host" && env?.HOST_SOURCE === "remote") {
-      return yield* spawnRemoteHost(config, callbacks, bosConfig);
+    if (pkg === "host" && bosConfig) {
+      const uiSource = (env?.UI_SOURCE as SourceMode) ?? "local";
+      const apiSource = (env?.API_SOURCE as SourceMode) ?? "local";
+      const apiProxy = env?.API_PROXY;
+
+      let hostUrl = `http://localhost:${config.port}`;
+      if (process.env.HOST_URL) {
+        hostUrl = process.env.HOST_URL;
+      }
+
+      const runtimeConfig = buildRuntimeConfig(bosConfig, {
+        uiSource,
+        apiSource,
+        hostUrl,
+        proxy: apiProxy,
+        env: "development",
+      });
+
+      if (env?.HOST_SOURCE === "remote") {
+        return yield* spawnRemoteHost(config, callbacks, runtimeConfig);
+      }
+
+      return yield* spawnDevProcess(config, callbacks, runtimeConfig);
     }
 
     return yield* spawnDevProcess(config, callbacks);

package/src/types.ts

@@ -88,3 +88,54 @@ export const PortConfigSchema = z.object({
   api: z.number(),
 });
 export type PortConfig = z.infer<typeof PortConfigSchema>;
+
+export const SharedConfigSchema = z.object({
+  requiredVersion: z.string().optional(),
+  singleton: z.boolean().optional(),
+  eager: z.boolean().optional(),
+  strictVersion: z.boolean().optional(),
+  shareScope: z.string().optional(),
+});
+export type SharedConfig = z.infer<typeof SharedConfigSchema>;
+
+export const RuntimeConfigSchema = z.object({
+  env: z.enum(["development", "production"]),
+  account: z.string(),
+  title: z.string(),
+  hostUrl: z.string(),
+  shared: z.object({
+    ui: z.record(z.string(), SharedConfigSchema).optional(),
+  }).optional(),
+  ui: z.object({
+    name: z.string(),
+    url: z.string(),
+    ssrUrl: z.string().optional(),
+    source: SourceModeSchema,
+    exposes: z.record(z.string(), z.string()),
+  }),
+  api: z.object({
+    name: z.string(),
+    url: z.string(),
+    source: SourceModeSchema,
+    proxy: z.string().optional(),
+    variables: z.record(z.string(), z.string()).optional(),
+    secrets: z.array(z.string()).optional(),
+  }),
+});
+export type RuntimeConfig = z.infer<typeof RuntimeConfigSchema>;
+
+export const ClientRuntimeConfigSchema = z.object({
+  env: z.enum(["development", "production"]),
+  account: z.string(),
+  title: z.string(),
+  hostUrl: z.string().optional(),
+  assetsUrl: z.string(),
+  apiBase: z.string(),
+  rpcBase: z.string(),
+  ui: z.object({
+    name: z.string(),
+    url: z.string(),
+    exposes: z.record(z.string(), z.string()).optional(),
+  }).optional(),
+});
+export type ClientRuntimeConfig = z.infer<typeof ClientRuntimeConfigSchema>;

package/src/ui/head.ts

@@ -0,0 +1,65 @@
+import type { ClientRuntimeConfig } from "../types";
+import type { HeadScript } from "./types";
+
+export interface RemoteScriptsOptions {
+  assetsUrl: string;
+  runtimeConfig?: ClientRuntimeConfig;
+  containerName?: string;
+  hydratePath?: string;
+}
+
+export function getRemoteEntryScript(assetsUrl: string): HeadScript {
+  return {
+    src: `${assetsUrl}/remoteEntry.js`,
+  };
+}
+
+export function getThemeInitScript(): HeadScript {
+  return {
+    children: `(function(){var t=localStorage.getItem('theme');if(t==='dark'||(!t&&window.matchMedia('(prefers-color-scheme: dark)').matches)){document.documentElement.classList.add('dark');}})();`,
+  };
+}
+
+export function getHydrateScript(
+  runtimeConfig: ClientRuntimeConfig | undefined,
+  containerName = "ui",
+  hydratePath = "./Hydrate"
+): HeadScript {
+  return {
+    children: `
+window.__RUNTIME_CONFIG__=${JSON.stringify(runtimeConfig)};
+function __hydrate(){
+  var container = window['${containerName}'];
+  if (!container) { console.error('[Hydrate] Container not found'); return; }
+  container.init({}).then(function(){
+    return container.get('${hydratePath}');
+  }).then(function(mod){
+    return mod().hydrate();
+  }).catch(function(e){
+    console.error('[Hydrate] Failed:', e);
+  });
+}
+if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',__hydrate);}else{__hydrate();}
+    `.trim(),
+  };
+}
+
+export function getRemoteScripts(options: RemoteScriptsOptions): HeadScript[] {
+  const { assetsUrl, runtimeConfig, containerName, hydratePath } = options;
+
+  return [
+    getRemoteEntryScript(assetsUrl),
+    getThemeInitScript(),
+    getHydrateScript(runtimeConfig, containerName, hydratePath),
+  ];
+}
+
+export function getBaseStyles(): string {
+  return `
+*, *::before, *::after { box-sizing: border-box; }
+html { height: 100%; height: 100dvh; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light dark; }
+body { min-height: 100%; min-height: 100dvh; margin: 0; background-color: var(--background); color: var(--foreground); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
+#root { min-height: 100vh; }
+@supports (min-height: 100dvh) { #root { min-height: 100dvh; } }
+  `.trim();
+}

package/src/ui/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./runtime";
+export * from "./head";

package/src/ui/runtime.ts

@@ -0,0 +1,35 @@
+import type { ClientRuntimeConfig } from "../types";
+
+declare global {
+  interface Window {
+    __RUNTIME_CONFIG__?: ClientRuntimeConfig;
+  }
+}
+
+export function getRuntimeConfig(): ClientRuntimeConfig | undefined {
+  if (typeof window === "undefined") return undefined;
+  return window.__RUNTIME_CONFIG__;
+}
+
+export function getAssetsUrl(config?: ClientRuntimeConfig): string {
+  const cfg = config ?? getRuntimeConfig();
+  return cfg?.assetsUrl ?? "";
+}
+
+export function getHostUrl(config?: ClientRuntimeConfig): string {
+  const cfg = config ?? getRuntimeConfig();
+  if (typeof window === "undefined") return "";
+  return cfg?.hostUrl ?? window.location.origin;
+}
+
+export function getApiBaseUrl(config?: ClientRuntimeConfig): string {
+  const cfg = config ?? getRuntimeConfig();
+  const base = cfg?.rpcBase;
+  if (typeof window === "undefined") return "/api/rpc";
+  return base ? `${window.location.origin}${base}` : `${window.location.origin}/api/rpc`;
+}
+
+export function getAccount(config?: ClientRuntimeConfig): string {
+  const cfg = config ?? getRuntimeConfig();
+  return cfg?.account ?? "every.near";
+}

package/src/ui/types.ts

@@ -0,0 +1,51 @@
+import type { QueryClient } from "@tanstack/react-query";
+import type { AnyRouteMatch, AnyRouter, RouterHistory } from "@tanstack/react-router";
+import type { ClientRuntimeConfig } from "../types";
+
+export interface RouterContext {
+  queryClient: QueryClient;
+  assetsUrl: string;
+  runtimeConfig?: ClientRuntimeConfig;
+}
+
+export interface CreateRouterOptions {
+  history?: RouterHistory;
+  context?: Partial<RouterContext>;
+}
+
+export type HeadMeta = NonNullable<AnyRouteMatch["meta"]>[number];
+export type HeadLink = NonNullable<AnyRouteMatch["links"]>[number];
+export type HeadScript = NonNullable<AnyRouteMatch["headScripts"]>[number];
+
+export interface HeadData {
+  meta: HeadMeta[];
+  links: HeadLink[];
+  scripts: HeadScript[];
+}
+
+export interface RenderOptions {
+  assetsUrl: string;
+  runtimeConfig: ClientRuntimeConfig;
+}
+
+export interface RenderResult {
+  stream: ReadableStream;
+  statusCode: number;
+  headers: Headers;
+}
+
+export interface RouterModule {
+  createRouter: (opts?: CreateRouterOptions) => {
+    router: AnyRouter;
+    queryClient: QueryClient;
+  };
+  getRouteHead: (
+    pathname: string,
+    context?: Partial<RouterContext>
+  ) => Promise<HeadData>;
+  renderToStream: (
+    request: Request,
+    options: RenderOptions
+  ) => Promise<RenderResult>;
+  routeTree: AnyRouter["routeTree"];
+}