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

wip fix jsx prop scope

This commit is contained in:
Rizky 2024-01-16 23:52:17 +07:00
parent fde0be57eb
commit ec85c9c981
8 changed files with 200 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/web/src/nova/ed/panel/main/main.tsx
View File

@ -11,9 +11,17 @@ export const EdMain = () => {
first_load: false, first_load: false,
}); });
const meta = active.comp_id let meta: undefined | IMeta = undefined;
? p.comp.list[active.comp_id].meta[active.item_id]
: p.page.meta[active.item_id]; if (active.comp_id) {
if (p.comp.list[active.comp_id]) {
meta = p.comp.list[active.comp_id].meta[active.item_id];
} else {
active.comp_id = "";
}
} else {
meta = p.page.meta[active.item_id];
}
if (active.should_render_main) { if (active.should_render_main) {
local.cache = ( local.cache = (

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

@ -142,10 +142,11 @@ export const EdScriptMonaco: FC<{}> = () => {
if (imports) { if (imports) {
local.imports = imports; local.imports = imports;
end_hide = imports.split("\n").length + 1; end_hide = imports.split("\n").length + 1;
const range = new monaco.Range(1, 0, end_hide, 0); // const range = new monaco.Range(1, 0, end_hide, 0);
(editor as any).setHiddenAreas([range]); // (editor as any).setHiddenAreas([range]);
} }
} }
editor.trigger("fold", "editor.foldAllMarkerRegions", {});
await jsMount(editor, monaco, p); await jsMount(editor, monaco, p);
if (type === "prop-instance") { if (type === "prop-instance") {

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

@ -13,18 +13,18 @@ export const addScope = (
}); });
if (model) { if (model) {
model.setValue(source); if (model.getValue() !== source) {
model.setValue(source);
}
} else { } else {
const uri = monaco.Uri.parse(filename); const uri = monaco.Uri.parse(filename);
const model = monaco.editor.createModel(source, "typescript", uri); const model = monaco.editor.createModel(source, "typescript", uri);
const arg = extractLoc(uri.path.split("_"), p); const arg = extractLoc(uri.path.split("_"), p);
model.onDidChangeContent((e) => { model.onDidChangeContent((e) => {
if (arg.id !== active.item_id) { // if (arg.id !== active.item_id && arg.type === "src") {
const text = model.getValue(); // console.log("changed", arg.id, e.changes);
console.log(arg); // }
console.warn(text);
}
}); });
} }
}; };

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

@ -37,6 +37,19 @@ export const extractExport = (p: PG, m: IMeta) => {
} }
} }
if (m.script?.passprop) {
for (const [k, v] of Object.entries(m.script.passprop)) {
if (k === "key") continue;
result[k] = {
type: "passprop",
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] = {

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

@ -34,6 +34,7 @@ export const declareScope = (p: PG, meta: IMeta, monaco: Monaco) => {
paths, paths,
meta, meta,
p, p,
false,
monaco monaco
); );
@ -94,17 +95,28 @@ const extract_import_map = (
paths: IMeta[][], paths: IMeta[][],
meta: IMeta, meta: IMeta,
p: PG, p: PG,
include_cur?: boolean,
monaco?: Monaco monaco?: Monaco
) => { ) => {
const added = new Set<string>(); const added = new Set<string>();
let parent_id = ""; let parent_id = "";
const import_map = {} as Record<string, string>; const import_map = {} as Record<string, string>;
const cur_id = meta.item.id; let cur_id = meta.item.id;
if (cur_id) { if (cur_id) {
for (const path of paths) { for (const path of paths) {
const imports = new Set<string>(); const import_exists = {} as Record<
string,
{ type: "prop" | "local" | "passprop"; str: string }
>;
if (path.map((e) => e.item.id).includes(cur_id)) { if (
path
.map((e) => {
return e.item.id;
})
.includes(cur_id)
) {
let i = 0; let i = 0;
let prev_m = null as any; let prev_m = null as any;
@ -113,7 +125,7 @@ const extract_import_map = (
if (prev_m) parent_id = prev_m.item.id; if (prev_m) parent_id = prev_m.item.id;
} }
prev_m = m; prev_m = m;
if (!added.has(m.item.id)) { if (include_cur || (!include_cur && !added.has(m.item.id))) {
added.add(m.item.id); added.add(m.item.id);
const ex = extractExport(p, m); const ex = extractExport(p, m);
@ -127,13 +139,14 @@ export const ${k}: typeof _local & { render: ()=>void } = _local;
} else { } else {
src = `export const ${k} = ${v.val}`; src = `export const ${k} = ${v.val}`;
} }
if (src && monaco) { if (src && monaco) {
addScope( addScope(
p, p,
monaco, monaco,
`file:///${cur}_${v.id}_${v.type}_${k}.tsx`, `file:///${cur}_${v.id}_${v.type}_${k}.tsx`,
`\ `\
${[...imports].join("\n")} ${[...Object.values(import_exists).map((e) => e.str)].join("\n")}
/** IMPORT MODULE **/ /** IMPORT MODULE **/
${src}` ${src}`
); );
@ -142,18 +155,22 @@ ${src}`
for (const [k, v] of Object.entries(ex)) { for (const [k, v] of Object.entries(ex)) {
if ( if (
!include_cur &&
m.item.id === cur_id && m.item.id === cur_id &&
["local", "passprop"].includes(v.type) ["local", "passprop"].includes(v.type)
) { ) {
continue; continue;
} }
imports.add( import_exists[k] = {
`import { ${k} } from './${cur}_${v.id}_${v.type}_${k}';` type: v.type,
); str: `import { ${k} } from './${cur}_${v.id}_${v.type}_${k}';`,
};
} }
import_map[m.item.id] = [...imports].join("\n"); import_map[m.item.id] = [
...Object.values(import_exists).map((e) => e.str),
].join("\n");
} }
i++; i++;
} }
@ -185,100 +202,105 @@ const map_childs = (
const meta = metas[m.id]; const meta = metas[m.id];
if (meta) { if (meta) {
paths.push([...(curpath || []), meta]); paths.push([...(curpath || []), meta]);
if ( // if (
meta.item.type === "item" && // meta.item.type === "item" &&
meta.item.component?.id && // meta.item.component?.id &&
!skip_comp_id.includes(meta.item.component?.id) // !skip_comp_id.includes(meta.item.component?.id)
) { // ) {
const comp_id = meta.item.component.id; // const comp_id = meta.item.component.id;
let jprop = comp_map[comp_id]; // let jprop = comp_map[comp_id];
if (!jprop) { // // if (!jprop) {
const comp_metas = p.comp.list[comp_id].meta; // // const comp_metas = p.comp.list[comp_id].meta;
comp_map[meta.item.component.id] = { // // comp_map[meta.item.component.id] = {
paths: [], // // paths: [],
exports: {}, // // exports: {},
}; // // };
const id = p.comp.list[comp_id].doc // // const id = p.comp.list[comp_id].doc
.getMap("map") // // .getMap("map")
.get("root") // // .get("root")
?.get("id"); // // ?.get("id");
if (id) { // // if (id) {
map_childs( // // map_childs(
monaco, // // monaco,
p, // // p,
comp_metas, // // comp_metas,
[comp_metas[id].item], // // [comp_metas[id].item],
comp_map[meta.item.component.id].paths, // // comp_map[meta.item.component.id].paths,
[...skip_comp_id, comp_id] // // [...skip_comp_id, comp_id]
); // // );
jprop = comp_map[meta.item.component.id]; // // jprop = comp_map[meta.item.component.id];
for (const path of jprop.paths) { // // for (const path of jprop.paths) {
for (const m of path) { // // for (const m of path) {
if (!jprop.exports[m.item.id]) { // // if (!jprop.exports[m.item.id]) {
jprop.exports[m.item.id] = extractExport(p, m); // // jprop.exports[m.item.id] = extractExport(p, m);
} // // }
} // // }
} // // }
} // // }
} // // }
if (jprop) { // if (jprop) {
for (const [name, prop] of Object.entries( // for (const [name, prop] of Object.entries(
meta.item.component.props // meta.item.component.props
)) { // )) {
if ( // if (
prop.meta?.type === "content-element" && // prop.meta?.type === "content-element" &&
prop.content && // prop.content &&
prop.jsxCalledBy // prop.jsxCalledBy
) { // ) {
const mjsx = p.comp.list[comp_id].meta[prop.jsxCalledBy[0]]; // const m = metas[prop.jsxCalledBy[0]];
const { import_map, parent_id } = extract_import_map( // if (m && m.instances) {
meta.item.component.id, // const instances = m.instances[prop.jsxCalledBy[0]];
jprop.paths, // if (instances) {
mjsx, // const instance_id = instances[prop.jsxCalledBy[1]];
p, // if (instance_id) {
monaco // const mjsx = metas[instance_id];
);
gen_content( // const { import_map, parent_id } = extract_import_map(
meta.item.component.id, // "page",
p, // jprop.paths,
jprop.paths, // mjsx,
import_map, // p,
monaco // true,
); // monaco
// );
jsxprop_import_map[prop.content.id] = import_map[parent_id]; // gen_content("page", p, jprop.paths, import_map, monaco);
const prop_meta = metas[prop.content.id];
map_childs( // jsxprop_import_map[prop.content.id] = import_map[parent_id];
monaco, // const prop_meta = metas[prop.content.id];
p, // map_childs(
metas, // monaco,
prop.content.childs, // p,
paths, // metas,
[...skip_comp_id, comp_id], // prop.content.childs,
jsxprop_import_map, // paths,
[...(curpath || []), prop_meta] // [...skip_comp_id, comp_id],
); // jsxprop_import_map,
} // [...(curpath || []), prop_meta]
} // );
} // }
} else { // }
if (Array.isArray(meta.item.childs)) { // }
map_childs( // }
monaco, // }
p, // }
metas, // } else {
meta.item.childs, if (Array.isArray(meta.item.childs)) {
paths, map_childs(
[...skip_comp_id], monaco,
jsxprop_import_map, p,
[...(curpath || []), meta] metas,
); meta.item.childs,
} paths,
[...skip_comp_id],
jsxprop_import_map,
[...(curpath || []), meta]
);
} }
// }
} }
} }
}; };

3
app/web/src/nova/vi/meta/comp.tsx
View File

@ -34,7 +34,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
if (!instances[item.id]) { if (!instances[item.id]) {
instances[item.id] = {}; instances[item.id] = {};
instance = instances[item.id]; instance = instances[item.id];
} }
instantiate({ instantiate({
item, item,
@ -49,6 +49,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
comp_id: arg.parent?.comp?.component?.id, comp_id: arg.parent?.comp?.component?.id,
instance_id: arg.parent?.instance_id, instance_id: arg.parent?.instance_id,
}, },
instances,
}; };
if (p.on?.visit) { if (p.on?.visit) {

32
app/web/src/nova/vi/render/script/eval-prop.tsx
View File

@ -35,11 +35,21 @@ export const viEvalProps = (
const id = prop.content?.id; const id = prop.content?.id;
if (id) { if (id) {
const m = vi.meta[id]; const m = vi.meta[id];
const instances = meta.instances;
if (!arg.meta.item.originalId || !instances) {
return null;
}
const instance = instances[meta.item.id];
if (!instance) return null;
const original_id = arg.meta.item.originalId;
if ( if (
m.mitem && m.mitem &&
prop.jsxCalledBy?.includes( ((prop.jsxCalledBy &&
arg.meta.item.originalId || arg.meta.item.id (!prop.jsxCalledBy.includes(original_id) ||
) prop.jsxCalledBy.length !== 2)) ||
!prop.jsxCalledBy)
) { ) {
const mprop = meta.mitem const mprop = meta.mitem
?.get("component") ?.get("component")
@ -48,19 +58,15 @@ export const viEvalProps = (
if (mprop) { if (mprop) {
let mjby = mprop.get("jsxCalledBy"); let mjby = mprop.get("jsxCalledBy");
if (!mjby || typeof mjby !== "object") { if (!mjby || typeof mjby !== "object") {
mprop.set("jsxCalledBy", [ mprop.set("jsxCalledBy", [meta.item.id, original_id]);
arg.meta.item.originalId || arg.meta.item.id,
]);
} else { } else {
if ( if (
!mjby.includes( !mjby.includes(original_id) ||
arg.meta.item.originalId || arg.meta.item.id mjby.length !== 2 ||
) mjby[0] !== meta.item.id ||
mjby[1] !== original_id
) { ) {
mjby.push( mprop.set("jsxCalledBy", [meta.item.id, original_id]);
arg.meta.item.originalId || arg.meta.item.id
);
mprop.set("jsxCalledBy", mjby);
} }
} }
} }

38
pkgs/core/server/serve-static.ts
View File

@ -7,14 +7,22 @@ import { watch } from "fs";
import mime from "mime"; import mime from "mime";
import { g } from "utils/global"; import { g } from "utils/global";
const webPath = "app/static"; const web = {
get path() {
if (g.mode === "dev") return "static";
return "static-br";
},
};
const cache = { const cache = {
static: {} as Record<string, { type: string; content: any }>, static: {} as Record<
string,
{ type: string; content: any; compression: "" | "br" }
>,
}; };
export const serveStatic = { export const serveStatic = {
init: async () => { init: async () => {
const list = await inspectTreeAsync(dir.path(`${webPath}`)); const list = await inspectTreeAsync(dir.path(`app/${web.path}`));
const walk = async ( const walk = async (
list: InspectTreeResult, list: InspectTreeResult,
parent?: InspectTreeResult[] parent?: InspectTreeResult[]
@ -27,12 +35,13 @@ export const serveStatic = {
const path = join(...(parent || []).map((e) => e.name), list.name); const path = join(...(parent || []).map((e) => e.name), list.name);
const file = Bun.file(dir.path(`app/${path}`)); const file = Bun.file(dir.path(`app/${path}`));
if (await file.exists()) { if (await file.exists()) {
cache.static[path.substring("static".length)] = { cache.static[path.substring(web.path.length)] = {
type: mime.getType(path) || "application/octet-stream", type: mime.getType(path) || "application/octet-stream",
compression: g.mode === "prod" ? "br" : "",
content: await file.arrayBuffer(), content: await file.arrayBuffer(),
}; };
} }
} }
}; };
if (list) { if (list) {
await walk(list); await walk(list);
@ -46,6 +55,7 @@ export const serveStatic = {
if (await file.exists()) { if (await file.exists()) {
cache.static[`/${filename}`] = { cache.static[`/${filename}`] = {
type: mime.getType(path) || "application/octet-stream", type: mime.getType(path) || "application/octet-stream",
compression: g.mode === "prod" ? "br" : "",
content: await file.arrayBuffer(), content: await file.arrayBuffer(),
}; };
} }
@ -57,17 +67,23 @@ export const serveStatic = {
return !!cache.static[url.pathname]; return !!cache.static[url.pathname];
}, },
serve: (url: URL) => { serve: (url: URL) => {
const file = cache.static[url.pathname]; let file = cache.static[url.pathname];
if (file) { if (file) {
return new Response(file.content, { return new Response(file.content, {
headers: { "content-type": file.type }, headers: {
...{ "content-type": file.type },
...(file.compression ? { "content-encoding": file.compression } : {}),
},
}); });
} }
const index = cache.static["/index.html"]; file = cache.static["/index.html"];
if (index) { if (file) {
return new Response(index.content, { return new Response(file.content, {
headers: { "content-type": index.type }, headers: {
...{ "content-type": file.type },
...(file.compression ? { "content-encoding": file.compression } : {}),
},
}); });
} }
}, },