jinrai 1.1.2 → 1.1.3

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

@@ -1,8 +1,20 @@
-import { encode } from "js-base64"
 import createDataProxy from "./DataProxy"
-import { ssr } from "./SSR"
 import { ServerKey } from "./useServerState"
 
+// @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__
+}
+
 interface Request {
     method: string
     url: string
@@ -16,9 +28,11 @@ export type ServerValue = {
             request?: Request
         }
     }
+    key: ServerKey
 }
 
 export const serverStates = new Map<string, ServerValue>()
+const idents: string[] = []
 
 if (window != undefined) {
     console.log("init $exportServerStates")
@@ -27,15 +41,7 @@ if (window != undefined) {
 }
 
 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)
+    return Array.isArray(key) ? key.join("-") : key
 }
 
 export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], options?: ServerValue["options"]) => {
@@ -43,12 +49,15 @@ export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], opti
         return [def, false]
     }
     const ident = getIdent(key)
-    serverStates.set(ident, { options, value: !options?.source ? def : undefined })
+    serverStates.set(ident, { options, value: !options?.source ? def : undefined, key })
 
-    // @ts-ignore
-    if (window != undefined && window?.__serverInitialStates__ && ident in window.__serverInitialStates__) {
-        // @ts-ignore
-        return [window.__serverInitialStates__[ident], true]
+    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]
@@ -56,6 +65,6 @@ export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], opti
 
 export const setServerValue = (key: ServerKey, value: ServerValue["value"], options?: ServerValue["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/src/front/server-state/useServerState.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useState } from "react"
+import { Dispatch, SetStateAction, useRef, useState } from "react"
 import { ssr } from "./SSR"
 import { getServerValue, ServerValue, setServerValue } from "./serverStates"
 
@@ -12,7 +12,7 @@ export const useServerState = <T extends ServerValue["value"]>(
 ) => {
     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) => {
@@ -26,14 +26,14 @@ export const useServerState = <T extends ServerValue["value"]>(
         })
     }
 
-    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,36 +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() {
     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
 }
 
 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
     }
 
@@ -40,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
         }
     }
@@ -71,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>
+    )
 }

package/tests/data-proxy/create-dataproxy.test.ts

@@ -0,0 +1,116 @@
+import { describe, it, expect } from "vitest"
+import createDataProxy, { DataProxy } from "../../src/front/server-state/DataProxy"
+import { ssr, stringifyInput } from "../../src/front/server-state/SSR"
+
+const getValue = <T>(p: T & DataProxy) => p.getValue()
+
+describe("createDataProxy", () => {
+    it("should return getValue() = original data", () => {
+        const proxy = createDataProxy({ a: 1 })
+        expect(proxy.getValue()).toEqual({ a: 1 })
+    })
+
+    it("should generate template for primitive children", () => {
+        const proxy = createDataProxy({ name: "John" })
+
+        // name → {{/name}}
+        expect((proxy as any).name).toBe("{{/name}}")
+    })
+
+    it("should create nested proxies for objects", () => {
+        const proxy = createDataProxy({ user: { age: 20 } })
+
+        // user is proxy
+        const sub = (proxy as any).user
+        expect(typeof sub.getValue).toBe("function")
+
+        // nested fallback
+        expect(sub.age).toBe("{{/user/age}}")
+    })
+
+    it("should work with arrays in map()", () => {
+        const data = { items: [1, 2, 3] }
+        const proxy = createDataProxy(data)
+
+        const res = (proxy as any).items.map((itm: any) => itm)
+        // вернул React.createElement(...) → проверим массив аргументов
+        const [, arr] = res.props.children
+
+        expect(arr.length).toBe(1) // slice(0,1)
+        const mapped = arr[0]
+        expect(getValue(mapped)).toBe(1)
+    })
+
+    it("should handle Symbol.toPrimitive", () => {
+        const proxy = createDataProxy(123 as any)
+
+        const str = `${proxy}` // вызывает toPrimitive
+
+        expect(str).toBe("{{}}") // путь "" → {{}}
+    })
+
+    it("should return correct path in nested map()", () => {
+        const proxy = createDataProxy({
+            list: [{ value: 10 }],
+        })
+
+        const result = (proxy as any).list.map((itm: any) => itm)
+
+        const [, arr] = result.props.children
+        const mappedProxy = arr[0]
+
+        expect(mappedProxy.value).toBe("{{/list/[ITEM=0]/value}}")
+    })
+
+    it("should allow calling $ accessors", () => {
+        const proxy = createDataProxy({})
+
+        const expr = (proxy as any).$some("id")
+
+        expect(expr).toBe("{{/id\\$some}}")
+    })
+
+    it("toJSON should return template when ssr.exportParams = true", () => {
+        const proxy = createDataProxy({ a: 1 }, "/root")
+
+        expect(stringifyInput(proxy)).toBe('"{{/root}}"')
+    })
+
+    it("should ignore then / Promise-like traps", () => {
+        const proxy = createDataProxy({ then: "abc" } as any)
+
+        // then должен быть undefined → чтобы Proxy не выглядел как Promise
+        expect((proxy as any).then).toBe(undefined)
+    })
+
+    it("should preserve Symbol.iterator for iterable data", () => {
+        const original = [1, 2, 3]
+        const proxy = createDataProxy(original)
+
+        const iter = (proxy as any)[Symbol.iterator]
+        expect(typeof iter).toBe("function")
+
+        const collected = [...proxy]
+        expect(collected).toEqual(["{{/0}}", "{{/1}}", "{{/2}}"])
+    })
+
+    it("should not define Symbol.iterator on non-iterables", () => {
+        const proxy = createDataProxy({})
+
+        const iter = (proxy as any)[Symbol.iterator]
+        expect(iter).toBe(undefined)
+    })
+
+    it("should produce fallback template for unknown prop", () => {
+        const proxy = createDataProxy({})
+
+        expect((proxy as any).abc).toBe("{{/abc}}")
+    })
+
+    it("should produce path-based fallback for nested unknown prop", () => {
+        const proxy = createDataProxy({ user: {} })
+
+        const sub = (proxy as any).user
+        expect(sub.unknown).toBe("{{/user/unknown}}")
+    })
+})

package/tests/{custom.test.ts → parse/custom.test.ts}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest"
-import { Parser } from "../src/bin/routes/Parser"
+import { Parser } from "../../src/bin/routes/Parser"
 import { readFile } from "fs/promises"
 
 import custom from "./content/custom.json"
@@ -8,7 +8,7 @@ describe("test custom component", async () => {
     const parsr = new Parser({ normalize: true })
 
     it("parse custom.html", async () => {
-        const html = await readFile("./tests/content/custom.html", "utf-8")
+        const html = await readFile("./tests/parse/content/custom.html", "utf-8")
         // expect(JSON.stringify(parsr.parse(html))).toEqual("")
 
         expect(parsr.parse(html)).toEqual(custom)

package/tests/{parse.test.ts → parse/parse.test.ts}

@@ -1,6 +1,6 @@
 import { readFile } from "node:fs/promises"
 import { describe, expect, it } from "vitest"
-import { Parser } from "../src/bin/routes/Parser"
+import { Parser } from "../../src/bin/routes/Parser"
 
 import result_1 from "./content/1_result.json"
 import result_2 from "./content/2_result.json"
@@ -14,27 +14,27 @@ describe("test Parser class", async () => {
     const parsr = new Parser({ normalize: true })
 
     it("parse 1.html", async () => {
-        const html = await readFile("./tests/content/1.html", "utf-8")
+        const html = await readFile("./tests/parse/content/1.html", "utf-8")
         expect(parsr.parse(html)).toEqual(result_1)
     })
 
     it("parse 2.html", async () => {
-        const html = await readFile("./tests/content/2.html", "utf-8")
+        const html = await readFile("./tests/parse/content/2.html", "utf-8")
         expect(parsr.parse(html)).toEqual(result_2)
     })
 
     it("parse 3.html", async () => {
-        const html = await readFile("./tests/content/3.html", "utf-8")
+        const html = await readFile("./tests/parse/content/3.html", "utf-8")
         expect(parsr.parse(html)).toEqual(result_3)
     })
 
     it("parse 4.html", async () => {
-        const html = await readFile("./tests/content/4.html", "utf-8")
+        const html = await readFile("./tests/parse/content/4.html", "utf-8")
         expect(parsr.parse(html)).toEqual(result_4)
     })
 
     it("parse index.html", async () => {
-        const html = await readFile("./tests/content/index.html", "utf-8")
+        const html = await readFile("./tests/parse/content/index.html", "utf-8")
         expect(parsr.parse(html)).toEqual(index)
     })
 })
@@ -43,7 +43,7 @@ describe("test Parser templates", async () => {
     const parsr = new Parser({ normalize: true, templates: true })
 
     it("parse index.html", async () => {
-        const html = await readFile("./tests/content/index.html", "utf-8")
+        const html = await readFile("./tests/parse/content/index.html", "utf-8")
         // expect(JSON.stringify(parsr.templates)).toEqual("")
 
         expect(parsr.parse(html)).toEqual(index_tempates)

package/vite/plugin.ts

@@ -1,11 +1,12 @@
 import { createServer, type Plugin, type ViteDevServer } from "vite"
 
 import { AsyncLocalStorage } from "async_hooks"
-import { type BrowserContext, chromium } from "playwright"
+import { type BrowserContext, chromium, Page } from "playwright"
 import { pageCollector } from "../src/bin/playwright/pageCollector"
-import { getRoutesAndTemplates } from "../src/bin/routes/getRoutes"
+// import { getRoutesAndTemplates } from "../src/bin/routes/getRoutes"
 
-import { writeFile } from "fs/promises"
+// import { writeFile } from "fs/promises"
+import { JinraiAgent } from "../src/bin/agent/agent"
 
 const urlStorage = new AsyncLocalStorage<string>()
 
@@ -18,6 +19,7 @@ export function hydration(): Plugin {
     console.log("create mirror")
     let mirrorServer: ViteDevServer | undefined = undefined
     let context: BrowserContext | undefined = undefined
+    let page: Page | undefined = undefined
 
     let debugUrl: string | undefined = undefined
 
@@ -31,12 +33,14 @@ export function hydration(): Plugin {
 
         debugUrl = mirrorServer.resolvedUrls?.local[0].slice(0, -1)
 
-        chromium.launch({ headless: true, devtools: false }).then(async browser => {
+        chromium.launch({ headless: false, devtools: false, channel: "chrome" }).then(async browser => {
             console.log("create context")
             context = await browser.newContext({
-                userAgent: "____fast-ssr-tool___",
+                // userAgent: JinraiAgent,
                 locale: "ru-RU",
             })
+
+            page = await context.newPage()
         })
     })
 
@@ -56,28 +60,30 @@ export function hydration(): Plugin {
 
         async transformIndexHtml(html: string) {
             const currentUrl = urlStorage.getStore()
-            if (currentUrl && context) {
-                const page = await context.newPage()
+            if (currentUrl && page) {
                 await page.goto(debugUrl + currentUrl)
                 await page.waitForLoadState("networkidle")
 
-                const { root } = await pageCollector(page)
-                const { routes } = getRoutesAndTemplates([{ id: 1, state: {}, mask: currentUrl, root }], true, false)
+                const { state } = await pageCollector(page)
+                // const { routes } = getRoutesAndTemplates([{ id: 1, state: {}, mask: currentUrl, root }], true, false)
 
-                console.log({ routes })
-                writeFile("./routs.json", JSON.stringify(routes, null, 2))
+                // console.log({ routes })
+                // writeFile("./routs.json", JSON.stringify(routes, null, 2))
 
-                const result = html.replace("<!--app-html-->", root)
+                // html = html.replace("<!--app-html-->", root)
+                html = html.replace("<!--app-head-->", JSON.stringify(state, null, 2))
 
-                page.close()
-                return result
+                return html
             }
             return html
         },
 
         closeWatcher() {
             console.log("Stop server")
-            // mirrorServer?.close()
+
+            page?.close()
+            mirrorServer?.close()
+            context?.close()
         },
     }
 }