From 8bdc357d7ffc3afe62bf5ce939008b73904ef12d Mon Sep 17 00:00:00 2001 From: Rizky Date: Thu, 14 Dec 2023 01:56:55 +0700 Subject: [PATCH] wip fix --- app/web/src/nova/ed/logic/tree/build.tsx | 22 +-- app/web/src/nova/ed/panel/main/main.tsx | 171 ------------------ .../src/nova/ed/panel/side/prop-instance.tsx | 7 +- .../panel/side/prop-instance/prop-label.tsx | 6 +- .../ed/panel/side/prop-instance/prop-text.tsx | 19 +- app/web/src/nova/vi/render/parts.tsx | 5 + app/web/src/nova/vi/render/render.tsx | 12 +- app/web/src/nova/vi/render/script.tsx | 79 ++------ .../src/nova/vi/render/script/eval-script.tsx | 64 +++++++ 9 files changed, 125 insertions(+), 260 deletions(-) create mode 100644 app/web/src/nova/vi/render/script/eval-script.tsx diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx index 2e565a38..40de0e00 100644 --- a/app/web/src/nova/ed/logic/tree/build.tsx +++ b/app/web/src/nova/ed/logic/tree/build.tsx @@ -62,20 +62,20 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => { } p.page.root_id = root_id; + } - if (p.site.layout && p.site.layout.id === p.page.cur.id) { - p.page.meta = meta; - } else { - if (root_id !== "root") { - for (const m of Object.values(meta)) { - if (m.parent?.id === "root") { - m.parent.id = root_id; - } + if (p.site.layout && p.site.layout.id === p.page.cur.id) { + p.page.meta = meta; + } else { + if (root_id !== "root") { + for (const m of Object.values(meta)) { + if (m.parent?.id === "root") { + m.parent.id = root_id; } - p.page.meta = { ...p.site.layout.meta, ...meta }; - } else { - p.page.meta = meta; } + p.page.meta = { ...p.site.layout.meta, ...meta }; + } else { + p.page.meta = meta; } } } diff --git a/app/web/src/nova/ed/panel/main/main.tsx b/app/web/src/nova/ed/panel/main/main.tsx index a097dea8..9dad08a3 100644 --- a/app/web/src/nova/ed/panel/main/main.tsx +++ b/app/web/src/nova/ed/panel/main/main.tsx @@ -19,177 +19,6 @@ export const EdMain = () => { ); - - // const local = useLocal({ - // el: null as ReactNode, - // }); - // active.hover.renderMain = local.render; - - // if (code.mode && !p.page.building) { - // local.el = ( - // { - // p.page.render = render; - // }} - // hidden={(meta) => { - // if (meta.item.hidden) return true; - // return false; - // }} - // hover={{ - // get(meta) { - // return false; - // }, - // set(meta) { - // const outer = getOuterItem(meta); - // if (outer) { - // if (active.hover.id !== outer.id) { - // active.hover.id = outer.id; - // active.hover.renderTree(); - // active.hover.renderMain(); - // } - // } - // }, - // }} - // active={{ - // get(meta) { - // return active.item_id === meta.item.id; - // }, - // set(meta) { - // const outer = getOuterItem(meta); - // if (outer) { - // active.item_id = outer.id; - // } - - // p.render(); - // p.page.render(); - // focus(); - // }, - // text({ meta }) { - // const { item } = meta; - - // useEffect(() => { - // return () => { - // active.text.id = ""; - // p.render(); - // }; - // }, []); - - // const updateWithTimeout = (timeout: number) => { - // return new Promise((resolve) => { - // const saving = { - // id: active.text.id, - // content: active.text.content, - // }; - - // clearTimeout(active.text.timeout); - // active.text.timeout = setTimeout(() => { - // const meta = getMetaById(p, saving.id); - // if (meta && meta.mitem) { - // meta.mitem.set("html", saving.content); - // } - // resolve(); - // }, timeout); - // }); - // }; - - // if (active.text.id !== item.id) { - // clearTimeout(active.text.timeout); - // active.text.id = item.id; - // active.text.content = item.html || ""; - // active.text.el = ( - //
{ - // if (ref !== document.activeElement && ref) { - // const renaming = document.querySelector(".rename-item"); - // const modals = document.querySelectorAll( - // "[data-floating-ui-portal]" - // ); - // if (modals.length === 0 && !renaming) { - // ref.focus(); - // setEndOfContenteditable(ref); - // } - // } - // }} - // onPointerDownCapture={(e) => { - // e.stopPropagation(); - // }} - // contentEditable - // spellCheck={false} - // onInput={(e) => { - // const val = e.currentTarget.innerHTML; - // item.html = val; - // active.text.id = item.id; - // active.text.content = val; - // updateWithTimeout(100); - // }} - // dangerouslySetInnerHTML={{ __html: item.html || "" }} - // >
- // ); - // } - - // return active.text.el; - // }, - // }} - // /> - // ); - // } - - // return ( - //
- // {/*
{active.hover.id}
*/} - //
- // {!!p.page.building && } - // {!p.page.building && code.mode !== "" && local.el} - //
- //
- // ); }; function setEndOfContenteditable(div: any) { diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx index a90d000e..7e90e608 100644 --- a/app/web/src/nova/ed/panel/side/prop-instance.tsx +++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx @@ -35,9 +35,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => { const type = m.get("meta")?.get("type") || "text"; const visible = mprop?.get("visible") || ""; - if (meta.propvis) { - if (meta.propvis[key] === false) return; - } else if (visible) { + if (visible) { return; } @@ -129,6 +127,9 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => { if (!!value && ![`"`, "'", "`"].includes(value[0])) { hasCode = true; } + if (value.length > 100) { + hasCode = true; + } return (
= ({ name }) => { const label = ( -
- {name} +
+
+ {name} +
); diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx index c16c58ab..d36e0306 100644 --- a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx +++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx @@ -5,19 +5,16 @@ import { useEffect, useRef, } from "react"; -import { useGlobal, useLocal } from "web-utils"; +import { useLocal } from "web-utils"; import { FMCompDef } from "../../../../../utils/types/meta-fn"; -import { EDGlobal } from "../../../logic/ed-global"; import { EdPropLabel } from "./prop-label"; export const EdPropInstanceText: FC<{ name: string; mprop: FMCompDef; }> = ({ name, mprop }) => { - const p = useGlobal(EDGlobal, "EDITOR"); - const local = useLocal({ - value: mprop.get("value"), + value: unquote(mprop.get("value")), codeEditing: false, timeout: null as any, }); @@ -45,6 +42,18 @@ export const EdPropInstanceText: FC<{ ); }; +const unquote = (text: string) => { + const str = text.trim(); + const first = str[0]; + + if (['"', "'", "`"].includes(first)) { + if (first === str[str.length - 1]) { + return str.slice(1, -1); + } + } + return str; +}; + export function AutoHeightTextarea({ minRows = 1, ...props diff --git a/app/web/src/nova/vi/render/parts.tsx b/app/web/src/nova/vi/render/parts.tsx index 7b36cb36..8991a693 100644 --- a/app/web/src/nova/vi/render/parts.tsx +++ b/app/web/src/nova/vi/render/parts.tsx @@ -28,6 +28,11 @@ export const viParts = (meta: IMeta, arg?: ViParts) => { props.dangerouslySetInnerHTML = { __html: item.html || "" }; shouldRenderChild = false; } + + if (content.adv?.html && !content.adv?.js) { + props.dangerouslySetInnerHTML = { __html: content.adv.html }; + shouldRenderChild = false; + } return { shouldRenderChild, diff --git a/app/web/src/nova/vi/render/render.tsx b/app/web/src/nova/vi/render/render.tsx index e942f946..cec4fdce 100644 --- a/app/web/src/nova/vi/render/render.tsx +++ b/app/web/src/nova/vi/render/render.tsx @@ -14,9 +14,17 @@ export const ViRender: FC<{ if (!meta) return null; if (meta.item.adv?.js || meta.item.component?.id) { - return ; + return {children}; } + return {children}; +}; + +export const ViChild: FC<{ + meta: IMeta; + children?: ReactNode; +}> = ({ meta, children }) => { + const vi = useGlobal(ViGlobal, "VI"); const parts = viParts(meta); let renderChild = undefined; @@ -37,5 +45,5 @@ export const ViRender: FC<{ }); } - return
{renderChild}
; + return
; }; diff --git a/app/web/src/nova/vi/render/script.tsx b/app/web/src/nova/vi/render/script.tsx index 968c324a..5b8077c6 100644 --- a/app/web/src/nova/vi/render/script.tsx +++ b/app/web/src/nova/vi/render/script.tsx @@ -1,17 +1,16 @@ -import { FC, ReactNode, useEffect } from "react"; +import { FC, ReactNode } from "react"; import { useGlobal, useLocal } from "web-utils"; import { IMeta } from "../../ed/logic/ed-global"; -import { ErrorBox } from "../utils/error-box"; -import { VG, ViGlobal } from "./global"; -import { viParts } from "./parts"; -import { ViRender } from "./render"; -import { createViLocal } from "./script/local"; -import { createViPassProp } from "./script/passprop"; +import { ViGlobal } from "./global"; +import { viEvalProps } from "./script/eval-prop"; +import { viEvalScript } from "./script/eval-script"; import { getScopeMeta, getScopeValue } from "./script/scope-meta"; -import { updatePropScope, viEvalProps } from "./script/eval-prop"; -import { viScriptArg } from "./script/arg"; +import { ViChild } from "./render"; -export const ViScript: FC<{ meta: IMeta }> = ({ meta }) => { +export const ViScript: FC<{ meta: IMeta; children: ReactNode }> = ({ + meta, + children, +}) => { const vi = useGlobal(ViGlobal, "VI"); const local = useLocal({}); meta.render = local.render; @@ -23,62 +22,10 @@ export const ViScript: FC<{ meta: IMeta }> = ({ meta }) => { viEvalProps(vi, meta, scope); } - viEvalScript(vi, meta, scope); + if (meta.item.adv?.jsBuilt) { + viEvalScript(vi, meta, scope); - if (meta.script) return meta.script.result; - return null; -}; - -export const viEvalScript = ( - vi: { meta: VG["meta"] }, - meta: IMeta, - scope: any -) => { - const childs = meta.item.childs; - const parts = viParts(meta); - - let children = undefined; - if (parts.shouldRenderChild) { - children = - Array.isArray(childs) && - childs.map(({ id }) => { - return ; - }); + if (meta.script) return meta.script.result; } - - if (!meta.script) { - meta.script = { - result: null, - Local: createViLocal(meta, scope), - PassProp: createViPassProp(vi, meta, scope), - }; - } - const script = meta.script; - - const exports = (window as any).exports; - const arg = { - useEffect, - children, - props: parts.props, - Local: script.Local, - PassProp: script?.PassProp, - ErrorBox: ErrorBox, - newElement: () => {}, - render: (jsx: ReactNode) => { - script.result = jsx; - }, - ...viScriptArg(), - ...exports, - ...scope, - }; - - const fn = new Function( - ...Object.keys(arg), - `// ${meta.item.name}: ${meta.item.id} -${meta.item.adv?.jsBuilt || ""} - ` - ); - fn(...Object.values(arg)); - - updatePropScope(meta, scope); + return {children}; }; diff --git a/app/web/src/nova/vi/render/script/eval-script.tsx b/app/web/src/nova/vi/render/script/eval-script.tsx new file mode 100644 index 00000000..571e0ebd --- /dev/null +++ b/app/web/src/nova/vi/render/script/eval-script.tsx @@ -0,0 +1,64 @@ +import { ReactNode, useEffect } from "react"; +import { IMeta } from "../../../ed/logic/ed-global"; +import { ErrorBox } from "../../utils/error-box"; +import { VG } from "../global"; +import { viParts } from "../parts"; +import { ViRender } from "../render"; +import { viScriptArg } from "./arg"; +import { updatePropScope } from "./eval-prop"; +import { createViLocal } from "./local"; +import { createViPassProp } from "./passprop"; + +export const viEvalScript = ( + vi: { meta: VG["meta"] }, + meta: IMeta, + scope: any +) => { + const childs = meta.item.childs; + const parts = viParts(meta); + + let children = undefined; + if (parts.shouldRenderChild) { + children = + Array.isArray(childs) && + childs.map(({ id }) => { + return ; + }); + } + + if (!meta.script) { + meta.script = { + result: null, + Local: createViLocal(meta, scope), + PassProp: createViPassProp(vi, meta, scope), + }; + } + const script = meta.script; + + const exports = (window as any).exports; + const arg = { + useEffect, + children, + props: parts.props, + Local: script.Local, + PassProp: script?.PassProp, + ErrorBox: ErrorBox, + newElement: () => {}, + render: (jsx: ReactNode) => { + script.result = jsx; + }, + ...viScriptArg(), + ...exports, + ...scope, + }; + + const fn = new Function( + ...Object.keys(arg), + `// ${meta.item.name}: ${meta.item.id} +${meta.item.adv?.jsBuilt || ""} + ` + ); + fn(...Object.values(arg)); + + updatePropScope(meta, scope); +};