wip fix component_not_found

This commit is contained in:
Rizky 2023-12-01 23:03:41 +07:00
parent 1486823708
commit 7724d7696d
6 changed files with 70 additions and 33 deletions

View File

@ -32,7 +32,7 @@ const scanMeta = async (id: string, doc: DComp, sync: SyncConnection) => {
const name = mitem.get("name") || ""; const name = mitem.get("name") || "";
await serverWalkLoad(mitem, scope_comps, sync, loaded); await serverWalkLoad(mitem, scope_comps, sync, loaded);
serverWalkMap( serverWalkMap(
{ sync, scope, scope_comps }, { sync, scope, scope_comps, note: "comp-load" },
{ {
mitem, mitem,
parent_item: { id: "root" }, parent_item: { id: "root" },

View File

@ -63,8 +63,8 @@ export const page_load: SAction["page"]["load"] = async function (
data.page_id = id_page; data.page_id = id_page;
return data; return data;
}); });
}; };
if (!snap && !ydoc) { if (!snap && !ydoc) {
const page = await db.page.findFirst({ where: { id } }); const page = await db.page.findFirst({ where: { id } });
@ -184,7 +184,7 @@ const scanMeta = async (doc: DPage, sync: SyncConnection) => {
); );
childs.map((m, i) => { childs.map((m, i) => {
serverWalkMap( serverWalkMap(
{ sync, scope, scope_comps }, { sync, scope, scope_comps, note: "page-load" },
{ {
mitem: m, mitem: m,
parent_item: { id: "root" }, parent_item: { id: "root" },

View File

@ -22,8 +22,7 @@ export const serverWalkLoad = async (
sync: SyncConnection, sync: SyncConnection,
loaded: Set<string> loaded: Set<string>
) => { ) => {
if (typeof mitem.get !== "function") {
if (typeof mitem.get !== 'function') {
return; return;
} }
@ -96,6 +95,7 @@ export const serverWalkMap = (
sync: SyncConnection; sync: SyncConnection;
scope: IScope; scope: IScope;
scope_comps: IScopeComp; scope_comps: IScopeComp;
note: string;
}, },
arg: { arg: {
mitem: MItem; mitem: MItem;
@ -146,7 +146,7 @@ export const serverWalkMap = (
mitem, mitem,
mcomp: mitem, mcomp: mitem,
scope, scope,
mcontent(mcontent) { }, mcontent(mcontent) {},
}); });
p.scope[item.id] = { p.scope[item.id] = {
p: arg.parent_ids, p: arg.parent_ids,
@ -287,12 +287,12 @@ export const serverWalkMap = (
parent_item: { id: item.id, mitem: mitem as MItem }, parent_item: { id: item.id, mitem: mitem as MItem },
parent_mcomp: jsx.parent_mcomp parent_mcomp: jsx.parent_mcomp
? { ? {
...jsx.parent_mcomp, ...jsx.parent_mcomp,
parent_ids: [ parent_ids: [
...(arg.parent_ids || []), ...(arg.parent_ids || []),
mitem.get("id") || "", mitem.get("id") || "",
], ],
} }
: undefined, : undefined,
parent_ids: [...arg.parent_ids, mitem.get("id") || ""], parent_ids: [...arg.parent_ids, mitem.get("id") || ""],
}); });
@ -311,15 +311,16 @@ export const serverWalkMap = (
} }
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) {
serverWalkMap(p, { serverWalkMap(p, {
mitem: e, mitem: e,
parent_item: { id: item.id, mitem: mitem as MItem }, parent_item: { id: item.id, mitem: mitem as MItem },
parent_mcomp: !!arg.parent_mcomp parent_mcomp: !!arg.parent_mcomp
? { ? {
...arg.parent_mcomp, ...arg.parent_mcomp,
parent_ids: [...(arg.parent_mcomp?.parent_ids || []), item.id], parent_ids: [...(arg.parent_mcomp?.parent_ids || []), item.id],
} }
: undefined, : undefined,
parent_ids: [...arg.parent_ids, item.id], parent_ids: [...arg.parent_ids, item.id],
}); });

View File

@ -1,10 +1,16 @@
import { NodeModel } from "@minoru/react-dnd-treeview"; import { NodeModel } from "@minoru/react-dnd-treeview";
import { compress, decompress } from "wasm-gzip"; import { compress, decompress } from "wasm-gzip";
import { MItem } from "../../../../utils/types/item";
import { DComp } from "../../../../utils/types/root"; import { DComp } from "../../../../utils/types/root";
import { EdMeta, IScope, PG, active } from "../ed-global"; import { EdMeta, IScope, PG, active } from "../ed-global";
import { treeRebuild } from "./build"; import { treeRebuild } from "./build";
import { loadComponent, syncWalkLoad, syncWalkMap } from "./sync-walk"; import {
import { MItem } from "../../../../utils/types/item"; loadComponent,
loadcomp,
syncWalkLoad,
syncWalkMap,
} from "./sync-walk";
import { waitUntil } from "web-utils";
export const loadCompSnapshot = async ( export const loadCompSnapshot = async (
p: PG, p: PG,
@ -26,7 +32,7 @@ export const loadCompSnapshot = async (
scope: scope, scope: scope,
} as any; } as any;
const { tree, meta } = await walkCompTree(p, mitem); const { tree, meta } = await walkCompTree(p, mitem, id_comp);
p.comp.list[id_comp] = { p.comp.list[id_comp] = {
...p.comp.list[id_comp], ...p.comp.list[id_comp],
meta, meta,
@ -48,7 +54,7 @@ export const loadCompSnapshot = async (
Y.applyUpdate(doc as any, decompress(res.diff), "local"); Y.applyUpdate(doc as any, decompress(res.diff), "local");
const mitem = doc.getMap("map").get("root"); const mitem = doc.getMap("map").get("root");
if (mitem) { if (mitem) {
const { tree, meta } = await walkCompTree(p, mitem); const { tree, meta } = await walkCompTree(p, mitem, id_comp);
p.comp.list[id_comp].tree = tree; p.comp.list[id_comp].tree = tree;
p.comp.list[id_comp].meta = meta; p.comp.list[id_comp].meta = meta;
await treeRebuild(p); await treeRebuild(p);
@ -71,14 +77,14 @@ export const loadCompSnapshot = async (
} }
}; };
const walkCompTree = async (p: PG, mitem: MItem) => { const walkCompTree = async (p: PG, mitem: MItem, comp_id: string) => {
const tree: NodeModel<EdMeta>[] = []; const tree: NodeModel<EdMeta>[] = [];
const meta = {}; const meta = {};
const portal = { const portal = {
in: {} as Record<string, EdMeta>, in: {} as Record<string, EdMeta>,
out: {} as Record<string, EdMeta>, out: {} as Record<string, EdMeta>,
}; };
await syncWalkLoad(p, mitem, (id) => loadComponent(p, id)); syncWalkLoad(p, mitem, (id) => loadComponent(p, id));
syncWalkMap( syncWalkMap(
{ {
@ -87,7 +93,20 @@ const walkCompTree = async (p: PG, mitem: MItem) => {
item_loading: p.ui.tree.item_loading, item_loading: p.ui.tree.item_loading,
meta, meta,
tree, tree,
warn_component_loaded: false, component_not_found(id) {
setTimeout(() => {
if (loadcomp.pending.has(id) || p.comp.list[id]) {
waitUntil(() => !loadcomp.pending.has(id)).then(async () => {
walkCompTree(p, mitem, comp_id);
const { tree, meta } = await walkCompTree(p, mitem, comp_id);
p.comp.list[comp_id].tree = tree;
p.comp.list[comp_id].meta = meta;
p.render();
});
}
}, 100);
},
}, },
{ {
mitem, mitem,

View File

@ -12,6 +12,8 @@ import {
ensureMProp, ensureMProp,
ensurePropContent, ensurePropContent,
} from "./sync-walk-utils"; } from "./sync-walk-utils";
import { treeRebuild } from "./build";
import { waitUntil } from "web-utils";
const comp_added = new Set<string>(); const comp_added = new Set<string>();
@ -63,7 +65,7 @@ export const syncWalkMap = (
tree?: NodeModel<EdMeta>[]; tree?: NodeModel<EdMeta>[];
comps: PG["comp"]["list"]; comps: PG["comp"]["list"];
meta: Record<string, EdMeta>; meta: Record<string, EdMeta>;
warn_component_loaded?: boolean; component_not_found?: (comp_id: string) => void;
}, },
arg: { arg: {
is_layout: boolean; is_layout: boolean;
@ -81,7 +83,9 @@ export const syncWalkMap = (
} }
) => { ) => {
const { mitem, parent_item, parent_mcomp } = arg; const { mitem, parent_item, parent_mcomp } = arg;
if (typeof mitem.get !== "function") { return } if (typeof mitem.get !== "function") {
return;
}
const item = {} as unknown as IItem; const item = {} as unknown as IItem;
@ -118,7 +122,7 @@ export const syncWalkMap = (
mapItem(mitem, item); mapItem(mitem, item);
} }
if (typeof item.name !== 'string') return; if (typeof item.name !== "string") return;
if (override_id) { if (override_id) {
if (!item.originalId) item.originalId = item.id; if (!item.originalId) item.originalId = item.id;
@ -138,11 +142,13 @@ export const syncWalkMap = (
}; };
if (item_comp && item_comp.id && parent_item.id !== "root") { if (item_comp && item_comp.id && parent_item.id !== "root") {
if (!p.comps[item_comp.id] && p.warn_component_loaded !== false) { if (!p.comps[item_comp.id]) {
throw new Error("Component failed to load: " + item_comp.id); if (p.component_not_found) {
p.component_not_found(item_comp.id);
}
} }
const ref_comp = p.comps[item_comp.id]; let ref_comp = p.comps[item_comp.id];
if (ref_comp && mitem_comp) { if (ref_comp && mitem_comp) {
const mcomp = ref_comp.doc.getMap("map").get("root"); const mcomp = ref_comp.doc.getMap("map").get("root");
@ -153,6 +159,7 @@ export const syncWalkMap = (
mitem_comp.set("ref_ids", new Y.Map() as any); mitem_comp.set("ref_ids", new Y.Map() as any);
ref_ids = {}; ref_ids = {};
} }
const old_id = item.id; const old_id = item.id;
mapItem(mcomp, item, ref_ids); mapItem(mcomp, item, ref_ids);
@ -300,7 +307,10 @@ export const syncWalkMap = (
} }
}; };
export const loadcomp = { timeout: 0 as any, pending: new Set<string>() }; export const loadcomp = {
timeout: 0 as any,
pending: new Set<string>(),
};
export const loadComponent = async (p: PG, id_comp: string) => { export const loadComponent = async (p: PG, id_comp: string) => {
return new Promise<boolean>((resolve) => { return new Promise<boolean>((resolve) => {
@ -308,6 +318,7 @@ export const loadComponent = async (p: PG, id_comp: string) => {
resolve(true); resolve(true);
return; return;
} }
loadcomp.pending.add(id_comp); loadcomp.pending.add(id_comp);
clearTimeout(loadcomp.timeout); clearTimeout(loadcomp.timeout);
loadcomp.timeout = setTimeout(async () => { loadcomp.timeout = setTimeout(async () => {
@ -345,7 +356,7 @@ const mapItem = (
item[k] = []; item[k] = [];
const childs = e as unknown as TypedArray<{}>; const childs = e as unknown as TypedArray<{}>;
childs.forEach((c) => { childs.forEach((c) => {
if (typeof c.get === 'function') { if (typeof c.get === "function") {
if (ref_ids) { if (ref_ids) {
const id = ref_ids[c.get("id")]; const id = ref_ids[c.get("id")];
if (id) { if (id) {

View File

@ -1,6 +1,7 @@
import type { OnMount } from "@monaco-editor/react"; import type { OnMount } from "@monaco-editor/react";
import { deepClone } from "web-utils"; import { deepClone } from "web-utils";
import { EPage, ISingleScope, PG, active } from "../../../logic/ed-global"; import { EPage, ISingleScope, PG, active } from "../../../logic/ed-global";
import { getMetaById } from "../../../logic/tree/build";
type Monaco = Parameters<OnMount>[1]; type Monaco = Parameters<OnMount>[1];
export type MonacoEditor = Parameters<OnMount>[0]; export type MonacoEditor = Parameters<OnMount>[0];
@ -10,6 +11,9 @@ export const declareScope = async (
monaco: Monaco monaco: Monaco
) => { ) => {
let active_id = active.item_id; let active_id = active.item_id;
const meta = getMetaById(p, active_id);
const parent = getMetaById(p, meta?.parent_item.id);
let s = deepClone(p.page.scope[active_id]); let s = deepClone(p.page.scope[active_id]);
if (active.comp_id && p.comp.list[active.comp_id]) { if (active.comp_id && p.comp.list[active.comp_id]) {
@ -49,7 +53,8 @@ export const declareScope = async (
if (arg.type !== "local") { if (arg.type !== "local") {
addScope( addScope(
monaco, monaco,
`${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${arg.type `${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
arg.type
}~${arg.name}~${arg.id}`, }~${arg.name}~${arg.id}`,
`\ `\
export const {}; export const {};
@ -60,7 +65,8 @@ declare global {
} else { } else {
addScope( addScope(
monaco, monaco,
`${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${arg.type `${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
arg.type
}~${arg.id}`, }~${arg.id}`,
`\ `\
export const {}; export const {};