jinrai 1.1.0 → 1.1.2

package/index.ts

@@ -1,3 +1,5 @@
+export type { ServerKey } from "./src/front/server-state/useServerState"
+
 export { useServerState } from "./src/front/server-state/useServerState"
 export { real } from "./src/front/server-state/real"
 export { useParamsIndex } from "./src/front/url/params/useParamsIndex"

package/lib/bin/bin.js

@@ -144,7 +144,7 @@ const getRoutesAndTemplates = (pages, normalize = true, templates = true) => {
             id,
             content,
             mask,
-            requests: template.input,
+            state: template.state,
         });
     }
     return {
@@ -194,10 +194,13 @@ class Task {
 
 const pageCollector = async (page) => {
     const state = await page.evaluate(() => {
-        return window.__page_requests;
+        const state = Object.fromEntries(window.$exportServerStates);
+        console.log("BROWSER", state);
+        return state;
     });
+    console.log("CLIENT", state);
     const root = await page.locator("#root").innerHTML();
-    return { state, root };
+    return { root, state };
 };
 
 const getRawPageData = async (url, pages, test = false, debug = false) => {
@@ -233,7 +236,7 @@ const getRawPageData = async (url, pages, test = false, debug = false) => {
         page.close();
         result.push({
             id,
-            input: state,
+            state,
             mask,
             root,
             test: testRoot,

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export type { ServerKey } from "./src/front/server-state/useServerState";
 export { useServerState } from "./src/front/server-state/useServerState";
 export { real } from "./src/front/server-state/real";
 export { useParamsIndex } from "./src/front/url/params/useParamsIndex";

package/lib/src/bin/playwright/pageCollector.d.ts

@@ -1,5 +1,6 @@
 import { Page } from "playwright";
+import { ServerStateMap } from "../../front/server-state/useServerState";
 export declare const pageCollector: (page: Page) => Promise<{
-    state: any;
+    state: ServerStateMap;
     root: string;
 }>;

package/lib/src/bin/playwright/templates.d.ts

@@ -1,13 +1,9 @@
-export type input = {
-    method: string;
-    url: string;
-    input: object;
-};
+import { ServerValue } from "../../front/server-state/serverStates";
 export interface PageData {
     id: number;
     mask: string;
     root: string;
-    input: input[];
+    state: Record<string, ServerValue>;
     test?: string;
 }
 export declare const getRawPageData: (url: string, pages: string[], test?: boolean, debug?: boolean) => Promise<PageData[]>;

package/lib/src/bin/routes/getRoutes.d.ts

@@ -1,9 +1,10 @@
-import { input, PageData } from "../playwright/templates";
+import { ServerStateMap } from "../../front/server-state/useServerState";
+import { PageData } from "../playwright/templates";
 import { Element } from "./Parser";
 interface Route {
     id: number;
     mask: string;
-    requests: input[];
+    state: ServerStateMap;
     content: Element[];
 }
 export declare const getRoutesAndTemplates: (pages: PageData[], normalize?: boolean, templates?: boolean) => {

package/lib/src/front/server-state/SSR.js

@@ -1,5 +1,5 @@
 const ssr = {
-    current: navigator.userAgent == "____JINRAI_CLIENT____",
+    current: true, //navigator.userAgent == "____JINRAI_CLIENT____",
     exportParams: false,
 };
 

package/lib/src/front/server-state/real.js

@@ -1,9 +1,6 @@
-import { ssr } from './SSR.js';
 import { sources } from './DataProxy.js';
 
 function real(value) {
-    if (!ssr.current)
-        return value;
     switch (typeof value) {
         case "number":
             return value;

package/lib/src/front/server-state/serverStates.d.ts

@@ -1,5 +1,18 @@
-import { ServerStateOptions } from "./useServerState";
-export type ServerValue = any;
-export declare const serverStates: Map<string, string>;
-export declare const getServerValue: (key: string, def?: ServerValue) => any[];
-export declare const setServerValue: (key: string, value: ServerValue, options?: ServerStateOptions) => import("./DataProxy").DataProxy;
+import { ServerKey } from "./useServerState";
+interface Request {
+    method: string;
+    url: string;
+    input: any;
+}
+export type ServerValue = {
+    value: any;
+    options?: {
+        source: {
+            request?: Request;
+        };
+    };
+};
+export declare const serverStates: Map<string, ServerValue>;
+export declare const getServerValue: (key?: ServerKey, def?: ServerValue["value"], options?: ServerValue["options"]) => any[];
+export declare const setServerValue: (key: ServerKey, value: ServerValue["value"], options?: ServerValue["options"]) => import("./DataProxy").DataProxy;
+export {};

package/lib/src/front/server-state/serverStates.js

@@ -1,29 +1,40 @@
+import { encode } from 'js-base64';
 import createDataProxy from './DataProxy.js';
 import { ssr } from './SSR.js';
 
 const serverStates = new Map();
 if (window != undefined) {
+    console.log("init $exportServerStates");
     // @ts-ignore
-    window.__serverExportStates__ = serverStates;
+    window.$exportServerStates = serverStates;
 }
-const getServerValue = (key, def) => {
-    if (key == "") {
+const getIdent = (key) => {
+    {
+        ssr.exportParams = true;
+    }
+    const result = Array.isArray(key) ? JSON.stringify(key) : key.toString();
+    {
+        ssr.exportParams = false;
+    }
+    return encode(result);
+};
+const getServerValue = (key, def, options) => {
+    if (key == undefined) {
         return [def, false];
     }
+    const ident = getIdent(key);
+    serverStates.set(ident, { options, value: !options?.source ? def : undefined });
     // @ts-ignore
-    if (window != undefined && window?.__serverInitialStates__ && key in window.__serverInitialStates__) {
+    if (window != undefined && window?.__serverInitialStates__ && ident in window.__serverInitialStates__) {
         // @ts-ignore
-        return [window.__serverInitialStates__[key], true];
+        return [window.__serverInitialStates__[ident], true];
     }
-    return [serverStates.get(key) ?? def, false];
+    return [def, false];
 };
 const setServerValue = (key, value, options) => {
-    ssr.exportParams = true;
-    const json = JSON.stringify({ value, options });
-    ssr.exportParams = false;
-    console.log(key, json);
-    serverStates.set(key, json);
-    return createDataProxy(value, `${key}@`);
+    const ident = getIdent(key);
+    serverStates.set(ident, { options, value: !options?.source ? value : undefined });
+    return createDataProxy(value, `${ident}@`);
 };
 
 export { getServerValue, serverStates, setServerValue };

package/lib/src/front/server-state/useServerState.d.ts

@@ -1,14 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
 import { ServerValue } from "./serverStates";
-interface Request {
-    method: string;
-    url: string;
-    input: any;
-}
-export interface ServerStateOptions {
-    source: {
-        request?: Request;
-    };
-}
-export declare const useServerState: <T extends ServerValue>(serverKey: string, initialValue: T, options?: ServerStateOptions) => [T, Dispatch<SetStateAction<T>>, () => boolean];
-export {};
+export type ServerStateMap = Record<string, ServerValue>;
+export type ServerKey = string | string[];
+export declare const useServerState: <T extends ServerValue["value"]>(serverKey: ServerKey | undefined, initialValue: T, options?: ServerValue["options"]) => [T, Dispatch<SetStateAction<T>>, () => boolean];

package/lib/src/front/server-state/useServerState.js

@@ -3,13 +3,13 @@ import { ssr } from './SSR.js';
 import { getServerValue, setServerValue } from './serverStates.js';
 
 const useServerState = (serverKey, initialValue, options) => {
-    const [serverValue, isInitOnServer] = getServerValue(serverKey, initialValue);
+    const [serverValue, isInitOnServer] = getServerValue(serverKey, initialValue, options);
     const [value, setStateValue] = useState(serverValue);
     const [isInit, setIsInit] = useState(isInitOnServer);
     const setValue = (value) => {
         setStateValue((prev) => {
             const result = value instanceof Function ? value(prev) : value;
-            if (serverKey && ssr.current) {
+            if (serverKey != undefined && ssr.current) {
                 return setServerValue(serverKey, result, options);
             }
             return result;

package/lib/src/front/url/params/useParamsIndex.js

@@ -1,13 +1,12 @@
 import { useContext, useMemo } from 'react';
 import { getJinraiValue } from '../search/useSearchValue.js';
 import { JinraiContext } from '../JinraiContext.js';
-import { ssr } from '../../server-state/SSR.js';
 
 const useParamsIndex = (index, def = "") => {
     const { deps } = useContext(JinraiContext);
     const value = useMemo(() => location.pathname.split("/")[index + 1] ?? def, deps ? deps : []);
     const stableValue = useMemo(() => {
-        return ssr.current ? value.bindSource(getJinraiValue(index.toString(), "paramsIndex", "", def)) : value;
+        return value.bindSource(getJinraiValue(index.toString(), "paramsIndex", "", def)) ;
     }, [value]);
     return stableValue;
 };

package/lib/src/front/url/search/useSearch.js

@@ -1,13 +1,12 @@
 import { useContext, useMemo } from 'react';
 import { JinraiContext } from '../JinraiContext.js';
-import { ssr } from '../../server-state/SSR.js';
 import { getJinraiValue } from './useSearchValue.js';
 
 const useSearch = () => {
     const { deps } = useContext(JinraiContext);
     const value = useMemo(() => location.search.substring(1), deps ? deps : []);
     const stableValue = useMemo(() => {
-        return ssr.current ? value.bindSource(getJinraiValue("", "search", "", "")) : value;
+        return value.bindSource(getJinraiValue("", "search", "", "")) ;
     }, [value]);
     return stableValue;
 };

package/lib/src/front/url/search/useSearchValue.js

@@ -3,9 +3,12 @@ import { useMemo } from 'react';
 import { ssr } from '../../server-state/SSR.js';
 
 function toJSON() {
-    // @ts-ignore
-    if (ssr.exportParams)
-        return this.source;
+    if (ssr.exportParams) {
+        // @ts-ignore
+        const source = this.source;
+        // @ts-ignore
+        return source ? source : this;
+    }
     // @ts-ignore
     return this;
 }
@@ -30,7 +33,7 @@ function toJSON() {
 const useSearchValue = (key, defaultValue) => {
     const [value, setValue] = useQueryState(key, { defaultValue });
     const stableValue = useMemo(() => {
-        return ssr.current ? value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) : value;
+        return value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) ;
     }, [key, value]);
     return [stableValue, setValue];
 };
@@ -38,7 +41,7 @@ const useSearchArray = (key, defaultValue = [], separator = ",") => {
     const stableDefault = useMemo(() => defaultValue, []);
     const [value, setValue] = useQueryState(key, parseAsArrayOf(parseAsString, separator).withDefault(stableDefault));
     const stableValue = useMemo(() => {
-        return ssr.current ? value.bindSource(getJinraiValue(key, "searchArray", separator, defaultValue)) : value;
+        return value.bindSource(getJinraiValue(key, "searchArray", separator, defaultValue)) ;
     }, [key, value]);
     return [stableValue, setValue];
 };

package/lib/src/front/wrapper/Custom.js

@@ -1,8 +1,4 @@
-import { ssr } from '../server-state/SSR.js';
-
 const Custom = ({ name, props, children }) => {
-    if (!ssr.current)
-        return children;
     return `<custom>${JSON.stringify({ name, props })}<custom>`;
 };
 

package/lib/vite/plugin.js

@@ -6,10 +6,13 @@ import { writeFile } from 'fs/promises';
 
 const pageCollector = async (page) => {
     const state = await page.evaluate(() => {
-        return window.__page_requests;
+        const state = Object.fromEntries(window.$exportServerStates);
+        console.log("BROWSER", state);
+        return state;
     });
+    console.log("CLIENT", state);
     const root = await page.locator("#root").innerHTML();
-    return { state, root };
+    return { root, state };
 };
 
 const normalizeHtmlWhitespace = (html) => {
@@ -136,7 +139,7 @@ const getRoutesAndTemplates = (pages, normalize = true, templates = true) => {
             id,
             content,
             mask,
-            requests: template.input,
+            state: template.state,
         });
     }
     return {
@@ -190,7 +193,7 @@ function hydration() {
                 await page.goto(debugUrl + currentUrl);
                 await page.waitForLoadState("networkidle");
                 const { root } = await pageCollector(page);
-                const { routes } = getRoutesAndTemplates([{ id: 1, input: [], mask: currentUrl, root }], true, false);
+                const { routes } = getRoutesAndTemplates([{ id: 1, state: {}, mask: currentUrl, root }], true, false);
                 console.log({ routes });
                 writeFile("./routs.json", JSON.stringify(routes, null, 2));
                 const result = html.replace("<!--app-html-->", root);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jinrai",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "description": "A powerful library that analyzes your modern web application and automatically generates a perfectly rendered, static snapshot of its pages. Experience unparalleled loading speed and SEO clarity without the complexity of traditional SSR setups. Simply point Jinrai at your SPA and witness divine speed.",
     "main": "lib/index.ts",
     "scripts": {
@@ -18,6 +18,7 @@
         "@rollup/plugin-typescript": "^11.1.6",
         "@types/node": "^24.5.2",
         "@types/ora": "^3.1.0",
+        "@types/react": "^19.2.7",
         "@vitest/coverage-v8": "^4.0.8",
         "dotenv": "^17.2.2",
         "nodemon": "^3.1.10",
@@ -33,6 +34,8 @@
     "dependencies": {
         "@types/prettier": "^2.7.3",
         "jiti": "^2.6.0",
+        "js-base64": "^3.7.8",
+        "nuqs": "^2.8.1",
         "ora": "^9.0.0",
         "playwright": "^1.55.1",
         "prettier": "^3.6.2"

package/src/bin/playwright/pageCollector.ts

@@ -1,11 +1,16 @@
 import { Page } from "playwright"
+import { ServerStateMap } from "../../front/server-state/useServerState"
 
-export const pageCollector = async (page: Page) => {
+export const pageCollector = async (page: Page): Promise<{ state: ServerStateMap; root: string }> => {
     const state = await page.evaluate(() => {
-        return (window as any).__page_requests
+        const state = Object.fromEntries((window as any).$exportServerStates)
+        console.log("BROWSER", state)
+
+        return state
     })
 
+    console.log("CLIENT", state)
     const root = await page.locator("#root").innerHTML()
 
-    return { state, root }
+    return { root, state }
 }

package/src/bin/playwright/templates.ts

@@ -2,18 +2,13 @@ import { chromium } from "playwright"
 import Task from "../ui/task"
 import { spinners } from "ora"
 import { pageCollector } from "./pageCollector"
-
-export type input = {
-    method: string
-    url: string
-    input: object
-}
+import { ServerValue } from "../../front/server-state/serverStates"
 
 export interface PageData {
     id: number
     mask: string
     root: string
-    input: input[]
+    state: Record<string, ServerValue>
     test?: string
 }
 
@@ -70,7 +65,7 @@ export const getRawPageData = async (
 
         result.push({
             id,
-            input: state,
+            state,
             mask,
             root,
             test: testRoot,

package/src/bin/routes/getRoutes.ts

@@ -1,10 +1,11 @@
-import { input, PageData } from "../playwright/templates"
+import { ServerStateMap } from "../../front/server-state/useServerState"
+import { PageData } from "../playwright/templates"
 import { Element, Parser } from "./Parser"
 
 interface Route {
     id: number
     mask: string
-    requests: input[]
+    state: ServerStateMap
     content: Element[]
 }
 
@@ -21,7 +22,7 @@ export const getRoutesAndTemplates = (pages: PageData[], normalize: boolean = tr
             id,
             content,
             mask,
-            requests: template.input,
+            state: template.state,
         })
     }
 

package/src/front/server-state/SSR.ts

@@ -1,4 +1,4 @@
 export const ssr = {
-    current: navigator.userAgent == "____JINRAI_CLIENT____",
+    current: true, //navigator.userAgent == "____JINRAI_CLIENT____",
     exportParams: false,
 }

package/src/front/server-state/serverStates.ts

@@ -1,36 +1,61 @@
+import { encode } from "js-base64"
 import createDataProxy from "./DataProxy"
 import { ssr } from "./SSR"
-import { ServerStateOptions } from "./useServerState"
+import { ServerKey } from "./useServerState"
 
-export type ServerValue = any
+interface Request {
+    method: string
+    url: string
+    input: any
+}
+
+export type ServerValue = {
+    value: any
+    options?: {
+        source: {
+            request?: Request
+        }
+    }
+}
+
+export const serverStates = new Map<string, ServerValue>()
 
-export const serverStates = new Map<string, string>()
 if (window != undefined) {
+    console.log("init $exportServerStates")
     // @ts-ignore
-    window.__serverExportStates__ = serverStates
+    window.$exportServerStates = serverStates
+}
+
+const getIdent = (key: ServerKey): string => {
+    if (ssr.current) {
+        ssr.exportParams = true
+    }
+    const result = Array.isArray(key) ? JSON.stringify(key) : key.toString()
+    if (ssr.current) {
+        ssr.exportParams = false
+    }
+
+    return encode(result)
 }
 
-export const getServerValue = (key: string, def?: ServerValue) => {
-    if (key == "") {
+export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], options?: ServerValue["options"]) => {
+    if (key == undefined) {
         return [def, false]
     }
+    const ident = getIdent(key)
+    serverStates.set(ident, { options, value: !options?.source ? def : undefined })
 
     // @ts-ignore
-    if (window != undefined && window?.__serverInitialStates__ && key in window.__serverInitialStates__) {
+    if (window != undefined && window?.__serverInitialStates__ && ident in window.__serverInitialStates__) {
         // @ts-ignore
-        return [window.__serverInitialStates__[key], true]
+        return [window.__serverInitialStates__[ident], true]
     }
 
-    return [serverStates.get(key) ?? def, false]
+    return [def, false]
 }
 
-export const setServerValue = (key: string, value: ServerValue, options?: ServerStateOptions) => {
-    ssr.exportParams = true
-    const json = JSON.stringify({ value, options })
-    ssr.exportParams = false
-
-    console.log(key, json)
-    serverStates.set(key, json)
-
-    return createDataProxy(value, `${key}@`)
+export const setServerValue = (key: ServerKey, value: ServerValue["value"], options?: ServerValue["options"]) => {
+    const ident = getIdent(key)
+    serverStates.set(ident, { options, value: !options?.source ? value : undefined })
+    return createDataProxy(value, `${ident}@`)
 }

package/src/front/server-state/useServerState.ts

@@ -2,24 +2,15 @@ import { Dispatch, SetStateAction, useState } from "react"
 import { ssr } from "./SSR"
 import { getServerValue, ServerValue, setServerValue } from "./serverStates"
 
-interface Request {
-    method: string
-    url: string
-    input: any
-}
-
-export interface ServerStateOptions {
-    source: {
-        request?: Request
-    }
-}
+export type ServerStateMap = Record<string, ServerValue>
+export type ServerKey = string | string[]
 
-export const useServerState = <T extends ServerValue>(
-    serverKey: string,
+export const useServerState = <T extends ServerValue["value"]>(
+    serverKey: ServerKey | undefined,
     initialValue: T,
-    options?: ServerStateOptions,
+    options?: ServerValue["options"],
 ) => {
-    const [serverValue, isInitOnServer] = getServerValue(serverKey, initialValue)
+    const [serverValue, isInitOnServer] = getServerValue(serverKey, initialValue, options)
     const [value, setStateValue] = useState(serverValue)
     const [isInit, setIsInit] = useState(isInitOnServer)
 
@@ -27,7 +18,7 @@ export const useServerState = <T extends ServerValue>(
         setStateValue((prev: T) => {
             const result = value instanceof Function ? (value as (prevState: T) => T)(prev) : value
 
-            if (serverKey && ssr.current) {
+            if (serverKey != undefined && ssr.current) {
                 return setServerValue(serverKey, result, options)
             }
 

package/src/front/url/search/useSearchValue.ts

@@ -16,8 +16,12 @@ declare global {
 }
 
 function toJSON() {
-    // @ts-ignore
-    if (ssr.exportParams) return this.source
+    if (ssr.exportParams) {
+        // @ts-ignore
+        const source = this.source
+        // @ts-ignore
+        return source ? source : this
+    }
     // @ts-ignore
     return this
 }

package/vite/plugin.ts

@@ -62,7 +62,7 @@ export function hydration(): Plugin {
                 await page.waitForLoadState("networkidle")
 
                 const { root } = await pageCollector(page)
-                const { routes } = getRoutesAndTemplates([{ id: 1, input: [], mask: currentUrl, root }], true, false)
+                const { routes } = getRoutesAndTemplates([{ id: 1, state: {}, mask: currentUrl, root }], true, false)
 
                 console.log({ routes })
                 writeFile("./routs.json", JSON.stringify(routes, null, 2))