jinrai 1.1.3 → 1.1.5

package/src/bin/routes/Parser.ts

@@ -13,7 +13,7 @@ interface ParserOptions {
     normalize?: boolean
 }
 
-export type Element = ArrayElement | HtmlElement | ValueElement | CustomElement
+export type Element = ArrayElement | HtmlElement | ValueElement | CustomElement | TranslateText | TValueElement
 
 interface ArrayElement {
     type: "array"
@@ -30,6 +30,15 @@ interface ValueElement {
     type: "value"
     key: string
 }
+interface TValueElement {
+    type: "tvalue"
+    value: string
+}
+
+interface TranslateText {
+    type: "t"
+    text: string
+}
 
 interface CustomElement {
     type: "custom"
@@ -37,17 +46,27 @@ interface CustomElement {
     props: object
 }
 
+export interface CustomExample {
+    name: string
+    html: string
+    props: any
+}
+
 export class Parser {
     options?: ParserOptions
 
     openVar = "{{"
     createVar = "}}"
+    openTVar = "{!"
+    createTVar = "!}"
+
     createArray = "</loopwrapper"
     createCustom = "</custom"
     deepUp = "<loopwrapper"
     deepUp2 = "<custom"
 
     templates: Record<string, string> = {}
+    custom: CustomExample[] = []
 
     constructor(options?: ParserOptions) {
         this.options = options
@@ -63,9 +82,10 @@ export class Parser {
         let match
         let deep = 0
         let lastIndex = 0
+        let translate = false
 
         const tagPattern = new RegExp(
-            `(<loopwrapper(\\s+[^>]*)?>|</loopwrapper>|\{\{|\}\}|<custom(\\s+[^>]*)?>|</custom>)`,
+            `(<loopwrapper(\\s+[^>]*)?>|</loopwrapper>|\{\{|\}\}|\{\!|\!\}|<custom(\\s+[^>]*)?>|</custom>)`,
             "gi",
         )
 
@@ -73,28 +93,42 @@ export class Parser {
             const currentTag = match[0]
             const value = content.substring(lastIndex, match.index)
 
-            if (currentTag.startsWith(this.createArray)) {
-                deep--
-                if (deep > 0) continue
-                this.createElement(tree, value)
-            } else if (currentTag.startsWith(this.deepUp)) {
-                deep++
-                if (deep > 1) continue
-                this.createElement(tree, value)
-            } else if (currentTag.startsWith(this.createCustom)) {
-                deep--
-                if (deep != 0) continue
-                this.createCustomElement(tree, value)
-            } else if (currentTag.startsWith(this.deepUp2)) {
-                deep++
-                if (deep > 1) continue
-                this.createElement(tree, value)
-            } else if (currentTag == this.createVar) {
-                if (deep != 0) continue
-                this.createElement(tree, value, true)
+            if (translate) {
+                if (currentTag.startsWith(this.createTVar)) {
+                    translate = false
+                    this.createTranslate(tree, value)
+                } else {
+                    continue
+                }
             } else {
-                if (deep != 0) continue
-                this.createElement(tree, value)
+                if (currentTag.startsWith(this.createArray)) {
+                    deep--
+                    if (deep > 0) continue
+                    this.createElement(tree, value)
+                } else if (currentTag.startsWith(this.deepUp)) {
+                    deep++
+                    if (deep > 1) continue
+                    this.createElement(tree, value)
+                } else if (currentTag.startsWith(this.createCustom)) {
+                    deep--
+                    if (deep != 0) continue
+                    this.createCustomElement(tree, value)
+                } else if (currentTag.startsWith(this.deepUp2)) {
+                    deep++
+                    if (deep > 1) continue
+                    this.createElement(tree, value)
+                } else if (currentTag.startsWith(this.openTVar)) {
+                    ////////////// >>>>
+                    if (deep != 0) continue
+                    translate = true
+                    this.createElement(tree, value)
+                } else if (currentTag == this.createVar) {
+                    if (deep != 0) continue
+                    this.createElement(tree, value, true)
+                } else {
+                    if (deep != 0) continue
+                    this.createElement(tree, value)
+                }
             }
 
             lastIndex = match.index + currentTag.length
@@ -110,6 +144,14 @@ export class Parser {
         const [customProps, exampleProps, children] = value.split(SPLIT)
         const custom = JSON.parse(customProps) as CustomElement
 
+        if (this.custom.find(itm => itm.name == custom.name) == undefined) {
+            this.custom.push({
+                name: custom.name,
+                html: children,
+                props: exampleProps,
+            })
+        }
+
         parent.push({
             type: "custom",
             name: custom.name,
@@ -117,12 +159,31 @@ export class Parser {
         })
     }
 
-    createElement(parent: Element[], value: string, isVarible?: boolean) {
-        if (isVarible)
+    createVarible(parent: Element[], value: string) {
+        return parent.push({
+            type: "value",
+            key: value,
+        })
+    }
+
+    createTranslate(parent: Element[], value: string) {
+        if (value.startsWith("{{") && value.endsWith("}}")) {
             return parent.push({
-                type: "value",
-                key: value,
+                type: "tvalue",
+                value: value.slice(2, -2),
             })
+        }
+
+        return parent.push({
+            type: "t",
+            text: value,
+        })
+    }
+
+    createElement(parent: Element[], value: string, isVarible?: boolean) {
+        if (isVarible) {
+            return this.createVarible(parent, value)
+        }
 
         if (value.trimStart().startsWith("ArrayDataKey=")) {
             const [key, ...val] = value.trimStart().substring(13).split("|")

package/src/bin/routes/getRoutes.ts

@@ -16,7 +16,10 @@ export const getRoutesAndTemplates = (pages: PageData[], normalize: boolean = tr
     for (const [id, template] of pages.entries()) {
         const content = parser.parse(template.root)
 
-        const mask = template.mask.replaceAll("/", "\\/").replace(/{(.*?)}/, ".+?")
+        const mask = template.mask
+            .replaceAll("/", "\\/")
+            .replace(/{(.*?)}/, ".+?")
+            .replace("\/*", "\/?.*")
 
         routes.push({
             id,
@@ -29,5 +32,6 @@ export const getRoutesAndTemplates = (pages: PageData[], normalize: boolean = tr
     return {
         routes,
         templates: parser.templates,
+        customComponents: parser.custom,
     }
 }

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/tests/parse/custom.test.ts

@@ -9,7 +9,8 @@ describe("test custom component", async () => {
 
     it("parse custom.html", async () => {
         const html = await readFile("./tests/parse/content/custom.html", "utf-8")
-        // expect(JSON.stringify(parsr.parse(html))).toEqual("")
+        const result = parsr.parse(html)
+        // expect(JSON.stringify(result)).toEqual("")
 
         expect(parsr.parse(html)).toEqual(custom)
     })

package/tsconfig.types.json

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