wip fix jsx prop

This commit is contained in:
Rizky 2023-12-26 18:36:04 +07:00
parent 6d31ffdd66
commit 32be6a806e
9 changed files with 132 additions and 39 deletions

View File

@ -13,6 +13,7 @@ import { loadComponent } from "../editor/load-component";
import { parseJs } from "../editor/parser/parse-js";
import { docs } from "../entity/docs";
import { SyncConnection } from "../type";
import { createId } from "@paralleldrive/cuid2";
export const comp_new: SAction["comp"]["new"] = async function (
this: SyncConnection,
@ -33,6 +34,8 @@ export const comp_new: SAction["comp"]["new"] = async function (
props: {},
} as FNComponent
);
mitem.set("id", createId());
mitem.set("originalId", item_id);
mitem.set("component", map);
mitem.set("childs", new Y.Array());
}

View File

@ -1,4 +1,5 @@
import { IItem, MItem } from "../../../../utils/types/item";
import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn";
import { genMeta } from "../../../vi/meta/meta";
import { IMeta, PG, active } from "../ed-global";
import { pushTreeNode } from "./build/push-tree";
@ -51,22 +52,56 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
}
} else {
const parent = meta[m.parent.id];
if (parent.mitem) {
parent.mitem.get("childs")?.forEach((child) => {
if (child.get("id") === m.item.id) {
m.mitem = child;
if (m.item.component?.props) {
for (const [prop_name, v] of Object.entries(
m.item.component.props
)) {
const mprop = m.mitem
?.get("component")
?.get("props")
?.get(prop_name);
if (v.content && mprop) {
const pmeta = meta[v.content.id];
if (pmeta) {
pmeta.mitem = mprop.get("content");
}
}
}
}
}
});
}
}
}
if (m.jsx_prop && m.parent?.instance_id) {
const parent = meta[m.parent?.instance_id];
if (parent) {
const prop = parent.item.component?.props[m.jsx_prop.name];
if (prop) {
prop.content = m.item;
}
}
}
}
},
},
},
{ item }
);
if (transact.list.length > 0) {
p.page.doc?.transact(() => {
for (const fn of transact.list) {
fn();
}
});
}
}
}
@ -101,3 +136,34 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
}
}
};
const transact = {
list: [] as (() => void)[],
propContentFromItem: (
meta: IMeta,
mitem: MItem,
name: string,
prop: FNCompDef
) => {
transact.list.push(() => {
const mprops = mitem?.get("component")?.get("props");
if (mprops) {
const map = new Y.Map();
syncronize(map, prop);
mprops.set(name, map as any);
console.log(mprops.get(name));
const mcontent = mprops.get(name)?.get("content");
console.log(mcontent);
}
});
},
jsxContentFromItem(meta: IMeta, content: IItem, mprop: FMCompDef) {
transact.list.push(() => {
const map = new Y.Map();
syncronize(map, content);
mprop.set("content", map as any);
meta.mitem = mprop.get("content");
});
},
};

View File

@ -38,13 +38,24 @@ export const pushTreeNode = (
text: meta.item.name,
data: meta,
});
} else if (meta.jsx_prop) {
tree.push({
id: meta.item.id,
parent: meta.parent?.instance_id || "root",
text: meta.item.name,
data: meta,
});
} else {
if (meta.jsx_prop) {
tree.push({
id: meta.item.id,
parent: meta.parent?.instance_id || "root",
text: meta.item.name,
data: meta,
});
} else {
if (meta.parent.id !== meta.parent.instance_id) {
tree.push({
id: meta.item.id,
parent: meta.parent?.id || "root",
text: meta.item.name,
data: meta,
});
}
}
}
}
};

View File

@ -43,6 +43,7 @@ export const EdAddText = () => {
let mitem = meta.mitem as MContent;
if (mitem) {
const item = meta.item as IContent;
if (
item.type === "text" ||
(item.type === "item" && item.component?.id)
@ -99,6 +100,7 @@ export const EdAddText = () => {
}
active.item_id = map.get("id") || "";
p.render();
focus();
}

View File

@ -50,12 +50,12 @@ export const EdPropPopoverForm: FC<{
)}
onClick={() => {
if (e.type === "content-element") {
mmeta.doc?.transact(() => {
mprop.doc?.transact(() => {
mmeta.set("type", e.type as any);
if (!mprop.get("content")) {
const json = {
id: createId(),
name: `jsx-content`,
name: name,
type: "item",
dim: { w: "full", h: "full" },
childs: [],

View File

@ -40,7 +40,10 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
const props = meta.scope.def?.props;
if (props) {
const prop = props[prop_name];
if (prop && prop.visible === true) {
if (
prop &&
(prop.visible === true || !prop.hasOwnProperty("visible"))
) {
hide = false;
}
}

View File

@ -22,6 +22,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
let instances: IMeta["instances"] = undefined;
const parent_instance = getParentInstance(p, arg, item.id);
instance = parent_instance || {};
instances = !parent_instance ? { [item.id]: instance } : undefined;
@ -68,30 +69,29 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
pcomp,
each(name, prop) {
const comp_id = item.component?.id;
if (
prop.meta?.type === "content-element" &&
prop.content &&
comp_id
) {
walkChild(prop.content, instance);
genMeta(
{ ...p, smeta },
{
item: prop.content,
is_root: false,
jsx_prop: {
is_root: true,
comp_id,
name,
},
parent: {
item: meta.item,
instance_id: item.id,
comp: pcomp.comp,
},
}
);
if (prop.meta?.type === "content-element" && comp_id) {
if (prop.content) {
walkChild(prop.content, instance);
genMeta(
{ ...p, smeta },
{
item: prop.content,
is_root: false,
jsx_prop: {
is_root: true,
comp_id,
name,
},
parent: {
item: meta.item,
instance_id: item.id,
comp: pcomp.comp,
},
}
);
}
}
},
});

View File

@ -22,6 +22,11 @@ export const instantiate = (arg: {
if (item.component.props[k]) {
newitem.component.props[k] = item.component.props[k];
}
const content = newitem.component.props[k].content;
if (content) {
walkChild(content, ids);
}
}
}
@ -32,6 +37,7 @@ export const instantiate = (arg: {
for (const [k, v] of Object.entries(newitem)) {
(item as any)[k] = v;
}
};
export const walkChild = (

View File

@ -1,3 +1,4 @@
import { deepClone } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { FNCompDef } from "../../../../utils/types/meta-fn";
@ -7,12 +8,13 @@ export const walkProp = (arg: {
each: (name: string, prop: FNCompDef) => void;
}) => {
for (const [k, v] of Object.entries(arg.pcomp.comp.component?.props || {})) {
let prop = deepClone(v);
const props = arg.item.component?.props;
let prop = props?.[k];
if (props) {
if (!props[k]) {
props[k] = v;
prop = v;
if (props && props[k]) {
prop.value = props[k].value;
prop.valueBuilt = props[k].valueBuilt;
if (props[k].content) {
prop.content = props[k].content;
}
}