From 164bcbf82123d671419e57a19c5a9355248787d1 Mon Sep 17 00:00:00 2001 From: Rizky Date: Tue, 30 Jan 2024 06:08:21 +0700 Subject: [PATCH] wip fix --- app/srv/ws/sync/actions/code_edit.ts | 15 ++- app/srv/ws/sync/editor/prep-page.ts | 12 ++- app/web/src/nova/ed/logic/ed-global.ts | 2 +- .../src/nova/ed/logic/tree/assign-mitem.ts | 9 +- app/web/src/nova/ed/logic/tree/build.tsx | 27 ++--- .../ed/panel/popup/script/default-val.tsx | 2 + .../src/nova/ed/panel/popup/script/monaco.tsx | 100 ++++++++++++------ .../ed/panel/side/prop-master/prop-form.tsx | 10 ++ app/web/src/utils/types/meta-fn.ts | 1 + 9 files changed, 113 insertions(+), 65 deletions(-) diff --git a/app/srv/ws/sync/actions/code_edit.ts b/app/srv/ws/sync/actions/code_edit.ts index bc53ed56..f2bbc45e 100644 --- a/app/srv/ws/sync/actions/code_edit.ts +++ b/app/srv/ws/sync/actions/code_edit.ts @@ -161,11 +161,14 @@ export const code_edit: SAction["code"]["edit"] = async function ( const mprop = mprops?.get(prop_name); if (mprop) { try { - const res = await transform(`return ${src}`, { - jsx: "transform", - format: "cjs", - loader: "tsx", - }); + const res = + prop_kind !== "typings" + ? await transform(`return ${src}`, { + jsx: "transform", + format: "cjs", + loader: "tsx", + }) + : { code: src }; doc?.transact(() => { if (prop_kind === "value") { mprop.set("value", src); @@ -175,6 +178,8 @@ export const code_edit: SAction["code"]["edit"] = async function ( mprop.set("genBuilt", res.code.substring(6)); } else if (prop_kind === "visible") { mprop.set("visible", src); + } else if (prop_kind === "typings") { + mprop.set("typings", src); } else if (prop_kind === "option") { const meta = mprop.get("meta"); if (meta) { diff --git a/app/srv/ws/sync/editor/prep-page.ts b/app/srv/ws/sync/editor/prep-page.ts index fd86070f..bb4d30e4 100644 --- a/app/srv/ws/sync/editor/prep-page.ts +++ b/app/srv/ws/sync/editor/prep-page.ts @@ -90,11 +90,13 @@ export const loadCompForPage = async (ctree: IRoot, sync: SyncConnection) => { userSyncComponent(sync, id); } - result.add(id); - mcomps[id] = docs.comp[id].doc - .getMap("map") - .get("root") - ?.toJSON() as IItem; + if (docs.comp[id]) { + result.add(id); + mcomps[id] = docs.comp[id].doc + .getMap("map") + .get("root") + ?.toJSON() as IItem; + } } }, } diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts index 8e5045a0..3f99e4b5 100644 --- a/app/web/src/nova/ed/logic/ed-global.ts +++ b/app/web/src/nova/ed/logic/ed-global.ts @@ -40,7 +40,7 @@ export const EmptySite = { export type ESite = typeof EmptySite; export type EPage = typeof EmptyPage; export type EComp = typeof EmptyComp; -export type PropFieldKind = "visible" | "gen" | "value" | "option"; +export type PropFieldKind = "visible" | "gen" | "value" | "option" | "typings"; export type ISingleScope = { p: string[]; n: string; diff --git a/app/web/src/nova/ed/logic/tree/assign-mitem.ts b/app/web/src/nova/ed/logic/tree/assign-mitem.ts index aff7202d..1466ad89 100644 --- a/app/web/src/nova/ed/logic/tree/assign-mitem.ts +++ b/app/web/src/nova/ed/logic/tree/assign-mitem.ts @@ -60,11 +60,18 @@ export const assignMitem = (arg: { if (m.item.component?.props) { for (const [prop_name, v] of Object.entries(m.item.component.props)) { - const mprop = m.mitem?.get("component")?.get("props")?.get(prop_name); + let mprop = m.mitem?.get("component")?.get("props")?.get(prop_name); + if (!mprop) { + const mprops = m.mitem?.get("component")?.get("props"); + if (mprops) { + arg.new_prop_jsx(m, mprops, prop_name, v); + } + } if (v.content) { if (mprop) { const pmeta = meta[v.content.id]; + if (pmeta) { pmeta.mitem = mprop.get("content"); } diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx index 3b32e448..81523018 100644 --- a/app/web/src/nova/ed/logic/tree/build.tsx +++ b/app/web/src/nova/ed/logic/tree/build.tsx @@ -8,6 +8,8 @@ import { loadCompSnapshot, loadComponent } from "../comp/load"; import { IMeta, PG, active } from "../ed-global"; import { assignMitem } from "./assign-mitem"; import { pushTreeNode } from "./build/push-tree"; +import { createId } from "@paralleldrive/cuid2"; +import { FMCompDef } from "../../../../utils/types/meta-fn"; export const treeCacheBuild = async (p: PG, page_id: string) => { const page_cache = p.preview.page_cache[page_id]; @@ -125,14 +127,11 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => { mitem, meta, new_prop_jsx(meta, mprops, prop_name, prop_val) { - // if (prop_val.meta?.type === "content-element") { - // transact.list.push(() => { - // const map = new Y.Map(); - // if (prop_val.content) prop_val.content.id = createId(); - // syncronize(map, prop_val); - // mprops.set(prop_name, map as any); - // }); - // } + if (!mprops.get(prop_name)) { + const map = new Y.Map(); + syncronize(map, prop_val); + mprops.set(prop_name, map as FMCompDef); + } }, }); } @@ -141,14 +140,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => { }, { item } ); - - if (transact.list.length > 0) { - p.page.doc?.transact(() => { - for (const fn of transact.list) { - fn(); - } - }); - } } } @@ -183,7 +174,3 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => { } } }; - -const transact = { - list: [] as (() => void)[], -}; diff --git a/app/web/src/nova/ed/panel/popup/script/default-val.tsx b/app/web/src/nova/ed/panel/popup/script/default-val.tsx index 1e2920c8..67b353ad 100644 --- a/app/web/src/nova/ed/panel/popup/script/default-val.tsx +++ b/app/web/src/nova/ed/panel/popup/script/default-val.tsx @@ -44,6 +44,8 @@ async () => { }`; } else if (kind === "visible") { val = mprop.get("visible") || "true"; + } else if (kind === "typings") { + val = mprop.get("typings") || "const typings = {}"; } else if (kind === "option") { val = mprop.get("meta")?.get("options") || diff --git a/app/web/src/nova/ed/panel/popup/script/monaco.tsx b/app/web/src/nova/ed/panel/popup/script/monaco.tsx index 5324126b..8030ee80 100644 --- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx +++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx @@ -16,6 +16,7 @@ import { declareScope } from "./scope/scope"; // @ts-ignore import { constrainedEditor } from "constrained-editor-plugin/dist/esm/constrainedEditor"; import { addScope } from "./scope/add-scope"; +import { FNCompDef } from "../../../../../utils/types/meta-fn"; const scriptEdit = { timeout: null as any, @@ -95,6 +96,7 @@ export const EdScriptMonaco: FC<{}> = () => { } } } + if (p.ui.popup.script.mode === "js") { const w = window as any; const types: any = {}; @@ -109,20 +111,20 @@ export const EdScriptMonaco: FC<{}> = () => { } } - await monacoTypings( - { - site_dts: p.site_dts, - script: { - siteTypes: p.script.site_types, - }, - site: p.site.config, - }, - monaco, - { - types, - values: {}, + let component = { id: "", props: {} as Record }; + if (meta?.item.component?.id && meta.item.component.props) { + component.id = meta.item.component.id; + component.props = meta.item.component.props; + } + if (meta?.parent?.comp_id && meta.parent.instance_id) { + const comp_meta = p.page.meta[meta.parent.instance_id]; + + if (comp_meta && comp_meta.item.component?.id) { + component.id = comp_meta.item.component.id; + component.props = comp_meta.item.component.props; } - ); + } + if (meta) { switch (type) { case "prop-master": @@ -143,25 +145,24 @@ export const EdScriptMonaco: FC<{}> = () => { monaco.Uri.parse("file:///active.tsx") ); editor.setModel(nmodel); - const constrainedInstance = constrainedEditor(monaco); - constrainedInstance.initializeIn(editor); - const model = editor.getModel(); - constrainedInstance.removeRestrictionsIn(model); - const frange = model?.getFullModelRange(); - if (frange) { - // const ranges = [ - // { - // range: [ - // end_hide + 1, - // `export const ${p.ui.popup.script.prop_name} = ` - // .length, - // frange.getEndPosition().lineNumber, - // frange.getEndPosition().column, - // ], - // allowMultiline: true, - // }, - // ]; - // constrainedInstance.addRestrictionsTo(model, ranges); + + if (component.id) { + const prop_name = p.ui.popup.script.prop_name; + const prop = component.props[prop_name]; + if (typeof prop.typings === "string") { + const typings_src = prop.typings.substring( + `const typings = `.length + ); + const typings_fn = new Function( + `return ${typings_src}` + ); + const typings = typings_fn(); + for (const [k, v] of Object.entries(typings)) { + if (typeof v === "string") { + types[k] = v; + } + } + } } } break; @@ -199,10 +200,44 @@ export const EdScriptMonaco: FC<{}> = () => { const range = new monaco.Range(1, 1, end_hide, 1); (editor as any).setHiddenAreas([range]); } + + if (component.id && meta.jsx_prop?.name) { + const prop_name = meta.jsx_prop.name; + const prop = component.props[prop_name]; + if (typeof prop.typings === "string") { + const typings_src = prop.typings.substring( + `const typings = `.length + ); + const typings_fn = new Function( + `return ${typings_src}` + ); + const typings = typings_fn(); + for (const [k, v] of Object.entries(typings)) { + if (typeof v === "string") { + types[k] = v; + } + } + } + } } break; } } + + await monacoTypings( + { + site_dts: p.site_dts, + script: { + siteTypes: p.script.site_types, + }, + site: p.site.config, + }, + monaco, + { + types, + values: {}, + } + ); await jsMount(editor, monaco, p); } else { const model = monaco.editor.createModel( @@ -362,7 +397,6 @@ export const EdScriptMonaco: FC<{}> = () => { scope = code_result; } } else { - console.log(value); const code_result = await p.sync.code.edit({ type: "adv", mode: mode, diff --git a/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx b/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx index e530f3f0..aef28003 100644 --- a/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx +++ b/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx @@ -232,6 +232,16 @@ export const EdPropPopoverForm: FC<{ )} + +
+
TYPINGS
+
+ EDIT CODE +
+
); }; diff --git a/app/web/src/utils/types/meta-fn.ts b/app/web/src/utils/types/meta-fn.ts index a994a48a..8915fd89 100644 --- a/app/web/src/utils/types/meta-fn.ts +++ b/app/web/src/utils/types/meta-fn.ts @@ -25,6 +25,7 @@ export type FNComponent = { export type FNCompDef = { idx: number; + typings: string; type: string; value: any; valueBuilt: any;