From 5ba16aa05d147e7ebaf6d0868e4b167dbd382093 Mon Sep 17 00:00:00 2001 From: Rizky Date: Wed, 13 Dec 2023 11:00:51 +0700 Subject: [PATCH] wip fix --- app/srv/ws/sync/editor/parser/parse-js.ts | 2 +- app/web/src/nova/ed/ed-base.tsx | 4 +- app/web/src/nova/ed/logic/ed-init.ts | 30 +-------- app/web/src/nova/ed/logic/ed-route.ts | 26 ++++++++ app/web/src/nova/ed/panel/main/main.tsx | 2 +- app/web/src/nova/vi/load/load.tsx | 1 - app/web/src/nova/vi/render/script.tsx | 14 ++-- app/web/src/nova/vi/render/script/arg.tsx | 5 ++ .../src/nova/vi/render/script/eval-prop.tsx | 66 +++++++++++-------- app/web/src/nova/vi/render/script/local.tsx | 5 +- .../src/nova/vi/render/script/passprop.tsx | 20 +++++- .../nova/view/logic/meta/comp/instantiate.tsx | 2 +- app/web/src/nova/view/logic/meta/meta.tsx | 2 +- 13 files changed, 106 insertions(+), 73 deletions(-) create mode 100644 app/web/src/nova/vi/render/script/arg.tsx diff --git a/app/srv/ws/sync/editor/parser/parse-js.ts b/app/srv/ws/sync/editor/parser/parse-js.ts index 4dc21c9f..ba16155f 100644 --- a/app/srv/ws/sync/editor/parser/parse-js.ts +++ b/app/srv/ws/sync/editor/parser/parse-js.ts @@ -10,7 +10,7 @@ export const parseJs = (meta: IMeta) => { const result = {} as { local?: typeof local | undefined; passprop?: typeof passprop | undefined; - props?: Record; + props?: Record; }; try { diff --git a/app/web/src/nova/ed/ed-base.tsx b/app/web/src/nova/ed/ed-base.tsx index 2dc50a9b..82cd99b5 100644 --- a/app/web/src/nova/ed/ed-base.tsx +++ b/app/web/src/nova/ed/ed-base.tsx @@ -7,6 +7,7 @@ import { EDGlobal } from "./logic/ed-global"; import { edInit } from "./logic/ed-init"; import { edRoute } from "./logic/ed-route"; import { edUndoManager } from "./logic/ed-undo"; +import { EdMain } from "./panel/main/main"; import { EdPane } from "./panel/main/pane-resize"; import { EdPopApi } from "./panel/popup/api/api-server"; import { EdPopCode } from "./panel/popup/code/code"; @@ -15,9 +16,6 @@ import { EdPopComp } from "./panel/popup/comp/comp-popup"; import { EdPopPage } from "./panel/popup/page/page-popup"; import { EdPopScript } from "./panel/popup/script/pop-script"; import { EdPopSite } from "./panel/popup/site/site-popup"; -import { EdMain } from "./panel/main/main"; -import { ViGlobal } from "../vi/render/global"; -import { viLoad } from "../vi/load/load"; export const EdBase = () => { const p = useGlobal(EDGlobal, "EDITOR"); diff --git a/app/web/src/nova/ed/logic/ed-init.ts b/app/web/src/nova/ed/logic/ed-init.ts index 41ef0662..7c42a191 100644 --- a/app/web/src/nova/ed/logic/ed-init.ts +++ b/app/web/src/nova/ed/logic/ed-init.ts @@ -1,8 +1,6 @@ import init from "wasm-gzip"; -import { PG } from "./ed-global"; import { jscript } from "../../../utils/script/jscript"; -import { viLoadLegacy } from "../../vi/load/load-legacy"; -import { treeRebuild } from "./tree/build"; +import { PG } from "./ed-global"; export const edInit = async (p: PG) => { p.status = "ready"; @@ -10,32 +8,6 @@ export const edInit = async (p: PG) => { await init(); jscript.init(p.render); - await viLoadLegacy({ - site: { - api_url: p.site.config.api_url, - id: p.site.id, - api: { - get() { - return p.script.api; - }, - set(val) { - p.script.api = val; - }, - }, - db: { - get() { - return p.script.db; - }, - set(val) { - p.script.db = val; - }, - }, - }, - render: p.render, - }); - p.script.loaded = true; - - treeRebuild(p); p.render(); }; diff --git a/app/web/src/nova/ed/logic/ed-route.ts b/app/web/src/nova/ed/logic/ed-route.ts index c63aeb18..c5437890 100644 --- a/app/web/src/nova/ed/logic/ed-route.ts +++ b/app/web/src/nova/ed/logic/ed-route.ts @@ -3,6 +3,7 @@ import { PG } from "./ed-global"; import { loadSite } from "./ed-site"; import { treeRebuild } from "./tree/build"; import { loadCompSnapshot } from "./tree/sync-walk-comp"; +import { viLoadLegacy } from "../../vi/load/load-legacy"; export const edRoute = async (p: PG) => { if (p.status === "ready" || p.status === "init") { @@ -113,6 +114,31 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => { await treeRebuild(p, { note: note + " page-init" }); } } + + await viLoadLegacy({ + site: { + api_url: p.site.config.api_url, + id: p.site.id, + api: { + get() { + return p.script.api; + }, + set(val) { + p.script.api = val; + }, + }, + db: { + get() { + return p.script.db; + }, + set(val) { + p.script.db = val; + }, + }, + }, + render: () => {}, + }); + p.status = "ready"; p.render(); }; diff --git a/app/web/src/nova/ed/panel/main/main.tsx b/app/web/src/nova/ed/panel/main/main.tsx index 0b6160c4..df64a982 100644 --- a/app/web/src/nova/ed/panel/main/main.tsx +++ b/app/web/src/nova/ed/panel/main/main.tsx @@ -3,8 +3,8 @@ import { Vi } from "../../../vi/vi"; import { EDGlobal } from "../../logic/ed-global"; export const EdMain = () => { + // return
; const p = useGlobal(EDGlobal, "EDITOR"); - return ( { }); } else { vi.status = "ready"; - vi.render(); } }; diff --git a/app/web/src/nova/vi/render/script.tsx b/app/web/src/nova/vi/render/script.tsx index b62836b9..a1a48948 100644 --- a/app/web/src/nova/vi/render/script.tsx +++ b/app/web/src/nova/vi/render/script.tsx @@ -8,12 +8,13 @@ import { ViRender } from "./render"; import { createViLocal } from "./script/local"; import { createViPassProp } from "./script/passprop"; import { getScopeMeta, getScopeValue } from "./script/scope-meta"; -import { viEvalProps } from "./script/eval-prop"; +import { updatePropScope, viEvalProps } from "./script/eval-prop"; +import { viScriptArg } from "./script/arg"; export const ViScript: FC<{ meta: IMeta }> = ({ meta }) => { const vi = useGlobal(ViGlobal, "VI"); - const scope_meta = getScopeMeta(vi, meta); + const scope_meta = getScopeMeta({ meta: vi.meta }, meta); const scope = getScopeValue(scope_meta); if (meta.item.component?.id) { @@ -46,8 +47,8 @@ export const viEvalScript = ( if (!meta.script) { meta.script = { result: null, - Local: createViLocal(meta), - PassProp: createViPassProp(meta), + Local: createViLocal(meta, scope), + PassProp: createViPassProp(vi, meta, scope), }; } const script = meta.script; @@ -57,7 +58,6 @@ export const viEvalScript = ( useEffect, children, props: parts.props, - isEditor: true, Local: script.Local, PassProp: script?.PassProp, ErrorBox: ErrorBox, @@ -65,10 +65,10 @@ export const viEvalScript = ( render: (jsx: ReactNode) => { script.result = jsx; }, + ...viScriptArg(), ...exports, ...scope, }; - const fn = new Function( ...Object.keys(arg), `// ${meta.item.name}: ${meta.item.id} @@ -76,4 +76,6 @@ ${meta.item.adv?.jsBuilt || ""} ` ); fn(...Object.values(arg)); + + updatePropScope(meta, scope); }; diff --git a/app/web/src/nova/vi/render/script/arg.tsx b/app/web/src/nova/vi/render/script/arg.tsx new file mode 100644 index 00000000..dcf36246 --- /dev/null +++ b/app/web/src/nova/vi/render/script/arg.tsx @@ -0,0 +1,5 @@ +export const viScriptArg = () => ({ + isMobile: false, + isDesktop: true, + isEditor: true, +}); diff --git a/app/web/src/nova/vi/render/script/eval-prop.tsx b/app/web/src/nova/vi/render/script/eval-prop.tsx index 4f4ca09a..f1de8cc3 100644 --- a/app/web/src/nova/vi/render/script/eval-prop.tsx +++ b/app/web/src/nova/vi/render/script/eval-prop.tsx @@ -1,7 +1,6 @@ import { IMeta } from "../../../ed/logic/ed-global"; -import { invalidKeyword } from "../../../ed/panel/side/prop-master/prop-form"; import { VG } from "../global"; -import { getScopeMeta, getScopeValue } from "./scope-meta"; +import { viScriptArg } from "./arg"; export const viEvalProps = ( vi: { meta: VG["meta"] }, @@ -21,43 +20,58 @@ export const viEvalProps = ( const arg = { ...exports, ...scope, - isEditor: true, + ...viScriptArg(), }; meta.scope.def.props = {}; let fails = new Set(); - for (const [name, prop] of Object.entries(meta.item.component.props)) { - try { - const fn = new Function( - ...Object.keys(arg), - `// [${meta.item.name}] ${name}: ${meta.item.id} - return ${prop.valueBuilt || ""} - ` - ); - meta.scope.def.props[name] = prop.value; - meta.scope.val[name] = fn(...Object.values(arg)); - scope[name] = meta.scope.val[name]; - arg[name] = scope[name]; - } catch (e) { - fails.add(name); - } - } - - if (fails.size > 0) { + if (!!meta.item.component.props) { for (const [name, prop] of Object.entries(meta.item.component.props)) { - if (fails.has(name) && !invalidKeyword.includes(name)) { + try { const fn = new Function( ...Object.keys(arg), `// [${meta.item.name}] ${name}: ${meta.item.id} return ${prop.valueBuilt || ""} ` ); - meta.scope.def.props[name] = prop.value; - meta.scope.val[name] = fn(...Object.values(arg)); - scope[name] = meta.scope.val[name]; - arg[name] = scope[name]; + + meta.scope.def.props[name] = { name, value: prop.valueBuilt }; + let val = fn(...Object.values(arg)); + + if (typeof val === "function") { + meta.scope.def.props[name].fn = val; + val = (...args: any[]) => { + return meta.scope.def?.props?.[name].fn(...args); + }; + } + + meta.scope.val[name] = val; + scope[name] = val; + arg[name] = val; + } catch (e) { + fails.add(name); } } } } }; + +export const updatePropScope = (meta: IMeta, scope: any) => { + if (meta.scope.def?.props) { + for (const prop of Object.values(meta.scope.def.props)) { + if (prop.fn) { + const all_scope = { + ...scope, + ...meta.scope.val, + }; + const fn = new Function( + ...Object.keys(all_scope), + `// [${meta.item.name}] ${prop.name}: ${meta.item.id} + return ${prop.value || ""} + ` + ); + prop.fn = fn(...Object.values(all_scope)); + } + } + } +}; diff --git a/app/web/src/nova/vi/render/script/local.tsx b/app/web/src/nova/vi/render/script/local.tsx index 1c9a1f35..191bd94c 100644 --- a/app/web/src/nova/vi/render/script/local.tsx +++ b/app/web/src/nova/vi/render/script/local.tsx @@ -1,7 +1,9 @@ import { ReactNode, useEffect, useRef, useState } from "react"; import { IMeta } from "../../../ed/logic/ed-global"; +import { updatePropScope } from "./eval-prop"; +import { VG } from "../global"; -export const createViLocal = (meta: IMeta) => { +export const createViLocal = (meta: IMeta, scope: any) => { return >(arg: { children: ReactNode; name: string; @@ -23,6 +25,7 @@ export const createViLocal = (meta: IMeta) => { } const val = meta.scope.val; val[arg.name] = local; + updatePropScope(meta, scope); if (arg.hook) { arg.hook(local); diff --git a/app/web/src/nova/vi/render/script/passprop.tsx b/app/web/src/nova/vi/render/script/passprop.tsx index 326468f5..592bb457 100644 --- a/app/web/src/nova/vi/render/script/passprop.tsx +++ b/app/web/src/nova/vi/render/script/passprop.tsx @@ -1,8 +1,22 @@ -import { FC, ReactNode } from "react"; +import { ReactNode } from "react"; import { IMeta } from "../../../ed/logic/ed-global"; +import { VG } from "../global"; + +export const createViPassProp = ( + vi: { meta: VG["meta"] }, + meta: IMeta, + scope: any +) => { + return (arg: Record & { children: ReactNode }) => { + if (!meta.scope.val) { + meta.scope.val = {}; + } + for (const [k, v] of Object.entries(arg)) { + if (k !== "children") { + meta.scope.val[k] = v; + } + } -export const createViPassProp = (meta: IMeta) => { - return (arg: { children: ReactNode }) => { return arg.children; }; }; diff --git a/app/web/src/nova/view/logic/meta/comp/instantiate.tsx b/app/web/src/nova/view/logic/meta/comp/instantiate.tsx index 9a154d2a..26ccc5d8 100644 --- a/app/web/src/nova/view/logic/meta/comp/instantiate.tsx +++ b/app/web/src/nova/view/logic/meta/comp/instantiate.tsx @@ -17,7 +17,7 @@ export const instantiate = (arg: { newitem.id = item.id; } - if (newitem.component && item.component) { + if (newitem.component && item.component && newitem.component.props) { for (const k of Object.keys(newitem.component.props)) { if (item.component.props[k]) { newitem.component.props[k] = item.component.props[k]; diff --git a/app/web/src/nova/view/logic/meta/meta.tsx b/app/web/src/nova/view/logic/meta/meta.tsx index a4848508..88919bd4 100644 --- a/app/web/src/nova/view/logic/meta/meta.tsx +++ b/app/web/src/nova/view/logic/meta/meta.tsx @@ -24,7 +24,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => { parent: { id: arg.parent?.item.id || "root", instance_id: arg.parent?.instance_id, - comp_id: arg.parent?.comp?.id, + comp_id: arg.parent?.comp?.component?.id, }, scope, };