jinrai 1.1.2 → 1.1.3

package/index.ts

@@ -6,3 +6,5 @@ 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) {
@@ -195,14 +196,14 @@ class Task {
 const pageCollector = async (page) => {
     const state = await page.evaluate(() => {
         const state = Object.fromEntries(window.$exportServerStates);
-        console.log("BROWSER", state);
         return state;
     });
-    console.log("CLIENT", state);
     const root = await page.locator("#root").innerHTML();
     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);
@@ -210,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()) {

package/lib/index.d.ts

@@ -5,3 +5,4 @@ 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/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/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: true, //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,11 +1,19 @@
+import { ssr } from './SSR.js';
 import { sources } from './DataProxy.js';
+import { getJinraiValue } from '../url/search/useSearchValue.js';
 
 function real(value) {
+    if (!ssr.current)
+        return value;
     switch (typeof 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") {
@@ -17,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

@@ -11,8 +11,9 @@ export type ServerValue = {
             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"]) => import("./DataProxy").DataProxy;
+export declare const setServerValue: (key: ServerKey, value: ServerValue["value"], options?: ServerValue["options"]) => any;
 export {};

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

@@ -1,7 +1,16 @@
-import { encode } from 'js-base64';
 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");
@@ -9,31 +18,25 @@ if (window != undefined) {
     window.$exportServerStates = serverStates;
 }
 const getIdent = (key) => {
-    {
-        ssr.exportParams = true;
-    }
-    const result = Array.isArray(key) ? JSON.stringify(key) : key.toString();
-    {
-        ssr.exportParams = false;
-    }
-    return encode(result);
+    return Array.isArray(key) ? key.join("-") : key;
 };
 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__ && ident in window.__serverInitialStates__) {
-        // @ts-ignore
-        return [window.__serverInitialStates__[ident], true];
+    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 [def, false];
 };
 const setServerValue = (key, value, options) => {
     const ident = getIdent(key);
-    serverStates.set(ident, { options, value: !options?.source ? value : undefined });
+    serverStates.set(ident, { options, value: !options?.source ? value : undefined, key });
     return createDataProxy(value, `${ident}@`);
 };
 

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

@@ -2,4 +2,4 @@ import { Dispatch, SetStateAction } from "react";
 import { ServerValue } from "./serverStates";
 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];
+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,11 +1,11 @@
-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, 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;
@@ -15,14 +15,14 @@ const useServerState = (serverKey, initialValue, 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/params/useParamsIndex.js

@@ -1,12 +1,13 @@
 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 value.bindSource(getJinraiValue(index.toString(), "paramsIndex", "", def)) ;
+        return ssr.current ? value.bindSource(getJinraiValue(index.toString(), "paramsIndex", "", def)) : value;
     }, [value]);
     return stableValue;
 };

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

@@ -1,12 +1,13 @@
 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 value.bindSource(getJinraiValue("", "search", "", "")) ;
+        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;

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

@@ -5,19 +5,19 @@ import { ssr } from '../../server-state/SSR.js';
 function toJSON() {
     if (ssr.exportParams) {
         // @ts-ignore
-        const source = this.source;
+        const $JV = this.$JV;
         // @ts-ignore
-        return source ? source : this;
+        return $JV ? { $JV } : this;
     }
     // @ts-ignore
     return this;
 }
 {
-    String.prototype.source = undefined;
+    String.prototype.$JV = undefined;
     String.prototype.toJSON = toJSON;
     String.prototype.bindSource = function (source) {
         const result = new String(this);
-        result.source = source;
+        result.$JV = source;
         return result;
     };
     if (!Array.prototype.toJSON) {
@@ -25,7 +25,7 @@ function toJSON() {
     }
     if (!Array.prototype.bindSource) {
         Array.prototype.bindSource = function (source) {
-            this.source = source;
+            this.$JV = source;
             return this;
         };
     }
@@ -33,7 +33,7 @@ function toJSON() {
 const useSearchValue = (key, defaultValue) => {
     const [value, setValue] = useQueryState(key, { defaultValue });
     const stableValue = useMemo(() => {
-        return value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) ;
+        return ssr.current ? value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) : value;
     }, [key, value]);
     return [stableValue, setValue];
 };
@@ -41,12 +41,17 @@ const useSearchArray = (key, defaultValue = [], separator = ",") => {
     const stableDefault = useMemo(() => defaultValue, []);
     const [value, setValue] = useQueryState(key, parseAsArrayOf(parseAsString, separator).withDefault(stableDefault));
     const stableValue = useMemo(() => {
-        return value.bindSource(getJinraiValue(key, "searchArray", separator, defaultValue)) ;
+        return ssr.current ? value.bindSource(getJinraiValue(key, "searchArray", separator, defaultValue)) : value;
     }, [key, value]);
     return [stableValue, setValue];
 };
 const getJinraiValue = (key, type, separator, def) => {
-    return `@JV[[${JSON.stringify({ key, type, separator, def })}]]`;
+    return {
+        key,
+        type,
+        separator,
+        def,
+    };
 };
 
 export { getJinraiValue, useSearchArray, useSearchValue };

package/lib/src/front/wrapper/Custom.d.ts

@@ -1,8 +1,8 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactNode } from "react";
 interface CustomProps {
     name: string;
-    props: object;
+    props: () => object;
     children: ReactNode;
 }
-export declare const Custom: ({ name, props, children }: CustomProps) => string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const Custom: ({ name, props, children }: CustomProps) => import("react/jsx-runtime").JSX.Element;
 export {};