jinrai 1.1.2 → 1.1.4

package/src/bin/routes/Parser.ts

@@ -1,12 +1,19 @@
 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
 }
 
-export type Element = ArrayElement | HtmlElement | ValueElement | CustomElement
+export type Element = ArrayElement | HtmlElement | ValueElement | CustomElement | TranslateText | TValueElement
 
 interface ArrayElement {
     type: "array"
@@ -23,11 +30,26 @@ interface ValueElement {
     type: "value"
     key: string
 }
+interface TValueElement {
+    type: "tvalue"
+    value: string
+}
+
+interface TranslateText {
+    type: "t"
+    text: string
+}
 
 interface CustomElement {
     type: "custom"
     name: string
-    props: string
+    props: object
+}
+
+export interface CustomExample {
+    name: string
+    html: string
+    props: any
 }
 
 export class Parser {
@@ -35,12 +57,16 @@ export class Parser {
 
     openVar = "{{"
     createVar = "}}"
+    openTVar = "{!"
+    createTVar = "!}"
+
     createArray = "</loopwrapper"
     createCustom = "</custom"
     deepUp = "<loopwrapper"
     deepUp2 = "<custom"
 
     templates: Record<string, string> = {}
+    custom: CustomExample[] = []
 
     constructor(options?: ParserOptions) {
         this.options = options
@@ -56,9 +82,10 @@ export class Parser {
         let match
         let deep = 0
         let lastIndex = 0
+        let translate = false
 
         const tagPattern = new RegExp(
-            `(<loopwrapper(\\s+[^>]*)?>|</loopwrapper>|\{\{|\}\}|<custom(\\s+[^>]*)?>|</custom>)`,
+            `(<loopwrapper(\\s+[^>]*)?>|</loopwrapper>|\{\{|\}\}|\{\!|\!\}|<custom(\\s+[^>]*)?>|</custom>)`,
             "gi",
         )
 
@@ -66,28 +93,42 @@ export class Parser {
             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)
+            if (translate) {
+                if (currentTag.startsWith(this.createTVar)) {
+                    translate = false
+                    this.createTranslate(tree, value)
+                } else {
+                    continue
+                }
             } else {
-                if (deep != 0) continue
-                this.createElement(tree, value)
+                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.startsWith(this.openTVar)) {
+                    ////////////// >>>>
+                    if (deep != 0) continue
+                    translate = true
+                    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
@@ -100,22 +141,49 @@ 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
+
+        if (this.custom.find(itm => itm.name == custom.name) == undefined) {
+            this.custom.push({
+                name: custom.name,
+                html: children,
+                props: exampleProps,
+            })
+        }
 
         parent.push({
             type: "custom",
-            name,
-            props: value,
+            name: custom.name,
+            props: custom.props,
         })
     }
 
-    createElement(parent: Element[], value: string, isVarible?: boolean) {
-        if (isVarible)
+    createVarible(parent: Element[], value: string) {
+        return parent.push({
+            type: "value",
+            key: value,
+        })
+    }
+
+    createTranslate(parent: Element[], value: string) {
+        if (value.startsWith("{{") && value.endsWith("}}")) {
             return parent.push({
-                type: "value",
-                key: value,
+                type: "tvalue",
+                value: value.slice(2, -2),
             })
+        }
+
+        return parent.push({
+            type: "t",
+            text: value,
+        })
+    }
+
+    createElement(parent: Element[], value: string, isVarible?: boolean) {
+        if (isVarible) {
+            return this.createVarible(parent, value)
+        }
 
         if (value.trimStart().startsWith("ArrayDataKey=")) {
             const [key, ...val] = value.trimStart().substring(13).split("|")

package/src/bin/routes/getRoutes.ts

@@ -16,7 +16,10 @@ export const getRoutesAndTemplates = (pages: PageData[], normalize: boolean = tr
     for (const [id, template] of pages.entries()) {
         const content = parser.parse(template.root)
 
-        const mask = template.mask.replaceAll("/", "\\/").replace(/{(.*?)}/, ".+?")
+        const mask = template.mask
+            .replaceAll("/", "\\/")
+            .replace(/{(.*?)}/, ".+?")
+            .replace("\/*", "\/?.*")
 
         routes.push({
             id,
@@ -29,5 +32,6 @@ export const getRoutesAndTemplates = (pages: PageData[], normalize: boolean = tr
     return {
         routes,
         templates: parser.templates,
+        customComponents: parser.custom,
     }
 }

package/src/front/server/useIsServer.ts

@@ -0,0 +1,5 @@
+import { ssr } from "../server-state/SSR"
+
+export const useIsServer = () : boolean => {
+    return ssr.current
+}

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,177 @@ 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
                 }
 
-            // SELF
-            if (prop.startsWith("$")) return (key: string) => `{{${path + "/" + key}${"\\" + prop}}}`
+                if (prop === "_debugInfo") {
+                    return {
+                        note: `State From Request (${path})`,
+                        kind: typeof data,
+                        timestamp: Date.now(),
+                        preview: data,
+                    }
+                }
+            }
 
-            // TYPES
+            // ---------------------------
+            // 3. SELF: $key → returns function
+            // ---------------------------
+            if (typeof prop === "string" && prop.startsWith("$")) {
+                return (key: string) => `{{${path + "/" + key}${"\\" + prop}}}`
+            }
+
+            // ---------------------------
+            // 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
+            // ---------------------------
+            if (data === null) {
+                return undefined
+            }
+
+            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,24 @@
+import { JinraiAgent, ViteAgent } from "../../bin/agent/agent"
+
 export const ssr = {
-    current: true, //navigator.userAgent == "____JINRAI_CLIENT____",
-    exportParams: false,
+    current: navigator.userAgent == JinraiAgent,
+    // current: true,
+    
+    test: navigator.userAgent == ViteAgent,
+    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 → orig.ts}

@@ -1,14 +1,21 @@
 import { ssr } from "./SSR"
 import { sources } from "./DataProxy"
+import { getJinraiValue, JinraiValue } from "../url/search/useSearchValue"
 
-export function real<T>(value: T): T {
+export function orig<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
+            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,16 @@ export function real<T>(value: T): T {
     }
 }
 
+export const original = orig
+
+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("/")

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

@@ -1,8 +1,20 @@
-import { encode } from "js-base64"
 import createDataProxy from "./DataProxy"
-import { ssr } from "./SSR"
 import { ServerKey } from "./useServerState"
 
+// @ts-ignore
+const initialState = { ...(window?.__appc__?.state ?? {}) }
+// @ts-ignore
+const serverErrors = [...(window?.__appc__?.errors ?? [])]
+
+if (serverErrors.length) {
+    console.error("SERVER:", serverErrors)
+}
+
+if (window != undefined) {
+    // @ts-ignore
+    delete window.__appc__
+}
+
 interface Request {
     method: string
     url: string
@@ -16,9 +28,11 @@ export type ServerValue = {
             request?: Request
         }
     }
+    key: ServerKey
 }
 
 export const serverStates = new Map<string, ServerValue>()
+const idents: string[] = []
 
 if (window != undefined) {
     console.log("init $exportServerStates")
@@ -26,16 +40,8 @@ if (window != undefined) {
     window.$exportServerStates = serverStates
 }
 
-const getIdent = (key: ServerKey): string => {
-    if (ssr.current) {
-        ssr.exportParams = true
-    }
-    const result = Array.isArray(key) ? JSON.stringify(key) : key.toString()
-    if (ssr.current) {
-        ssr.exportParams = false
-    }
-
-    return encode(result)
+export const getIdent = (key: ServerKey): string => {
+    return Array.isArray(key) ? key.join("-") : key
 }
 
 export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], options?: ServerValue["options"]) => {
@@ -43,12 +49,21 @@ export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], opti
         return [def, false]
     }
     const ident = getIdent(key)
-    serverStates.set(ident, { options, value: !options?.source ? def : undefined })
+    serverStates.set(ident, { options, value: !options?.source ? def : undefined, key })
 
-    // @ts-ignore
-    if (window != undefined && window?.__serverInitialStates__ && ident in window.__serverInitialStates__) {
-        // @ts-ignore
-        return [window.__serverInitialStates__[ident], true]
+    console.log("CHECK", ident)
+
+    if (ident in initialState) {
+        const result = initialState[ident]
+        // delete initialState[ident]
+
+        console.log("HAS", ident, result)
+
+        if (result != null && typeof result == 'object' && "data" in result) {
+            return [result.data, true]
+        }
+
+        return [result, true]
     }
 
     return [def, false]
@@ -56,6 +71,6 @@ export const getServerValue = (key?: ServerKey, def?: ServerValue["value"], opti
 
 export const setServerValue = (key: ServerKey, value: ServerValue["value"], options?: ServerValue["options"]) => {
     const ident = getIdent(key)
-    serverStates.set(ident, { options, value: !options?.source ? value : undefined })
+    serverStates.set(ident, { options, value: !options?.source ? value : undefined, key })
     return createDataProxy(value, `${ident}@`)
 }

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

@@ -0,0 +1,15 @@
+import { getIdent, ServerValue } from "./serverStates";
+import { ssr } from "./SSR";
+import { ServerKey } from "./useServerState";
+
+const test_states = new Map<string, any>()
+
+if (window != undefined && ssr.test) {
+    // @ts-ignore
+    window.$testStates = test_states
+}
+
+export const setTestState = (key: ServerKey, value: ServerValue["value"], options?: ServerValue["options"]) => {
+    const ident = getIdent(key)
+    test_states.set(ident, value)
+}

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

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useState } from "react"
 import { ssr } from "./SSR"
 import { getServerValue, ServerValue, setServerValue } from "./serverStates"
+import { setTestState } from "./testState"
 
 export type ServerStateMap = Record<string, ServerValue>
 export type ServerKey = string | string[]
@@ -12,7 +13,6 @@ export const useServerState = <T extends ServerValue["value"]>(
 ) => {
     const [serverValue, isInitOnServer] = getServerValue(serverKey, initialValue, options)
     const [value, setStateValue] = useState(serverValue)
-    const [isInit, setIsInit] = useState(isInitOnServer)
 
     const setValue: Dispatch<SetStateAction<T>> = (value: T | ((prevState: T) => T)) => {
         setStateValue((prev: T) => {
@@ -22,18 +22,13 @@ export const useServerState = <T extends ServerValue["value"]>(
                 return setServerValue(serverKey, result, options)
             }
 
+            if (serverKey != undefined && ssr.test) {
+                setTestState(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]
+    return [value, setValue, isInitOnServer] as [T, Dispatch<SetStateAction<T>>, boolean]
 }