jinrai 1.1.1 → 1.1.3

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

@@ -3,18 +3,21 @@ import { useMemo } from 'react';
 import { ssr } from '../../server-state/SSR.js';
 
 function toJSON() {
-    // @ts-ignore
-    if (ssr.exportParams)
-        return this.source;
+    if (ssr.exportParams) {
+        // @ts-ignore
+        const $JV = this.$JV;
+        // @ts-ignore
+        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) {
@@ -22,7 +25,7 @@ function toJSON() {
     }
     if (!Array.prototype.bindSource) {
         Array.prototype.bindSource = function (source) {
-            this.source = source;
+            this.$JV = source;
             return this;
         };
     }
@@ -43,7 +46,12 @@ const useSearchArray = (key, defaultValue = [], separator = ",") => {
     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,9 +1,18 @@
+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';
 
 const Custom = ({ name, props, children }) => {
     if (!ssr.current)
-        return children;
-    return `<custom>${JSON.stringify({ name, props })}<custom>`;
+        return jsx(Fragment, { children: children });
+    const exampleProps = JSON.stringify({ name, props: 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,148 +1,14 @@
 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 state = await page.evaluate(() => {
-        return window.__page_requests;
+        const state = Object.fromEntries(window.$exportServerStates);
+        return state;
     });
     const root = await page.locator("#root").innerHTML();
-    return { state, root };
-};
-
-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,
-            requests: template.input,
-        });
-    }
-    return {
-        routes,
-        templates: parser.templates,
-    };
+    return { root, state };
 };
 
 const urlStorage = new AsyncLocalStorage();
@@ -154,6 +20,7 @@ function hydration() {
     console.log("create mirror");
     let mirrorServer = undefined;
     let context = undefined;
+    let page = undefined;
     let debugUrl = undefined;
     createServer({
         server: {
@@ -163,12 +30,13 @@ function hydration() {
         mirrorServer = server;
         await mirrorServer.listen();
         debugUrl = mirrorServer.resolvedUrls?.local[0].slice(0, -1);
-        chromium.launch({ headless: true, devtools: false }).then(async (browser) => {
+        chromium.launch({ headless: false, devtools: false, channel: "chrome" }).then(async (browser) => {
             console.log("create context");
             context = await browser.newContext({
-                userAgent: "____fast-ssr-tool___",
+                // userAgent: JinraiAgent,
                 locale: "ru-RU",
             });
+            page = await context.newPage();
         });
     });
     return {
@@ -185,23 +53,24 @@ function hydration() {
         },
         async transformIndexHtml(html) {
             const currentUrl = urlStorage.getStore();
-            if (currentUrl && context) {
-                const page = await context.newPage();
+            if (currentUrl && page) {
                 await page.goto(debugUrl + currentUrl);
                 await page.waitForLoadState("networkidle");
-                const { root } = await pageCollector(page);
-                const { routes } = getRoutesAndTemplates([{ id: 1, input: [], 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;
+                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;
             }
             return html;
         },
         closeWatcher() {
             console.log("Stop server");
-            // mirrorServer?.close()
+            page?.close();
+            mirrorServer?.close();
+            context?.close();
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jinrai",
-    "version": "1.1.1",
+    "version": "1.1.3",
     "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": {
@@ -18,6 +18,7 @@
         "@rollup/plugin-typescript": "^11.1.6",
         "@types/node": "^24.5.2",
         "@types/ora": "^3.1.0",
+        "@types/react": "^19.2.7",
         "@vitest/coverage-v8": "^4.0.8",
         "dotenv": "^17.2.2",
         "nodemon": "^3.1.10",
@@ -33,6 +34,7 @@
     "dependencies": {
         "@types/prettier": "^2.7.3",
         "jiti": "^2.6.0",
+        "js-base64": "^3.7.8",
         "nuqs": "^2.8.1",
         "ora": "^9.0.0",
         "playwright": "^1.55.1",
@@ -64,6 +66,10 @@
         "./config": {
             "types": "./lib/config/config.d.ts",
             "import": "./lib/config/config.js"
+        },
+        "./vite": {
+            "types": "./lib/vite/plugin.d.ts",
+            "import": "./lib/vite/plugin.js"
         }
     }
 }

package/src/bin/agent/agent.ts

@@ -0,0 +1 @@
+export const JinraiAgent = "____JINRAI_AGENT____"

package/src/bin/playwright/pageCollector.ts

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

package/src/bin/playwright/templates.ts

@@ -2,18 +2,14 @@ import { chromium } from "playwright"
 import Task from "../ui/task"
 import { spinners } from "ora"
 import { pageCollector } from "./pageCollector"
-
-export type input = {
-    method: string
-    url: string
-    input: object
-}
+import { ServerValue } from "../../front/server-state/serverStates"
+import { JinraiAgent } from "../agent/agent"
 
 export interface PageData {
     id: number
     mask: string
     root: string
-    input: input[]
+    state: Record<string, ServerValue>
     test?: string
 }
 
@@ -32,7 +28,7 @@ export const getRawPageData = async (
     // const test_browser = await chromium.launch({ headless: true, channel: "chrome" })
 
     const context = await browser.newContext({
-        userAgent: "____JINRAI_CLIENT____",
+        userAgent: JinraiAgent,
         locale: "ru-RU",
     })
 
@@ -70,7 +66,7 @@ export const getRawPageData = async (
 
         result.push({
             id,
-            input: state,
+            state,
             mask,
             root,
             test: testRoot,

package/src/bin/routes/Parser.ts

@@ -1,6 +1,13 @@
 import { normalizeHtmlWhitespace } from "../content/normalizeContent"
 import { createHash } from "node:crypto"
 
+export const SPLIT = "@#UNIQ_SPLITTER#@"
+
+interface CustomElement {
+    name: string
+    props: object
+}
+
 interface ParserOptions {
     templates?: boolean
     normalize?: boolean
@@ -27,7 +34,7 @@ interface ValueElement {
 interface CustomElement {
     type: "custom"
     name: string
-    props: string
+    props: object
 }
 
 export class Parser {
@@ -100,13 +107,13 @@ export class Parser {
     }
 
     createCustomElement(parent: Element[], value: string) {
-        const [name, ...props] = value.trimStart().split("|")
-        value = props.join("|")
+        const [customProps, exampleProps, children] = value.split(SPLIT)
+        const custom = JSON.parse(customProps) as CustomElement
 
         parent.push({
             type: "custom",
-            name,
-            props: value,
+            name: custom.name,
+            props: custom.props,
         })
     }
 

package/src/bin/routes/getRoutes.ts

@@ -1,10 +1,11 @@
-import { input, PageData } from "../playwright/templates"
+import { ServerStateMap } from "../../front/server-state/useServerState"
+import { PageData } from "../playwright/templates"
 import { Element, Parser } from "./Parser"
 
 interface Route {
     id: number
     mask: string
-    requests: input[]
+    state: ServerStateMap
     content: Element[]
 }
 
@@ -21,7 +22,7 @@ export const getRoutesAndTemplates = (pages: PageData[], normalize: boolean = tr
             id,
             content,
             mask,
-            requests: template.input,
+            state: template.state,
         })
     }