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

wip fix script

This commit is contained in:
Rizky 2023-11-25 06:43:40 +07:00
parent e23c11d198
commit 1b347cdd76
7 changed files with 165 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/web/src/nova/ed/logic/ed-global.ts
View File

@ -57,39 +57,55 @@ const EmptyComp = {
const target = {
active_id: false as any,
comp_id: false as any,
comp_item_id: false as any,
instance_comp_id: false as any,
instance_item_id: false as any,
};
export const active = {
hover_id: "",
prop_name: "",
get item_id() {
if (target.active_id === false) {
target.active_id = localStorage.getItem("prasi-active-id") || "";
}
return target.active_id;
return target.active_id || "";
},
set item_id(val: string) {
localStorage.setItem("prasi-active-id", val);
target.active_id = val;
localStorage.setItem("prasi-active-id", val || "");
target.active_id = val || "";
},
get comp_id() {
if (target.comp_id === false) {
target.comp_id = localStorage.getItem("prasi-comp-id") || "";
}
return target.comp_id;
return target.comp_id || "";
},
set comp_id(val: string) {
localStorage.setItem("prasi-comp-id", val);
target.comp_id = val;
localStorage.setItem("prasi-comp-id", val || "");
target.comp_id = val || "";
},
get comp_item_id() {
if (target.comp_item_id === false) {
target.comp_item_id = localStorage.getItem("prasi-comp-item-id") || "";
}
return target.comp_item_id;
},
set comp_item_id(val: string) {
localStorage.setItem("prasi-comp-item-id", val);
target.comp_item_id = val;
instance: {
get comp_id() {
if (target.instance_comp_id === false) {
target.instance_comp_id =
localStorage.getItem("prasi-instance-comp-id") || "";
}
return target.instance_comp_id || "";
},
set comp_id(val: string) {
localStorage.setItem("prasi-instance-comp-id", val || "");
target.instance_comp_id = val || "";
},
get item_id() {
if (target.instance_item_id === false) {
target.instance_item_id =
localStorage.getItem("prasi-instance-item-id") || "";
}
return target.instance_item_id || "";
},
set item_id(val: string) {
localStorage.setItem("prasi-instance-item-id", val || "");
target.instance_item_id = val || "";
},
},
};

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

@ -66,12 +66,19 @@ export const ScriptMonaco = () => {
const item = meta.item;
const adv = item.adv || {};
const val: string = (
let val: string = (
typeof adv[p.ui.popup.script.mode] === "string"
? adv[p.ui.popup.script.mode]
: ""
) as any;
if (active.prop_name && item.type === "item" && item.component) {
const prop = item.component.props[active.prop_name];
if (prop) {
val = prop.value;
}
}
const doEdit = async (newval: string, all?: boolean) => {
if (local.editor && jscript.prettier.standalone) {
const text = trim(
@ -155,40 +162,8 @@ export const ScriptMonaco = () => {
)
);
editor.setModel(model);
monaco.editor.registerEditorOpener({
openCodeEditor(source, r, selectionOrPosition) {
const cpath = r.path.substring(`scope~`.length).split("__");
const comp_id = cpath[0];
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") {
return false;
}
if (comp_id) {
let meta = p.page.meta[id];
if (active.comp_id) {
meta = p.comp.list[active.comp_id].meta[id];
}
if (meta && meta.item.originalId) {
active.item_id = meta.item.originalId;
}
active.comp_id = comp_id;
} else {
active.item_id = id;
}
p.render();
}
return false;
},
});
await jsMount(editor, monaco);
await jsMount(editor, monaco, p);
await monacoTypings(
{
site_dts: p.site_dts,

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

@ -45,10 +45,13 @@ export const declareScope = async (
});
spreadScope(p, s, (arg) => {
let { prev } = arg;
if (arg.type !== "local") {
addScope(
monaco,
`${arg.comp_id || ""}__${arg.type}~${arg.name}~${arg.id}`,
`${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
arg.type
}~${arg.name}~${arg.id}`,
`\
export const {};
declare global {
@ -58,7 +61,9 @@ declare global {
} else {
addScope(
monaco,
`${arg.comp_id || ""}__${arg.type}~${arg.id}`,
`${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
arg.type
}~${arg.id}`,
`\
export const {};
const __val = ${arg.value};
@ -81,6 +86,7 @@ type IEachArgScope = {
index?: number;
is_prop?: boolean;
comp_id?: string;
prev?: { comp_id: string; item_id: string };
};
const spreadScope = (
p: PG,
@ -115,8 +121,9 @@ const spreadScope = (
const mergeScopes = (
parents: string[],
each: (arg: IEachArgScope) => void,
comp_id?: string
arg: { comp_id?: string; prev?: { comp_id: string; item_id: string } }
) => {
let { comp_id, prev } = arg;
for (const parent_id of parents) {
let item = null as null | ISingleScope;
if (layout && layout_scope[layout_id]) {
@ -138,7 +145,10 @@ const spreadScope = (
if (item) {
if (item.c) {
comp_id = item.c;
mergeScopes(item.p, each, item.c);
mergeScopes(item.p, each, {
comp_id: item.c,
prev: { item_id: parent_id, comp_id: arg.comp_id || "" },
});
}
const scope = item.s;
@ -152,6 +162,7 @@ const spreadScope = (
name: scope.local.name,
value: scope.local?.value,
index: scope.local?.index,
prev,
});
if (scope.passprop) {
@ -164,6 +175,7 @@ const spreadScope = (
name: k,
value: v.value,
index: v.index,
prev,
});
}
}
@ -178,6 +190,7 @@ const spreadScope = (
name: k,
value: v.value,
is_prop: true,
prev,
});
}
}
@ -186,7 +199,7 @@ const spreadScope = (
}
};
mergeScopes(parents, each);
mergeScopes(parents, each, {});
};
const addScope = (monaco: Monaco, id: string, source: string) => {

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

@ -2,7 +2,7 @@ import { useGlobal } from "web-utils";
import { jscript } from "../../../../../utils/script/jscript";
import { Loading } from "../../../../../utils/ui/loading";
import { Modal } from "../../../../../utils/ui/modal";
import { EDGlobal } from "../../../logic/ed-global";
import { EDGlobal, active } from "../../../logic/ed-global";
import { ScriptWorkbench } from "./workbench";
export const EdPopScript = () => {
@ -14,6 +14,7 @@ export const EdPopScript = () => {
onOpenChange={(open) => {
if (!open) {
p.ui.popup.script.open = false;
active.prop_name = "";
p.render();
}
}}

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

@ -1,6 +1,6 @@
import { useGlobal } from "web-utils";
import { ScriptMonaco } from "./monaco";
import { EDGlobal } from "../../../logic/ed-global";
import { EDGlobal, active } from "../../../logic/ed-global";
export const ScriptWorkbench = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -8,36 +8,42 @@ export const ScriptWorkbench = () => {
<div className="flex flex-1 items-stretch">
<div className="flex flex-1 flex-col ">
<div className="flex p-2 border-b space-x-2">
{[
{ type: "js", color: "#e9522c" },
{ type: "css", color: "#188228" },
{ type: "html", color: "#2c3e83" },
].map((e) => {
return (
<div
key={e.type}
className={cx(
css`
color: ${e.color};
border: 1px solid ${e.color};
`,
"uppercase text-white text-[12px] cursor-pointer transition-all hover:opacity-100 w-[40px] text-center",
p.ui.popup.script.mode === e.type
? css`
background: ${e.color};
color: white;
`
: "opacity-30"
)}
onClick={() => {
p.ui.popup.script.mode = e.type as any;
p.render();
}}
>
{e.type}
</div>
);
})}
{active.prop_name ? (
<div className="text-[12px]">{active.prop_name}</div>
) : (
<>
{[
{ type: "js", color: "#e9522c" },
{ type: "css", color: "#188228" },
{ type: "html", color: "#2c3e83" },
].map((e) => {
return (
<div
key={e.type}
className={cx(
css`
color: ${e.color};
border: 1px solid ${e.color};
`,
"uppercase text-white text-[12px] cursor-pointer transition-all hover:opacity-100 w-[40px] text-center",
p.ui.popup.script.mode === e.type
? css`
background: ${e.color};
color: white;
`
: "opacity-30"
)}
onClick={() => {
p.ui.popup.script.mode = e.type as any;
p.render();
}}
>
{e.type}
</div>
);
})}
</>
)}
</div>
<div className="relative flex flex-1">
<ScriptMonaco />

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

@ -75,13 +75,19 @@ export const EdTreeAction = ({
const comp_id = comp.id;
if (comp_id) {
active.comp_id = comp_id;
active.comp_item_id = item.id;
active.instance.item_id = item.id;
active.instance.comp_id = active.comp_id;
console.log(
active.instance.comp_id,
active.instance.item_id
);
active.comp_id = comp_id || "";
const root = p.comp.list[comp_id].tree.find(
(e) => e.parent === "root"
);
if (root && typeof root.id === "string") {
active.item_id = root.id;
active.item_id = root.id || "";
}
p.render();
@ -102,9 +108,10 @@ export const EdTreeAction = ({
e.preventDefault();
if (active.comp_id) {
active.comp_id = "";
active.item_id = active.comp_item_id;
active.comp_item_id = "";
active.comp_id = active.instance.comp_id || "";
active.item_id = active.instance.item_id || "";
active.instance.comp_id = "";
active.instance.item_id = "";
p.render();
}
}}

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

@ -5,6 +5,7 @@ import {
getWorker,
} from "monaco-jsx-syntax-highlight-v2";
import { jscript } from "./jscript";
import { PG, active } from "../../nova/ed/logic/ed-global";
export type MonacoEditor = Parameters<OnMount>[0];
type Monaco = Parameters<OnMount>[1];
@ -12,7 +13,7 @@ type CompilerOptions = Parameters<
Parameters<OnMount>[1]["languages"]["typescript"]["typescriptDefaults"]["setCompilerOptions"]
>[0];
export const jsMount = async (editor: MonacoEditor, monaco: Monaco) => {
export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p: PG) => {
const m = monaco as any;
if (!m.customJSMounted) {
m.customJSMounted = true;
@ -32,6 +33,58 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco) => {
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
};
monaco.editor.registerEditorOpener({
openCodeEditor(source, r, selectionOrPosition) {
p.ui.popup.script.mode === "js";
const cpath = r.path.substring(`scope~`.length).split("__");
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") {
active.prop_name = path[1];
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();
}
return false;
}
if (comp_id) {
let meta = p.page.meta[id];
if (active.comp_id) {
meta = p.comp.list[active.comp_id].meta[id];
}
active.instance.comp_id = prev_comp_id;
active.instance.item_id = prev_item_id;
if (meta && meta.item.originalId) {
active.item_id = meta.item.originalId;
}
active.comp_id = comp_id;
} else {
active.item_id = id;
}
p.render();
}
return false;
},
});
monaco.languages.registerDocumentFormattingEditProvider("typescript", {
async provideDocumentFormattingEdits(model, options, token) {
const prettier = jscript.prettier.standalone;