jinrai 1.1.1 → 1.1.3

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

@@ -1,5 +1,6 @@
 import React from "react"
 import { ssr } from "./SSR"
+import { JinraiValue } from "../url/search/useSearchValue"
 
 // IMPORT REACT
 
@@ -22,99 +23,173 @@ const getTarget = (data: any, path: string) => {
         case "undefined":
         case "symbol":
             // эти типы можно просто завернуть
-            return { value: data }
+            return { $__ROOT__: data }
         default:
             return () => `{{${path}}}`
     }
 }
 
-const createDataProxy = (data: any, path: string = ""): DataProxy => {
+type WithDataProxy<T> = T & DataProxy
+function createDataProxy<T>(data: T, path: string = ""): WithDataProxy<T> {
     if (path.endsWith("@")) sources.set(path.slice(0, -1), data)
 
     return new Proxy(getTarget(data, path), {
-        get: (_: any, prop: string) => {
-            // if (typeof prop == "symbol") return data[prop]
+        get: (_target: any, prop: PropertyKey) => {
+            if (ssr.exportToJV) {
+                return {
+                    $JV: {
+                        key: path + "/" + String(prop),
+                        type: "proxy",
+                        def: data,
+                    },
+                } as { $JV?: JinraiValue }
+            }
 
-            if (!(typeof data == "object" && data !== null && prop in data))
-                // DEV TOOLS
+            // ---------------------------
+            // 1. Обработка символов
+            // ---------------------------
+            if (typeof prop === "symbol") {
                 switch (prop) {
-                    // @ts-ignore
                     case Symbol.toPrimitive:
                         return (hint: string) => {
                             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 as any)) {
+                            return (data as any)[Symbol.iterator]
+                        }
                         return undefined
+                }
+            }
 
-                    case "_debugInfo":
-                        return {
-                            note: `State From Request (${path})`,
-                            kind: typeof data,
-                            timestamp: Date.now(),
-                            preview: data,
-                        }
+            // ---------------------------
+            // 2. DEV tools
+            // ---------------------------
+            if (!(typeof data === "object" && data !== null && prop in (data as any))) {
+                if (prop === "$$typeof" || prop === "type") {
+                    return undefined
+                }
+
+                if (prop === "_debugInfo") {
+                    return {
+                        note: `State From Request (${path})`,
+                        kind: typeof data,
+                        timestamp: Date.now(),
+                        preview: data,
+                    }
                 }
+            }
 
-            // SELF
-            if (prop.startsWith("$")) return (key: string) => `{{${path + "/" + key}${"\\" + prop}}}`
+            // ---------------------------
+            // 3. SELF: $key → returns function
+            // ---------------------------
+            if (typeof prop === "string" && prop.startsWith("$")) {
+                return (key: string) => `{{${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: (arg0: DataProxy) => any) =>
-                        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 as any)[prop]
             }
+
+            if (prop === "length") {
+                if (Array.isArray(data)) {
+                    return data.length
+                }
+            }
+
+            if (prop === "map" || prop === "forEach") {
+                return (callback: (arg: DataProxy) => any) =>
+                    React.createElement("loopwrapper", null, [
+                        `ArrayDataKey=${path}|`,
+                        Object.entries(data as any)
+                            .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: "",
+                              },
+                          } as { $JV?: JinraiValue })
+                }
+            }
+
+            // ---------------------------
+            // 8. Nested object
+            // ---------------------------
+            const value = (data as any)[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)}}}`
         },
-    })
+    }) as any
 }
 
 export default createDataProxy

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

@@ -1,4 +1,20 @@
+import { JinraiAgent } from "../../bin/agent/agent"
+
 export 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
+}
+
+export const stringifyInput = (input: any) => {
+    ssr.exportParams = false
+    const result = JSON.stringify(input)
+    ssr.exportParams = true
+
+    return result
 }

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

@@ -1,5 +1,6 @@
 import { ssr } from "./SSR"
 import { sources } from "./DataProxy"
+import { getJinraiValue, JinraiValue } from "../url/search/useSearchValue"
 
 export function real<T>(value: T): T {
     if (!ssr.current) return value
@@ -8,7 +9,13 @@ export function real<T>(value: T): T {
         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<T>(result, getJinraiValue(value, "proxy", "", result))
+            }
+
+            return value
 
         case "object":
             // @ts-ignore
@@ -24,6 +31,14 @@ export function real<T>(value: T): T {
     }
 }
 
+const wrapSource = <T>(value: T, source: JinraiValue): T => {
+    if (typeof value == "string") {
+        return value.bindSource(source) as T
+    }
+
+    return value
+}
+
 const getArrayByPath = (path: string) => {
     const [sourceIndex, requestPath] = path.split("@", 2)
     const keys = requestPath.split("/")

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

@@ -1,36 +1,70 @@
 import createDataProxy from "./DataProxy"
-import { ssr } from "./SSR"
-import { ServerStateOptions } from "./useServerState"
+import { ServerKey } from "./useServerState"
 
-export type ServerValue = any
+// @ts-ignore
+const initialState = { ...(window?.__appc__?.state ?? {}) }
+// @ts-ignore
+const serverErrors = [...(window?.__appc__?.errors ?? [])]
+
+if (serverErrors.length) {
+    console.error("SERVER:", serverErrors)
+}
 
-export const serverStates = new Map<string, string>()
 if (window != undefined) {
     // @ts-ignore
-    window.__serverExportStates__ = serverStates
+    delete window.__appc__
 }
 
-export const getServerValue = (key: string, def?: ServerValue) => {
-    if (key == "") {
-        return [def, false]
+interface Request {
+    method: string
+    url: string
+    input: any
+}
+
+export type ServerValue = {
+    value: any
+    options?: {
+        source: {
+            request?: Request
+        }
     }
+    key: ServerKey
+}
+
+export const serverStates = new Map<string, ServerValue>()
+const idents: string[] = []
 
+if (window != undefined) {
+    console.log("init $exportServerStates")
     // @ts-ignore
-    if (window != undefined && window?.__serverInitialStates__ && key in window.__serverInitialStates__) {
-        // @ts-ignore
-        return [window.__serverInitialStates__[key], true]
-    }
+    window.$exportServerStates = serverStates
+}
 
-    return [serverStates.get(key) ?? def, false]
+const getIdent = (key: ServerKey): string => {
+    return Array.isArray(key) ? key.join("-") : key
 }
 
-export const setServerValue = (key: string, value: ServerValue, options?: ServerStateOptions) => {
-    ssr.exportParams = true
-    const json = JSON.stringify({ value, options })
-    ssr.exportParams = false
+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, key })
+
+    if (ident in initialState) {
+        const result = initialState[ident]
+        // delete initialState[ident]
 
-    console.log(key, json)
-    serverStates.set(key, json)
+        console.log("HAS", ident, result)
+
+        return ["data" in result ? result.data : result, true]
+    }
+
+    return [def, false]
+}
 
-    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, key })
+    return createDataProxy(value, `${ident}@`)
 }

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

@@ -1,33 +1,24 @@
-import { Dispatch, SetStateAction, useState } from "react"
+import { Dispatch, SetStateAction, useRef, useState } from "react"
 import { ssr } from "./SSR"
 import { getServerValue, ServerValue, setServerValue } from "./serverStates"
 
-interface Request {
-    method: string
-    url: string
-    input: any
-}
+export type ServerStateMap = Record<string, ServerValue>
+export type ServerKey = string | string[]
 
-export interface ServerStateOptions {
-    source: {
-        request?: Request
-    }
-}
-
-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)
+    const isInit = useRef(isInitOnServer)
 
     const setValue: Dispatch<SetStateAction<T>> = (value: T | ((prevState: T) => T)) => {
         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)
             }
 
@@ -35,14 +26,14 @@ export const useServerState = <T extends ServerValue>(
         })
     }
 
-    const initOnServer = () => {
-        if (isInit) {
-            setIsInit(false)
-            return true
-        }
+    // const initOnServer = () => {
+    //     if (isInit.current) {
+    //         isInit.current = false
+    //         return true
+    //     }
 
-        return false
-    }
+    //     return false
+    // }
 
-    return [value, setValue, initOnServer] as [T, Dispatch<SetStateAction<T>>, () => boolean]
+    return [value, setValue, isInitOnServer] as [T, Dispatch<SetStateAction<T>>, boolean]
 }

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

@@ -8,7 +8,7 @@ export const useSearch = (): string => {
     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/src/front/url/search/useSearchValue.ts

@@ -2,32 +2,43 @@ import { parseAsArrayOf, parseAsString, useQueryState, UseQueryStateReturn } fro
 import { useMemo } from "react"
 import { ssr } from "../../server-state/SSR"
 
+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[]
     }
 }
 
 function toJSON() {
-    // @ts-ignore
-    if (ssr.exportParams) return this.source
+    if (ssr.exportParams) {
+        // @ts-ignore
+        const $JV = this.$JV
+        // @ts-ignore
+        return $JV ? { $JV } : this
+    }
     // @ts-ignore
     return this
 }
 
 if (true) {
-    String.prototype.source = undefined
+    String.prototype.$JV = undefined
     String.prototype.toJSON = toJSON
-    String.prototype.bindSource = function (source: string): string {
+    String.prototype.bindSource = function (source: JinraiValue): string {
         const result = new String(this)
-        result.source = source
+        result.$JV = source
         return result as string
     }
 
@@ -36,8 +47,8 @@ if (true) {
     }
 
     if (!Array.prototype.bindSource) {
-        Array.prototype.bindSource = function (source: string) {
-            this.source = source
+        Array.prototype.bindSource = function (source: JinraiValue) {
+            this.$JV = source
             return this
         }
     }
@@ -67,6 +78,11 @@ export const useSearchArray = (
     return [stableValue, setValue]
 }
 
-export const getJinraiValue = (key: string, type: string, separator: string, def: any) => {
-    return `@JV[[${JSON.stringify({ key, type, separator, def })}]]`
+export const getJinraiValue = (key: string, type: JinraiValue["type"], separator: string, def: any): JinraiValue => {
+    return {
+        key,
+        type,
+        separator,
+        def,
+    }
 }

package/src/front/wrapper/Custom.tsx

@@ -1,14 +1,30 @@
-import type { FC, ReactElement, ReactNode } from "react"
+import { Fragment, type ReactElement, type ReactNode } from "react"
 import { ssr } from "../server-state/SSR"
+import { SPLIT } from "../../bin/routes/Parser"
 
 interface CustomProps {
     name: string
-    props: object
+    props: () => object
     children: ReactNode
 }
 
 export const Custom = ({ name, props, children }: CustomProps) => {
-    if (!ssr.current) return children as ReactElement
+    if (!ssr.current) return <Fragment>{children as ReactElement}</Fragment>
 
-    return `<custom>${JSON.stringify({ name, props })}<custom>`
+    const exampleProps = JSON.stringify({ name, props: props() })
+    ssr.exportToJV = true
+    const customProps = JSON.stringify({ name, props: props() })
+    ssr.exportToJV = false
+
+    return (
+        //@ts-ignore
+        <custom>
+            {customProps}
+            {SPLIT}
+            {exampleProps}
+            {SPLIT}
+            {children}
+            {/* @ts-ignore */}
+        </custom>
+    )
 }