jinrai 1.1.2 → 1.1.3

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

@@ -1,5 +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 }) => {
-    return `<custom>${JSON.stringify({ name, props })}<custom>`;
+    if (!ssr.current)
+        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,153 +1,16 @@
 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(() => {
         const state = Object.fromEntries(window.$exportServerStates);
-        console.log("BROWSER", state);
         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();
 function hydration() {
     if (process.env.CHILD_JINRAI_DEV_SERVER) {
@@ -157,6 +20,7 @@ function hydration() {
     console.log("create mirror");
     let mirrorServer = undefined;
     let context = undefined;
+    let page = undefined;
     let debugUrl = undefined;
     createServer({
         server: {
@@ -166,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 {
@@ -188,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, 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;
+                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.2",
+    "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": {
@@ -66,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

@@ -4,12 +4,10 @@ import { ServerStateMap } from "../../front/server-state/useServerState"
 export const pageCollector = async (page: Page): Promise<{ state: ServerStateMap; root: string }> => {
     const state = await page.evaluate(() => {
         const state = Object.fromEntries((window as any).$exportServerStates)
-        console.log("BROWSER", state)
 
         return state
     })
 
-    console.log("CLIENT", state)
     const root = await page.locator("#root").innerHTML()
 
     return { root, state }

package/src/bin/playwright/templates.ts

@@ -3,6 +3,7 @@ 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"
 
 export interface PageData {
     id: number
@@ -27,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",
     })
 

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/front/server-state/DataProxy.ts

@@ -1,5 +1,6 @@
 import React from "react"
 import { ssr } from "./SSR"
+import { JinraiValue } from "../url/search/useSearchValue"
 
 // IMPORT REACT
 
@@ -22,99 +23,173 @@ const getTarget = (data: any, path: string) => {
         case "undefined":
         case "symbol":
             // эти типы можно просто завернуть
-            return { value: data }
+            return { $__ROOT__: data }
         default:
             return () => `{{${path}}}`
     }
 }
 
-const createDataProxy = (data: any, path: string = ""): DataProxy => {
+type WithDataProxy<T> = T & DataProxy
+function createDataProxy<T>(data: T, path: string = ""): WithDataProxy<T> {
     if (path.endsWith("@")) sources.set(path.slice(0, -1), data)
 
     return new Proxy(getTarget(data, path), {
-        get: (_: any, prop: string) => {
-            // if (typeof prop == "symbol") return data[prop]
+        get: (_target: any, prop: PropertyKey) => {
+            if (ssr.exportToJV) {
+                return {
+                    $JV: {
+                        key: path + "/" + String(prop),
+                        type: "proxy",
+                        def: data,
+                    },
+                } as { $JV?: JinraiValue }
+            }
 
-            if (!(typeof data == "object" && data !== null && prop in data))
-                // DEV TOOLS
+            // ---------------------------
+            // 1. Обработка символов
+            // ---------------------------
+            if (typeof prop === "symbol") {
                 switch (prop) {
-                    // @ts-ignore
                     case Symbol.toPrimitive:
                         return (hint: string) => {
                             console.log("PROXYDATA", hint)
                             return `{{${path}}}`
                         }
-                    // @ts-ignore
+
                     case Symbol.toStringTag:
                         return "Object"
-                    // @ts-ignore
+
                     case Symbol.iterator:
-                        return data[Symbol.iterator]
-                    case "$$typeof":
-                    case "type":
+                        if (typeof data === "object" && data !== null && Symbol.iterator in (data as any)) {
+                            return (data as any)[Symbol.iterator]
+                        }
                         return undefined
+                }
+            }
 
-                    case "_debugInfo":
-                        return {
-                            note: `State From Request (${path})`,
-                            kind: typeof data,
-                            timestamp: Date.now(),
-                            preview: data,
-                        }
+            // ---------------------------
+            // 2. DEV tools
+            // ---------------------------
+            if (!(typeof data === "object" && data !== null && prop in (data as any))) {
+                if (prop === "$$typeof" || prop === "type") {
+                    return undefined
+                }
+
+                if (prop === "_debugInfo") {
+                    return {
+                        note: `State From Request (${path})`,
+                        kind: typeof data,
+                        timestamp: Date.now(),
+                        preview: data,
+                    }
                 }
+            }
 
-            // SELF
-            if (prop.startsWith("$")) return (key: string) => `{{${path + "/" + key}${"\\" + prop}}}`
+            // ---------------------------
+            // 3. SELF: $key → returns function
+            // ---------------------------
+            if (typeof prop === "string" && prop.startsWith("$")) {
+                return (key: string) => `{{${path + "/" + key}${"\\" + prop}}}`
+            }
 
-            // TYPES
+            // ---------------------------
+            // 4. Types special cases
+            // ---------------------------
             switch (typeof data) {
                 case "string":
-                    switch (prop) {
-                        case "length":
-                        case "entries":
-                            return undefined
-                    }
+                    if (prop === "length" || prop === "entries") return undefined
+                    break
+
                 case "number":
-                    switch (prop) {
-                        case "@@iterator":
-                            return undefined
-                    }
+                    if (prop === "@@iterator") return undefined
+                    break
 
                 default:
-                    switch (prop) {
-                        case "then":
-                            return undefined
-                    }
+                    if (prop === "then") return undefined
             }
 
-            // OTHER
-            switch (prop) {
-                case "find":
-                    return data[prop]
-                case "map":
-                case "forEach":
-                    return (callback: (arg0: DataProxy) => any) =>
-                        React.createElement("loopwrapper", null, [
-                            `ArrayDataKey=${path}|`,
-                            Object.entries(data)
-                                .slice(0, 1)
-                                .map(([key, itm]) => callback(createDataProxy(itm, `${path}/[ITEM=${key}]`))),
-                        ])
-                case "getValue":
-                    return () => data
-                case "toJSON":
-                    return () => {
-                        console.log("dataproxy toJSON", path, data)
-                        return ssr.exportParams ? `{{${path}}}` : data
-                    }
-                default:
-                    if (data && (typeof data[prop] == "object" || Array.isArray(data[prop]))) {
-                        return createDataProxy(data[prop], path + "/" + prop)
-                    }
-                    return `{{${path + "/" + prop}}}`
+            // ---------------------------
+            // 5. Array-like handlers
+            // ---------------------------
+            if (prop === "find") {
+                return (data as any)[prop]
             }
+
+            if (prop === "length") {
+                if (Array.isArray(data)) {
+                    return data.length
+                }
+            }
+
+            if (prop === "map" || prop === "forEach") {
+                return (callback: (arg: DataProxy) => any) =>
+                    React.createElement("loopwrapper", null, [
+                        `ArrayDataKey=${path}|`,
+                        Object.entries(data as any)
+                            .slice(0, 1)
+                            .map(([key, itm]) => callback(createDataProxy(itm, `${path}/[ITEM=${key}]`))),
+                    ])
+            }
+
+            // ---------------------------
+            // 6. getValue
+            // ---------------------------
+            if (prop === "getValue") {
+                return () => data
+            }
+
+            // ---------------------------
+            // 7. toJSON
+            // ---------------------------
+            if (prop === "toJSON") {
+                return () => {
+                    console.log("dataproxy toJSON", path, data)
+
+                    return ssr.exportParams
+                        ? `{{${path}}}`
+                        : ({
+                              $JV: {
+                                  key: path,
+                                  type: "proxy",
+                                  def: data,
+                                  separator: "",
+                              },
+                          } as { $JV?: JinraiValue })
+                }
+            }
+
+            // ---------------------------
+            // 8. Nested object
+            // ---------------------------
+            const value = (data as any)[prop]
+            if (!ssr.exportParams) {
+                return value
+            }
+
+            if (value && (typeof value === "object" || Array.isArray(value))) {
+                return createDataProxy(value, path + "/" + String(prop))
+            }
+
+            // if (ssr.exportParams) {
+
+            // if (typeof value == "string") {
+            //     const key = `{{${path + "/" + String(prop)}}}`
+            //     const jv = getJinraiValue(key, "proxyValue", "", value)
+
+            //     return value.bindSource(jv)
+            // }
+
+            //     return key
+            // } else {
+            //     return value
+            // }
+
+            // ---------------------------
+            // 9. Final primitive fallback
+            // ---------------------------
+            return `{{${path + "/" + String(prop)}}}`
         },
-    })
+    }) as any
 }
 
 export default createDataProxy

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

@@ -1,4 +1,20 @@
+import { JinraiAgent } from "../../bin/agent/agent"
+
 export const ssr = {
-    current: true, //navigator.userAgent == "____JINRAI_CLIENT____",
-    exportParams: false,
+    current: navigator.userAgent == JinraiAgent,
+    exportParams: true,
+    exportToJV: false,
+}
+
+if (window != undefined) {
+    // @ts-ignore
+    window.__ssr = ssr
+}
+
+export const stringifyInput = (input: any) => {
+    ssr.exportParams = false
+    const result = JSON.stringify(input)
+    ssr.exportParams = true
+
+    return result
 }

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

@@ -1,5 +1,6 @@
 import { ssr } from "./SSR"
 import { sources } from "./DataProxy"
+import { getJinraiValue, JinraiValue } from "../url/search/useSearchValue"
 
 export function real<T>(value: T): T {
     if (!ssr.current) return value
@@ -8,7 +9,13 @@ export function real<T>(value: T): T {
         case "number":
             return value
         case "string":
-            return value.startsWith("{{") && value.endsWith("}}") ? getArrayByPath(value.slice(2, -2)) : value
+            if (value.startsWith("{{") && value.endsWith("}}")) {
+                const result = getArrayByPath(value.slice(2, -2))
+
+                return wrapSource<T>(result, getJinraiValue(value, "proxy", "", result))
+            }
+
+            return value
 
         case "object":
             // @ts-ignore
@@ -24,6 +31,14 @@ export function real<T>(value: T): T {
     }
 }
 
+const wrapSource = <T>(value: T, source: JinraiValue): T => {
+    if (typeof value == "string") {
+        return value.bindSource(source) as T
+    }
+
+    return value
+}
+
 const getArrayByPath = (path: string) => {
     const [sourceIndex, requestPath] = path.split("@", 2)
     const keys = requestPath.split("/")