jinrai 1.1.2 → 1.1.4

package/lib/src/front/url/search/useSearchValue.d.ts

@@ -1,16 +1,22 @@
 import { UseQueryStateReturn } from "nuqs";
+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[];
     }
 }
 export declare const useSearchValue: (key: string, defaultValue: string) => UseQueryStateReturn<string, string>;
 export declare const useSearchArray: (key: string, defaultValue?: string[], separator?: string) => UseQueryStateReturn<string[], string[]>;
-export declare const getJinraiValue: (key: string, type: string, separator: string, def: any) => string;
+export declare const getJinraiValue: (key: string, type: JinraiValue["type"], separator: string, def: any) => JinraiValue;

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

@@ -5,19 +5,19 @@ import { ssr } from '../../server-state/SSR.js';
 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;
 }
 {
-    String.prototype.source = undefined;
+    String.prototype.$JV = undefined;
     String.prototype.toJSON = toJSON;
     String.prototype.bindSource = function (source) {
         const result = new String(this);
-        result.source = source;
+        result.$JV = source;
         return result;
     };
     if (!Array.prototype.toJSON) {
@@ -25,7 +25,7 @@ function toJSON() {
     }
     if (!Array.prototype.bindSource) {
         Array.prototype.bindSource = function (source) {
-            this.source = source;
+            this.$JV = source;
             return this;
         };
     }
@@ -33,7 +33,7 @@ function toJSON() {
 const useSearchValue = (key, defaultValue) => {
     const [value, setValue] = useQueryState(key, { defaultValue });
     const stableValue = useMemo(() => {
-        return value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) ;
+        return ssr.current ? value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) : value;
     }, [key, value]);
     return [stableValue, setValue];
 };
@@ -41,12 +41,17 @@ const useSearchArray = (key, defaultValue = [], separator = ",") => {
     const stableDefault = useMemo(() => defaultValue, []);
     const [value, setValue] = useQueryState(key, parseAsArrayOf(parseAsString, separator).withDefault(stableDefault));
     const stableValue = useMemo(() => {
-        return value.bindSource(getJinraiValue(key, "searchArray", separator, defaultValue)) ;
+        return ssr.current ? value.bindSource(getJinraiValue(key, "searchArray", separator, defaultValue)) : value;
     }, [key, value]);
     return [stableValue, setValue];
 };
 const getJinraiValue = (key, type, separator, def) => {
-    return `@JV[[${JSON.stringify({ key, type, separator, def })}]]`;
+    return {
+        key,
+        type,
+        separator,
+        def,
+    };
 };
 
 export { getJinraiValue, useSearchArray, useSearchValue };

package/lib/src/front/wrapper/Custom.d.ts

@@ -1,8 +1,8 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactNode } from "react";
 interface CustomProps {
     name: string;
-    props: object;
+    props: () => object;
     children: ReactNode;
 }
-export declare const Custom: ({ name, props, children }: CustomProps) => string | ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const Custom: ({ name, props, children }: CustomProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/src/front/wrapper/Custom.js

@@ -1,5 +1,22 @@
+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 }) => {
-    return `<custom>${JSON.stringify({ name, props })}<custom>`;
+    if (!ssr.current)
+        return jsx(Fragment, { children: children });
+    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 (
+    //@ts-ignore
+    jsxs("custom", { children: [customProps, SPLIT, exampleProps, SPLIT, children] }));
 };
 
 export { Custom };

package/lib/vite/plugin.js

@@ -1,162 +1,28 @@
 import { createServer } from 'vite';
 import { AsyncLocalStorage } from 'async_hooks';
 import { chromium } from 'playwright';
-import { createHash } from 'node:crypto';
-import { writeFile } from 'fs/promises';
 
-const pageCollector = async (page) => {
+const ViteAgent = "____JINRAI_VITE_AGENT____";
+
+const pageTestCollector = async (page) => {
     const state = await page.evaluate(() => {
-        const state = Object.fromEntries(window.$exportServerStates);
-        console.log("BROWSER", state);
+        const state = Object.fromEntries(window.$testStates);
         return state;
     });
-    console.log("CLIENT", state);
     const root = await page.locator("#root").innerHTML();
     return { root, state };
 };
 
-const normalizeHtmlWhitespace = (html) => {
-    return html
-        .replace(/\r?\n|\r/g, " ")
-        .replace(/\s+/g, " ")
-        .replace(/>\s+</g, "><")
-        .trim();
-};
-
-class Parser {
-    options;
-    openVar = "{{";
-    createVar = "}}";
-    createArray = "</loopwrapper";
-    createCustom = "</custom";
-    deepUp = "<loopwrapper";
-    deepUp2 = "<custom";
-    templates = {};
-    constructor(options) {
-        this.options = options;
-    }
-    parse(content) {
-        const tree = [];
-        this.handle(this.options?.normalize ? normalizeHtmlWhitespace(content) : content, tree);
-        return tree;
-    }
-    handle(content, tree) {
-        let match;
-        let deep = 0;
-        let lastIndex = 0;
-        const tagPattern = new RegExp(`(<loopwrapper(\\s+[^>]*)?>|</loopwrapper>|\{\{|\}\}|<custom(\\s+[^>]*)?>|</custom>)`, "gi");
-        while ((match = tagPattern.exec(content)) !== null) {
-            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);
-            }
-            else {
-                if (deep != 0)
-                    continue;
-                this.createElement(tree, value);
-            }
-            lastIndex = match.index + currentTag.length;
-        }
-        if (lastIndex < content.length) {
-            const value = content.substring(lastIndex);
-            this.createElement(tree, value);
-        }
-    }
-    createCustomElement(parent, value) {
-        const [name, ...props] = value.trimStart().split("|");
-        value = props.join("|");
-        parent.push({
-            type: "custom",
-            name,
-            props: value,
-        });
-    }
-    createElement(parent, value, isVarible) {
-        if (isVarible)
-            return parent.push({
-                type: "value",
-                key: value,
-            });
-        if (value.trimStart().startsWith("ArrayDataKey=")) {
-            const [key, ...val] = value.trimStart().substring(13).split("|");
-            value = val.join("|");
-            const children = [];
-            this.handle(value, children);
-            return parent.push({
-                type: "array",
-                data: children,
-                key,
-            });
-        }
-        if (value)
-            parent.push({
-                type: "html",
-                content: this.options?.templates ? this.createTemplate(value) : value,
-            });
-    }
-    createTemplate(html) {
-        if (!(html in this.templates)) {
-            this.templates[html] = createHash("md5").update(Object.keys(this.templates).length.toString()).digest("hex");
-        }
-        return this.templates[html];
-    }
-}
-
-const getRoutesAndTemplates = (pages, normalize = true, templates = true) => {
-    const routes = [];
-    const parser = new Parser({ normalize, templates });
-    for (const [id, template] of pages.entries()) {
-        const content = parser.parse(template.root);
-        const mask = template.mask.replaceAll("/", "\\/").replace(/{(.*?)}/, ".+?");
-        routes.push({
-            id,
-            content,
-            mask,
-            state: template.state,
-        });
-    }
-    return {
-        routes,
-        templates: parser.templates,
-    };
-};
-
 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;
     let debugUrl = undefined;
     createServer({
         server: {
@@ -166,12 +32,12 @@ function hydration() {
         mirrorServer = server;
         await mirrorServer.listen();
         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 {
@@ -188,25 +54,31 @@ function hydration() {
         },
         async transformIndexHtml(html) {
             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));
-                const result = html.replace("<!--app-html-->", root);
-                page.close();
-                return result;
+                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");
-            // mirrorServer?.close()
+            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.2",
+    "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": {
@@ -66,6 +66,14 @@
         "./config": {
             "types": "./lib/config/config.d.ts",
             "import": "./lib/config/config.js"
+        },
+        "./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

@@ -0,0 +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,16 +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)
-        console.log("BROWSER", state)
+        const lang = (window as any).$langDefaultConfig
 
-        return state
+        return [state, lang]
     })
 
-    console.log("CLIENT", state)
     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

@@ -3,6 +3,8 @@ import Task from "../ui/task"
 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
@@ -12,22 +14,28 @@ 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" })
 
     const context = await browser.newContext({
-        userAgent: "____JINRAI_CLIENT____",
+        userAgent: JinraiAgent,
         locale: "ru-RU",
     })
 
@@ -35,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)
 
@@ -43,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 })
 
@@ -76,5 +87,5 @@ export const getRawPageData = async (
     // await test_browser.close()
 
     task.success()
-    return result
+    return { pages: result, lang: defaultLang }
 }