jinrai 1.1.1 → 1.1.3

package/index.ts

@@ -1,6 +1,10 @@
+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"
 export { useSearchValue, useSearchArray } from "./src/front/url/search/useSearchValue"
 export { useSearch } from "./src/front/url/search/useSearch"
 export { Custom } from "./src/front/wrapper/Custom"
+
+export { stringifyInput } from "./src/front/server-state/SSR"

package/lib/bin/bin.js

@@ -28,6 +28,7 @@ const normalizeHtmlWhitespace = (html) => {
         .trim();
 };
 
+const SPLIT = "@#UNIQ_SPLITTER#@";
 class Parser {
     options;
     openVar = "{{";
@@ -95,12 +96,12 @@ class Parser {
         }
     }
     createCustomElement(parent, value) {
-        const [name, ...props] = value.trimStart().split("|");
-        value = props.join("|");
+        const [customProps, exampleProps, children] = value.split(SPLIT);
+        const custom = JSON.parse(customProps);
         parent.push({
             type: "custom",
-            name,
-            props: value,
+            name: custom.name,
+            props: custom.props,
         });
     }
     createElement(parent, value, isVarible) {
@@ -144,7 +145,7 @@ const getRoutesAndTemplates = (pages, normalize = true, templates = true) => {
             id,
             content,
             mask,
-            requests: template.input,
+            state: template.state,
         });
     }
     return {
@@ -194,12 +195,15 @@ class Task {
 
 const pageCollector = async (page) => {
     const state = await page.evaluate(() => {
-        return window.__page_requests;
+        const state = Object.fromEntries(window.$exportServerStates);
+        return state;
     });
     const root = await page.locator("#root").innerHTML();
-    return { state, root };
+    return { root, state };
 };
 
+const JinraiAgent = "____JINRAI_AGENT____";
+
 const getRawPageData = async (url, pages, test = false, debug = false) => {
     const task = new Task();
     task.next("Router analysis", "yellow", spinners.dotsCircle);
@@ -207,7 +211,7 @@ const getRawPageData = async (url, pages, test = false, debug = false) => {
     const browser = await chromium.launch({ headless: !debug, devtools: true, channel: "chrome" });
     // const test_browser = await chromium.launch({ headless: true, channel: "chrome" })
     const context = await browser.newContext({
-        userAgent: "____JINRAI_CLIENT____",
+        userAgent: JinraiAgent,
         locale: "ru-RU",
     });
     for await (const [id, mask] of pages.entries()) {
@@ -233,7 +237,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,6 +1,8 @@
+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";
 export { useSearchValue, useSearchArray } from "./src/front/url/search/useSearchValue";
 export { useSearch } from "./src/front/url/search/useSearch";
 export { Custom } from "./src/front/wrapper/Custom";
+export { stringifyInput } from "./src/front/server-state/SSR";

package/lib/index.js

@@ -4,3 +4,4 @@ export { useParamsIndex } from './src/front/url/params/useParamsIndex.js';
 export { useSearchArray, useSearchValue } from './src/front/url/search/useSearchValue.js';
 export { useSearch } from './src/front/url/search/useSearch.js';
 export { Custom } from './src/front/wrapper/Custom.js';
+export { stringifyInput } from './src/front/server-state/SSR.js';

package/lib/src/bin/agent/agent.d.ts

@@ -0,0 +1 @@
+export declare const JinraiAgent = "____JINRAI_AGENT____";

package/lib/src/bin/agent/agent.js

@@ -0,0 +1,3 @@
+const JinraiAgent = "____JINRAI_AGENT____";
+
+export { JinraiAgent };

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/Parser.d.ts

@@ -1,3 +1,8 @@
+export declare const SPLIT = "@#UNIQ_SPLITTER#@";
+interface CustomElement {
+    name: string;
+    props: object;
+}
 interface ParserOptions {
     templates?: boolean;
     normalize?: boolean;
@@ -19,7 +24,7 @@ interface ValueElement {
 interface CustomElement {
     type: "custom";
     name: string;
-    props: string;
+    props: object;
 }
 export declare class Parser {
     options?: ParserOptions;

package/lib/src/bin/routes/Parser.js

@@ -0,0 +1,5 @@
+import 'node:crypto';
+
+const SPLIT = "@#UNIQ_SPLITTER#@";
+
+export { SPLIT };

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/DataProxy.d.ts

@@ -4,5 +4,6 @@ export interface DataProxy {
     getValue: () => any;
 }
 export declare const sources: Map<string, any>;
-declare const createDataProxy: (data: any, path?: string) => DataProxy;
+type WithDataProxy<T> = T & DataProxy;
+declare function createDataProxy<T>(data: T, path?: string): WithDataProxy<T>;
 export default createDataProxy;

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

@@ -13,92 +13,151 @@ const getTarget = (data, path) => {
         case "undefined":
         case "symbol":
             // эти типы можно просто завернуть
-            return { value: data };
+            return { $__ROOT__: data };
         default:
             return () => `{{${path}}}`;
     }
 };
-const createDataProxy = (data, path = "") => {
+function createDataProxy(data, path = "") {
     if (path.endsWith("@"))
         sources.set(path.slice(0, -1), data);
     return new Proxy(getTarget(data, path), {
-        get: (_, prop) => {
-            // if (typeof prop == "symbol") return data[prop]
-            if (!(typeof data == "object" && data !== null && prop in data))
-                // DEV TOOLS
+        get: (_target, prop) => {
+            if (ssr.exportToJV) {
+                return {
+                    $JV: {
+                        key: path + "/" + String(prop),
+                        type: "proxy",
+                        def: data,
+                    },
+                };
+            }
+            // ---------------------------
+            // 1. Обработка символов
+            // ---------------------------
+            if (typeof prop === "symbol") {
                 switch (prop) {
-                    // @ts-ignore
                     case Symbol.toPrimitive:
                         return (hint) => {
                             console.log("PROXYDATA", hint);
                             return `{{${path}}}`;
                         };
-                    // @ts-ignore
                     case Symbol.toStringTag:
                         return "Object";
-                    // @ts-ignore
                     case Symbol.iterator:
-                        return data[Symbol.iterator];
-                    case "$$typeof":
-                    case "type":
+                        if (typeof data === "object" && data !== null && Symbol.iterator in data) {
+                            return data[Symbol.iterator];
+                        }
                         return undefined;
-                    case "_debugInfo":
-                        return {
-                            note: `State From Request (${path})`,
-                            kind: typeof data,
-                            timestamp: Date.now(),
-                            preview: data,
-                        };
                 }
-            // SELF
-            if (prop.startsWith("$"))
+            }
+            // ---------------------------
+            // 2. DEV tools
+            // ---------------------------
+            if (!(typeof data === "object" && data !== null && prop in data)) {
+                if (prop === "$$typeof" || prop === "type") {
+                    return undefined;
+                }
+                if (prop === "_debugInfo") {
+                    return {
+                        note: `State From Request (${path})`,
+                        kind: typeof data,
+                        timestamp: Date.now(),
+                        preview: data,
+                    };
+                }
+            }
+            // ---------------------------
+            // 3. SELF: $key → returns function
+            // ---------------------------
+            if (typeof prop === "string" && prop.startsWith("$")) {
                 return (key) => `{{${path + "/" + key}${"\\" + prop}}}`;
-            // TYPES
+            }
+            // ---------------------------
+            // 4. Types special cases
+            // ---------------------------
             switch (typeof data) {
                 case "string":
-                    switch (prop) {
-                        case "length":
-                        case "entries":
-                            return undefined;
-                    }
+                    if (prop === "length" || prop === "entries")
+                        return undefined;
+                    break;
                 case "number":
-                    switch (prop) {
-                        case "@@iterator":
-                            return undefined;
-                    }
+                    if (prop === "@@iterator")
+                        return undefined;
+                    break;
                 default:
-                    switch (prop) {
-                        case "then":
-                            return undefined;
-                    }
+                    if (prop === "then")
+                        return undefined;
             }
-            // OTHER
-            switch (prop) {
-                case "find":
-                    return data[prop];
-                case "map":
-                case "forEach":
-                    return (callback) => React.createElement("loopwrapper", null, [
-                        `ArrayDataKey=${path}|`,
-                        Object.entries(data)
-                            .slice(0, 1)
-                            .map(([key, itm]) => callback(createDataProxy(itm, `${path}/[ITEM=${key}]`))),
-                    ]);
-                case "getValue":
-                    return () => data;
-                case "toJSON":
-                    return () => {
-                        console.log("dataproxy toJSON", path, data);
-                        return ssr.exportParams ? `{{${path}}}` : data;
-                    };
-                default:
-                    if (data && (typeof data[prop] == "object" || Array.isArray(data[prop]))) {
-                        return createDataProxy(data[prop], path + "/" + prop);
-                    }
-                    return `{{${path + "/" + prop}}}`;
+            // ---------------------------
+            // 5. Array-like handlers
+            // ---------------------------
+            if (prop === "find") {
+                return data[prop];
+            }
+            if (prop === "length") {
+                if (Array.isArray(data)) {
+                    return data.length;
+                }
+            }
+            if (prop === "map" || prop === "forEach") {
+                return (callback) => React.createElement("loopwrapper", null, [
+                    `ArrayDataKey=${path}|`,
+                    Object.entries(data)
+                        .slice(0, 1)
+                        .map(([key, itm]) => callback(createDataProxy(itm, `${path}/[ITEM=${key}]`))),
+                ]);
+            }
+            // ---------------------------
+            // 6. getValue
+            // ---------------------------
+            if (prop === "getValue") {
+                return () => data;
             }
+            // ---------------------------
+            // 7. toJSON
+            // ---------------------------
+            if (prop === "toJSON") {
+                return () => {
+                    console.log("dataproxy toJSON", path, data);
+                    return ssr.exportParams
+                        ? `{{${path}}}`
+                        : {
+                            $JV: {
+                                key: path,
+                                type: "proxy",
+                                def: data,
+                                separator: "",
+                            },
+                        };
+                };
+            }
+            // ---------------------------
+            // 8. Nested object
+            // ---------------------------
+            const value = data[prop];
+            if (!ssr.exportParams) {
+                return value;
+            }
+            if (value && (typeof value === "object" || Array.isArray(value))) {
+                return createDataProxy(value, path + "/" + String(prop));
+            }
+            // if (ssr.exportParams) {
+            // if (typeof value == "string") {
+            //     const key = `{{${path + "/" + String(prop)}}}`
+            //     const jv = getJinraiValue(key, "proxyValue", "", value)
+            //     return value.bindSource(jv)
+            // }
+            //     return key
+            // } else {
+            //     return value
+            // }
+            // ---------------------------
+            // 9. Final primitive fallback
+            // ---------------------------
+            return `{{${path + "/" + String(prop)}}}`;
         },
     });
-};
+}
 
 export { createDataProxy as default, sources };

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

@@ -1,4 +1,6 @@
 export declare const ssr: {
     current: boolean;
     exportParams: boolean;
+    exportToJV: boolean;
 };
+export declare const stringifyInput: (input: any) => string;

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

@@ -1,6 +1,19 @@
+import { JinraiAgent } from '../../bin/agent/agent.js';
+
 const ssr = {
-    current: navigator.userAgent == "____JINRAI_CLIENT____",
-    exportParams: false,
+    current: navigator.userAgent == JinraiAgent,
+    exportParams: true,
+    exportToJV: false,
+};
+if (window != undefined) {
+    // @ts-ignore
+    window.__ssr = ssr;
+}
+const stringifyInput = (input) => {
+    ssr.exportParams = false;
+    const result = JSON.stringify(input);
+    ssr.exportParams = true;
+    return result;
 };
 
-export { ssr };
+export { ssr, stringifyInput };

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

@@ -1,5 +1,6 @@
 import { ssr } from './SSR.js';
 import { sources } from './DataProxy.js';
+import { getJinraiValue } from '../url/search/useSearchValue.js';
 
 function real(value) {
     if (!ssr.current)
@@ -8,7 +9,11 @@ function real(value) {
         case "number":
             return value;
         case "string":
-            return value.startsWith("{{") && value.endsWith("}}") ? getArrayByPath(value.slice(2, -2)) : value;
+            if (value.startsWith("{{") && value.endsWith("}}")) {
+                const result = getArrayByPath(value.slice(2, -2));
+                return wrapSource(result, getJinraiValue(value, "proxy", "", result));
+            }
+            return value;
         case "object":
             // @ts-ignore
             if (value && typeof value.getValue === "function") {
@@ -20,6 +25,12 @@ function real(value) {
             return value;
     }
 }
+const wrapSource = (value, source) => {
+    if (typeof value == "string") {
+        return value.bindSource(source);
+    }
+    return value;
+};
 const getArrayByPath = (path) => {
     const [sourceIndex, requestPath] = path.split("@", 2);
     const keys = requestPath.split("/");

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

@@ -1,5 +1,19 @@
-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;
+        };
+    };
+    key: ServerKey;
+};
+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"]) => any;
+export {};

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

@@ -1,29 +1,43 @@
 import createDataProxy from './DataProxy.js';
-import { ssr } from './SSR.js';
 
+// @ts-ignore
+const initialState = { ...(window?.__appc__?.state ?? {}) };
+// @ts-ignore
+const serverErrors = [...(window?.__appc__?.errors ?? [])];
+if (serverErrors.length) {
+    console.error("SERVER:", serverErrors);
+}
+if (window != undefined) {
+    // @ts-ignore
+    delete window.__appc__;
+}
 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) => {
+    return Array.isArray(key) ? key.join("-") : key;
+};
+const getServerValue = (key, def, options) => {
+    if (key == undefined) {
         return [def, false];
     }
-    // @ts-ignore
-    if (window != undefined && window?.__serverInitialStates__ && key in window.__serverInitialStates__) {
-        // @ts-ignore
-        return [window.__serverInitialStates__[key], true];
+    const ident = getIdent(key);
+    serverStates.set(ident, { options, value: !options?.source ? def : undefined, key });
+    if (ident in initialState) {
+        const result = initialState[ident];
+        // delete initialState[ident]
+        console.log("HAS", ident, result);
+        return ["data" in result ? result.data : result, 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, key });
+    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

@@ -1,28 +1,28 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 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);
+    useRef(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;
         });
     };
-    const initOnServer = () => {
-        if (isInit) {
-            setIsInit(false);
-            return true;
-        }
-        return false;
-    };
-    return [value, setValue, initOnServer];
+    // const initOnServer = () => {
+    //     if (isInit.current) {
+    //         isInit.current = false
+    //         return true
+    //     }
+    //     return false
+    // }
+    return [value, setValue, isInitOnServer];
 };
 
 export { useServerState };

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

@@ -7,7 +7,7 @@ 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 ssr.current ? value.bindSource(getJinraiValue("", "searchFull", "", "")) : value;
     }, [value]);
     return stableValue;
 };

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

@@ -1,16 +1,22 @@
 import { UseQueryStateReturn } from "nuqs";
+export interface JinraiValue {
+    key: string;
+    type: "searchArray" | "searchString" | "proxy" | "searchFull" | "paramsIndex";
+    separator: string;
+    def: any;
+}
 declare global {
     interface String {
-        source?: string;
+        $JV?: JinraiValue;
         toJSON: () => string;
-        bindSource: (source: string) => string;
+        bindSource: (source: JinraiValue) => string;
     }
     interface Array<T> {
-        source?: string;
+        $JV?: JinraiValue;
         toJSON(): any;
-        bindSource(source: string): T[];
+        bindSource(source: JinraiValue): T[];
     }
 }
 export declare const useSearchValue: (key: string, defaultValue: string) => UseQueryStateReturn<string, string>;
 export declare const useSearchArray: (key: string, defaultValue?: string[], separator?: string) => UseQueryStateReturn<string[], string[]>;
-export declare const getJinraiValue: (key: string, type: string, separator: string, def: any) => string;
+export declare const getJinraiValue: (key: string, type: JinraiValue["type"], separator: string, def: any) => JinraiValue;