wip fix
This commit is contained in:
Rizky
parent
51807aa0c7
commit
8188589065
|
|
@ -148,13 +148,7 @@ export const ScriptMonaco = () => {
|
||||||
if (!mitem) {
|
if (!mitem) {
|
||||||
active.item_id = "";
|
active.item_id = "";
|
||||||
return <div>no mitem</div>;
|
return <div>no mitem</div>;
|
||||||
} else if (
|
} else if (item.type === "item" && item.component?.id) {
|
||||||
item.type === "item" &&
|
|
||||||
item.component?.id &&
|
|
||||||
meta.parent_mcomp?.meta.mitem
|
|
||||||
) {
|
|
||||||
mitem = meta.parent_mcomp?.meta.mitem;
|
|
||||||
|
|
||||||
if (!mitem) {
|
if (!mitem) {
|
||||||
active.item_id = "";
|
active.item_id = "";
|
||||||
return <div>no mitem</div>;
|
return <div>no mitem</div>;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import type { OnMount } from "@monaco-editor/react";
|
import type { OnMount } from "@monaco-editor/react";
|
||||||
import { deepClone } from "web-utils";
|
|
||||||
import {
|
import {
|
||||||
EPage,
|
EPage,
|
||||||
IMeta,
|
IMeta,
|
||||||
|
|
@ -7,7 +6,6 @@ import {
|
||||||
PG,
|
PG,
|
||||||
active,
|
active,
|
||||||
} from "../../../logic/ed-global";
|
} 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];
|
||||||
|
|
||||||
|
|
@ -17,231 +15,54 @@ export const declareScope = async (
|
||||||
editor: MonacoEditor,
|
editor: MonacoEditor,
|
||||||
monaco: Monaco
|
monaco: Monaco
|
||||||
) => {
|
) => {
|
||||||
let active_id = active.item_id;
|
const metas = active.comp_id
|
||||||
|
? p.comp.list[active.comp_id]?.meta
|
||||||
const root = active.comp_id
|
|
||||||
? p.comp.list[active.comp_id].scope
|
|
||||||
: p.page.scope;
|
|
||||||
|
|
||||||
const meta_root = active.comp_id
|
|
||||||
? p.comp.list[active.comp_id].meta
|
|
||||||
: p.page.meta;
|
: p.page.meta;
|
||||||
|
|
||||||
if (!root) return;
|
const parents: IMeta[] = [];
|
||||||
|
|
||||||
let cur = meta;
|
let cur = meta;
|
||||||
while (!root[cur.item.id]) {
|
if (cur && cur.parent) {
|
||||||
const parent = meta_root[cur.parent_item.id];
|
while (cur && cur.parent && cur.parent.id) {
|
||||||
if (parent) {
|
if (cur.mitem) {
|
||||||
cur = parent;
|
parents.unshift(cur);
|
||||||
} else {
|
}
|
||||||
break;
|
cur = metas[cur.parent.id];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const s = root[cur.item.id];
|
|
||||||
|
|
||||||
if (!s) return;
|
for (const p of parents) {
|
||||||
s.p.push(active_id);
|
const def = p.scope.def;
|
||||||
|
if (def) {
|
||||||
const existing: Record<string, IEachArgScope> = {};
|
if (def.local) {
|
||||||
|
addScope({
|
||||||
spreadScope(p, s, (arg) => {
|
monaco,
|
||||||
const { name } = arg;
|
loc: { item_id: p.item.id, type: "item" },
|
||||||
|
source: `\
|
||||||
const e = existing[name];
|
export const {};
|
||||||
if (e && e.s.s) {
|
declare global {
|
||||||
if (e.type === "local") {
|
const ${def.local.name} = ${def.local.value};
|
||||||
delete e.s.s.local;
|
}`,
|
||||||
}
|
|
||||||
if (e.type === "passprop" && e.s.s.passprop) {
|
|
||||||
delete e.s.s.passprop[e.name];
|
|
||||||
}
|
|
||||||
if (e.type === "prop" && e.s.s.props) {
|
|
||||||
delete e.s.s.props[e.name];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
existing[name] = arg;
|
|
||||||
});
|
|
||||||
spreadScope(p, s, (arg) => {
|
|
||||||
let { prev } = arg;
|
|
||||||
if (arg.type !== "local") {
|
|
||||||
addScope(
|
|
||||||
monaco,
|
|
||||||
`${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
|
|
||||||
arg.type
|
|
||||||
}~${arg.name}~${arg.id}`,
|
|
||||||
`\
|
|
||||||
export const {};
|
|
||||||
declare global {
|
|
||||||
const ${arg.name} = ${arg.value};
|
|
||||||
}`
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
addScope(
|
|
||||||
monaco,
|
|
||||||
`${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
|
|
||||||
arg.type
|
|
||||||
}~${arg.id}`,
|
|
||||||
`\
|
|
||||||
export const {};
|
|
||||||
const __val = ${arg.value};
|
|
||||||
declare global {
|
|
||||||
const ${arg.name}: typeof __val & { render: ()=>void };
|
|
||||||
}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const layout_scope = {} as Record<string, ISingleScope>;
|
|
||||||
|
|
||||||
type IEachArgScope = {
|
|
||||||
s: ISingleScope;
|
|
||||||
name: string;
|
|
||||||
value: string;
|
|
||||||
id: string;
|
|
||||||
type: "local" | "prop" | "passprop";
|
|
||||||
index?: number;
|
|
||||||
is_prop?: boolean;
|
|
||||||
comp_id?: string;
|
|
||||||
prev?: { comp_id: string; item_id: string };
|
|
||||||
};
|
|
||||||
const spreadScope = (
|
|
||||||
p: PG,
|
|
||||||
s: ISingleScope | undefined,
|
|
||||||
each: (arg: IEachArgScope) => void
|
|
||||||
) => {
|
|
||||||
if (!s) return;
|
|
||||||
const parents = [...s.p];
|
|
||||||
const layout_id = p.site.layout.id;
|
|
||||||
let layout = null as null | EPage;
|
|
||||||
if (layout_id && p.page.list[layout_id]) {
|
|
||||||
layout = p.page.list[layout_id].page;
|
|
||||||
if (!layout_scope[layout_id]) {
|
|
||||||
if (layout) {
|
|
||||||
const scopes = Object.values(layout.scope).filter((e) => {
|
|
||||||
return e.n === "content";
|
|
||||||
});
|
});
|
||||||
const scope = scopes.shift();
|
|
||||||
if (scope) {
|
|
||||||
layout_scope[layout_id] = scope;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const scope = layout_scope[layout_id];
|
|
||||||
if (scope) {
|
|
||||||
parents.shift();
|
|
||||||
scope.p.forEach((e) => parents.push(e));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const mergeScopes = (
|
|
||||||
parents: string[],
|
|
||||||
each: (arg: IEachArgScope) => void,
|
|
||||||
arg: { prev?: { comp_id: string; item_id: string } }
|
|
||||||
) => {
|
|
||||||
let { prev } = arg;
|
|
||||||
for (const _parent_id of parents) {
|
|
||||||
let parent_id = _parent_id;
|
|
||||||
if (parent_id === "root") continue;
|
|
||||||
let item = null as null | ISingleScope;
|
|
||||||
const meta = p.page.meta[parent_id];
|
|
||||||
|
|
||||||
if (layout && layout_scope[layout_id]) {
|
|
||||||
const scope = layout_scope[layout_id];
|
|
||||||
if (scope.p.includes(parent_id)) {
|
|
||||||
item = layout.scope[parent_id];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let comp_id = "";
|
|
||||||
if (!item) {
|
|
||||||
if (meta) {
|
|
||||||
if (meta.parent_mcomp) {
|
|
||||||
comp_id =
|
|
||||||
meta.parent_mcomp.meta.mitem?.get("component")?.get("id") || "";
|
|
||||||
if (comp_id) {
|
|
||||||
const scope = p.comp.list[comp_id].scope;
|
|
||||||
item = scope[meta.item.originalId || meta.item.id];
|
|
||||||
if (item) {
|
|
||||||
parent_id = meta.item.originalId || meta.item.id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!item) {
|
|
||||||
item = p.page.scope[parent_id];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item) {
|
|
||||||
const scope = item.s;
|
|
||||||
|
|
||||||
if (scope) {
|
|
||||||
if (scope.local)
|
|
||||||
each({
|
|
||||||
s,
|
|
||||||
comp_id,
|
|
||||||
type: "local",
|
|
||||||
id: parent_id,
|
|
||||||
name: scope.local.name,
|
|
||||||
value: scope.local?.value,
|
|
||||||
index: scope.local?.index,
|
|
||||||
prev,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (scope.passprop) {
|
|
||||||
for (const [k, v] of Object.entries(scope.passprop)) {
|
|
||||||
each({
|
|
||||||
s,
|
|
||||||
comp_id,
|
|
||||||
type: "passprop",
|
|
||||||
id: parent_id,
|
|
||||||
name: k,
|
|
||||||
value: v.value,
|
|
||||||
index: v.index,
|
|
||||||
prev,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (scope.props) {
|
|
||||||
for (const [k, v] of Object.entries(scope.props)) {
|
|
||||||
each({
|
|
||||||
s,
|
|
||||||
comp_id,
|
|
||||||
type: "prop",
|
|
||||||
id: parent_id,
|
|
||||||
name: k,
|
|
||||||
value: v.value,
|
|
||||||
is_prop: true,
|
|
||||||
prev,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
mergeScopes(parents, each, {});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const addScope = (monaco: Monaco, id: string, source: string) => {
|
const addScope = (arg: {
|
||||||
|
monaco: Monaco;
|
||||||
|
loc: { item_id: string; type: "prop" | "item" };
|
||||||
|
source: string;
|
||||||
|
}) => {
|
||||||
|
const { monaco, source } = arg;
|
||||||
|
|
||||||
|
const filename = `ts:scope~${JSON.stringify(arg.loc)}.d.ts`;
|
||||||
const model = monaco.editor.getModels().find((e) => {
|
const model = monaco.editor.getModels().find((e) => {
|
||||||
return e.uri.toString() === `ts:scope~${id}.d.ts`;
|
return e.uri.toString() === filename;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (model) {
|
if (model) {
|
||||||
model.setValue(source);
|
model.setValue(source);
|
||||||
} else {
|
} else {
|
||||||
monaco.editor.createModel(
|
monaco.editor.createModel(source, "typescript", monaco.Uri.parse(filename));
|
||||||
source,
|
|
||||||
"typescript",
|
|
||||||
monaco.Uri.parse(`ts:scope~${id}.d.ts`)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
|
||||||
jsxFragmentFactory: "React.Fragment",
|
jsxFragmentFactory: "React.Fragment",
|
||||||
target: monaco.languages.typescript.ScriptTarget.ES2015,
|
target: monaco.languages.typescript.ScriptTarget.ES2015,
|
||||||
allowNonTsExtensions: true,
|
allowNonTsExtensions: true,
|
||||||
lib: ["esnext"],
|
lib: ["esnext", "dom"],
|
||||||
module: monaco.languages.typescript.ModuleKind.ESNext,
|
module: monaco.languages.typescript.ModuleKind.ESNext,
|
||||||
esModuleInterop: true,
|
esModuleInterop: true,
|
||||||
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
|
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
|
||||||
|
|
@ -38,88 +38,122 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
|
||||||
openCodeEditor(source, r, selectionOrPosition) {
|
openCodeEditor(source, r, selectionOrPosition) {
|
||||||
if (p) {
|
if (p) {
|
||||||
p.ui.popup.script.mode === "js";
|
p.ui.popup.script.mode === "js";
|
||||||
const cpath = r.path.substring(`scope~`.length).split("__");
|
const cpath =
|
||||||
|
r.path.substring(`scope~`.length).split("__").pop() || "";
|
||||||
|
|
||||||
const [comp_id, prev_comp_id, prev_item_id] = cpath[0].split("~");
|
let arg = {
|
||||||
if (cpath[1]) {
|
type: "" as "prop" | "item",
|
||||||
const path = cpath[1].split("~");
|
item_id: "" as string | undefined,
|
||||||
const type = path[0] as "prop" | "passprop" | "local";
|
comp_id: "",
|
||||||
const id = path[path.length - 1].replace(".d.ts", "");
|
instance_id: "",
|
||||||
|
};
|
||||||
if (type === "prop") {
|
try {
|
||||||
p.ui.popup.script.open = false;
|
arg = JSON.parse(cpath.substring(0, cpath.length - 5) || "{}");
|
||||||
p.render();
|
} catch (e) {}
|
||||||
|
if (arg.type) {
|
||||||
setTimeout(() => {
|
if (arg.type === "item") {
|
||||||
p.ui.popup.script.type = "item";
|
|
||||||
p.ui.popup.script.prop_name = path[1];
|
|
||||||
p.ui.popup.script.type = "prop-instance";
|
|
||||||
p.ui.popup.script.prop_kind = "value";
|
|
||||||
p.ui.popup.script.open = true;
|
|
||||||
|
|
||||||
if (
|
|
||||||
!prev_comp_id &&
|
|
||||||
!prev_item_id &&
|
|
||||||
active.instance.item_id &&
|
|
||||||
active.comp_id
|
|
||||||
) {
|
|
||||||
active.item_id = active.instance.item_id;
|
|
||||||
active.comp_id = active.instance.comp_id;
|
|
||||||
active.instance.item_id = "";
|
|
||||||
active.instance.comp_id = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
p.render();
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
p.ui.popup.script.open = false;
|
p.ui.popup.script.open = false;
|
||||||
p.ui.popup.script.type = "item";
|
p.ui.popup.script.type = "item";
|
||||||
p.ui.popup.script.prop_name = "";
|
p.ui.popup.script.prop_name = "";
|
||||||
p.render();
|
p.render();
|
||||||
setTimeout(() => {
|
} else {
|
||||||
if (comp_id) {
|
p.ui.popup.script.open = false;
|
||||||
let meta = p.page.meta[id];
|
p.render();
|
||||||
if (active.comp_id) {
|
|
||||||
meta = p.comp.list[active.comp_id].meta[id];
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
active.instance.comp_id = active.comp_id;
|
|
||||||
active.instance.item_id = active.item_id;
|
|
||||||
|
|
||||||
if (meta && meta.item.originalId) {
|
|
||||||
active.item_id = meta.item.originalId;
|
|
||||||
} else {
|
|
||||||
active.item_id = id;
|
|
||||||
}
|
|
||||||
active.comp_id = comp_id;
|
|
||||||
} else {
|
|
||||||
if (active.comp_id) {
|
|
||||||
let meta = p.comp.list[active.comp_id].meta[id];
|
|
||||||
|
|
||||||
if (!meta) {
|
|
||||||
const _id = p.comp.list[active.comp_id].doc
|
|
||||||
.getMap("map")
|
|
||||||
.get("root")
|
|
||||||
?.get("id");
|
|
||||||
|
|
||||||
if (_id) {
|
|
||||||
active.item_id = _id;
|
|
||||||
p.render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
active.item_id = id;
|
|
||||||
}
|
|
||||||
p.ui.popup.script.open = true;
|
|
||||||
p.render();
|
|
||||||
}, 100);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
p.ui.popup.script.open = true;
|
||||||
|
|
||||||
|
if (arg.type === "item") {
|
||||||
|
if (arg.item_id) {
|
||||||
|
active.item_id = arg.item_id;
|
||||||
|
p.render();
|
||||||
|
}
|
||||||
|
} else if (arg.type === "prop") {
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// const [comp_id, prev_comp_id, prev_item_id] = cpath[0].split("~");
|
||||||
|
// if (cpath[1]) {
|
||||||
|
// const path = cpath[1].split("~");
|
||||||
|
// const type = path[0] as "prop" | "passprop" | "local";
|
||||||
|
// const id = path[path.length - 1].replace(".d.ts", "");
|
||||||
|
|
||||||
|
// if (type === "prop") {
|
||||||
|
// p.ui.popup.script.open = false;
|
||||||
|
// p.render();
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// p.ui.popup.script.type = "item";
|
||||||
|
// p.ui.popup.script.prop_name = path[1];
|
||||||
|
// p.ui.popup.script.type = "prop-instance";
|
||||||
|
// p.ui.popup.script.prop_kind = "value";
|
||||||
|
// p.ui.popup.script.open = true;
|
||||||
|
|
||||||
|
// if (
|
||||||
|
// !prev_comp_id &&
|
||||||
|
// !prev_item_id &&
|
||||||
|
// active.instance.item_id &&
|
||||||
|
// active.comp_id
|
||||||
|
// ) {
|
||||||
|
// active.item_id = active.instance.item_id;
|
||||||
|
// active.comp_id = active.instance.comp_id;
|
||||||
|
// active.instance.item_id = "";
|
||||||
|
// active.instance.comp_id = "";
|
||||||
|
// }
|
||||||
|
|
||||||
|
// p.render();
|
||||||
|
// }, 100);
|
||||||
|
|
||||||
|
// return false;
|
||||||
|
// } else {
|
||||||
|
// p.ui.popup.script.open = false;
|
||||||
|
// p.ui.popup.script.type = "item";
|
||||||
|
// p.ui.popup.script.prop_name = "";
|
||||||
|
// p.render();
|
||||||
|
// setTimeout(() => {
|
||||||
|
// if (comp_id) {
|
||||||
|
// let meta = p.page.meta[id];
|
||||||
|
// if (active.comp_id) {
|
||||||
|
// meta = p.comp.list[active.comp_id].meta[id];
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// active.instance.comp_id = active.comp_id;
|
||||||
|
// active.instance.item_id = active.item_id;
|
||||||
|
|
||||||
|
// if (meta && meta.item.originalId) {
|
||||||
|
// active.item_id = meta.item.originalId;
|
||||||
|
// } else {
|
||||||
|
// active.item_id = id;
|
||||||
|
// }
|
||||||
|
// active.comp_id = comp_id;
|
||||||
|
// } else {
|
||||||
|
// if (active.comp_id) {
|
||||||
|
// let meta = p.comp.list[active.comp_id].meta[id];
|
||||||
|
|
||||||
|
// if (!meta) {
|
||||||
|
// const _id = p.comp.list[active.comp_id].doc
|
||||||
|
// .getMap("map")
|
||||||
|
// .get("root")
|
||||||
|
// ?.get("id");
|
||||||
|
|
||||||
|
// if (_id) {
|
||||||
|
// active.item_id = _id;
|
||||||
|
// p.render();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// active.item_id = id;
|
||||||
|
// }
|
||||||
|
// p.ui.popup.script.open = true;
|
||||||
|
// p.render();
|
||||||
|
// }, 100);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue