jinrai 1.0.3 → 1.0.6

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,26 +1,35 @@
 {
     "name": "jinrai",
-    "version": "1.0.3",
+    "version": "1.0.6",
     "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": "node ./lib/bin",
-        "test2": "node --import tsx src/bin.ts",
-        "build": "npm run build-config && npm run build-index && npm run build:types",
+        "test": "vitest",
+        "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",
-        "build-config": "npx esbuild src/bin.ts --bundle --platform=node --format=esm --outfile=lib/bin.js --external:jiti --external:node:* --external:playwright --external:prettier"
+        "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"
+        "typescript": "^5.9.2",
+        "vitest": "^4.0.8"
     },
     "bin": {
         "jinrai": "lib/bin.js"
@@ -28,8 +37,34 @@
     "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

@@ -7,18 +7,44 @@ Simply point Jinrai at your SPA and witness divine speed.
 
 ---
 
-.ssr.config.ts
+install
+
+```
+npm i -D jinrai
+```
+
+---
+
+.jinrai.config.ts
 
 ```ts
 import { defineConfig } from "jinrai"
 
 export default defineConfig({
-    url: "<spa-url>",
-    dev: true,
-    pages: ["/", "/products", "/products/{phones}", "/product/{iphone17pro}", "/{iphone17pro_42}"],
-    export: {
-        outDir: "export",
-        index: "index.html",
-    },
+    pages: ["", "products/pro", "products/teams", "docs"],
 })
 ```
+
+add to build
+
+package.json
+
+```
+"scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build && jinrai",
+    "lint": "eslint .",
+    "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}/defaultIndexHtml.ts

@@ -1,11 +1,11 @@
 export const defaultIndexHtml = `
 <!doctype html>
-<html lang="eng">
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Jinrai app</title>
+        <title>App</title>
         <!--app-head-->
     </head>
     <body>

package/src/{config → bin/config}/userConfig.ts

@@ -2,11 +2,19 @@ import { createJiti } from "jiti"
 import { pathToFileURL } from "url"
 import { resolve } from "path"
 
+export interface IndexProps {
+    html: string
+    head: string
+}
+
 export interface Config {
-    url: string
+    url?: string
+    preview?: string
     pages: string[]
-    debug?: boolean
-    outDir: string
+    test?: boolean
+    dist?: string
+    proxy?: Record<string, string>
+    meta?: string
 }
 
 export const getUserConfig = async (configName: string): Promise<Config> => {

package/src/bin/content/normalizeContent.ts

@@ -0,0 +1,7 @@
+export const normalizeHtmlWhitespace = (html: string): string => {
+    return html
+        .replace(/\r?\n|\r/g, " ")
+        .replace(/\s+/g, " ")
+        .replace(/>\s+</g, "><")
+        .trim()
+}

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
@@ -9,41 +10,37 @@ export type input = {
 }
 
 export interface PageData {
+    id: number
     mask: string
     root: string
     input: input[]
+    test?: string
 }
 
 export const getRawPageData = async (
     url: string,
     pages: string[],
+    test: boolean = false,
     debug: boolean = false,
-): Promise<{ pages: PageData[]; indexHtml?: string }> => {
+): Promise<PageData[]> => {
     const task = new Task()
-    task.next("Parsing pages", "yellow", spinners.dotsCircle)
+    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 context = await browser.newContext({
         userAgent: "____fast-ssr-tool___",
+        locale: "ru-RU",
     })
 
-    //   let date: any[] = [];
-    let indexHtml: string | undefined = undefined
-
-    for await (const mask of pages) {
+    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)
 
@@ -51,12 +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 })
+
+        let testRoot: string | undefined = undefined
 
-        if (debug) console.log({ input })
-        const root = 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?")
@@ -65,14 +69,17 @@ export const getRawPageData = async (
         page.close()
 
         result.push({
-            input,
+            id,
+            input: state,
             mask,
             root,
+            test: testRoot,
         })
     }
 
     await browser.close()
+    await test_browser.close()
 
     task.success()
-    return { pages: result, indexHtml }
+    return result
 }