jinrai 1.1.3 → 1.1.4

package/lib/src/front/translate/TranslateConfig.js

@@ -0,0 +1,108 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect } from 'react';
+import { ssr } from '../server-state/SSR.js';
+
+const TranslateContext = createContext(null);
+const useTranslate = () => {
+    const context = useContext(TranslateContext);
+    if (!context)
+        throw new Error("not in context (<TranslateConfig>)");
+    return context;
+};
+const ONE_DAY = 1000 * 60 * 60 * 24;
+const getCookie = (key) => {
+    const match = document.cookie.match(new RegExp(`(?:^|; )${key.replace(/([$?*|{}()[\]\\/+^])/g, "\\$1")}=([^;]*)`));
+    return match ? decodeURIComponent(match[1]) : null;
+};
+const setCookie = (key, value, days = 365) => {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${key}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
+};
+const getStorageKey = (lang) => `lang:${lang}`;
+const loadFromStorage = (lang) => {
+    try {
+        const raw = localStorage.getItem(getStorageKey(lang));
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (Date.now() > parsed.expires) {
+            localStorage.removeItem(getStorageKey(lang));
+            return null;
+        }
+        return parsed.data;
+    }
+    catch {
+        return null;
+    }
+};
+const saveToStorage = (lang, data) => {
+    localStorage.setItem(getStorageKey(lang), JSON.stringify({
+        data,
+        expires: Date.now() + ONE_DAY,
+    }));
+};
+const TranslateConfig = ({ children, defaultLang, langBaseUrl, source }) => {
+    const [lang, setLang] = useState(defaultLang);
+    const [langMap, setLangMap] = useState(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) => {
+            saveToStorage(lang, data);
+            setLangMap(data);
+        })
+            .catch(() => {
+            setLangMap(null);
+        });
+    }, [lang, defaultLang, langBaseUrl]);
+    const translate = (text, context) => {
+        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) => {
+        if (nextLang === lang)
+            return;
+        if (source.from === "cookie") {
+            setCookie(source.key, nextLang);
+        }
+        setLang(nextLang);
+    };
+    return jsx(TranslateContext.Provider, { value: { translate, changeLang, lang }, children: children });
+};
+
+export { TranslateConfig, useTranslate };

package/lib/src/front/url/JinraiContext.d.ts

@@ -2,5 +2,6 @@ import { DependencyList, ReactNode } from "react";
 export interface JinraiProps {
     deps?: DependencyList;
     children?: ReactNode;
+    search: string;
 }
 export declare const JinraiContext: import("react").Context<JinraiProps>;

package/lib/src/front/url/JinraiContext.js

@@ -3,6 +3,7 @@ import { createContext } from 'react';
 const JinraiContext = createContext({
     deps: [],
     children: undefined,
+    search: ""
 });
 
 export { JinraiContext };

package/lib/src/front/url/adapter/def.js

@@ -3,7 +3,7 @@ import { JinraiContext } from '../JinraiContext.js';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 
 const Adapter = (props) => {
-    return (jsx(NuqsAdapter, { children: jsx(JinraiContext.Provider, { value: { deps: props.deps ?? [] }, ...props }) }));
+    return (jsx(NuqsAdapter, { children: jsx(JinraiContext.Provider, { value: { deps: props.deps ?? [], search: "" }, ...props }) }));
 };
 
 export { Adapter };

package/lib/src/front/url/adapter/rrd6.js

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

package/lib/src/front/url/adapter/rrd7.js

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

package/lib/src/front/url/search/useSearch.js

@@ -4,11 +4,10 @@ import { ssr } from '../../server-state/SSR.js';
 import { getJinraiValue } from './useSearchValue.js';
 
 const useSearch = () => {
-    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/lib/src/front/wrapper/Custom.js

@@ -2,11 +2,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { ssr } from '../server-state/SSR.js';
 import { SPLIT } from '../../bin/routes/Parser.js';
+import { orig } from '../server-state/orig.js';
 
 const Custom = ({ name, props, children }) => {
     if (!ssr.current)
         return jsx(Fragment, { children: children });
-    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/lib/vite/plugin.js

@@ -2,9 +2,11 @@ import { createServer } from 'vite';
 import { AsyncLocalStorage } from 'async_hooks';
 import { chromium } from 'playwright';
 
-const pageCollector = async (page) => {
+const ViteAgent = "____JINRAI_VITE_AGENT____";
+
+const pageTestCollector = async (page) => {
     const state = await page.evaluate(() => {
-        const state = Object.fromEntries(window.$exportServerStates);
+        const state = Object.fromEntries(window.$testStates);
         return state;
     });
     const root = await page.locator("#root").innerHTML();
@@ -12,12 +14,12 @@ const pageCollector = async (page) => {
 };
 
 const urlStorage = new AsyncLocalStorage();
+const cashe = new Map();
 function hydration() {
     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 = undefined;
     let context = undefined;
     let page = undefined;
@@ -30,10 +32,9 @@ function hydration() {
         mirrorServer = server;
         await mirrorServer.listen();
         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",
             });
             page = await context.newPage();
@@ -54,25 +55,30 @@ function hydration() {
         async transformIndexHtml(html) {
             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)
-                // console.log({ routes })
-                // writeFile("./routs.json", JSON.stringify(routes, null, 2))
-                // html = html.replace("<!--app-html-->", root)
-                html = html.replace("<!--app-head-->", JSON.stringify(state, null, 2));
-                return html;
+                await page.waitForTimeout(2000);
+                const { root, state } = await pageTestCollector(page);
+                cashe.set(currentUrl, { root, state });
+                return print(html, root, state);
             }
             return html;
         },
         closeWatcher() {
-            console.log("Stop server");
             page?.close();
             mirrorServer?.close();
             context?.close();
         },
     };
 }
+const print = (html, root, state) => {
+    html = html.replace("<!--app-html-->", root);
+    html = html.replace("<!--app-head-->", `<script>window.__appc__ = ${JSON.stringify({ state })}</script>`);
+    return html;
+};
 
 export { hydration };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jinrai",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "description": "A powerful library that analyzes your modern web application and automatically generates a perfectly rendered, static snapshot of its pages. Experience unparalleled loading speed and SEO clarity without the complexity of traditional SSR setups. Simply point Jinrai at your SPA and witness divine speed.",
     "main": "lib/index.ts",
     "scripts": {
@@ -70,6 +70,10 @@
         "./vite": {
             "types": "./lib/vite/plugin.d.ts",
             "import": "./lib/vite/plugin.js"
+        },
+        "./translate": {
+            "types": "./lib/src/front/translate/TranslateConfig.d.ts",
+            "import": "./lib/src/front/translate/TranslateConfig.js"
         }
     }
 }

package/rollup.config.mjs

@@ -68,7 +68,8 @@ export default defineConfig([
             index: path.resolve(__dirname, "index.ts"),
             "src/front/url/adapter/rrd6": path.resolve(__dirname, "src/front/url/adapter/rrd6.tsx"),
             "src/front/url/adapter/rrd7": path.resolve(__dirname, "src/front/url/adapter/rrd7.tsx"),
-            "src/front/url/adapter/def": path.resolve(__dirname, "src/front/url/adapter/def.tsx")
+            "src/front/url/adapter/def": path.resolve(__dirname, "src/front/url/adapter/def.tsx"),
+            "src/front/translate/TranslateConfig": path.resolve(__dirname, "src/front/translate/TranslateConfig.tsx"),
         },
         output: {
             dir: path.resolve(__dirname, "lib"),

package/src/bin/agent/agent.ts

@@ -1 +1,2 @@
 export const JinraiAgent = "____JINRAI_AGENT____"
+export const ViteAgent = "____JINRAI_VITE_AGENT____"

package/src/bin/build/build.ts

@@ -28,21 +28,23 @@ export const runBuild = async (options: buildArgs) => {
 
     const [serverUrl, close] = await vitePreview()
 
-    const pages = await getRawPageData(serverUrl, config.pages, config.test, options.debug)
+    const { pages, lang } = await getRawPageData(serverUrl, config.pages, config.test, options.debug)
+
+    console.log({ lang })
 
     close()
 
     const outputcashe = path.join(config.dist ?? "dist", ".cached")
 
     task.do("Format")
-    const { routes, templates } = getRoutesAndTemplates(pages)
+    const { routes, templates, customComponents } = getRoutesAndTemplates(pages)
 
     task.next(`Export: (${templates.length})`)
     await mkdir(outputcashe, { recursive: true })
 
     console.log("dev")
 
-    const exportConfig = { routes, proxy: config.proxy, meta: config.meta }
+    const exportConfig = { routes, proxy: config.proxy, meta: config.meta, lang }
 
     await writeFile(path.join(outputcashe, "config.json"), JSON.stringify(exportConfig, null, 2))
     // await writeFile(
@@ -54,16 +56,27 @@ export const runBuild = async (options: buildArgs) => {
         await writeFile(path.join(outputcashe, `${name}.html`), template)
     }
 
-    if (config.test) {
-        task.next(`Tests`)
-        for await (const page of pages) {
-            if (!page.test) {
-                continue
-            }
+    if (customComponents.length) {
+        task.next(`Custom`)
+
+        await mkdir(path.join(outputcashe, "custom"), { recursive: true })
 
-            await writeFile(path.join(outputcashe, `test_${page.id}.html`), normalizeHtmlWhitespace(page.test))
+        for await (const component of customComponents) {
+            await writeFile(path.join(outputcashe, "custom", `${component.name}.html`), component.html)
+            await writeFile(path.join(outputcashe, "custom", `${component.name}.json`), component.props)
         }
     }
 
+    // if (config.test) {
+    //     task.next(`Tests`)
+    //     for await (const page of pages) {
+    //         if (!page.test) {
+    //             continue
+    //         }
+
+    //         await writeFile(path.join(outputcashe, `test_${page.id}.html`), normalizeHtmlWhitespace(page.test))
+    //     }
+    // }
+
     task.success()
 }

package/src/bin/playwright/pageCollector.ts

@@ -1,14 +1,18 @@
 import { Page } from "playwright"
 import { ServerStateMap } from "../../front/server-state/useServerState"
+import { DefaultLangType } from "../../front/translate/TranslateConfig"
 
-export const pageCollector = async (page: Page): Promise<{ state: ServerStateMap; root: string }> => {
-    const state = await page.evaluate(() => {
+export const pageCollector = async (
+    page: Page,
+): Promise<{ state: ServerStateMap; root: string; lang: DefaultLangType }> => {
+    const [state, lang] = await page.evaluate(() => {
         const state = Object.fromEntries((window as any).$exportServerStates)
+        const lang = (window as any).$langDefaultConfig
 
-        return state
+        return [state, lang]
     })
 
     const root = await page.locator("#root").innerHTML()
 
-    return { root, state }
+    return { root, state, lang }
 }

package/src/bin/playwright/pageTestCollector.ts

@@ -0,0 +1,15 @@
+import { Page } from "playwright";
+import { ServerStateMap } from "../../front/server-state/useServerState";
+
+
+export const pageTestCollector = async (page: Page): Promise<{ state: ServerStateMap; root: string }> => {
+    const state = await page.evaluate(() => {
+        const state = Object.fromEntries((window as any).$testStates)
+
+        return state
+    })
+
+    const root = await page.locator("#root").innerHTML()
+
+    return { root, state }
+}

package/src/bin/playwright/templates.ts

@@ -4,6 +4,7 @@ import { spinners } from "ora"
 import { pageCollector } from "./pageCollector"
 import { ServerValue } from "../../front/server-state/serverStates"
 import { JinraiAgent } from "../agent/agent"
+import { DefaultLangType } from "../../front/translate/TranslateConfig"
 
 export interface PageData {
     id: number
@@ -13,16 +14,22 @@ export interface PageData {
     test?: string
 }
 
+export interface Pages {
+    pages: PageData[]
+    lang?: DefaultLangType
+}
+
 export const getRawPageData = async (
     url: string,
     pages: string[],
     test: boolean = false,
     debug: boolean = false,
-): Promise<PageData[]> => {
+): Promise<Pages> => {
     const task = new Task()
     task.next("Router analysis", "yellow", spinners.dotsCircle)
 
     const result: PageData[] = []
+    let defaultLang: DefaultLangType | undefined = undefined
 
     const browser = await chromium.launch({ headless: !debug, devtools: true, channel: "chrome" })
     // const test_browser = await chromium.launch({ headless: true, channel: "chrome" })
@@ -36,7 +43,7 @@ export const getRawPageData = async (
         task.next(mask, "yellow", spinners.dotsCircle, 1)
 
         const page = await context.newPage()
-        const path = mask.replaceAll("{", "").replaceAll("}", "")
+        const path = mask.replaceAll("{", "").replaceAll("}", "").replace("\/*", "")
 
         await page.goto(url + path)
 
@@ -44,7 +51,10 @@ export const getRawPageData = async (
 
         await page.waitForTimeout(1000)
 
-        const { state, root } = await pageCollector(page)
+        const { state, root, lang } = await pageCollector(page)
+        if (defaultLang == undefined) {
+            defaultLang = lang
+        }
 
         // if (debug) console.log({ input })
 
@@ -77,5 +87,5 @@ export const getRawPageData = async (
     // await test_browser.close()
 
     task.success()
-    return result
+    return { pages: result, lang: defaultLang }
 }

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,
     }
 }