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

wip checkpoint

This commit is contained in:
Rizky 2023-12-20 14:13:37 +07:00
parent 59ab04b6be
commit b4264b727e
16 changed files with 346 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/srv/ws/sync/editor/parser/parse-js.ts
View File

@ -5,8 +5,11 @@ export type ParsedScope = Exclude<ReturnType<typeof parseJs>, undefined>;
export const parseJs = (code?: string) => {
if (!code) return undefined;
const local = { name: "", value: "", index: 0 };
const passprop: Record<string, { value: string; index: number }> = {};
const local = { name: "", value: "", start: 0, end: 0 };
const passprop: Record<
string,
{ value: string; start: number; end: number }
> = {};
const result = {} as {
local?: typeof local | undefined;
passprop?: typeof passprop | undefined;
@ -48,18 +51,16 @@ export const parseJs = (code?: string) => {
attr.value.expression.properties.length - 1
].loc?.end as any;
if (
typeof start === "number" &&
typeof end === "number" &&
typeof loc.start.index === "number"
) {
if (typeof start === "number" && typeof end === "number") {
local.value = code.substring(start, end);
local.index = loc.start.index;
local.start = start;
local.end = end;
}
if (typeof start === "object" && typeof end === "object") {
local.value = `{${code.substring(start.index, end.index)}}`;
local.index = loc.start.index;
local.start = loc.start.index;
local.end = loc.end.index;
}
}
}
@ -72,7 +73,8 @@ export const parseJs = (code?: string) => {
) {
passprop[attr.name.name] = {
value: "0",
index: 0,
start: 0,
end: 0,
};
// if (attr.value) {
// if (

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

@ -4,15 +4,14 @@ import trim from "lodash.trim";
import { FC, useEffect } from "react";
import { compress } from "wasm-gzip";
import { useGlobal, useLocal } from "web-utils";
import { ParsedScope } from "../../../../../../../srv/ws/sync/editor/parser/parse-js";
import { jscript } from "../../../../../utils/script/jscript";
import { jsMount } from "../../../../../utils/script/mount";
import { monacoTypings } from "../../../../../utils/script/typings";
import { getActiveMeta } from "../../../logic/active/get-meta";
import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
import { edMonacoDefaultVal } from "./default-val";
import { declareScope } from "./scope";
import { ParsedScope } from "../../../../../../../srv/ws/sync/editor/parser/parse-js";
import { ISimpleMeta } from "../../../../vi/utils/types";
import { declareScope } from "./scope/scope";
const scriptEdit = {
timeout: null as any,

1
app/web/src/nova/ed/panel/popup/script/pop-script.tsx
View File

@ -5,7 +5,6 @@ import { Modal } from "../../../../../utils/ui/modal";
import { EDGlobal, active } from "../../../logic/ed-global";
import { propPopover } from "../../side/prop-master/prop-form";
import { EdScriptWorkbench } from "./workbench";
import { treeRebuild } from "../../../logic/tree/build";
export const EdPopScript = () => {
const p = useGlobal(EDGlobal, "EDITOR");

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

@ -1,122 +0,0 @@
import type { OnMount } from "@monaco-editor/react";
import {
EPage,
IMeta,
ISingleScope,
PG,
active,
} from "../../../logic/ed-global";
type Monaco = Parameters<OnMount>[1];
export type MonacoEditor = Parameters<OnMount>[0];
export const declareScope = async (
p: PG,
meta: IMeta,
editor: MonacoEditor,
monaco: Monaco
) => {
const metas = active.comp_id
? p.comp.list[active.comp_id]?.meta
: p.page.meta;
const parents: IMeta[] = [];
let cur = meta;
if (cur && cur.parent) {
while (cur && cur.parent && cur.parent.id) {
if (cur.mitem) {
parents.unshift(cur);
}
cur = metas[cur.parent.id];
}
}
for (const m of parents) {
if (active.comp_id && m.parent?.id === "root" && active.instance) {
const meta = p.page.meta[active.instance.item_id];
if (meta) {
if (!m.scope.def) m.scope.def = {};
m.scope.def.props = meta.scope?.def?.props;
}
}
const def = m.scope.def;
if (def) {
if (def.local) {
addScope({
monaco,
loc: {
item_id: m.item.id,
comp_id: m.parent?.comp_id,
type: "item",
},
source: `\
export const {};
const _local = ${def.local.value};
declare global {
const ${def.local.name}: typeof _local & { render: () =>void };
}`,
});
} else if (def.passprop) {
Object.keys(def.passprop).map((e) => {
if (e !== "idx" && e !== "key") {
addScope({
monaco,
loc: {
item_id: m.item.id,
comp_id: m.parent?.comp_id,
type: "item",
},
source: `\
export const {};
declare global {
const ${e} = null as any;
}`,
});
}
});
} else if (def.props) {
Object.keys(def.props).map((e) => {
addScope({
monaco,
loc: {
item_id: m.item.id,
type: "prop",
comp_id: m.parent?.comp_id,
prop_name: e,
},
source: `\
export const {};
declare global {
const ${e} = null as any;
}`,
});
});
}
}
}
};
const addScope = (arg: {
monaco: Monaco;
loc: {
item_id: string;
type: "prop" | "item";
comp_id?: string;
prop_name?: string;
};
source: string;
}) => {
const { monaco, source } = arg;
const filename = `ts:scope~${JSON.stringify(arg.loc)}.d.ts`;
const model = monaco.editor.getModels().find((e) => {
return e.uri.toString() === filename;
});
if (model) {
model.setValue(source);
} else {
monaco.editor.createModel(source, "typescript", monaco.Uri.parse(filename));
}
};

33
app/web/src/nova/ed/panel/popup/script/scope/add-scope.tsx Normal file
View File

@ -0,0 +1,33 @@
import { PG } from "../../../../logic/ed-global";
import { CodeLoc, Monaco } from "./type";
export const addScope = (
p: PG,
type: "local" | "props" | "passprop",
arg: {
monaco: Monaco;
loc: CodeLoc;
source: string;
}
) => {
const { monaco, source } = arg;
const filename = `ts:scope~${JSON.stringify(arg.loc)}.d.ts`;
const model = monaco.editor.getModels().find((e) => {
return e.uri.toString() === filename;
});
if (model) {
model.setValue(source);
} else {
const model = monaco.editor.createModel(
source,
"typescript",
monaco.Uri.parse(filename)
);
model.onDidChangeContent((e) => {
const text = model.getValue();
// modifyJS(p, type, arg.loc, text);
});
}
};

3
app/web/src/nova/ed/panel/popup/script/scope/gen-import.tsx Normal file
View File

@ -0,0 +1,3 @@
export const genImport = () => {
return ``;
};

133
app/web/src/nova/ed/panel/popup/script/scope/modify.tsx Normal file
View File

@ -0,0 +1,133 @@
import { Doc } from "yjs";
import { ISimpleMeta } from "../../../../../vi/utils/types";
import {
IMeta,
PG,
active
} from "../../../../logic/ed-global";
import { CodeLoc } from "./type";
const modif = {
timeout: null as any,
pending: [] as {
type: "local" | "props" | "passprop";
loc: CodeLoc;
src: string;
}[],
};
const modifyJS = (
p: PG,
type: "local" | "props" | "passprop",
loc: CodeLoc,
src: string
) => {
modif.pending.push({ loc, type, src });
clearTimeout(modif.timeout);
modif.timeout = setTimeout(() => {
const map = new Map<Doc, { meta: IMeta; loc: CodeLoc; src: string }[]>();
for (const item of modif.pending) {
const meta = getMetaByLoc(p, loc);
if (meta && meta.mitem && meta.mitem.doc) {
let mapset = map.get(meta.mitem.doc);
if (!mapset) {
map.set(meta.mitem.doc, []);
mapset = map.get(meta.mitem.doc);
}
if (mapset) {
mapset.push({ ...item, meta });
}
}
}
map.forEach((items, doc) => {
doc.transact(() => {
for (const item of items) {
const { meta, src, loc } = item;
if (loc.type === "item") {
const js = meta.item.adv?.js;
if (js) {
const text = extractText(type, src);
const def = meta.scope?.def?.[type];
const smeta = getSMetaByLoc(p, loc);
if (text) {
if (
type === "local" &&
def &&
typeof def.start === "number" &&
typeof def.end === "number"
) {
const final = replaceRange(js, def.start, def.end, text);
def.end = def.start + text.length;
if (smeta && smeta.scope?.local) {
smeta.scope.local.end = def.end;
}
}
}
}
}
}
});
});
modif.pending.length = 0;
}, 500);
};
const getSMetaByLoc = (p: PG, loc: CodeLoc) => {
let meta = undefined as ISimpleMeta | undefined;
if (!active.comp_id) {
meta = p.page.smeta[loc.item_id];
} else {
const comp = p.comp.list[active.comp_id].comp.meta;
if (comp[loc.item_id]) {
meta = comp[loc.item_id];
}
}
if (loc.type === "item" && meta) {
return meta;
}
};
const getMetaByLoc = (p: PG, loc: CodeLoc) => {
let meta = undefined as IMeta | undefined;
if (!active.comp_id) {
meta = p.page.meta[loc.item_id];
} else {
const comp = p.comp.list[active.comp_id].meta;
if (comp[loc.item_id]) {
meta = comp[loc.item_id];
}
}
if (loc.type === "item" && meta) {
return meta;
}
};
const extractText = (type: "local" | "props" | "passprop", src: string) => {
if (type === "local") {
const first = "type _local = ";
return src
.substring(
src.indexOf(first) + first.length,
src.indexOf("declare global {")
)
.trim();
}
};
function replaceRange(
s: string,
start: number,
end: number,
substitute: string
) {
return s.substring(0, start) + substitute + s.substring(end);
}

3
app/web/src/nova/ed/panel/popup/script/scope/scope-children.tsx Normal file
View File

@ -0,0 +1,3 @@
import { IMeta, PG } from "../../../../logic/ed-global";
export const defineScopeChildren = (p: PG, meta: IMeta) => {};

3
app/web/src/nova/ed/panel/popup/script/scope/scope-current.tsx Normal file
View File

@ -0,0 +1,3 @@
import { IMeta, PG } from "../../../../logic/ed-global";
export const defineScopeCurrent = (p: PG, meta: IMeta) => {};

62
app/web/src/nova/ed/panel/popup/script/scope/scope-parent.tsx Normal file
View File

@ -0,0 +1,62 @@
import { IMeta, PG, active } from "../../../../logic/ed-global";
import { addScope } from "./add-scope";
import { Monaco } from "./type";
export const defineScopeParent = (p: PG, meta: IMeta, monaco: Monaco) => {
const metas = active.comp_id
? p.comp.list[active.comp_id]?.meta
: p.page.meta;
const parents: IMeta[] = [];
let cur = meta;
if (cur && cur.parent) {
while (cur && cur.parent && cur.parent.id) {
if (cur.mitem) {
parents.unshift(cur);
}
cur = metas[cur.parent.id];
}
}
for (const m of parents) {
if (active.comp_id && m.parent?.id === "root" && active.instance) {
const meta = p.page.meta[active.instance.item_id];
if (meta) {
if (!m.scope.def) m.scope.def = {};
m.scope.def.props = meta.scope?.def?.props;
}
}
const def = m.scope.def;
if (def) {
if (def.local) {
addScope(p, "local", {
monaco,
loc: {
item_id: m.item.id,
comp_id: m.parent?.comp_id,
type: "item",
},
source: `\
type _local = ${def.local.value};
export const ${def.local.name}: _local & { render: () =>void };
`,
});
} else if (def.passprop) {
Object.entries(def.passprop).map(([e, v]) => {
if (e !== "idx" && e !== "key") {
addScope(p, "passprop", {
monaco,
loc: {
item_id: m.item.id,
comp_id: m.parent?.comp_id,
type: "item",
},
source: `\
export const ${e} = ${v.value};`,
});
}
});
}
}
}
};

15
app/web/src/nova/ed/panel/popup/script/scope/scope.tsx Normal file
View File

@ -0,0 +1,15 @@
import type { OnMount } from "@monaco-editor/react";
import { IMeta, PG, active } from "../../../../logic/ed-global";
import { addScope } from "./add-scope";
import { defineScopeParent } from "./scope-parent";
type Monaco = Parameters<OnMount>[1];
export type MonacoEditor = Parameters<OnMount>[0];
export const declareScope = async (
p: PG,
meta: IMeta,
editor: MonacoEditor,
monaco: Monaco
) => {
defineScopeParent(p, meta, monaco);
};

11
app/web/src/nova/ed/panel/popup/script/scope/type.ts Normal file
View File

@ -0,0 +1,11 @@
import type { OnMount } from "@monaco-editor/react";
export type CodeLoc = {
item_id: string;
type: "prop" | "item";
comp_id?: string;
prop_name?: string;
};
export type Monaco = Parameters<OnMount>[1];
export type MonacoEditor = Parameters<OnMount>[0];

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

@ -2,6 +2,7 @@ import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { useGlobal } from "web-utils";
import { Tooltip } from "../../../../../../utils/ui/tooltip";
import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
import { getMetaById } from "../../../../logic/active/get-meta";
export const EdTreeAction = ({
node,
@ -25,6 +26,35 @@ export const EdTreeAction = ({
return (
<div className="flex items-center pr-1 space-x-1">
{item.hidden === "all" && (
<Tooltip content="Hidden: All">
<div
className="mx-1 cursor-pointer hover:opacity-60"
onClick={(e) => {
e.stopPropagation();
const meta = getMetaById(p, item.id);
if (meta) meta.mitem?.set("hidden", false);
}}
>
<HideAll />
</div>
</Tooltip>
)}
{item.hidden === "only-editor" && (
<Tooltip content="Hidden: Only Editor">
<div
className="mx-1 cursor-pointer hover:opacity-60"
onClick={(e) => {
e.stopPropagation();
const meta = getMetaById(p, item.id);
if (meta) meta.mitem?.set("hidden", "all");
}}
>
<HideEditor />
</div>
</Tooltip>
)}
{(!comp.enabled || (comp.enabled && comp.id === active.comp_id)) && (
<Tooltip
content={`Edit ${mode}`}
@ -123,3 +153,37 @@ export const EdTreeAction = ({
</div>
);
};
const HideEditor = () => (
<svg
width="13"
height="13"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 10.9999 7.50001 10.9999C6.99965 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.3989 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 9.99991 7.50001 9.99991C10.3078 9.99991 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
></path>
</svg>
);
const HideAll = () => (
<svg
width="13"
height="13"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
></path>
</svg>
);

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

@ -11,7 +11,7 @@ export const edActionHide = (
if (mitem) {
const hidden = mitem.get("hidden");
if (mode === "toggle") {
if (!hidden) mitem.set("hidden", "all");
if (!hidden) mitem.set("hidden", "only-editor");
else mitem.delete("hidden");
} else {
if (!hidden) mitem.set("hidden", "all");

2
app/web/src/nova/vi/render/render.tsx
View File

@ -12,6 +12,8 @@ export const ViRender: FC<{
}> = ({ meta, children }) => {
if (!meta) return null;
if (meta.item.hidden) return null;
if (meta.item.adv?.js || meta.item.component?.id) {
return <ViScript meta={meta}>{children}</ViScript>;
}

2
app/web/src/utils/script/jscript.ts
View File

@ -2,6 +2,7 @@ import type { Editor as MonacoEditor } from "@monaco-editor/react";
import type Prettier from "prettier/standalone";
import type estree from "prettier/plugins/estree";
import type ts from "prettier/plugins/typescript";
import { PG } from "../../nova/ed/logic/ed-global";
export type FBuild = (
entryFileName: string,
src: string,
@ -15,6 +16,7 @@ export const initJS = async () => {
};
export const jscript = {
reload: (p: PG) => {},
editor: null as typeof MonacoEditor | null,
build: null as null | FBuild,
pending: null as null | Promise<void>,