wip fix content

This commit is contained in:
Rizky 2023-11-26 17:49:36 +07:00
parent 722ff572f2
commit b229c7ae32
13 changed files with 111 additions and 20 deletions

View File

@ -51,6 +51,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
} }
syncWalkMap( syncWalkMap(
{ {
note: "tree-rebuild layout",
comps: p.comp.list, comps: p.comp.list,
item_loading: p.ui.tree.item_loading, item_loading: p.ui.tree.item_loading,
meta: p.page.meta, meta: p.page.meta,
@ -125,6 +126,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
} }
syncWalkMap( syncWalkMap(
{ {
note: "tree-rebuild doc",
comps: p.comp.list, comps: p.comp.list,
item_loading: p.ui.tree.item_loading, item_loading: p.ui.tree.item_loading,
meta: p.page.meta, meta: p.page.meta,

View File

@ -19,7 +19,7 @@ export const loadCompSnapshot = async (
if (typeof p.comp.list[id_comp]?.on_update === "function") { if (typeof p.comp.list[id_comp]?.on_update === "function") {
doc.off("update", p.comp.list[id_comp].on_update); doc.off("update", p.comp.list[id_comp].on_update);
} }
p.comp.list[id_comp] = { p.comp.list[id_comp] = {
comp: { id: id_comp, snapshot }, comp: { id: id_comp, snapshot },
doc, doc,
@ -82,6 +82,7 @@ const walkCompTree = async (p: PG, mitem: MItem) => {
syncWalkMap( syncWalkMap(
{ {
note: "walk-comp",
comps: p.comp.list, comps: p.comp.list,
item_loading: p.ui.tree.item_loading, item_loading: p.ui.tree.item_loading,
meta, meta,

View File

@ -58,6 +58,7 @@ export const syncWalkLoad = async (
export const syncWalkMap = ( export const syncWalkMap = (
p: { p: {
note?: string;
item_loading: PG["ui"]["tree"]["item_loading"]; item_loading: PG["ui"]["tree"]["item_loading"];
tree?: NodeModel<EdMeta>[]; tree?: NodeModel<EdMeta>[];
comps: PG["comp"]["list"]; comps: PG["comp"]["list"];
@ -91,6 +92,7 @@ export const syncWalkMap = (
skip_tree_child = true; skip_tree_child = true;
} }
let mapped = false;
if (parent_mcomp && id) { if (parent_mcomp && id) {
const fcomp = parent_mcomp.mitem.get("component"); const fcomp = parent_mcomp.mitem.get("component");
if (fcomp) { if (fcomp) {
@ -104,11 +106,15 @@ export const syncWalkMap = (
ref_ids.set(id, ref_id); ref_ids.set(id, ref_id);
} }
override_id = ref_id; override_id = ref_id;
mapItem(mitem, item, ref_ids.toJSON());
mapped = true;
} }
} }
} }
mapItem(mitem, item); if (!mapped) {
mapItem(mitem, item);
}
if (override_id) { if (override_id) {
if (!item.originalId) item.originalId = item.id; if (!item.originalId) item.originalId = item.id;
@ -144,7 +150,7 @@ export const syncWalkMap = (
ref_ids = {}; ref_ids = {};
} }
const old_id = item.id; const old_id = item.id;
mapItem(mcomp, item); mapItem(mcomp, item, ref_ids);
item.originalId = item.id; item.originalId = item.id;
item.id = old_id; item.id = old_id;
@ -188,14 +194,25 @@ export const syncWalkMap = (
for (const [k, v] of Object.entries(mprops)) { for (const [k, v] of Object.entries(mprops)) {
const mprop = ensureMProp(mitem_props, k, v); const mprop = ensureMProp(mitem_props, k, v);
item_comp.props[k] = v; item_comp.props[k] = v;
if (meta.item.type === "item" && meta.item.component) {
meta.item.component.props[k] = v;
}
if (mprop && v.meta?.type === "content-element") { if (mprop && v.meta?.type === "content-element") {
const mcontent = ensurePropContent(mprop, k); const mcontent = ensurePropContent(mprop, k);
item_comp.props[k].content = mcontent?.toJSON() as IItem;
if (meta.item.type === "item" && meta.item.component) {
meta.item.component.props[k].content =
item_comp.props[k].content;
}
if (mcontent) { if (mcontent) {
syncWalkMap(p, { syncWalkMap(p, {
is_layout: arg.is_layout, is_layout: arg.is_layout,
tree_root_id: arg.tree_root_id, tree_root_id: arg.tree_root_id,
mitem: mcontent, mitem: mcontent,
is_jsx_prop: true, is_jsx_prop: true,
parent_mcomp: arg.parent_mcomp,
parent_item: { id: item.id, mitem: mitem as MItem }, parent_item: { id: item.id, mitem: mitem as MItem },
portal: arg.portal, portal: arg.portal,
skip_add_tree: skip_tree_child, skip_add_tree: skip_tree_child,
@ -209,6 +226,7 @@ export const syncWalkMap = (
} }
const childs = mcomp.get("childs")?.map((e) => e) || []; const childs = mcomp.get("childs")?.map((e) => e) || [];
for (const e of childs) { for (const e of childs) {
syncWalkMap(p, { syncWalkMap(p, {
is_layout: arg.is_layout, is_layout: arg.is_layout,
@ -259,6 +277,7 @@ export const syncWalkMap = (
} }
const childs = mitem.get("childs")?.map((e) => e) || []; const childs = mitem.get("childs")?.map((e) => e) || [];
for (const e of childs) { for (const e of childs) {
syncWalkMap(p, { syncWalkMap(p, {
is_layout: arg.is_layout, is_layout: arg.is_layout,
@ -301,7 +320,11 @@ export const loadComponent = async (p: PG, id_comp: string) => {
}); });
}; };
const mapItem = (mitem: MContent, item: any) => { const mapItem = (
mitem: MContent,
item: any,
ref_ids?: Record<string, string>
) => {
mitem.forEach((e, k) => { mitem.forEach((e, k) => {
if (k !== "childs") { if (k !== "childs") {
let val = e; let val = e;
@ -312,10 +335,17 @@ const mapItem = (mitem: MContent, item: any) => {
} }
item[k] = val; item[k] = val;
} else { } else {
if (!item[k]) item[k] = []; item[k] = [];
const childs = e as unknown as TypedArray<{}>; const childs = e as unknown as TypedArray<{}>;
childs.forEach((c) => { childs.forEach((c) => {
item[k].push({ id: c.get("id") }); if (ref_ids) {
const id = ref_ids[c.get("id")];
if (id) {
item[k].push({ id });
}
} else {
item[k].push({ id: c.get("id") });
}
}); });
} }
}); });

View File

@ -7,6 +7,7 @@ import { code } from "../popup/code/code";
export const EdMain = () => { export const EdMain = () => {
const p = useGlobal(EDGlobal, "EDITOR"); const p = useGlobal(EDGlobal, "EDITOR");
const root = p.page.tree.find((e) => e.parent === "root");
return ( return (
<div <div
className={cx( className={cx(

View File

@ -74,7 +74,7 @@ export const EdTreeName = ({
) : ( ) : (
<div className="flex flex-col"> <div className="flex flex-col">
<Name name={node.text} is_jsx_prop={is_jsx_prop} /> <Name name={node.text} is_jsx_prop={is_jsx_prop} />
{/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */} <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div>
</div> </div>
)} )}
</div> </div>

View File

@ -10,7 +10,7 @@ export const ViewGlobal = {
layout: { show: false }, layout: { show: false },
meta: {} as Record<string, EdMeta>, meta: {} as Record<string, EdMeta>,
entry: [] as string[], entry: [] as string[],
bodyCache: null as null | ReactElement, body_cache: null as null | ReactElement,
component: { component: {
load: async (id_comp: string) => {}, load: async (id_comp: string) => {},
}, },

View File

@ -1,5 +1,58 @@
import importModule from "../../../render/editor/tools/dynamic-import";
import { devLoader } from "../../../render/live/dev-loader";
import { createAPI, createDB } from "../../../utils/script/init-api";
import { VG } from "./global"; import { VG } from "./global";
export const oldLoadCode = (v: VG) => { export const oldLoadCode = async (v: VG) => {
v.status = "ready"; const site = await db.site.findFirst({
where: { id: v.current.site_id },
include: { component_site: true },
});
const loader = devLoader;
const p = {} as any;
if (site) {
const w = window as any;
if (!w.exports) w.exports = {};
if (site.component_site) {
for (const cg of site.component_site) {
await importModule(loader.npm(p, "site", cg.id_component_group));
}
}
await importModule(loader.npm(p, "site", site.id));
if (site.js_compiled) {
const config = site.config as any;
const exec = (fn: string, scopes: any) => {
if (config.api_url) {
scopes["api"] = createAPI(config.api_url);
scopes["db"] = createDB(config.api_url);
}
scopes.params = w.params;
scopes.module = {};
const f = new Function(...Object.keys(scopes), fn);
const res = f(...Object.values(scopes));
return res;
};
const scope = {
types: {},
exports: w.exports,
load: importModule,
render: p.render,
module: {
exports: {} as any,
},
};
exec(site.js_compiled, scope);
if (scope.module.exports) {
for (const [k, v] of Object.entries(scope.module.exports)) {
w.exports[k] = v;
}
}
}
}
v.status = "rebuild";
v.render();
}; };

View File

@ -3,10 +3,13 @@ import { IItem } from "../../../../utils/types/item";
import { IText } from "../../../../utils/types/text"; import { IText } from "../../../../utils/types/text";
import { ISection } from "../../../../utils/types/section"; import { ISection } from "../../../../utils/types/section";
import { ViewMeta } from "./meta"; import { ViewMeta } from "./meta";
import { useGlobal } from "web-utils";
import { ViewGlobal } from "../../logic/global";
export const ViewMetaChildren: FC<{ item: IItem | IText | ISection }> = ({ export const ViewMetaChildren: FC<{ item: IItem | IText | ISection }> = ({
item, item,
}) => { }) => {
const v = useGlobal(ViewGlobal, "VIEW");
const children: ReactNode[] = []; const children: ReactNode[] = [];
if (item.type !== "text") { if (item.type !== "text") {

View File

@ -13,6 +13,7 @@ export const ViewMeta: FC<{ id: string; scopeIndex?: Record<string, any> }> = ({
const [, _render] = useState({}); const [, _render] = useState({});
const meta = v.meta[id]; const meta = v.meta[id];
if (!meta) return null; if (!meta) return null;
meta.render = () => _render({}); meta.render = () => _render({});

View File

@ -12,6 +12,7 @@ export const ViewMetaRender: FC<{
}> = ({ meta, v, props, className }) => { }> = ({ meta, v, props, className }) => {
let _className = className; let _className = className;
const item = meta.item; const item = meta.item;
if (meta.is_layout && !v.layout.show) { if (meta.is_layout && !v.layout.show) {
return <ViewMetaChildren item={item} />; return <ViewMetaChildren item={item} />;
} }
@ -23,7 +24,6 @@ export const ViewMetaRender: FC<{
active: v.view.active ? v.view.active.get(item) : undefined, active: v.view.active ? v.view.active.get(item) : undefined,
}); });
} }
return ( return (
<div <div
className={_className} className={_className}

View File

@ -64,7 +64,9 @@ export const ViewMetaScript: FC<{
} = v as any; } = v as any;
if (t._jsx && t.Comp) { if (t._jsx && t.Comp) {
finalScope[k] = ( finalScope[k] = (
<t.Comp parent_id={meta.item.id} scopeIndex={scopeIndex} /> <>
<t.Comp parent_id={meta.item.id} scopeIndex={scopeIndex} />
</>
); );
} }
} }

View File

@ -9,19 +9,18 @@ import { mergeScopeUpwards } from "./merge-upward";
const jsxProps = {} as Record<string, any>; const jsxProps = {} as Record<string, any>;
export const compPropVal = (v: VG, meta: EdMeta) => { export const compPropVal = (v: VG, meta: EdMeta) => {
let props = {} as Record<string, FNCompDef>; let props = {} as Record<string, FNCompDef>;
let cprops = {} as [string, FNCompDef][]; let cprops = [] as [string, FNCompDef][];
const item = meta.item; const item = meta.item;
if (item.type === "item" && item.component?.id) { if (item.type === "item" && item.component?.id) {
const icomp = item.component; const icomp = item.component;
if (icomp) { if (icomp) {
cprops = Object.entries(props); props = icomp.props;
cprops = Object.entries({ ...icomp.props });
if (v.script.api_url) { if (v.script.api_url) {
if (!v.script.db) v.script.db = createDB(v.script.api_url); if (!v.script.db) v.script.db = createDB(v.script.api_url);
if (!v.script.api) v.script.api = createAPI(v.script.api_url); if (!v.script.api) v.script.api = createAPI(v.script.api_url);
const props = icomp.props;
const w = window as any; const w = window as any;
const finalScope = mergeScopeUpwards; const finalScope = mergeScopeUpwards;
const args = { const args = {

View File

@ -5,11 +5,10 @@ import { Loading } from "../../utils/ui/loading";
import { ViewGlobal } from "./logic/global"; import { ViewGlobal } from "./logic/global";
import { vInit } from "./logic/init"; import { vInit } from "./logic/init";
import { newLoadCode } from "./logic/load-code-new"; import { newLoadCode } from "./logic/load-code-new";
import { oldLoadCode } from "./logic/load-code-old";
import { VLoad, VLoadComponent } from "./logic/types"; import { VLoad, VLoadComponent } from "./logic/types";
import { VEntry } from "./render/entry"; import { VEntry } from "./render/entry";
import { ErrorBox } from "./render/meta/script/error-box"; import { ErrorBox } from "./render/meta/script/error-box";
import { IRoot } from "../../utils/types/root";
import { oldLoadCode } from "./logic/load-code-old";
type ViewProp = { type ViewProp = {
load: VLoad; load: VLoad;
@ -101,9 +100,9 @@ const BoxedView: FC<ViewProp> = ({
v.meta = load.meta; v.meta = load.meta;
v.entry = load.entry; v.entry = load.entry;
} }
v.bodyCache = <VEntry />; v.body_cache = <VEntry />;
v.status = "ready"; v.status = "ready";
} }
return <div className="flex flex-1 flex-col relative">{v.bodyCache}</div>; return <div className="flex flex-1 flex-col relative">{v.body_cache}</div>;
}; };