jinrai 1.1.3 → 1.1.4

package/src/front/server/useIsServer.ts

@@ -0,0 +1,5 @@
+import { ssr } from "../server-state/SSR"
+
+export const useIsServer = () : boolean => {
+    return ssr.current
+}

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

@@ -161,6 +161,10 @@ function createDataProxy<T>(data: T, path: string = ""): WithDataProxy<T> {
             // ---------------------------
             // 8. Nested object
             // ---------------------------
+            if (data === null) {
+                return undefined
+            }
+
             const value = (data as any)[prop]
             if (!ssr.exportParams) {
                 return value

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

@@ -1,7 +1,10 @@
-import { JinraiAgent } from "../../bin/agent/agent"
+import { JinraiAgent, ViteAgent } from "../../bin/agent/agent"
 
 export const ssr = {
     current: navigator.userAgent == JinraiAgent,
+    // current: true,
+    
+    test: navigator.userAgent == ViteAgent,
     exportParams: true,
     exportToJV: false,
 }
@@ -13,6 +16,7 @@ if (window != undefined) {
 
 export const stringifyInput = (input: any) => {
     ssr.exportParams = false
+
     const result = JSON.stringify(input)
     ssr.exportParams = true
 

package/src/front/server-state/{real.ts → orig.ts}

@@ -2,7 +2,7 @@ import { ssr } from "./SSR"
 import { sources } from "./DataProxy"
 import { getJinraiValue, JinraiValue } from "../url/search/useSearchValue"
 
-export function real<T>(value: T): T {
+export function orig<T>(value: T): T {
     if (!ssr.current) return value
 
     switch (typeof value) {
@@ -31,6 +31,8 @@ export function real<T>(value: T): T {
     }
 }
 
+export const original = orig
+
 const wrapSource = <T>(value: T, source: JinraiValue): T => {
     if (typeof value == "string") {
         return value.bindSource(source) as T

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

@@ -40,7 +40,7 @@ if (window != undefined) {
     window.$exportServerStates = serverStates
 }
 
-const getIdent = (key: ServerKey): string => {
+export const getIdent = (key: ServerKey): string => {
     return Array.isArray(key) ? key.join("-") : key
 }
 
@@ -51,13 +51,19 @@ export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], opti
     const ident = getIdent(key)
     serverStates.set(ident, { options, value: !options?.source ? def : undefined, key })
 
+    console.log("CHECK", ident)
+
     if (ident in initialState) {
         const result = initialState[ident]
         // delete initialState[ident]
 
         console.log("HAS", ident, result)
 
-        return ["data" in result ? result.data : result, true]
+        if (result != null && typeof result == 'object' && "data" in result) {
+            return [result.data, true]
+        }
+
+        return [result, true]
     }
 
     return [def, false]

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

@@ -0,0 +1,15 @@
+import { getIdent, ServerValue } from "./serverStates";
+import { ssr } from "./SSR";
+import { ServerKey } from "./useServerState";
+
+const test_states = new Map<string, any>()
+
+if (window != undefined && ssr.test) {
+    // @ts-ignore
+    window.$testStates = test_states
+}
+
+export const setTestState = (key: ServerKey, value: ServerValue["value"], options?: ServerValue["options"]) => {
+    const ident = getIdent(key)
+    test_states.set(ident, value)
+}

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

@@ -1,6 +1,7 @@
-import { Dispatch, SetStateAction, useRef, useState } from "react"
+import { Dispatch, SetStateAction, useState } from "react"
 import { ssr } from "./SSR"
 import { getServerValue, ServerValue, setServerValue } from "./serverStates"
+import { setTestState } from "./testState"
 
 export type ServerStateMap = Record<string, ServerValue>
 export type ServerKey = string | string[]
@@ -12,7 +13,6 @@ export const useServerState = <T extends ServerValue["value"]>(
 ) => {
     const [serverValue, isInitOnServer] = getServerValue(serverKey, initialValue, options)
     const [value, setStateValue] = useState(serverValue)
-    const isInit = useRef(isInitOnServer)
 
     const setValue: Dispatch<SetStateAction<T>> = (value: T | ((prevState: T) => T)) => {
         setStateValue((prev: T) => {
@@ -22,18 +22,13 @@ export const useServerState = <T extends ServerValue["value"]>(
                 return setServerValue(serverKey, result, options)
             }
 
+            if (serverKey != undefined && ssr.test) {
+                setTestState(serverKey, result, options)
+            }
+
             return result
         })
     }
 
-    // const initOnServer = () => {
-    //     if (isInit.current) {
-    //         isInit.current = false
-    //         return true
-    //     }
-
-    //     return false
-    // }
-
     return [value, setValue, isInitOnServer] as [T, Dispatch<SetStateAction<T>>, boolean]
 }

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

package/src/front/wrapper/Custom.tsx

@@ -1,6 +1,8 @@
 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
@@ -11,7 +13,13 @@ interface CustomProps {
 export const Custom = ({ name, props, children }: CustomProps) => {
     if (!ssr.current) return <Fragment>{children as ReactElement}</Fragment>
 
-    const exampleProps = JSON.stringify({ name, props: props() })
+    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

package/tsconfig.types.json

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

package/vite/plugin.ts

@@ -2,21 +2,26 @@ import { createServer, type Plugin, type ViteDevServer } from "vite"
 
 import { AsyncLocalStorage } from "async_hooks"
 import { type BrowserContext, chromium, Page } from "playwright"
-import { pageCollector } from "../src/bin/playwright/pageCollector"
-// import { getRoutesAndTemplates } from "../src/bin/routes/getRoutes"
-
-// import { writeFile } from "fs/promises"
-import { JinraiAgent } from "../src/bin/agent/agent"
+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
@@ -33,10 +38,10 @@ export function hydration(): Plugin {
 
         debugUrl = mirrorServer.resolvedUrls?.local[0].slice(0, -1)
 
-        chromium.launch({ headless: false, devtools: false, channel: "chrome" }).then(async browser => {
-            console.log("create context")
+        chromium.launch({ headless: true, devtools: false, channel: "chrome" }).then(async browser => {
+
             context = await browser.newContext({
-                // userAgent: JinraiAgent,
+                userAgent: ViteAgent,
                 locale: "ru-RU",
             })
 
@@ -46,7 +51,7 @@ export function hydration(): Plugin {
 
     return {
         name: "vite-jinrai",
-
+        
         configureServer(server: ViteDevServer) {
             server.middlewares.use((req, _res, next) => {
                 if (req.url?.startsWith("/@")) {
@@ -61,29 +66,36 @@ export function hydration(): Plugin {
         async transformIndexHtml(html: string) {
             const currentUrl = urlStorage.getStore()
             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 { state } = await pageCollector(page)
-                // const { routes } = getRoutesAndTemplates([{ id: 1, state: {}, mask: currentUrl, root }], true, false)
+                await page.waitForTimeout(2000)
 
-                // console.log({ routes })
-                // writeFile("./routs.json", JSON.stringify(routes, null, 2))
+                const { root, state } = await pageTestCollector(page)
+                cashe.set(currentUrl, { root, state })
 
-                // html = html.replace("<!--app-html-->", root)
-                html = html.replace("<!--app-head-->", JSON.stringify(state, null, 2))
-
-                return html
+                return print(html, root, state)
             }
             return html
         },
 
         closeWatcher() {
-            console.log("Stop server")
-
             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;