everything-dev 0.1.4 → 0.2.0

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,5 @@
+export * from "./types";
+export * from "./runtime";
+export * from "./head";
+export * from "./files";
+export * from "./router";

package/src/ui/router.ts

@@ -0,0 +1,72 @@
+import type { AnyRouter } from "@tanstack/react-router";
+import type { HeadData, HeadLink, HeadMeta, HeadScript } from "./types";
+
+export function getMetaKey(meta: HeadMeta): string {
+  if (!meta) return "null";
+  if ("title" in meta) return "title";
+  if ("charSet" in meta) return "charSet";
+  if ("name" in meta) return `name:${(meta as { name: string }).name}`;
+  if ("property" in meta) return `property:${(meta as { property: string }).property}`;
+  if ("httpEquiv" in meta) return `httpEquiv:${(meta as { httpEquiv: string }).httpEquiv}`;
+  return JSON.stringify(meta);
+}
+
+export function getLinkKey(link: HeadLink): string {
+  const rel = (link as { rel?: string }).rel ?? "";
+  const href = (link as { href?: string }).href ?? "";
+  return `${rel}:${href}`;
+}
+
+export function getScriptKey(script: HeadScript): string {
+  if (!script) return "null";
+  if ("src" in script && script.src) return `src:${script.src}`;
+  if ("children" in script && script.children)
+    return `children:${typeof script.children === "string" ? script.children : JSON.stringify(script.children)}`;
+  return JSON.stringify(script);
+}
+
+export async function collectHeadData(router: AnyRouter): Promise<HeadData> {
+  await router.load();
+
+  const metaMap = new Map<string, HeadMeta>();
+  const linkMap = new Map<string, HeadLink>();
+  const scriptMap = new Map<string, HeadScript>();
+
+  for (const match of router.state.matches) {
+    const headFn = match.route?.options?.head;
+    if (!headFn) continue;
+
+    try {
+      const headResult = await headFn({
+        loaderData: match.loaderData,
+        matches: router.state.matches,
+        match,
+        params: match.params,
+      } as Parameters<typeof headFn>[0]);
+
+      if (headResult?.meta) {
+        for (const meta of headResult.meta) {
+          metaMap.set(getMetaKey(meta), meta);
+        }
+      }
+      if (headResult?.links) {
+        for (const link of headResult.links) {
+          linkMap.set(getLinkKey(link), link);
+        }
+      }
+      if (headResult?.scripts) {
+        for (const script of headResult.scripts) {
+          scriptMap.set(getScriptKey(script), script);
+        }
+      }
+    } catch (error) {
+      console.warn(`[collectHeadData] head() failed for ${match.routeId}:`, error);
+    }
+  }
+
+  return {
+    meta: [...metaMap.values()],
+    links: [...linkMap.values()],
+    scripts: [...scriptMap.values()],
+  };
+}

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"];
+}