This commit is contained in:
Rizky 2023-12-12 09:30:40 +07:00
parent ca2f2ffad9
commit 6a5619d322
17 changed files with 92 additions and 510 deletions

View File

@ -2,7 +2,6 @@ import { IScopeComp } from "../../../../web/src/nova/ed/logic/ed-global";
import { DComp } from "../../../../web/src/utils/types/root";
import { SAction } from "../actions";
import { loadComponent } from "../editor/load-component";
import { serverWalkLoad, serverWalkMap } from "../editor/load-page";
import { docs } from "../entity/docs";
import { gzipAsync } from "../entity/zlib";
import { SyncConnection } from "../type";
@ -14,44 +13,8 @@ export const comp_load: SAction["comp"]["load"] = async function (
const result: Record<string, IScopeComp> = {};
for (const id of ids) {
const root = await loadComponent(id, this);
let ref = docs.comp[id];
if (ref) {
result[id] = await scanMeta(id, ref.doc, this);
}
}
return result;
};
const scanMeta = async (id: string, doc: DComp, sync: SyncConnection) => {
const scope = {};
const scope_comps: IScopeComp = {};
const loaded = new Set<string>();
const mitem = doc.getMap("map").get("root");
if (mitem) {
const name = mitem.get("name") || "";
await serverWalkLoad(mitem, scope_comps, sync, loaded);
serverWalkMap(
{ sync, scope, scope_comps, note: "comp-load" },
{
mitem,
parent_item: { id: "root" },
parent_ids: ["root"],
parent_mcomp: {
id,
jsx_props: {},
mcomp: mitem,
mitem,
parent_ids: [],
},
}
);
const bin = Y.encodeStateAsUpdate(doc as any);
const snapshot = await gzipAsync(bin);
scope_comps[id] = { id, name, scope, snapshot };
}
return scope_comps;
};
const scanMeta = async (id: string, doc: DComp, sync: SyncConnection) => {};

View File

@ -7,6 +7,7 @@ import { IItem } from "../../../../web/src/utils/types/item";
import { DPage } from "../../../../web/src/utils/types/root";
import { SAction } from "../actions";
import { loadComponent } from "../editor/load-component";
import { parseJs } from "../editor/parser/parse-js";
import { activity } from "../entity/activity";
import { conns } from "../entity/conn";
import { docs } from "../entity/docs";
@ -214,7 +215,20 @@ const scanMeta = async (doc: DPage, sync: SyncConnection) => {
for (const mitem of childs) {
const item = mitem.toJSON() as IItem;
entry.push(item.id);
genMeta({ comps: mcomps, meta }, { item });
genMeta(
{
comps: mcomps,
meta,
on: {
visit(meta) {
if (typeof meta.item.adv?.js === "string") {
meta.scope.def = parseJs(meta.item.adv.js);
}
},
},
},
{ item }
);
}
}

View File

@ -1,49 +0,0 @@
import {
ensureMItemProps,
ensureMProp,
ensurePropContent,
} from "../../../../web/src/nova/ed/logic/tree/sync-walk-utils";
import { IItem, MItem } from "../../../../web/src/utils/types/item";
import {
FNCompDef,
FNComponent,
} from "../../../../web/src/utils/types/meta-fn";
import { parseJs } from "./parser/parse-js";
export const extractMItemProps = (arg: {
mitem: MItem;
item: IItem;
item_comp: FNComponent;
mcomp: MItem;
scope: Exclude<ReturnType<typeof parseJs>, undefined>;
content_scope?: Record<string, string>;
mcontent: (mcontent: MItem, prop_name: string) => void;
}) => {
const { mitem, item, content_scope, item_comp, mcomp, scope } = arg;
const mitem_comp = mitem.get("component");
const mprops = mcomp.get("component")?.get("props")?.toJSON() as Record<
string,
FNCompDef
>;
if (mitem_comp) {
const mitem_props = ensureMItemProps(mitem_comp, item_comp);
if (mitem_props && mprops) {
for (const [k, v] of Object.entries(mprops)) {
scope.props[k] = { name: k, value: `null as any` };
const mprop = ensureMProp(mitem_props, k, v);
parseJs(v.value, { item, content_scope });
item_comp.props[k] = v;
if (mprop && v.meta?.type === "content-element") {
scope.props[k].value = "null as ReactElement";
const mcontent = ensurePropContent(mprop, k);
if (mcontent) {
arg.mcontent(mcontent, k);
}
}
}
}
}
};

View File

@ -1,361 +0,0 @@
import { createId } from "@paralleldrive/cuid2";
import { TypedArray } from "yjs-types";
import {
EdMeta,
IScope,
IScopeComp,
} from "../../../../web/src/nova/ed/logic/ed-global";
import { ensurePropContent } from "../../../../web/src/nova/ed/logic/tree/sync-walk-utils";
import { MContent } from "../../../../web/src/utils/types/general";
import { IItem, MItem } from "../../../../web/src/utils/types/item";
import { FNComponent } from "../../../../web/src/utils/types/meta-fn";
import { docs } from "../entity/docs";
import { gzipAsync } from "../entity/zlib";
import { SyncConnection } from "../type";
import { loadComponent } from "./load-component";
import { extractMItemProps } from "./load-page-comp";
import { ArgParentMComp, parseJs } from "./parser/parse-js";
import { user } from "../entity/user";
const defaultActive = {
select: "" as "" | "comp" | "item" | "section" | "text",
};
export const serverWalkLoad = async (
mitem: MItem,
scope_comps: IScopeComp,
sync: SyncConnection,
loaded: Set<string>
) => {
if (typeof mitem.get !== "function") {
return;
}
const mcomp = mitem.get("component");
if (mcomp) {
const id = mcomp.get("id");
const comp = mcomp.toJSON() as FNComponent;
if (id) {
const isFirstLoaded = !loaded.has(id);
loaded.add(id);
if (!docs.comp[id]) {
await loadComponent(id, sync);
} else {
const conf = sync.conf;
if (conf) {
user.active.add({
...defaultActive,
client_id: sync.client_id,
user_id: sync.user_id,
site_id: conf.site_id,
page_id: conf.page_id,
comp_id: comp.id,
});
}
}
const pcomp = docs.comp[id];
if (pcomp) {
const pitem = pcomp.doc.getMap("map").get("root");
if (pitem) {
const name = pitem.get("name");
if (id && name) {
const bin = Y.encodeStateAsUpdate(pcomp.doc as any);
scope_comps[id] = {
id: id,
name,
scope: {},
snapshot: await gzipAsync(bin),
};
if (isFirstLoaded) {
await serverWalkLoad(pitem, scope_comps, sync, loaded);
}
}
}
}
}
for (const [propName, prop] of Object.entries(comp.props || {})) {
if (prop.meta?.type === "content-element") {
const mprop = mcomp.get("props")?.get(propName);
if (mprop) {
const mcontent = ensurePropContent(mprop, propName);
if (mcontent) {
await serverWalkLoad(mcontent, scope_comps, sync, loaded);
}
}
}
}
}
for (const e of mitem.get("childs")?.map((e) => e) || []) {
await serverWalkLoad(e, scope_comps, sync, loaded);
}
};
export const serverWalkMap = (
p: {
sync: SyncConnection;
scope: IScope;
scope_comps: IScopeComp;
note: string;
},
arg: {
mitem: MItem;
parent_ids: string[];
parent_item: EdMeta["parent_item"];
parent_mcomp?: ArgParentMComp;
content_scope?: Record<string, string>;
}
) => {
const { mitem, parent_item, parent_mcomp } = arg;
let override_id = "";
const id = mitem.get("id");
if (parent_mcomp && id) {
const fcomp = parent_mcomp.mitem.get("component");
if (fcomp) {
const ref_ids = fcomp.get("ref_ids");
if (ref_ids) {
let ref_id = ref_ids.get(id);
if (!ref_id) {
ref_id = createId();
ref_ids.set(id, ref_id);
}
override_id = ref_id;
}
}
}
const item = {} as unknown as IItem;
mapItem(mitem, item);
if (override_id) {
item.originalId = item.id;
item.id = override_id;
}
const item_comp = item.component;
const mitem_comp = mitem.get("component");
if (item_comp && item_comp.id) {
if (parent_item.id === "root") {
const scope = { props: {} } as Exclude<
ReturnType<typeof parseJs>,
undefined
>;
extractMItemProps({
item_comp,
mitem,
item,
content_scope: arg.content_scope,
mcomp: mitem,
scope,
mcontent(mcontent) {},
});
p.scope[item.id] = {
p: arg.parent_ids,
n: item.name,
s: scope,
};
const js = item.adv?.js;
if (typeof js === "string") {
const s = parseJs(js, {
item,
content_scope: arg.content_scope,
});
const ps = p.scope[item.id].s;
if (ps) {
if (s?.local) ps.local = s.local;
if (s?.passprop) ps.passprop = s.passprop;
}
}
} else {
if (!docs.comp[item_comp.id]) {
console.error("Component failed to load:", item_comp.id);
return;
}
if (!p.scope_comps[item_comp.id]) {
console.error("Failed to assign component:", item_comp.id);
return;
}
const ref_comp = docs.comp[item_comp.id];
if (ref_comp && mitem_comp) {
const mcomp = ref_comp.doc.getMap("map").get("root");
if (mcomp) {
let ref_ids: Record<string, string> = item_comp.ref_ids;
if (!ref_ids) {
mitem_comp.set("ref_ids", new Y.Map() as any);
ref_ids = {};
}
const original_id = item.id;
mapItem(mcomp, item);
item.id = original_id;
const scope = { props: {} } as Exclude<
ReturnType<typeof parseJs>,
undefined
>;
const parent_mcomp: ArgParentMComp = {
parent_ids: ["root", item.id],
id: item_comp.id,
mitem: mitem as MItem,
mcomp,
jsx_props: {},
};
const content_scope: Record<string, string> = {};
extractMItemProps({
item_comp,
item,
mitem,
mcomp,
scope,
content_scope: arg.content_scope,
mcontent(mcontent, prop_name) {
const id = mcontent.get("id");
if (id) {
let cid = ref_ids[id] || id;
parent_mcomp.jsx_props[prop_name] = {
id: cid,
mitem: mcontent,
parent_mcomp: arg.parent_mcomp,
parent_ids: [...arg.parent_ids, item.id],
};
content_scope[prop_name] = cid;
}
},
});
const pcomp = p.scope_comps[item_comp.id];
pcomp.scope[item.id] = { p: ["root"], n: item.name, s: null };
const js = item.adv?.js;
if (typeof js === "string") {
const res = parseJs(js, {
item,
content_scope: arg.content_scope,
});
if (res) {
scope.local = res.local;
scope.passprop = res.passprop;
}
}
if (scope) pcomp.scope[item.id].s = scope;
if (!p.scope[item.id]) {
p.scope[item.id] = {
p: arg.parent_ids,
n: item.name,
s: null,
};
}
if (scope) {
if (!p.scope[item.id].s) {
p.scope[item.id].s = scope;
} else {
p.scope[item.id].s = { ...p.scope[item.id].s, ...scope };
}
}
const childs = mcomp.get("childs")?.map((e) => e) || [];
for (const e of childs) {
serverWalkMap(p, {
mitem: e,
parent_ids: [...arg.parent_ids, item.id],
parent_item: {
id: item.id,
mitem: mitem as MItem,
},
parent_mcomp,
content_scope,
});
}
}
}
return;
}
}
if (arg.parent_mcomp) {
let id = item.originalId || item.id;
const pcomp = p.scope_comps[arg.parent_mcomp.id];
if (pcomp) {
pcomp.scope[id] = {
p: arg.parent_mcomp.parent_ids,
n: item.name,
s: null,
};
const js = item.adv?.js;
if (typeof js === "string") {
const scope = parseJs(js, {
item,
content_scope: arg.content_scope,
});
if (scope) pcomp.scope[id].s = scope;
}
}
} else {
if (!(item_comp && item_comp.id)) {
p.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
const js = item.adv?.js;
if (typeof js === "string") {
const scope = parseJs(js, {
item,
content_scope: arg.content_scope,
});
if (scope) p.scope[item.id].s = scope;
}
}
}
const childs = mitem.get("childs")?.map((e) => e) || [];
for (const e of childs) {
serverWalkMap(p, {
mitem: e,
parent_item: { id: item.id, mitem: mitem as MItem },
parent_mcomp: !!arg.parent_mcomp
? {
...arg.parent_mcomp,
parent_ids: [...(arg.parent_mcomp?.parent_ids || []), item.id],
}
: undefined,
parent_ids: [...arg.parent_ids, item.id],
content_scope: arg.content_scope,
});
}
};
const mapItem = (mitem: MContent, item: any) => {
mitem.forEach((e, k) => {
if (k !== "childs") {
let val = e;
if (typeof e === "object" && e) {
if ((e as any).toJSON) {
val = e.toJSON() as any;
}
}
item[k] = val;
} else {
if (!item[k]) item[k] = [];
const childs = e as unknown as TypedArray<{}>;
childs.forEach((c) => {
item[k].push({ id: c.get("id") });
});
}
});
};

View File

@ -1,30 +1,7 @@
import recast from "recast";
import babel from "recast/parsers/babel-ts";
import { IItem, MItem } from "../../../../../web/src/utils/types/item";
import { EdMeta } from "../../../../../web/src/nova/ed/logic/ed-global";
export type ArgParentMComp = EdMeta["parent_mcomp"] & {
id: string;
parent_ids: string[];
jsx_props: Record<
string,
{
id: string;
mitem: MItem;
parent_mcomp?: ArgParentMComp;
parent_ids: string[];
}
>;
};
export const parseJs = (
code: string,
arg: {
item: IItem;
content_scope?: Record<string, string>;
}
) => {
const { item } = arg;
export const parseJs = (code: string) => {
const local = { name: "", value: "", index: 0 };
const passprop: Record<string, { value: string; index: number }> = {};
const result = {} as {

View File

@ -1,4 +1,4 @@
import { FC, ReactNode } from "react";
import { FC, ReactNode, Suspense } from "react";
import { IMeta } from "../../ed/logic/ed-global";
import { ViContext, viParts } from "./parts";
import { ViScript } from "./script";
@ -12,11 +12,7 @@ export const ViRender: FC<{
if (!meta) return null;
if (meta.item.adv?.js || meta.item.component?.id) {
return (
<ErrorBox>
<ViScript ctx={ctx} meta={meta} />
</ErrorBox>
);
return <ViScript ctx={ctx} meta={meta} />;
}
const parts = viParts(meta);
@ -31,7 +27,9 @@ export const ViRender: FC<{
return (
<ErrorBox key={id}>
<ViRender ctx={ctx} meta={ctx.meta[id]} />
<Suspense>
<ViRender ctx={ctx} meta={ctx.meta[id]} />
</Suspense>
</ErrorBox>
);
});

View File

@ -2,20 +2,22 @@ import { FC, ReactNode } from "react";
import { IMeta } from "../../ed/logic/ed-global";
import { ViContext, viParts } from "./parts";
import { ViRender } from "./render";
import { ErrorBox } from "../utils/error-box";
import { ViLocal } from "./script/local";
import { ViPassProp } from "./script/passprop";
import { viScopeUpward } from "./script/upward";
import { ErrorBox } from "../utils/error-box";
export const ViScript: FC<{ ctx: ViContext; meta: IMeta }> = ({
ctx,
meta,
}) => {
viEvalScript(ctx, meta);
if (meta.script) return <ErrorBox>{meta.script.el}</ErrorBox>;
if (meta.script) return meta.script.el;
return null;
};
export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {
export const viEvalScript = (ctx: ViContext, meta: IMeta) => {
const childs = meta.item.childs;
const parts = viParts(meta);
@ -35,12 +37,21 @@ export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {
children,
props: parts.props,
Local: ViLocal,
PassProp: ViPassProp,
ErrorBox: ErrorBox,
newElement: () => {},
render: (jsx: ReactNode) => {
meta.script = { el: jsx };
meta.script = {
el: jsx,
};
},
};
const fn = new Function(...Object.keys(arg), meta.item.adv?.jsBuilt || "");
const fn = new Function(
...Object.keys(arg),
`// [${meta.item.type}] ${meta.item.name}: ${meta.item.id}
${meta.item.adv?.jsBuilt || ""}
`
);
fn(...Object.values(arg));
};

View File

@ -1,5 +1,13 @@
import { FC, ReactNode } from "react";
import { ReactNode } from "react";
export const ViLocal = <T extends Record<string, any>>(arg: {
children: ReactNode;
name: string;
value: T;
hook: (local: T) => void;
effect: (local: T) => void | Promise<void>;
}) => {
const { children } = arg;
export const ViLocal: FC<{ children: ReactNode }> = ({ children }) => {
return children;
};

View File

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

View File

@ -4,12 +4,14 @@ 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];
// }
if (cur && cur.parent) {
while (cur.parent) {
console.log(cur.scope);
if (!ctx.meta[cur.parent.id]) break;
cur = ctx.meta[cur.parent.id];
}
}
return {};
};

View File

@ -2,6 +2,7 @@ import { FC } from "react";
import { ViContext } from "./render/parts";
import { ViRender } from "./render/render";
import { useLocal } from "web-utils";
import { ErrorBox } from "./utils/error-box";
export const ViRoot: FC<{
ctx: ViContext;
@ -16,7 +17,11 @@ export const ViRoot: FC<{
const meta = ctx.meta[id];
if (meta) {
if (Element) {
return <ViRender key={meta.item.id} ctx={ctx} meta={meta} />;
return (
<ErrorBox key={meta.item.id}>
<ViRender ctx={ctx} meta={meta} />
</ErrorBox>
);
}
}
return null;

View File

@ -7,7 +7,7 @@ export const ErrorBox = withErrorBoundary(
children,
meta,
id,
silent,
silent = true,
}: {
children: any;
meta?: IMeta;

View File

@ -5,7 +5,9 @@ import { ErrorBox } from "./utils/error-box";
export const Vi: typeof ViRoot = (props) => {
return (
<ErrorBox>
<Suspense>{/* <ViRoot {...props} /> */}</Suspense>
<Suspense>
<ViRoot {...props} />
</Suspense>
</ErrorBox>
);
};

View File

@ -20,6 +20,14 @@ export const instantiate = (
}
walkChild(newitem, ref_ids);
for (const key of Object.keys(item)) {
delete (item as any)[key];
}
for (const [k, v] of Object.entries(newitem)) {
(item as any)[k] = v;
}
};
const walkChild = (item: IItem, ref_ids: Record<string, string>) => {

View File

@ -19,6 +19,13 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
return;
}
let scope: IMeta["scope"] = {};
if (p.smeta) {
if (p.smeta[item.id] && p.smeta[item.id].scope) {
scope.def = p.smeta[item.id].scope;
}
}
const meta: IMeta = {
item: simplifyItemChild(item),
jsx_prop: arg.jsx_prop,
@ -27,7 +34,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
instance_id: arg.parent?.instance?.id,
comp_id: arg.parent?.comp?.id,
},
scope: {},
scope,
};
if (p.on?.visit) {

View File

@ -1,4 +1,5 @@
import { ReactNode } from "react";
import { parseJs } from "../../../../../../srv/ws/sync/editor/parser/parse-js";
import { IContent } from "../../../../utils/types/general";
import { IItem, MItem } from "../../../../utils/types/item";
@ -58,15 +59,6 @@ export type IMeta = {
};
scope: {
val?: any;
def?: {
props?: Record<string, { value: string; visible: boolean }>;
local?: {
name: string;
idx: number;
idxval: Record<string, number>;
src: string;
};
pass?: Record<string, { src: string; idx: number }>;
};
def?: ReturnType<typeof parseJs>;
};
};

View File

@ -12,10 +12,10 @@ export type FNLayout = {
export type FMLayout = TypedMap<FNLayout>;
export type FNAdv = {
js?: Y.Text | string;
js?: string;
jsBuilt?: string;
css?: Y.Text | string;
html?: Y.Text | string;
css?: string;
html?: string;
};
export type FMAdv = TypedMap<FNAdv>;