jinrai 1.0.3 → 1.0.6

package/src/bin/routes/Parser.ts

@@ -0,0 +1,148 @@
+import { normalizeHtmlWhitespace } from "../content/normalizeContent"
+import { createHash } from "node:crypto"
+
+interface ParserOptions {
+    templates?: boolean
+    normalize?: 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?.normalize ? 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 → bin/routes}/getRoutes.ts

@@ -1,21 +1,24 @@
-import { input, PageData } from "../templates"
-import { ParseItem, Parser } from "./parser"
+import { input, PageData } from "../playwright/templates"
+import { Element, Parser } from "./Parser"
 
 interface Route {
+    id: number
     mask: string
     requests: input[]
-    content: ParseItem[]
+    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()
+    const parser = new Parser({ normalize, templates })
 
-    for (const template of 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,

package/src/bin/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/bin/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/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,
+}

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

@@ -0,0 +1,41 @@
+import { ssr } from "./SSR"
+import { sources } from "./DataProxy"
+
+export function real<T>(value: T): T {
+    if (!ssr.current) return value
+
+    switch (typeof value) {
+        case "number":
+            return value
+        case "string":
+            return value.startsWith("{{") && value.endsWith("}}") ? getArrayByPath(value.slice(2, -2)) : value
+
+        case "object":
+            // @ts-ignore
+            if (value && typeof value.getValue === "function") {
+                // @ts-ignore
+                return value.getValue()
+            }
+
+            return value
+
+        default:
+            return value
+    }
+}
+
+const getArrayByPath = (path: string) => {
+    const [sourceIndex, requestPath] = path.split("@", 2)
+    const keys = requestPath.split("/")
+    const requestId = keys.shift()
+
+    let link = sources.get(sourceIndex)
+
+    for (let key of keys) {
+        if (key.startsWith("[ITEM=")) key = key.slice(6, -1)
+
+        link = link[key]
+    }
+
+    return link
+}

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

@@ -0,0 +1,36 @@
+import createDataProxy from "./DataProxy"
+import { ssr } from "./SSR"
+import { ServerStateOptions } from "./useServerState"
+
+export type ServerValue = any
+
+export const serverStates = new Map<string, string>()
+if (window != undefined) {
+    // @ts-ignore
+    window.__serverExportStates__ = serverStates
+}
+
+export const getServerValue = (key: string, def?: ServerValue) => {
+    if (key == "") {
+        return [def, false]
+    }
+
+    // @ts-ignore
+    if (window != undefined && window?.__serverInitialStates__ && key in window.__serverInitialStates__) {
+        // @ts-ignore
+        return [window.__serverInitialStates__[key], true]
+    }
+
+    return [serverStates.get(key) ?? def, false]
+}
+
+export const setServerValue = (key: string, value: ServerValue, options?: ServerStateOptions) => {
+    ssr.exportParams = true
+    const json = JSON.stringify({ value, options })
+    ssr.exportParams = false
+
+    console.log(key, json)
+    serverStates.set(key, json)
+
+    return createDataProxy(value, `${key}@`)
+}

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

@@ -0,0 +1,44 @@
+import { Dispatch, SetStateAction, useState } from "react"
+import { ssr } from "./SSR"
+import { getServerValue, ServerValue, setServerValue } from "./serverStates"
+
+export interface ServerStateOptions {
+    source: {
+        method: string
+        url: string
+        input: any
+    }
+}
+
+export const useServerState = <T extends ServerValue>(
+    serverKey: string,
+    initialValue: T,
+    options?: ServerStateOptions,
+) => {
+    const [serverValue, isInitOnServer] = getServerValue(serverKey, initialValue)
+    const [value, setStateValue] = useState(serverValue)
+    const [isInit, setIsInit] = useState(isInitOnServer)
+
+    const setValue: Dispatch<SetStateAction<T>> = (value: T | ((prevState: T) => T)) => {
+        setStateValue((prev: T) => {
+            const result = value instanceof Function ? (value as (prevState: T) => T)(prev) : value
+
+            if (serverKey && ssr.current) {
+                return setServerValue(serverKey, result, options)
+            }
+
+            return result
+        })
+    }
+
+    const initOnServer = () => {
+        if (isInit) {
+            setIsInit(false)
+            return true
+        }
+
+        return false
+    }
+
+    return [value, setValue, initOnServer] as [T, Dispatch<SetStateAction<T>>, () => boolean]
+}

package/src/front/url/JinraiContext.tsx

@@ -0,0 +1,10 @@
+import { createContext, DependencyList, ReactNode } from "react"
+
+export interface JinraiProps {
+    deps?: DependencyList
+    children?: ReactNode
+}
+export const JinraiContext = createContext<JinraiProps>({
+    deps: [],
+    children: undefined,
+})

package/src/front/url/adapter/def.tsx

@@ -0,0 +1,10 @@
+import { JinraiContext, JinraiProps } from "../JinraiContext"
+import { NuqsAdapter } from "nuqs/adapters/react"
+
+export const Adapter = (props: JinraiProps) => {
+    return (
+        <NuqsAdapter>
+            <JinraiContext.Provider value={{ deps: props.deps ?? [] }} {...props} />
+        </NuqsAdapter>
+    )
+}

package/src/front/url/adapter/rrd6.tsx

@@ -0,0 +1,16 @@
+import { NuqsAdapter } from "nuqs/adapters/react-router/v6"
+
+// @ts-ignore
+import { useLocation } from "react-router-dom"
+import { JinraiContext, JinraiProps } from "../JinraiContext"
+
+export const Adapter = (props: JinraiProps) => {
+    console.log("LOAD ADAPTER")
+    const { pathname } = useLocation()
+
+    return (
+        <NuqsAdapter>
+            <JinraiContext.Provider value={{ deps: [...(props.deps ?? [], [pathname])] }} {...props} />
+        </NuqsAdapter>
+    )
+}

package/src/front/url/adapter/rrd7.tsx

@@ -0,0 +1,15 @@
+import type { FC } from "react"
+import { NuqsAdapter } from "nuqs/adapters/react-router/v7"
+// @ts-ignore
+import { useLocation } from "react-router-dom"
+import { JinraiContext, JinraiProps } from "../JinraiContext"
+
+export const Adapter = (props: JinraiProps) => {
+    const { pathname } = useLocation()
+
+    return (
+        <NuqsAdapter>
+            <JinraiContext.Provider value={{ deps: [...(props.deps ?? [], [pathname])] }} {...props} />
+        </NuqsAdapter>
+    )
+}

package/src/front/url/params/useParamsIndex.ts

@@ -0,0 +1,16 @@
+import { useContext, useMemo } from "react"
+
+import { getJinraiValue } from "../search/useSearchValue"
+import { JinraiContext } from "../JinraiContext"
+import { ssr } from "../../server-state/SSR"
+
+export const useParamsIndex = (index: number, def: string = ""): string => {
+    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
+}

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

@@ -0,0 +1,15 @@
+import { useContext, useMemo } from "react"
+import { JinraiContext } from "../JinraiContext"
+import { ssr } from "../../server-state/SSR"
+import { getJinraiValue } from "./useSearchValue"
+
+export const useSearch = (): string => {
+    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
+}

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

@@ -0,0 +1,72 @@
+import { parseAsArrayOf, parseAsString, useQueryState, UseQueryStateReturn } from "nuqs"
+import { useMemo } from "react"
+import { ssr } from "../../server-state/SSR"
+
+declare global {
+    interface String {
+        source?: string
+        toJSON: () => string
+        bindSource: (source: string) => string
+    }
+    interface Array<T> {
+        source?: string
+        toJSON(): any
+        bindSource(source: string): T[]
+    }
+}
+
+function toJSON() {
+    // @ts-ignore
+    if (ssr.exportParams) return this.source
+    // @ts-ignore
+    return this
+}
+
+if (true) {
+    String.prototype.source = undefined
+    String.prototype.toJSON = toJSON
+    String.prototype.bindSource = function (source: string): string {
+        const result = new String(this)
+        result.source = source
+        return result as string
+    }
+
+    if (!Array.prototype.toJSON) {
+        Array.prototype.toJSON = toJSON
+    }
+
+    if (!Array.prototype.bindSource) {
+        Array.prototype.bindSource = function (source: string) {
+            this.source = source
+            return this
+        }
+    }
+}
+
+export const useSearchValue = (key: string, defaultValue: string): UseQueryStateReturn<string, string> => {
+    const [value, setValue] = useQueryState(key, { defaultValue })
+
+    const stableValue = useMemo(() => {
+        return ssr.current ? value.bindSource(getJinraiValue(key, "searchString", "", defaultValue)) : value
+    }, [key, value])
+
+    return [stableValue, setValue]
+}
+
+export const useSearchArray = (
+    key: string,
+    defaultValue: string[] = [],
+    separator = ",",
+): UseQueryStateReturn<string[], string[]> => {
+    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]
+}
+
+export const getJinraiValue = (key: string, type: string, separator: string, def: any) => {
+    return `@JV[[${JSON.stringify({ key, type, separator, def })}]]`
+}

package/src/front/wrapper/Custom.tsx

@@ -0,0 +1,14 @@
+import type { FC, ReactElement, ReactNode } from "react"
+import { ssr } from "../server-state/SSR"
+
+interface CustomProps {
+    name: string
+    props: object
+    children: ReactNode
+}
+
+export const Custom = ({ name, props, children }: CustomProps) => {
+    if (!ssr.current) return children as ReactElement
+
+    return `<custom>${JSON.stringify({ name, props })}<custom>`
+}

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