jinrai 1.0.4 → 1.0.7

package/lib/src/front/url/params/useParamsIndex.js

@@ -0,0 +1,15 @@
+import { useContext, useMemo } from 'react';
+import { getJinraiValue } from '../search/useSearchValue.js';
+import { JinraiContext } from '../JinraiContext.js';
+import { ssr } from '../../server-state/SSR.js';
+
+const useParamsIndex = (index, def = "") => {
+    const { deps } = useContext(JinraiContext);
+    const value = useMemo(() => location.pathname.split("/")[index + 1] ?? def, deps ? deps : []);
+    const stableValue = useMemo(() => {
+        return ssr.current ? value.bindSource(getJinraiValue(index.toString(), "paramsIndex", "", def)) : value;
+    }, [value]);
+    return stableValue;
+};
+
+export { useParamsIndex };

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

@@ -0,0 +1 @@
+export declare const useSearch: () => string;

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

@@ -0,0 +1,15 @@
+import { useContext, useMemo } from 'react';
+import { JinraiContext } from '../JinraiContext.js';
+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 stableValue = useMemo(() => {
+        return ssr.current ? value.bindSource(getJinraiValue("", "search", "", "")) : value;
+    }, [value]);
+    return stableValue;
+};
+
+export { useSearch };

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

@@ -0,0 +1,16 @@
+import { UseQueryStateReturn } from "nuqs";
+declare global {
+    interface String {
+        source?: string;
+        toJSON: () => string;
+        bindSource: (source: string) => string;
+    }
+    interface Array<T> {
+        source?: string;
+        toJSON(): any;
+        bindSource(source: string): 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;

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

@@ -0,0 +1,49 @@
+import { useQueryState, parseAsArrayOf, parseAsString } from 'nuqs';
+import { useMemo } from 'react';
+import { ssr } from '../../server-state/SSR.js';
+
+function toJSON() {
+    // @ts-ignore
+    if (ssr.exportParams)
+        return this.source;
+    // @ts-ignore
+    return this;
+}
+{
+    String.prototype.source = undefined;
+    String.prototype.toJSON = toJSON;
+    String.prototype.bindSource = function (source) {
+        const result = new String(this);
+        result.source = source;
+        return result;
+    };
+    if (!Array.prototype.toJSON) {
+        Array.prototype.toJSON = toJSON;
+    }
+    if (!Array.prototype.bindSource) {
+        Array.prototype.bindSource = function (source) {
+            this.source = source;
+            return this;
+        };
+    }
+}
+const useSearchValue = (key, defaultValue) => {
+    const [value, setValue] = useQueryState(key, { defaultValue });
+    const stableValue = useMemo(() => {
+        return ssr.current ? value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) : value;
+    }, [key, value]);
+    return [stableValue, setValue];
+};
+const useSearchArray = (key, defaultValue = [], separator = ",") => {
+    const stableDefault = useMemo(() => defaultValue, []);
+    const [value, setValue] = useQueryState(key, parseAsArrayOf(parseAsString, separator).withDefault(stableDefault));
+    const stableValue = useMemo(() => {
+        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 })}]]`;
+};
+
+export { getJinraiValue, useSearchArray, useSearchValue };

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

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

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

@@ -0,0 +1,9 @@
+import { ssr } from '../server-state/SSR.js';
+
+const Custom = ({ name, props, children }) => {
+    if (!ssr.current)
+        return children;
+    return `<custom>${JSON.stringify({ name, props })}<custom>`;
+};
+
+export { Custom };

package/lib/vite/plugin.js

@@ -0,0 +1 @@
+import{createServer as f}from"vite";import{AsyncLocalStorage as d}from"async_hooks";import{chromium as y}from"playwright";var c=async a=>{let t=await a.evaluate(()=>window.__page_requests),e=await a.locator("#root").innerHTML();return{state:t,root:e}};var m=a=>a.replace(/\r?\n|\r/g," ").replace(/\s+/g," ").replace(/>\s+</g,"><").trim();import{createHash as h}from"node:crypto";var p=class{options;openVar="{{";createVar="}}";createArray="</loopwrapper";createCustom="</custom";deepUp="<loopwrapper";deepUp2="<custom";templates={};constructor(t){this.options=t}parse(t){let e=[];return this.handle(this.options?.normalize?m(t):t,e),e}handle(t,e){let n,r=0,s=0,o=new RegExp("(<loopwrapper(\\s+[^>]*)?>|</loopwrapper>|{{|}}|<custom(\\s+[^>]*)?>|</custom>)","gi");for(;(n=o.exec(t))!==null;){let i=n[0],l=t.substring(s,n.index);if(i.startsWith(this.createArray)){if(r--,r>0)continue;this.createElement(e,l)}else if(i.startsWith(this.deepUp)){if(r++,r>1)continue;this.createElement(e,l)}else if(i.startsWith(this.createCustom)){if(r--,r!=0)continue;this.createCustomElement(e,l)}else if(i.startsWith(this.deepUp2)){if(r++,r>1)continue;this.createElement(e,l)}else if(i==this.createVar){if(r!=0)continue;this.createElement(e,l,!0)}else{if(r!=0)continue;this.createElement(e,l)}s=n.index+i.length}if(s<t.length){let i=t.substring(s);this.createElement(e,i)}}createCustomElement(t,e){let[n,...r]=e.trimStart().split("|");e=r.join("|"),t.push({type:"custom",name:n,props:e})}createElement(t,e,n){if(n)return t.push({type:"value",key:e});if(e.trimStart().startsWith("ArrayDataKey=")){let[r,...s]=e.trimStart().substring(13).split("|");e=s.join("|");let o=[];return this.handle(e,o),t.push({type:"array",data:o,key:r})}e&&t.push({type:"html",content:this.options?.templates?this.createTemplate(e):e})}createTemplate(t){return t in this.templates||(this.templates[t]=h("md5").update(Object.keys(this.templates).length.toString()).digest("hex")),this.templates[t]}};var u=(a,t=!0,e=!0)=>{let n=[],r=new p({normalize:t,templates:e});for(let[s,o]of a.entries()){let i=r.parse(o.root),l=o.mask.replaceAll("/","\\/").replace(/{(.*?)}/,".+?");n.push({id:s,content:i,mask:l,requests:o.input})}return{routes:n,templates:r.templates}};import{writeFile as E}from"fs/promises";var g=new d;function W(){if(process.env.CHILD_JINRAI_DEV_SERVER)return{name:"vite-jinrai-dummy"};process.env.CHILD_JINRAI_DEV_SERVER="true",console.log("create mirror");let a,t,e;return f({server:{port:3012}}).then(async n=>{a=n,await a.listen(),e=a.resolvedUrls?.local[0].slice(0,-1),y.launch({headless:!0,devtools:!1}).then(async r=>{console.log("create context"),t=await r.newContext({userAgent:"____fast-ssr-tool___",locale:"ru-RU"})})}),{name:"vite-jinrai",configureServer(n){n.middlewares.use((r,s,o)=>{if(r.url?.startsWith("/@"))return o();g.run(r.url,()=>{o()})})},async transformIndexHtml(n){let r=g.getStore();if(r&&t){let s=await t.newPage();await s.goto(e+r),await s.waitForLoadState("networkidle");let{root:o}=await c(s),{routes:i}=u([{id:1,input:[],mask:r,root:o}],!0,!1);console.log({routes:i}),E("./routs.json",JSON.stringify(i,null,2));let l=n.replace("<!--app-html-->",o);return s.close(),l}return n},closeWatcher(){console.log("Stop server")}}}export{W as hydration};

package/package.json

@@ -1,38 +1,70 @@
 {
     "name": "jinrai",
-    "version": "1.0.4",
+    "version": "1.0.7",
     "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": {
         "test": "vitest",
-        "dev": "nodemon --watch './src' --ext 'ts' --exec \"npm run build\"",
-        "build": "npm run build-config && npm run build-index && npm run build:types",
+        "dev": "nodemon --watch './src' --watch './vite' --ext 'ts' --exec \"npm run build\"",
+        "build": "npm run build-front && npm run build-config && npm run build-index && npm run build-plugin && npm run build:types && npm run build-plugin-config",
         "build:types": "tsc",
-        "build-index": "npx esbuild index.ts --bundle --platform=node --format=esm --outfile=lib/index.js --external:jiti --external:node:*  --external:playwright  --minify",
-        "build-config": "npx esbuild src/bin.ts --bundle --platform=node --format=esm --outfile=lib/bin.js --external:jiti --external:node:* --external:playwright --external:prettier --external:vite  --minify"
+        "build-index": "npx esbuild index.ts --bundle --platform=node --format=esm --outfile=lib/index.js --external:jiti --external:node:*  --external:playwright --external:react  --minify",
+        "build-plugin-config": "npx esbuild config.ts --bundle --platform=node --format=esm --outfile=lib/config/config.js --external:jiti --external:node:*  --external:playwright --external:react  --minify",
+        "build-config": "npx esbuild src/bin/bin.ts --bundle --platform=node --format=esm --outfile=lib/bin/bin.js --external:jiti --external:node:* --external:playwright --external:prettier --external:vite --external:react  --minify",
+        "build-plugin": "npx esbuild vite/plugin.ts --bundle --platform=node --format=esm --outfile=lib/vite/plugin.js --external:jiti --external:node:* --external:playwright --external:prettier --external:vite --external:react  --minify",
+        "build-front": "rollup -c rollup.front.config.mjs && tsc -p front.config.json --emitDeclarationOnly"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "type": "module",
     "devDependencies": {
+        "@rollup/plugin-typescript": "^11.1.6",
         "@types/node": "^24.5.2",
         "@types/ora": "^3.1.0",
         "@vitest/coverage-v8": "^4.0.8",
         "dotenv": "^17.2.2",
         "nodemon": "^3.1.10",
+        "rollup": "^4.24.0",
+        "tslib": "^2.8.1",
         "tsx": "^4.20.6",
         "typescript": "^5.9.2",
-        "vitest": "^3.2.4"
+        "vitest": "^4.0.8"
     },
     "bin": {
-        "jinrai": "lib/bin.js"
+        "jinrai": "lib/bin/bin.js"
     },
     "dependencies": {
         "@types/prettier": "^2.7.3",
         "jiti": "^2.6.0",
+        "nuqs": "^2.0.0",
         "ora": "^9.0.0",
         "playwright": "^1.55.1",
         "prettier": "^3.6.2"
+    },
+    "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "nuqs": "^2.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "react-router-dom": "^6.0.0"
+    },
+    "exports": {
+        ".": {
+            "types": "./lib/index.d.ts",
+            "import": "./lib/index.js"
+        },
+        "./rrd6": {
+            "types": "./lib/src/front/url/adapter/rrd6.d.ts",
+            "import": "./lib/src/front/url/adapter/rrd6.js"
+        },
+        "./rrd7": {
+            "types": "./lib/src/front/url/adapter/rrd7.d.ts",
+            "import": "./lib/src/front/url/adapter/rrd7.js"
+        },
+        "./config": {
+            "types": "./lib/config/config.d.ts",
+            "import": "./lib/config/config.js"
+        }
     }
 }

package/readme.md

@@ -37,3 +37,14 @@ package.json
     "preview": "vite preview"
 },
 ```
+
+## beta
+
+hydrationPlugin for vite.config.ts
+
+```ts
+import { hydration } from "jinrai/vite/plugin"
+
+
+plugins: [react(), hydration() as Plugin],
+```

package/rollup.front.config.mjs

@@ -0,0 +1,57 @@
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { createRequire } from "node:module"
+
+import typescript from "@rollup/plugin-typescript"
+import { defineConfig } from "rollup"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const require = createRequire(import.meta.url)
+const pkg = require("./package.json")
+
+const externalDeps = new Set([
+    ...Object.keys(pkg.dependencies ?? {}),
+    ...Object.keys(pkg.peerDependencies ?? {})
+])
+
+const entryPoints = [
+    path.resolve(__dirname, "index.ts"),
+    path.resolve(__dirname, "src/front/url/adapter/rrd6.tsx"),
+    path.resolve(__dirname, "src/front/url/adapter/rrd7.tsx"),
+    path.resolve(__dirname, "src/front/url/adapter/def.tsx")
+]
+
+const isExternal = (id) => {
+    if (id.startsWith(".") || path.isAbsolute(id)) {
+        return false
+    }
+
+    for (const dep of externalDeps) {
+        if (id === dep || id.startsWith(`${dep}/`)) {
+            return true
+        }
+    }
+
+    return false
+}
+
+export default defineConfig({
+    input: entryPoints,
+    output: {
+        dir: path.resolve(__dirname, "lib"),
+        format: "esm",
+        preserveModules: true,
+        preserveModulesRoot: "."
+    },
+    external: isExternal,
+    plugins: [
+        typescript({
+            tsconfig: path.resolve(__dirname, "front.config.json"),
+            declaration: false,
+            sourceMap: false
+        })
+    ]
+})
+

package/src/bin/bin.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+import { runBuild } from "./build/build"
+
+const args = process.argv.slice(2)
+
+const debug = args.includes("--debug")
+const customConfig = args.find(itm => itm.startsWith("--config="))?.substring(9)
+
+runBuild({ debug, customConfig })

package/src/bin/build/build.ts

@@ -0,0 +1,69 @@
+import { writeFile } from "node:fs/promises"
+import { Config, getUserConfig, IndexProps } from "../config/userConfig"
+import { getRoutesAndTemplates } from "../routes/getRoutes"
+import { getRawPageData } from "../playwright/templates"
+import path from "node:path"
+import { mkdir } from "node:fs/promises"
+import Task from "../ui/task"
+import { normalizeHtmlWhitespace } from "../content/normalizeContent"
+import { vitePreview } from "../server/vitePreview"
+
+const indexProps: IndexProps = {
+    html: "<!--app-html-->",
+    head: "<!--app-head-->",
+}
+
+interface buildArgs {
+    customConfig?: string
+    debug?: boolean
+}
+
+export const runBuild = async (options: buildArgs) => {
+    const task = new Task()
+
+    const configName = options.customConfig ?? "jinrai.config"
+    task.do("Init")
+    const config: Config = await getUserConfig(configName)
+    task.success()
+
+    const [serverUrl, close] = await vitePreview()
+
+    const pages = await getRawPageData(serverUrl, config.pages, config.test, options.debug)
+
+    close()
+
+    const outputcashe = path.join(config.dist ?? "dist", ".cached")
+
+    task.do("Format")
+    const { routes, templates } = getRoutesAndTemplates(pages)
+
+    task.next(`Export: (${templates.length})`)
+    await mkdir(outputcashe, { recursive: true })
+
+    console.log("dev")
+
+    const exportConfig = { routes, proxy: config.proxy, meta: config.meta }
+
+    await writeFile(path.join(outputcashe, "config.json"), JSON.stringify(exportConfig, null, 2))
+    // await writeFile(
+    //     path.join(outputcashe, "index.html"),
+    //     config.index ? config.index(indexProps) : removeDevScripts(data.indexHtml ?? defaultIndexHtml),
+    // )
+
+    for await (const [template, name] of Object.entries(templates)) {
+        await writeFile(path.join(outputcashe, `${name}.html`), template)
+    }
+
+    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/{config → bin/config}/userConfig.ts

@@ -11,10 +11,8 @@ export interface Config {
     url?: string
     preview?: string
     pages: string[]
-    debug?: boolean
     test?: boolean
     dist?: string
-    index?: (props: IndexProps) => string
     proxy?: Record<string, string>
     meta?: string
 }

package/src/bin/playwright/pageCollector.ts

@@ -0,0 +1,11 @@
+import { Page } from "playwright"
+
+export const pageCollector = async (page: Page) => {
+    const state = await page.evaluate(() => {
+        return (window as any).__page_requests
+    })
+
+    const root = await page.locator("#root").innerHTML()
+
+    return { state, root }
+}

package/src/{templates.ts → bin/playwright/templates.ts}

@@ -1,6 +1,7 @@
 import { chromium } from "playwright"
-import Task from "./ui/task"
+import Task from "../ui/task"
 import { spinners } from "ora"
+import { pageCollector } from "./pageCollector"
 
 export type input = {
     method: string
@@ -21,33 +22,25 @@ export const getRawPageData = async (
     pages: string[],
     test: boolean = false,
     debug: boolean = false,
-): Promise<{ pages: PageData[]; indexHtml?: string }> => {
+): Promise<PageData[]> => {
     const task = new Task()
     task.next("Router analysis", "yellow", spinners.dotsCircle)
 
     const result: PageData[] = []
 
-    const browser = await chromium.launch({ headless: !debug, devtools: true })
-    const test_browser = await chromium.launch({ headless: true })
+    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: "____fast-ssr-tool___",
+        userAgent: "____JINRAI_CLIENT____",
+        locale: "ru-RU",
     })
 
-    let indexHtml: string | undefined = undefined
-
     for await (const [id, mask] of pages.entries()) {
         task.next(mask, "yellow", spinners.dotsCircle, 1)
 
         const page = await context.newPage()
         const path = mask.replaceAll("{", "").replaceAll("}", "")
-        if (!indexHtml) {
-            page.on("response", async responce => {
-                if (responce.status() == 200 && responce.url() == url + path) {
-                    indexHtml = await responce.text()
-                }
-            })
-        }
 
         await page.goto(url + path)
 
@@ -55,21 +48,19 @@ export const getRawPageData = async (
 
         await page.waitForTimeout(1000)
 
-        const input = await page.evaluate(() => {
-            return (window as any).__page_requests
-        })
+        const { state, root } = await pageCollector(page)
+
+        // if (debug) console.log({ input })
 
-        if (debug) console.log({ input })
-        const root = await page.locator("#root").innerHTML()
         let testRoot: string | undefined = undefined
 
-        if (test) {
-            const testPage = await test_browser.newPage()
-            await testPage.goto(url + path)
-            await testPage.waitForLoadState("networkidle")
-            await testPage.waitForTimeout(1000)
-            testRoot = await page.locator("#root").innerHTML()
-        }
+        // if (test) {
+        //     const testPage = await test_browser.newPage()
+        //     await testPage.goto(url + path)
+        //     await testPage.waitForLoadState("networkidle")
+        //     await testPage.waitForTimeout(1000)
+        //     testRoot = await page.locator("#root").innerHTML()
+        // }
 
         if (debug) {
             await task.ask("continue?")
@@ -79,7 +70,7 @@ export const getRawPageData = async (
 
         result.push({
             id,
-            input,
+            input: state,
             mask,
             root,
             test: testRoot,
@@ -87,8 +78,8 @@ export const getRawPageData = async (
     }
 
     await browser.close()
-    await test_browser.close()
+    // await test_browser.close()
 
     task.success()
-    return { pages: result, indexHtml }
+    return result
 }

package/src/{routes → bin/routes}/Parser.ts

@@ -1,9 +1,9 @@
-import { normalizeHtmlWhitespace } from "../content/normolizeContent"
+import { normalizeHtmlWhitespace } from "../content/normalizeContent"
 import { createHash } from "node:crypto"
 
 interface ParserOptions {
     templates?: boolean
-    normolize?: boolean
+    normalize?: boolean
 }
 
 export type Element = ArrayElement | HtmlElement | ValueElement | CustomElement
@@ -48,7 +48,7 @@ export class Parser {
 
     parse(content: string) {
         const tree: Element[] = []
-        this.handle(this.options?.normolize ? normalizeHtmlWhitespace(content) : content, tree)
+        this.handle(this.options?.normalize ? normalizeHtmlWhitespace(content) : content, tree)
         return tree
     }
 

package/src/{routes → bin/routes}/getRoutes.ts

@@ -1,4 +1,4 @@
-import { input, PageData } from "../templates"
+import { input, PageData } from "../playwright/templates"
 import { Element, Parser } from "./Parser"
 
 interface Route {
@@ -8,11 +8,11 @@ interface Route {
     content: Element[]
 }
 
-export const getRoutesAndTemplates = (templates: PageData[]) => {
+export const getRoutesAndTemplates = (pages: PageData[], normalize: boolean = true, templates: boolean = true) => {
     const routes: Route[] = []
-    const parser = new Parser({ normolize: true, templates: true })
+    const parser = new Parser({ normalize, templates })
 
-    for (const [id, template] of templates.entries()) {
+    for (const [id, template] of pages.entries()) {
         const content = parser.parse(template.root)
 
         const mask = template.mask.replaceAll("/", "\\/").replace(/{(.*?)}/, ".+?")

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

@@ -0,0 +1,120 @@
+import React from "react"
+import { ssr } from "./SSR"
+
+// IMPORT REACT
+
+export interface DataProxy {
+    map: (callback: () => DataProxy) => any[]
+    getKey: () => string
+    getValue: () => any
+}
+
+export const sources = new Map<string, any>()
+
+const getTarget = (data: any, path: string) => {
+    if (Array.isArray(data)) return { __array__: data }
+
+    switch (typeof data) {
+        case "object":
+        case "string":
+        // case "number":
+        case "boolean":
+        case "undefined":
+        case "symbol":
+            // эти типы можно просто завернуть
+            return { value: data }
+        default:
+            return () => `{{${path}}}`
+    }
+}
+
+const createDataProxy = (data: any, path: string = ""): DataProxy => {
+    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]
+
+            if (!(typeof data == "object" && data !== null && prop in data))
+                // DEV TOOLS
+                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":
+                        return undefined
+
+                    case "_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}}}`
+
+            // TYPES
+            switch (typeof data) {
+                case "string":
+                    switch (prop) {
+                        case "length":
+                        case "entries":
+                            return undefined
+                    }
+                case "number":
+                    switch (prop) {
+                        case "@@iterator":
+                            return undefined
+                    }
+
+                default:
+                    switch (prop) {
+                        case "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}}}`
+            }
+        },
+    })
+}
+
+export default createDataProxy

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

@@ -0,0 +1,4 @@
+export const ssr = {
+    current: navigator.userAgent == "____JINRAI_CLIENT____",
+    exportParams: false,
+}