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

View File

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

View File

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

View File

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

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) {
for (const [k, v] of Object.entries(script.props)) {
result[k] = {

View File

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

View File

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

View File

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

View File

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