jinrai 1.0.3 → 1.0.4

package/lib/index.js

@@ -1,7 +1 @@
-// src/config/define.ts
-var defineConfig = (config) => {
-  return config;
-};
-export {
-  defineConfig
-};
+var e=o=>o;export{e as defineConfig};

package/lib/src/config/userConfig.d.ts

@@ -1,7 +1,16 @@
+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;
+    index?: (props: IndexProps) => string;
+    proxy?: Record<string, string>;
+    meta?: string;
 }
 export declare const getUserConfig: (configName: string) => Promise<Config>;

package/package.json

@@ -1,15 +1,15 @@
 {
     "name": "jinrai",
-    "version": "1.0.3",
+    "version": "1.0.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": {
-        "test": "node ./lib/bin",
-        "test2": "node --import tsx src/bin.ts",
+        "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",
         "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  --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"
     },
     "keywords": [],
     "author": "",
@@ -18,9 +18,12 @@
     "devDependencies": {
         "@types/node": "^24.5.2",
         "@types/ora": "^3.1.0",
+        "@vitest/coverage-v8": "^4.0.8",
         "dotenv": "^17.2.2",
+        "nodemon": "^3.1.10",
         "tsx": "^4.20.6",
-        "typescript": "^5.9.2"
+        "typescript": "^5.9.2",
+        "vitest": "^3.2.4"
     },
     "bin": {
         "jinrai": "lib/bin.js"

package/readme.md

@@ -7,18 +7,33 @@ 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"
+},
+```

package/src/bin.ts

@@ -1,46 +1,66 @@
 #!/usr/bin/env node
 
 import { writeFile } from "node:fs/promises"
-import { Config, getUserConfig } from "./config/userConfig"
+import { Config, getUserConfig, IndexProps } from "./config/userConfig"
 import { getRoutesAndTemplates } from "./routes/getRoutes"
 import { getRawPageData } from "./templates"
 import path from "node:path"
 import { mkdir } from "node:fs/promises"
-import prettier from "prettier"
 import Task from "./ui/task"
 import { defaultIndexHtml } from "./config/defaultIndexHtml"
+import { removeDevScripts } from "./routes/replaceDevScripts"
+import { normalizeHtmlWhitespace } from "./content/normolizeContent"
+import { vitePreview } from "./server/vitePreview"
+
+const indexProps: IndexProps = {
+    html: "<!--app-html-->",
+    head: "<!--app-head-->",
+}
 
 const task = new Task()
 
 const configName = process.argv[2] ? process.argv[2] : "jinrai.config"
-task.do("Init: " + configName)
+task.do("Init")
 const config: Config = await getUserConfig(configName)
 task.success()
 
-const data = await getRawPageData(config.url, config.pages, config.debug)
+const [serverUrl, close] = await vitePreview()
+
+const data = await getRawPageData(serverUrl, config.pages, config.test, config.debug)
+
+close()
+
+const outputcashe = path.join(config.dist ?? "dist", ".cached")
 
 task.do("Format")
 const { routes, templates } = getRoutesAndTemplates(data.pages)
 
-task.next(`Export: ${config.outDir} (${templates.length})`)
-await mkdir(config.outDir, { recursive: true })
-
-await writeFile(path.join(config.outDir, "config.json"), JSON.stringify(routes, null, 2))
-await writeFile(path.join(config.outDir, "index.html"), data.indexHtml ?? defaultIndexHtml)
-
-for await (let [index, template] of templates.entries()) {
-    try {
-        template = await prettier.format(template, {
-            parser: "html",
-            printWidth: 500,
-            tabWidth: 2,
-            useTabs: false,
-            semi: true,
-            singleQuote: true,
-        })
-    } catch (error) {}
-
-    await writeFile(path.join(config.outDir, `${index}.html`), template)
+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 data.pages) {
+        if (!page.test) {
+            continue
+        }
+
+        await writeFile(path.join(outputcashe, `test_${page.id}.html`), normalizeHtmlWhitespace(page.test))
+    }
 }
 
 task.success()

package/src/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/userConfig.ts

@@ -2,11 +2,21 @@ 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
+    index?: (props: IndexProps) => string
+    proxy?: Record<string, string>
+    meta?: string
 }
 
 export const getUserConfig = async (configName: string): Promise<Config> => {

package/src/content/normolizeContent.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/routes/Parser.ts

@@ -0,0 +1,148 @@
+import { normalizeHtmlWhitespace } from "../content/normolizeContent"
+import { createHash } from "node:crypto"
+
+interface ParserOptions {
+    templates?: boolean
+    normolize?: boolean
+}
+
+export type Element = ArrayElement | HtmlElement | ValueElement | CustomElement
+
+interface ArrayElement {
+    type: "array"
+    key: string
+    data: Element[]
+}
+
+interface HtmlElement {
+    type: "html"
+    content: string
+}
+
+interface ValueElement {
+    type: "value"
+    key: string
+}
+
+interface CustomElement {
+    type: "custom"
+    name: string
+    props: string
+}
+
+export class Parser {
+    options?: ParserOptions
+
+    openVar = "{{"
+    createVar = "}}"
+    createArray = "</loopwrapper"
+    createCustom = "</custom"
+    deepUp = "<loopwrapper"
+    deepUp2 = "<custom"
+
+    templates: Record<string, string> = {}
+
+    constructor(options?: ParserOptions) {
+        this.options = options
+    }
+
+    parse(content: string) {
+        const tree: Element[] = []
+        this.handle(this.options?.normolize ? normalizeHtmlWhitespace(content) : content, tree)
+        return tree
+    }
+
+    handle(content: string, tree: Element[]) {
+        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: Element[], value: string) {
+        const [name, ...props] = value.trimStart().split("|")
+        value = props.join("|")
+
+        parent.push({
+            type: "custom",
+            name,
+            props: value,
+        })
+    }
+
+    createElement(parent: Element[], value: string, isVarible?: boolean) {
+        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: Element[] = []
+            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: string): string {
+        if (!(html in this.templates)) {
+            this.templates[html] = createHash("md5").update(Object.keys(this.templates).length.toString()).digest("hex")
+        }
+
+        return this.templates[html]
+    }
+}

package/src/routes/getRoutes.ts

@@ -1,21 +1,24 @@
 import { input, PageData } from "../templates"
-import { ParseItem, Parser } from "./parser"
+import { Element, Parser } from "./Parser"
 
 interface Route {
+    id: number
     mask: string
     requests: input[]
-    content: ParseItem[]
+    content: Element[]
 }
 
 export const getRoutesAndTemplates = (templates: PageData[]) => {
     const routes: Route[] = []
-    const parser = new Parser()
+    const parser = new Parser({ normolize: true, templates: true })
 
-    for (const template of templates) {
+    for (const [id, template] of templates.entries()) {
         const content = parser.parse(template.root)
+
         const mask = template.mask.replaceAll("/", "\\/").replace(/{(.*?)}/, ".+?")
 
         routes.push({
+            id,
             content,
             mask,
             requests: template.input,

package/src/routes/replaceDevScripts.ts

@@ -0,0 +1,16 @@
+export const removeDevScripts = (indexHtml: string) => {
+    const parts = [
+        '<script type="module">import { injectIntoGlobalHook } from "/@react-refresh";',
+        "injectIntoGlobalHook(window);",
+        "window.$RefreshReg$ = () => {};",
+        "window.$RefreshSig$ = () => (type) => type;</script>",
+        '<script type="module" src="/@vite/client"></script>',
+        '<script type="module" src="/src/main.tsx"></script>',
+    ]
+
+    parts.map(remove => {
+        indexHtml = indexHtml.replace(`${remove}\n`, "")
+    })
+
+    return indexHtml
+}

package/src/server/vitePreview.ts

@@ -0,0 +1,13 @@
+import { preview } from "vite"
+
+export const vitePreview = async () => {
+    const previewServer = await preview({
+        preview: {
+            port: 8084,
+        },
+    })
+
+    if (!previewServer.resolvedUrls?.local?.length) throw new Error("vite is not defined")
+
+    return [previewServer.resolvedUrls?.local[0].slice(0, -1), () => previewServer.close()] as [string, () => void]
+}

package/src/templates.ts

@@ -9,30 +9,34 @@ 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 }> => {
     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___",
     })
 
-    //   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()
@@ -57,6 +61,15 @@ export const getRawPageData = async (
 
         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 (debug) {
             await task.ask("continue?")
@@ -65,13 +78,16 @@ export const getRawPageData = async (
         page.close()
 
         result.push({
+            id,
             input,
             mask,
             root,
+            test: testRoot,
         })
     }
 
     await browser.close()
+    await test_browser.close()
 
     task.success()
     return { pages: result, indexHtml }

package/tests/content/1.html

@@ -0,0 +1,12 @@
+header {{SUPERVALUE}}
+<loopwrapper>
+    ArrayDataKey=FIRST_KEY|FIRST_LOOP_CONTENT
+    <loopwrapper
+        >ArrayDataKey=SECOND_KEY|
+        <img
+            src="{{0#/Api/Catalog/GetCatalog@/[ITEM=0]/preview}}"
+            alt="{{0#/Api/Catalog/GetCatalog@/[ITEM=0]/title}}"
+        />
+    </loopwrapper>
+</loopwrapper>
+footer

package/tests/content/1_result.json

@@ -0,0 +1,54 @@
+[
+    {
+        "type": "html",
+        "content": "header "
+    },
+    {
+        "type": "value",
+        "key": "SUPERVALUE"
+    },
+    {
+        "type": "html",
+        "content": " "
+    },
+    {
+        "type": "array",
+        "data": [
+            {
+                "type": "html",
+                "content": "FIRST_LOOP_CONTENT "
+            },
+            {
+                "type": "array",
+                "data": [
+                    {
+                        "type": "html",
+                        "content": " <img src=\""
+                    },
+                    {
+                        "type": "value",
+                        "key": "0#/Api/Catalog/GetCatalog@/[ITEM=0]/preview"
+                    },
+                    {
+                        "type": "html",
+                        "content": "\" alt=\""
+                    },
+                    {
+                        "type": "value",
+                        "key": "0#/Api/Catalog/GetCatalog@/[ITEM=0]/title"
+                    },
+                    {
+                        "type": "html",
+                        "content": "\" />"
+                    }
+                ],
+                "key": "SECOND_KEY"
+            }
+        ],
+        "key": "FIRST_KEY"
+    },
+    {
+        "type": "html",
+        "content": " footer"
+    }
+]

package/tests/content/2.html

@@ -0,0 +1,16 @@
+<header>
+    {{SITE_NAME}}
+    <nav>
+        <loopwrapper
+            >ArrayDataKey=MenuKey|
+            <a href="{{0#/Api/Menu@/[ITEM=0]/link}}">
+                {{0#/Api/Menu@/[ITEM=0]/title}}
+                <loopwrapper
+                    >ArrayDataKey=0#/Api/Menu@/[ITEM=0]/submenu|
+                    <span>{{0#/Api/Menu@/[ITEM=0]/submenu/[ITEM=1]/name}}</span>
+                </loopwrapper>
+            </a>
+        </loopwrapper>
+    </nav>
+</header>
+{{HERO_BANNER}}

package/tests/content/2_result.json

@@ -0,0 +1,28 @@
+[
+    { "type": "html", "content": "<header> " },
+    { "type": "value", "key": "SITE_NAME" },
+    { "type": "html", "content": " <nav>" },
+    {
+        "type": "array",
+        "data": [
+            { "type": "html", "content": " <a href=\"" },
+            { "type": "value", "key": "0#/Api/Menu@/[ITEM=0]/link" },
+            { "type": "html", "content": "\"> " },
+            { "type": "value", "key": "0#/Api/Menu@/[ITEM=0]/title" },
+            { "type": "html", "content": " " },
+            {
+                "type": "array",
+                "data": [
+                    { "type": "html", "content": " <span>" },
+                    { "type": "value", "key": "0#/Api/Menu@/[ITEM=0]/submenu/[ITEM=1]/name" },
+                    { "type": "html", "content": "</span>" }
+                ],
+                "key": "0#/Api/Menu@/[ITEM=0]/submenu"
+            },
+            { "type": "html", "content": "</a>" }
+        ],
+        "key": "MenuKey"
+    },
+    { "type": "html", "content": "</nav></header> " },
+    { "type": "value", "key": "HERO_BANNER" }
+]

package/tests/content/3.html

@@ -0,0 +1,21 @@
+<section class="{{SECTION_CLASS}}">
+    <loopwrapper
+        >ArrayDataKey=categories|
+        <div data-id="{{0#/Api/Categories@/[ITEM=0]/id}}">
+            <h3>{{0#/Api/Categories@/[ITEM=0]/title}}</h3>
+            <loopwrapper
+                >ArrayDataKey=0#/Api/Categories@/[ITEM=0]/products|
+                <article>
+                    <img
+                        src="{{0#/Api/Categories@/[ITEM=0]/products/[ITEM=1]/image}}"
+                        alt="{{0#/Api/Categories@/[ITEM=0]/products/[ITEM=1]/name}}"
+                    />
+                    <loopwrapper
+                        >ArrayDataKey=0#/Api/Categories@/[ITEM=0]/products/[ITEM=1]/tags|
+                        <span>{{0#/Api/Categories@/[ITEM=0]/products/[ITEM=1]/tags/[ITEM=2]}}</span>
+                    </loopwrapper>
+                </article>
+            </loopwrapper>
+        </div>
+    </loopwrapper>
+</section>