jinrai 1.1.2 → 1.1.4

package/src/front/translate/TranslateConfig.tsx

@@ -0,0 +1,153 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
+import { ssr } from "../server-state/SSR"
+
+export type DefaultLangType = {
+    defaultLang: string
+    langBaseUrl: string
+    source: TranslateSource
+}
+
+// let DefaultConfig: DefaultLangType | undefined = undefined
+
+// if (window != undefined) {
+//     // @ts-ignore
+//     window.$langDefaultConfig = DefaultConfig
+// }
+
+interface TranslateContextProps {
+    translate: (text: string, context?: string) => string
+    changeLang: (lang: string) => void
+    lang: string
+}
+
+const TranslateContext = createContext<TranslateContextProps | null>(null)
+
+export const useTranslate = () => {
+    const context = useContext(TranslateContext)
+    if (!context) throw new Error("not in context (<TranslateConfig>)")
+    return context
+}
+
+interface TranslateSource {
+    from: "cookie" | "url"
+    key: string
+}
+
+type TranslateConfigProps = DefaultLangType & {
+    children: ReactNode
+}
+
+type LangMap = Record<string, string>
+
+const ONE_DAY = 1000 * 60 * 60 * 24
+
+const getCookie = (key: string): string | null => {
+    const match = document.cookie.match(new RegExp(`(?:^|; )${key.replace(/([$?*|{}()[\]\\/+^])/g, "\\$1")}=([^;]*)`))
+    return match ? decodeURIComponent(match[1]) : null
+}
+
+const setCookie = (key: string, value: string, days = 365) => {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString()
+    document.cookie = `${key}=${encodeURIComponent(value)}; expires=${expires}; path=/`
+}
+
+const getStorageKey = (lang: string) => `lang:${lang}`
+
+const loadFromStorage = (lang: string): LangMap | null => {
+    try {
+        const raw = localStorage.getItem(getStorageKey(lang))
+        if (!raw) return null
+
+        const parsed = JSON.parse(raw) as { data: LangMap; expires: number }
+        if (Date.now() > parsed.expires) {
+            localStorage.removeItem(getStorageKey(lang))
+            return null
+        }
+
+        return parsed.data
+    } catch {
+        return null
+    }
+}
+
+const saveToStorage = (lang: string, data: LangMap) => {
+    localStorage.setItem(
+        getStorageKey(lang),
+        JSON.stringify({
+            data,
+            expires: Date.now() + ONE_DAY,
+        }),
+    )
+}
+
+export const TranslateConfig = ({ children, defaultLang, langBaseUrl, source }: TranslateConfigProps) => {
+    const [lang, setLang] = useState(defaultLang)
+    const [langMap, setLangMap] = useState<LangMap | null>(null)
+
+    useEffect(() => {
+        // @ts-ignore
+        window.$langDefaultConfig = {
+            defaultLang,
+            langBaseUrl,
+            source,
+        }
+    }, [])
+
+    // initial lang from cookie
+    useEffect(() => {
+        if (source.from === "cookie") {
+            const fromCookie = getCookie(source.key)
+            if (fromCookie) setLang(fromCookie)
+        }
+    }, [source.from, source.key])
+
+    // load translations on lang change
+    useEffect(() => {
+        if (lang === defaultLang) {
+            setLangMap(null)
+            return
+        }
+
+        const cached = loadFromStorage(lang)
+        if (cached) {
+            setLangMap(cached)
+            return
+        }
+
+        fetch(langBaseUrl.replace("*", lang))
+            .then(res => {
+                if (!res.ok) throw new Error("Failed to load lang map")
+                return res.json()
+            })
+            .then((data: LangMap) => {
+                saveToStorage(lang, data)
+                setLangMap(data)
+            })
+            .catch(() => {
+                setLangMap(null)
+            })
+    }, [lang, defaultLang, langBaseUrl])
+
+    const translate = (text: string, context?: string): string => {
+        const key = context ? `${text}(context:${context})` : text
+
+        if (ssr.current) {
+            return `{!${key}!}`
+        }
+
+        if (!langMap) return text
+        return langMap[key] ?? langMap[text] ?? text
+    }
+
+    const changeLang = (nextLang: string) => {
+        if (nextLang === lang) return
+
+        if (source.from === "cookie") {
+            setCookie(source.key, nextLang)
+        }
+
+        setLang(nextLang)
+    }
+
+    return <TranslateContext.Provider value={{ translate, changeLang, lang }}>{children}</TranslateContext.Provider>
+}

package/src/front/url/JinraiContext.tsx

@@ -3,8 +3,10 @@ import { createContext, DependencyList, ReactNode } from "react"
 export interface JinraiProps {
     deps?: DependencyList
     children?: ReactNode
+    search: string
 }
 export const JinraiContext = createContext<JinraiProps>({
     deps: [],
     children: undefined,
+    search: ""
 })

package/src/front/url/adapter/def.tsx

@@ -4,7 +4,7 @@ import { NuqsAdapter } from "nuqs/adapters/react"
 export const Adapter = (props: JinraiProps) => {
     return (
         <NuqsAdapter>
-            <JinraiContext.Provider value={{ deps: props.deps ?? [] }} {...props} />
+            <JinraiContext.Provider value={{ deps: props.deps ?? [], search: "" }} {...props} />
         </NuqsAdapter>
     )
 }

package/src/front/url/adapter/rrd6.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { NuqsAdapter } from "nuqs/adapters/react-router/v6"
 
 // @ts-ignore
@@ -9,11 +8,11 @@ export const Adapter = (props: JinraiProps) => {
     // useLocation требует, чтобы компонент был внутри RouterProvider
     // NuqsAdapter должен быть установлен на верхнем уровне, но может работать внутри роутера
     // для React Router v6 адаптера
-    const { pathname } = useLocation()
+    const { pathname, search } = useLocation()
 
     return (
         <NuqsAdapter>
-            <JinraiContext.Provider value={{ deps: [...(props.deps ?? []), pathname] }} {...props} />
+            <JinraiContext.Provider value={{ deps: [...(props.deps ?? []), pathname], search: search.substring(1) }} {...props} />
         </NuqsAdapter>
     )
 }

package/src/front/url/adapter/rrd7.tsx

@@ -8,11 +8,11 @@ export const Adapter = (props: JinraiProps) => {
     // useLocation требует, чтобы компонент был внутри RouterProvider
     // NuqsAdapter должен быть установлен на верхнем уровне, но может работать внутри роутера
     // для React Router v7 адаптера
-    const { pathname } = useLocation()
+    const { pathname, search } = useLocation()
 
     return (
         <NuqsAdapter>
-            <JinraiContext.Provider value={{ deps: [...(props.deps ?? []), pathname] }} {...props} />
+            <JinraiContext.Provider value={{ deps: [...(props.deps ?? []), pathname], search}} {...props} />
         </NuqsAdapter>
     )
 }

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

@@ -4,12 +4,11 @@ import { ssr } from "../../server-state/SSR"
 import { getJinraiValue } from "./useSearchValue"
 
 export const useSearch = (): string => {
-    const { deps } = useContext(JinraiContext)
-    const value = useMemo(() => location.search.substring(1), deps ? deps : [])
+    const { search } = useContext(JinraiContext)
 
     const stableValue = useMemo(() => {
-        return ssr.current ? value.bindSource(getJinraiValue("", "search", "", "")) : value
-    }, [value])
+        return ssr.current ? search.bindSource(getJinraiValue("", "searchFull", "", "")) : search
+    }, [search])
 
     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,38 @@
-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"
+import { orig } from "../server-state/orig"
+
 
 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>
+
+    if (typeof props != "function") {
+        throw new Error(`Custom props is not function (${name})`);
+        
+    }
+
+    const exampleProps = JSON.stringify({ name, props: orig(props()) })
+    
+    ssr.exportToJV = true
+    const customProps = JSON.stringify({ name, props: props() })
+    ssr.exportToJV = false
 
-    return `<custom>${JSON.stringify({ name, props })}<custom>`
+    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/tsconfig.types.json

@@ -30,3 +30,4 @@
   ]
 }
 
+

package/vite/plugin.ts

@@ -1,23 +1,30 @@
 import { createServer, type Plugin, type ViteDevServer } from "vite"
 
 import { AsyncLocalStorage } from "async_hooks"
-import { type BrowserContext, chromium } from "playwright"
-import { pageCollector } from "../src/bin/playwright/pageCollector"
-import { getRoutesAndTemplates } from "../src/bin/routes/getRoutes"
-
-import { writeFile } from "fs/promises"
+import { type BrowserContext, chromium, Page } from "playwright"
+import { ViteAgent } from "../src/bin/agent/agent"
+import { pageTestCollector } from "../src/bin/playwright/pageTestCollector"
 
 const urlStorage = new AsyncLocalStorage<string>()
 
+interface CasheItem {
+    state: any,
+    root: string,
+}
+
+const cashe = new Map<string, CasheItem>()
+
+
+
 export function hydration(): Plugin {
     if (process.env.CHILD_JINRAI_DEV_SERVER) {
         return { name: "vite-jinrai-dummy" }
     }
     process.env.CHILD_JINRAI_DEV_SERVER = "true"
 
-    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,18 +38,20 @@ export function hydration(): Plugin {
 
         debugUrl = mirrorServer.resolvedUrls?.local[0].slice(0, -1)
 
-        chromium.launch({ headless: true, devtools: false }).then(async browser => {
-            console.log("create context")
+        chromium.launch({ headless: true, devtools: false, channel: "chrome" }).then(async browser => {
+
             context = await browser.newContext({
-                userAgent: "____fast-ssr-tool___",
+                userAgent: ViteAgent,
                 locale: "ru-RU",
             })
+
+            page = await context.newPage()
         })
     })
 
     return {
         name: "vite-jinrai",
-
+        
         configureServer(server: ViteDevServer) {
             server.middlewares.use((req, _res, next) => {
                 if (req.url?.startsWith("/@")) {
@@ -56,28 +65,37 @@ export function hydration(): Plugin {
 
         async transformIndexHtml(html: string) {
             const currentUrl = urlStorage.getStore()
-            if (currentUrl && context) {
-                const page = await context.newPage()
+            if (currentUrl && page) {
+                const data = cashe.get(currentUrl)
+                if (data) {
+                    return print(html, data.root, data.state)
+                }
+
                 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)
-
-                console.log({ routes })
-                writeFile("./routs.json", JSON.stringify(routes, null, 2))
+                await page.waitForTimeout(2000)
 
-                const result = html.replace("<!--app-html-->", root)
+                const { root, state } = await pageTestCollector(page)
+                cashe.set(currentUrl, { root, state })
 
-                page.close()
-                return result
+                return print(html, root, state)
             }
             return html
         },
 
         closeWatcher() {
-            console.log("Stop server")
-            // mirrorServer?.close()
+            page?.close()
+            mirrorServer?.close()
+            context?.close()
         },
     }
 }
+
+
+const print = (html: string, root: string, state: any) => {
+    html = html.replace("<!--app-html-->", root)
+    html = html.replace("<!--app-head-->", `<script>window.__appc__ = ${JSON.stringify({state})}</script>`)
+
+    return html
+}

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

@@ -1 +0,0 @@
-export declare function real<T>(value: T): T;