midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix monaco

This commit is contained in:
Rizky 2024-01-17 21:05:53 +07:00
parent 0f0576f638
commit 383621ac61
6 changed files with 178 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
app/web/src/nova/ed/panel/popup/script/monaco.tsx
View File

@ -21,6 +21,8 @@ const scriptEdit = {
timeout: null as any, timeout: null as any,
}; };
const IMPORT_SEPARATOR = "//SCRIPT//";
const encode = new TextEncoder(); const encode = new TextEncoder();
export type MonacoEditor = Parameters<OnMount>[0]; export type MonacoEditor = Parameters<OnMount>[0];
export const EdScriptMonaco: FC<{}> = () => { export const EdScriptMonaco: FC<{}> = () => {
@ -34,11 +36,12 @@ export const EdScriptMonaco: FC<{}> = () => {
historyOpen: false, historyOpen: false,
mode: "", mode: "",
imports: "", imports: "",
active_id: "",
idbstore: createStore(`prasi-page-${p.page.cur.id}`, "script-history"), idbstore: createStore(`prasi-page-${p.page.cur.id}`, "script-history"),
}); });
const Editor = jscript.editor; const Editor = jscript.editor;
if (!Editor) return null; if (!Editor) return <Loading backdrop={false} note="loading-monaco" />;
let meta: IMeta | null = p.page.meta[active.item_id]; let meta: IMeta | null = p.page.meta[active.item_id];
if (active.comp_id) { if (active.comp_id) {
@ -62,9 +65,13 @@ export const EdScriptMonaco: FC<{}> = () => {
if (monaco && editor) { if (monaco && editor) {
const type = p.ui.popup.script.type; const type = p.ui.popup.script.type;
if (local.mode !== p.ui.popup.script.mode) { if (
local.mode !== p.ui.popup.script.mode ||
local.active_id !== active.item_id
) {
local.init = false; local.init = false;
local.mode = p.ui.popup.script.mode; local.mode = p.ui.popup.script.mode;
local.active_id = active.item_id;
} }
if (!local.init) { if (!local.init) {
@ -102,69 +109,86 @@ export const EdScriptMonaco: FC<{}> = () => {
{ types: {}, values: {} } { types: {}, values: {} }
); );
if (meta) { if (meta) {
let end_hide = 0; switch (type) {
if (type === "prop-master") { case "prop-master":
const nmodel = monaco.editor.createModel( {
val, const nmodel = monaco.editor.createModel(
"typescript", val,
monaco.Uri.parse("file:///active.tsx") "typescript",
); monaco.Uri.parse("file:///active.tsx")
editor.setModel(nmodel); );
} else { editor.setModel(nmodel);
const nmodel = monaco.editor.createModel( }
val, break;
"typescript", case "prop-instance":
monaco.Uri.parse("file:///active.tsx") {
); const nmodel = monaco.editor.createModel(
editor.setModel(nmodel); val,
const { exports, imports } = declareScope(p, meta, monaco); "typescript",
console.log( monaco.Uri.parse("file:///active.tsx")
Object.keys(imports).map((e) => [ );
p.page.meta[e].item.name, editor.setModel(nmodel);
exports[e], const constrainedInstance = constrainedEditor(monaco);
]) constrainedInstance.initializeIn(editor);
); const model = editor.getModel();
// const added = new Set<string>(); constrainedInstance.removeRestrictionsIn(model);
// const im = imports[active.item_id]; const frange = model?.getFullModelRange();
// const im_flat = {} as Record<string, string[]>; if (frange) {
// for (const [var_name, item] of Object.entries(im)) { // const ranges = [
// const file_name = `${item.id}_${item.type}.tsx`; // {
// if (!im_flat[file_name]) im_flat[file_name] = []; // range: [
// im_flat[file_name].push(var_name); // end_hide + 1,
// } // `export const ${p.ui.popup.script.prop_name} = `
// console.log(im_flat, exports); // .length,
// if (active_src) { // frange.getEndPosition().lineNumber,
// const end_hide = // frange.getEndPosition().column,
// active_src.split("//!!start")[0].split("\n").length + 1; // ],
// const range = new monaco.Range(1, 0, end_hide, 0); // allowMultiline: true,
// (editor as any).setHiddenAreas([range]); // },
// } // ];
} // constrainedInstance.addRestrictionsTo(model, ranges);
editor.trigger("fold", "editor.foldAllMarkerRegions", {}); }
await jsMount(editor, monaco, p); }
break;
case "item":
{
const { exports, imports } = declareScope(p, meta, monaco);
const im = imports[active.item_id];
const im_src = [];
if (type === "prop-instance") { if (im) {
const constrainedInstance = constrainedEditor(monaco); for (const [var_name, item] of Object.entries(im)) {
constrainedInstance.initializeIn(editor); im_src.push(
const model = editor.getModel(); `import { ${var_name} } from "./${item.id}_${var_name}_${item.type}";`
constrainedInstance.removeRestrictionsIn(model); );
const frange = model?.getFullModelRange(); }
if (frange) { }
const ranges = [ for (const [k, v] of Object.entries(exports)) {
{ addScope(p, monaco, `file:///${k}`, v);
range: [ }
end_hide + 1, let active_src =
`export const ${p.ui.popup.script.prop_name} = `.length, im_src.length > 0
frange.getEndPosition().lineNumber, ? `${im_src.join("\n")}\n${IMPORT_SEPARATOR}\n${val}`
frange.getEndPosition().column, : val;
], const model = monaco.editor.createModel(
allowMultiline: true, active_src,
}, "typescript",
]; monaco.Uri.parse("file:///active.tsx")
constrainedInstance.addRestrictionsTo(model, ranges); );
} editor.setModel(model);
editor.trigger("fold", "editor.foldAllMarkerRegions", {});
if (active_src) {
const end_hide = active_src
.split(IMPORT_SEPARATOR)[0]
.split("\n").length;
const range = new monaco.Range(1, 1, end_hide, 1);
(editor as any).setHiddenAreas([range]);
}
}
break;
} }
} }
await jsMount(editor, monaco, p);
} else { } else {
const model = monaco.editor.createModel( const model = monaco.editor.createModel(
val, val,
@ -184,7 +208,7 @@ export const EdScriptMonaco: FC<{}> = () => {
})(); })();
}, [active.item_id, local.monaco, local.editor, p.ui.popup.script.mode]); }, [active.item_id, local.monaco, local.editor, p.ui.popup.script.mode]);
if (!meta) return null; if (!meta) return <Loading backdrop={false} note="meta-not-found" />;
const item = meta.item; const item = meta.item;
const adv = meta.mitem?.get("adv")?.toJSON() || {}; const adv = meta.mitem?.get("adv")?.toJSON() || {};
@ -201,8 +225,8 @@ export const EdScriptMonaco: FC<{}> = () => {
?.getValue() ?.getValue()
.replace(/\{\s*children\s*\}/gi, newval); .replace(/\{\s*children\s*\}/gi, newval);
if (curval.includes("/** IMPORT MODULE **/")) { if (curval.includes(IMPORT_SEPARATOR)) {
curval = curval.split("/** IMPORT MODULE **/\n").pop() || ""; curval = curval.split(IMPORT_SEPARATOR + "\n").pop() || "";
} }
const text = trim( const text = trim(
@ -215,7 +239,7 @@ export const EdScriptMonaco: FC<{}> = () => {
let final_src = text; let final_src = text;
if (local.imports) { if (local.imports) {
final_src = `${local.imports}\n/** IMPORT MODULE **/\n${text}`; final_src = `${local.imports}\n${IMPORT_SEPARATOR}\n${text}`;
} }
local.editor.executeEdits(null, [ local.editor.executeEdits(null, [
{ {
@ -263,6 +287,7 @@ export const EdScriptMonaco: FC<{}> = () => {
{ css: "scss", js: "typescript", html: "html" }[p.ui.popup.script.mode] { css: "scss", js: "typescript", html: "html" }[p.ui.popup.script.mode]
} }
onChange={(value) => { onChange={(value) => {
return;
const stype = p.ui.popup.script.type; const stype = p.ui.popup.script.type;
if ((value || "").includes("/** SOURCE START **/")) { if ((value || "").includes("/** SOURCE START **/")) {
const valparts = (value || "").split("/** SOURCE START **/\n"); const valparts = (value || "").split("/** SOURCE START **/\n");

13
app/web/src/nova/ed/panel/popup/script/scope/extract-export.tsx
View File

@ -37,19 +37,6 @@ export const extractExport = (p: PG, m: IMeta) => {
} }
} }
if (m.script?.scope) {
for (const [k, v] of Object.entries(m.script.scope)) {
if (k === "key") continue;
result[k] = {
type: "scope",
id: m.item.id,
start: 0,
end: 0,
val: "null as any",
};
}
}
if (script?.props) { if (script?.props) {
for (const [k, v] of Object.entries(script.props)) { for (const [k, v] of Object.entries(script.props)) {
result[k] = { result[k] = {

31
app/web/src/nova/ed/panel/popup/script/scope/scope.tsx
View File

@ -46,29 +46,34 @@ export const declareScope = (p: PG, meta: IMeta, monaco: Monaco) => {
let prev_m = null as null | IMeta; let prev_m = null as null | IMeta;
for (const m of cur_path) { for (const m of cur_path) {
if (!exports[m.item.id]) { if (!exports[m.item.id]) {
const export_types = {
local: [] as string[],
prop: [] as string[],
passprop: [] as string[],
scope: [] as string[],
};
extract_exports[m.item.id] = extractExport(p, m); extract_exports[m.item.id] = extractExport(p, m);
for (const [k, v] of Object.entries(extract_exports[m.item.id])) { for (const [k, v] of Object.entries(extract_exports[m.item.id])) {
let src = "";
if (v.type !== "local") { if (v.type !== "local") {
export_types[v.type].push(`export const ${k} = ${v.val};`); src = `export const ${k} = ${v.val};`;
} else { } else {
export_types[v.type].push(`\ src = `\
const ${k}__local = ${v.val}; const ${k}__local = ${v.val};
export const ${k}: typeof ${k}__local & { render: ()=>void } = ${k}__local as any;`); export const ${k}: typeof ${k}__local & { render: ()=>void } = ${k}__local as any;`;
} }
exports[`${m.item.id}_${k}_${v.type}.tsx`] = src;
} }
for (const [k, v] of Object.entries(export_types)) { }
if (v.length > 0) {
exports[`${m.item.id}_${k}.tsx`] = v.join("\n"); if (
m.item.id === active.item_id &&
m.item.component?.id === active.comp_id &&
active.comp_id
) {
for (const [k, v] of Object.entries(extract_exports[m.item.id])) {
if (!imports[m.item.id]) imports[m.item.id] = {};
if (v.type === "prop") {
imports[m.item.id][k] = v;
} }
} }
} }
if (prev_m && extract_exports[prev_m.item.id]) { if (prev_m && extract_exports[prev_m.item.id]) {
imports[m.item.id] = {}; imports[m.item.id] = {};
if (imports[prev_m.item.id]) { if (imports[prev_m.item.id]) {

24
app/web/src/nova/ed/panel/popup/script/workbench.tsx
View File

@ -1,11 +1,27 @@
import { useGlobal } from "web-utils"; import { useGlobal, useLocal } from "web-utils";
import { IItem } from "../../../../../utils/types/item"; import { IItem } from "../../../../../utils/types/item";
import { EDGlobal, active } from "../../../logic/ed-global"; import { EDGlobal, active } from "../../../logic/ed-global";
import { EdScriptMonaco } from "./monaco"; import { EdScriptMonaco } from "./monaco";
import { EdScriptSnippet } from "./snippet"; import { EdScriptSnippet } from "./snippet";
import { useEffect } from "react";
import { Loading } from "../../../../../utils/ui/loading";
export const EdScriptWorkbench = () => { export const EdScriptWorkbench = () => {
const p = useGlobal(EDGlobal, "EDITOR"); const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ active_id: "" });
useEffect(() => {
if (!local.active_id) {
local.active_id = active.item_id;
local.render();
} else {
setTimeout(() => {
local.active_id = active.item_id;
local.render();
}, 200);
}
}, [active.item_id]);
return ( return (
<div className="flex flex-1 items-stretch"> <div className="flex flex-1 items-stretch">
<div className="flex flex-1 flex-col "> <div className="flex flex-1 flex-col ">
@ -52,7 +68,11 @@ export const EdScriptWorkbench = () => {
)} )}
</div> </div>
<div className="relative flex flex-1"> <div className="relative flex flex-1">
<EdScriptMonaco /> {local.active_id === active.item_id ? (
<EdScriptMonaco />
) : (
<Loading backdrop={false} note={"opening script"} />
)}
</div> </div>
</div> </div>
</div> </div>

2
app/web/src/nova/ed/panel/tree/node/item/action.tsx
View File

@ -3,6 +3,7 @@ import { useGlobal } from "web-utils";
import { Tooltip } from "../../../../../../utils/ui/tooltip"; import { Tooltip } from "../../../../../../utils/ui/tooltip";
import { EDGlobal, IMeta, active } from "../../../../logic/ed-global"; import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
import { getMetaById } from "../../../../logic/active/get-meta"; import { getMetaById } from "../../../../logic/active/get-meta";
import { treeRebuild } from "../../../../logic/tree/build";
export const EdTreeAction = ({ export const EdTreeAction = ({
node, node,
@ -139,6 +140,7 @@ export const EdTreeAction = ({
active.item_id = active.instance.item_id || ""; active.item_id = active.instance.item_id || "";
active.instance.comp_id = ""; active.instance.comp_id = "";
active.instance.item_id = ""; active.instance.item_id = "";
treeRebuild(p);
p.render(); p.render();
} }
}} }}

61
app/web/src/utils/script/mount.tsx
View File

@ -53,15 +53,42 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
if (p) { if (p) {
monaco.editor.registerEditorOpener({ monaco.editor.registerEditorOpener({
openCodeEditor(source, r, selectionOrPosition) { openCodeEditor(source, r, _sel) {
if (p) { if (p) {
p.ui.popup.script.mode === "js";
if (r.scheme === "file" && r.path) { if (r.scheme === "file" && r.path) {
const args = r.path.split("_"); const args = r.path.split("_");
if (args.length === 4) { if (args.length === 3) {
const { cur, id, meta } = extractLoc(args, p); const loc = extractLoc(args, p);
console.log(cur, id, meta.item.name); console.log(loc.meta);
if (loc.meta) {
if (loc.meta.item.component?.id && loc.meta.instances) {
active.comp_id = loc.meta.item.component?.id;
active.instance = {
comp_id: loc.meta.item.component?.id,
item_id: loc.meta.item.id,
};
const item_id = p.comp.list[active.comp_id].tree.find(
(e) => e.parent === "root"
)?.id;
if (item_id) {
active.item_id = item_id as string;
}
} else if (
loc.meta.parent?.instance_id &&
loc.meta.parent.comp_id &&
loc.meta.item.originalId
) {
active.comp_id = loc.meta.parent.comp_id;
active.instance = {
comp_id: active.comp_id,
item_id: loc.meta.parent.instance_id,
};
active.item_id = loc.meta.item.originalId;
} else {
active.item_id = loc.meta.item.id;
}
p.render();
}
} }
} }
} }
@ -182,17 +209,19 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
}; };
export const extractLoc = (args: string[], p: PG) => { export const extractLoc = (args: string[], p: PG) => {
const [_cur, id, type, _varname] = args; const [_id, var_name, _type] = args;
const cur = _cur.substring(1); const id = _id.substring(1);
const varname = _varname.substring(0, _varname.length - ".tsx".length); const type = _type.replace(".tsx", "");
let meta = p.page.meta[id]; let meta = p.page.meta[id];
if (cur !== "page") {
const comp = p.comp.list[cur]; if (active.comp_id) {
if (comp) { meta = p.comp.list[active.comp_id].meta[id];
meta = comp.meta[id];
}
} }
return { cur, varname, type, id, meta }; return {
id,
var_name,
type,
meta,
};
}; };