This commit is contained in:
Rizky 2023-12-12 00:07:00 +07:00
parent 0c22d2cdef
commit 23de9e35d2
8 changed files with 116 additions and 57 deletions

View File

@ -28,36 +28,29 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
); );
} }
if ( if (node.data?.jsx_prop?.is_root) {
node.data?.jsx_prop?.name && let hide = true;
node.data?.jsx_prop?.name && const comp = p.comp.loaded[node.data.jsx_prop.comp_id];
node.data?.parent?.instance_id if (comp) {
) {
const prop_name = node.data?.jsx_prop?.name; const prop_name = node.data?.jsx_prop?.name;
const cprop = comp.comp.component?.props[prop_name];
if (cprop && node.data.parent?.instance_id) {
const meta = getMetaById(p, node.data.parent.instance_id); const meta = getMetaById(p, node.data.parent.instance_id);
if (meta && prop_name) {
const props = meta.scope.def?.props;
if (props) {
const prop = props[prop_name];
if (prop && prop.visible === true) {
hide = false;
}
}
}
}
}
// if (meta && prop_name && !active.comp_id) { if (hide) {
// if (!meta.propvis) { return <></>;
// if (!meta.parent_mcomp) { }
// setTimeout(local.render, 100);
// const id = meta.item.originalId || meta.item.id;
// if (!jsxPropVis[id] || jsxPropVis[id] === prop_name) {
// jsxPropVis[id] = prop_name;
// return (
// <div
// className={"relative border-b flex items-stretch min-h-[26px]"}
// >
// <Loading backdrop={false} />
// </div>
// );
// } else {
// return <></>;
// }
// }
// } else {
// if (meta.propvis[prop_name] === false) return <></>;
// }
// }
} }
return ( return (

View File

@ -2,6 +2,7 @@ import { FC, ReactNode } from "react";
import { IMeta } from "../../ed/logic/ed-global"; import { IMeta } from "../../ed/logic/ed-global";
import { ViContext, viParts } from "./parts"; import { ViContext, viParts } from "./parts";
import { ViScript } from "./script"; import { ViScript } from "./script";
import { ErrorBox } from "../utils/error-box";
export const ViRender: FC<{ export const ViRender: FC<{
ctx: ViContext; ctx: ViContext;
@ -11,7 +12,11 @@ export const ViRender: FC<{
if (!meta) return null; if (!meta) return null;
if (meta.item.adv?.js || meta.item.component?.id) { if (meta.item.adv?.js || meta.item.component?.id) {
return <ViScript ctx={ctx} meta={meta} />; return (
<ErrorBox>
<ViScript ctx={ctx} meta={meta} />
</ErrorBox>
);
} }
const parts = viParts(meta); const parts = viParts(meta);
@ -23,7 +28,11 @@ export const ViRender: FC<{
: meta.item.childs?.map((item) => { : meta.item.childs?.map((item) => {
if (!item) return null; if (!item) return null;
const { id } = item; const { id } = item;
return <ViRender key={id} ctx={ctx} meta={ctx.meta[id]} />; return (
<ErrorBox key={id}>
<ViRender ctx={ctx} meta={ctx.meta[id]} />
</ErrorBox>
);
}); });
} }

View File

@ -1,29 +1,46 @@
import { FC } from "react"; import { FC, ReactNode } from "react";
import { IMeta } from "../../ed/logic/ed-global"; import { IMeta } from "../../ed/logic/ed-global";
import { ViContext, viParts } from "./parts"; import { ViContext, viParts } from "./parts";
import { ViRender } from "./render"; import { ViRender } from "./render";
import { ErrorBox } from "../utils/error-box";
import { ViLocal } from "./script/local";
import { viScopeUpward } from "./script/upward";
export const ViScript: FC<{ ctx: ViContext; meta: IMeta }> = ({ export const ViScript: FC<{ ctx: ViContext; meta: IMeta }> = ({
ctx, ctx,
meta, meta,
}) => { }) => {
viEvalScript(ctx, meta);
if (meta.script) return <ErrorBox>{meta.script.el}</ErrorBox>;
return null;
};
export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {
const childs = meta.item.childs; const childs = meta.item.childs;
const parts = viParts(meta); const parts = viParts(meta);
let renderChild = undefined; let children = undefined;
if (parts.shouldRenderChild) { if (parts.shouldRenderChild) {
renderChild = children =
Array.isArray(childs) && Array.isArray(childs) &&
childs.map(({ id }) => { childs.map(({ id }) => {
return <ViRender key={id} ctx={ctx} meta={ctx.meta[id]} />; return <ViRender key={id} ctx={ctx} meta={ctx.meta[id]} />;
}); });
} }
return ( const scope = viScopeUpward(ctx, meta);
<div {...parts.props} className={parts.className}>
{renderChild}
</div>
);
};
export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {}; const arg = {
...scope,
children,
props: parts.props,
Local: ViLocal,
newElement: () => {},
render: (jsx: ReactNode) => {
meta.script = { el: jsx };
},
};
const fn = new Function(...Object.keys(arg), meta.item.adv?.jsBuilt || "");
fn(...Object.values(arg));
};

View File

@ -0,0 +1,5 @@
import { FC, ReactNode } from "react";
export const ViLocal: FC<{ children: ReactNode }> = ({ children }) => {
return children;
};

View File

@ -0,0 +1,15 @@
import { IMeta } from "../../../ed/logic/ed-global";
import { ViContext } from "../parts";
export const viScopeUpward = (ctx: ViContext, meta: IMeta) => {
let cur = meta;
// while (cur.parent) {
// if (cur.scope.def) {
// console.log(cur.item.id, cur.item.name, cur.scope);
// }
// cur = ctx.meta[cur.parent.id];
// }
return {};
};

View File

@ -60,17 +60,29 @@ export const genComp = (
if (meta.scope.def?.props) { if (meta.scope.def?.props) {
meta.scope.def.props[name] = { meta.scope.def.props[name] = {
value: prop.valueBuilt, value: prop.valueBuilt,
visible: true, type: {
"": "text",
"content-element": "jsx",
option: "opt",
text: "text",
}[prop.meta?.type || ""] as any,
visible: false,
}; };
} }
props[name] = { value: prop.valueBuilt, visible: prop.visible }; props[name] = { value: prop.valueBuilt, visible: prop.visible };
if (prop.meta?.type === "content-element" && prop.content) { const comp_id = item.component?.id;
if (
prop.meta?.type === "content-element" &&
prop.content &&
comp_id
) {
genMeta(p, { genMeta(p, {
item: prop.content, item: prop.content,
mitem: mprop?.get("content"), mitem: mprop?.get("content"),
is_root: false, is_root: false,
jsx_prop: { jsx_prop: {
is_root: true, is_root: true,
comp_id,
name, name,
}, },
parent: { parent: {
@ -90,7 +102,7 @@ export const genComp = (
if (vis && meta.scope.def?.props) { if (vis && meta.scope.def?.props) {
for (const [k, v] of Object.entries(vis)) { for (const [k, v] of Object.entries(vis)) {
if (meta.scope.def.props[k]) { if (meta.scope.def.props[k]) {
meta.scope.def.props[k].visible = !!v; meta.scope.def.props[k].visible = v === false;
} }
} }
} }

View File

@ -2,18 +2,19 @@ export const evalPropVis = (
props: Record<string, { value: string; visible?: string }> props: Record<string, { value: string; visible?: string }>
) => { ) => {
try { try {
const fn = new Function(` const src = `
${Object.entries(props) ${Object.entries(props)
.map(([k, v]) => `const ${k} = ${v.value};`) .map(([k, v]) => `const ${k} = ${v.value}`)
.join("\n")} .join("\n")}
return { return {
${Object.entries(props) ${Object.entries(props)
.filter(([k, v]) => v.visible) .filter(([_, v]) => v.visible)
.map(([k, v]) => `${k}: ${v},`) .map(([k, v]) => `${k}: ${v.visible},`)
.join("\n")} .join("\n")}
} }
`); `;
const fn = new Function(src);
return fn() as Record<string, boolean>; return fn() as Record<string, boolean>;
} catch (e) {} } catch (e) {}

View File

@ -59,12 +59,19 @@ export type IMeta = {
}; };
jsx_prop?: { jsx_prop?: {
name: string; name: string;
comp_id: string;
is_root: boolean; is_root: boolean;
}; };
script?: {
el: ReactNode;
};
scope: { scope: {
val?: any; val?: any;
def?: { def?: {
props?: Record<string, { value: string; visible: boolean }>; props?: Record<
string,
{ value: string; type: "jsx" | "text" | "opt"; visible: boolean }
>;
local?: { local?: {
name: string; name: string;
idx: number; idx: number;