@seed-design/figma 0.0.2

package/src/generate-code.ts

@@ -0,0 +1,213 @@
+import { camelCase } from "change-case";
+import { createBackgroundProps, createBorderProps } from "./color";
+import { componentHandlerMap, ignoredComponentKeys } from "./component";
+import { iconRecord } from "./data/icons";
+import { createIconTagNameFromKey, createMonochromeIconColorProps, isIconComponent } from "./icon";
+import type { ElementNode } from "./jsx";
+import { createElement, stringifyElement } from "./jsx";
+import { createLayoutProps } from "./layout";
+import type {
+  NormalizedComponentNode,
+  NormalizedFrameNode,
+  NormalizedInstanceNode,
+  NormalizedRectangleNode,
+  NormalizedSceneNode,
+  NormalizedTextNode,
+} from "./normalizer/types";
+import { createSizingProps } from "./sizing";
+import { createTextProps } from "./text";
+import { getColorVariableName, getLayoutVariableName, inferDimension } from "./variable";
+import { FIGMA_TEXT_STYLES } from "./data/styles";
+import { compactObject } from "./util";
+
+export async function generateCode(selection: NormalizedSceneNode) {
+  async function handleFrameNode(
+    node: NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode,
+  ) {
+    const children = node.children;
+
+    const props = {
+      ...createLayoutProps(node),
+      ...createSizingProps(node),
+      ...createBackgroundProps(node),
+      ...createBorderProps(node),
+    };
+
+    if (
+      props.flexDirection === "row" &&
+      props.alignItems === "flexStart" &&
+      props.justifyContent === "flexStart" &&
+      props.flexWrap === "wrap"
+    ) {
+      const { flexDirection, flexWrap, alignItems, justifyContent, ...rest } = props;
+
+      return createElement("Inline", rest, await Promise.all(children.map(traverse)));
+    }
+
+    if (
+      props.flexDirection === "row" &&
+      props.justifyContent === "flexStart" &&
+      props.flexWrap === "nowrap"
+    ) {
+      const { flexDirection, flexWrap, justifyContent, ...rest } = props;
+
+      const childrenResult = await Promise.all(children.map(traverse));
+
+      return createElement(
+        "Columns",
+        rest,
+        childrenResult.map((child) => createElement("Column", {}, child)),
+      );
+    }
+
+    if (props.flexDirection === "column") {
+      const { flexDirection, ...rest } = props;
+
+      return createElement("Stack", rest, await Promise.all(children.map(traverse)));
+    }
+
+    return createElement("Flex", props, await Promise.all(children.map(traverse)));
+  }
+
+  function handleTextNode(node: NormalizedTextNode): ElementNode {
+    const maxLines =
+      node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
+
+    if (node.fills.length > 1) {
+      throw new Error("Expected a single fill");
+    }
+
+    const onlyFill = node.fills.length === 1 ? node.fills[0] : null;
+    const fillBoundVariableId =
+      onlyFill && onlyFill.type === "SOLID" ? (onlyFill.boundVariables?.color?.id ?? null) : null;
+    const color = fillBoundVariableId ? getColorVariableName(fillBoundVariableId) : undefined;
+
+    const style = FIGMA_TEXT_STYLES.find((s) => s.key === node.textStyleKey);
+
+    if (style) {
+      const styleNameSlugs = style.name.split("/");
+      const styleName = styleNameSlugs[styleNameSlugs.length - 1]!;
+      return createElement(
+        "Text",
+        compactObject({
+          textStyle: camelCase(styleName, { mergeAmbiguousCharacters: true }),
+          maxLines,
+          color,
+        }),
+        node.characters.replace(/\n/g, "<br />"),
+        color ? "" : "color 프로퍼티는 반영되지 않았습니다.",
+      );
+    }
+
+    const { fontSize, fontWeight, lineHeight } = createTextProps(node.boundVariables);
+
+    return createElement(
+      "Text",
+      compactObject({
+        fontSize,
+        fontWeight,
+        lineHeight,
+        color,
+      }),
+      node.characters.replace(/\n/g, "<br />"),
+    );
+  }
+
+  async function handleRectangleNode(node: NormalizedRectangleNode) {
+    return createElement(
+      "Box",
+      { ...createSizingProps(node), background: "palette.gray200" },
+      undefined,
+      "Rectangle Node Placeholder",
+    );
+  }
+
+  async function handleComponentNode(node: NormalizedComponentNode) {
+    return await handleFrameNode(node);
+  }
+
+  async function handleInstanceNode(node: NormalizedInstanceNode) {
+    const { componentKey, componentSetKey } = node;
+
+    if (isIconComponent(componentKey)) {
+      const iconElement = createElement(createIconTagNameFromKey(componentKey));
+
+      switch (iconRecord[componentKey]?.type) {
+        case "monochrome":
+          return createElement("Icon", {
+            size:
+              getLayoutVariableName(node.boundVariables?.size?.x?.id) ??
+              inferDimension(node.absoluteBoundingBox?.width ?? 0),
+            ...createMonochromeIconColorProps(node),
+            svg: iconElement,
+          });
+        case "multicolor":
+          return iconElement;
+        default:
+          return createElement("Icon", {
+            size:
+              getLayoutVariableName(node.boundVariables?.size?.x?.id) ??
+              inferDimension(node.absoluteBoundingBox?.width ?? 0),
+            svg: iconElement,
+            ...createMonochromeIconColorProps(node),
+          });
+      }
+    }
+
+    if (ignoredComponentKeys.has(componentSetKey ?? componentKey)) {
+      return;
+    }
+
+    const componentData = componentSetKey
+      ? componentHandlerMap.get(componentSetKey)
+      : componentHandlerMap.get(componentKey);
+
+    if (componentData) {
+      return componentData.codegen(node);
+    }
+
+    // if (node.id === selection.id) {
+    return await handleFrameNode(node);
+    // }
+
+    // const mainComponent = node.mainComponent;
+
+    // return createElement(
+    //   mainComponent.parent?.type === "COMPONENT_SET"
+    //     ? mainComponent.parent.name
+    //     : mainComponent.name,
+    //   Object.fromEntries(
+    //     Object.entries(node.componentProperties)
+    //       .filter(([_, props]) => props.type === "VARIANT" || props.type === "TEXT")
+    //       .map(([key, props]) => [camelCase(key), camelCase(props.value as string)]),
+    //   ),
+    //   undefined,
+    //   "Custom Component",
+    // );
+  }
+
+  async function traverse(node: NormalizedSceneNode): Promise<ElementNode | undefined> {
+    if ("visible" in node && !node.visible) {
+      return;
+    }
+
+    if (node.type === "FRAME") return await handleFrameNode(node);
+    if (node.type === "TEXT") return handleTextNode(node);
+    if (node.type === "RECTANGLE") return await handleRectangleNode(node);
+    if (node.type === "COMPONENT") return await handleComponentNode(node);
+    if (node.type === "INSTANCE") return await handleInstanceNode(node);
+
+    return;
+  }
+
+  try {
+    const rootEl = await traverse(selection);
+    if (!rootEl) {
+      return "";
+    }
+    return stringifyElement(rootEl);
+  } catch (e) {
+    console.error(e);
+    return "";
+  }
+}

package/src/icon.ts

@@ -0,0 +1,46 @@
+import { pascalCase } from "change-case";
+
+import { createColorProps } from "./color";
+import { iconRecord } from "./data/icons";
+import type { NormalizedInstanceNode } from "./normalizer/types";
+
+export function isIconComponent(componentKey: string) {
+  return !!iconRecord[componentKey];
+}
+
+export function createIconTagNameFromKey(key?: string) {
+  if (!key) {
+    return "UnknownIcon";
+  }
+
+  const iconData = iconRecord[key];
+  if (!iconData) {
+    throw new Error(`Icon not found: ${key}`);
+  }
+
+  const { name, weight } = iconData;
+
+  return pascalCase(`${name}${weight ? weight : ""}`);
+}
+
+export function createMonochromeIconColorProps(node: NormalizedInstanceNode) {
+  if (node.children.length === 0) {
+    throw new Error("Icon node has no children");
+  }
+
+  const icons = node.children.filter(
+    (child) => child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION",
+  );
+
+  const colorProps = icons.map(createColorProps);
+
+  const fills = new Set(
+    colorProps.map((props) => props.color).filter((color) => color !== undefined),
+  );
+
+  if (fills.size > 1) {
+    throw new Error(`Children of the icon node ${node.name} has multiple colors`);
+  }
+
+  return { color: fills.values().next().value };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { generateCode } from "./generate-code";
+export { createPluginNormalizer } from "./normalizer/from-plugin";
+export { createRestNormalizer } from "./normalizer/from-rest";

package/src/jsx.ts

@@ -0,0 +1,104 @@
+import { ensureArray, exists } from "./util";
+
+export interface ElementNode {
+  __IS_JSX_ELEMENT_NODE: true;
+  tag: string;
+  props: Record<string, string | number | boolean | ElementNode | object | undefined>;
+  children: (ElementNode | string)[];
+  comment?: string;
+}
+
+export function createElement(
+  tag: string,
+  props: Record<string, string | number | boolean | object | undefined> = {},
+  children?: ElementNode | string | undefined | (ElementNode | string | undefined)[],
+  comment?: string,
+): ElementNode {
+  return {
+    __IS_JSX_ELEMENT_NODE: true,
+    tag,
+    props,
+    children: ensureArray(children).filter(exists),
+    comment,
+  };
+}
+
+export function isElement(node: unknown): node is ElementNode {
+  return (
+    typeof node === "object" &&
+    node != null &&
+    "__IS_JSX_ELEMENT_NODE" in node &&
+    node.__IS_JSX_ELEMENT_NODE === true
+  );
+}
+
+export function stringifyElement(element: ElementNode) {
+  function recursive(node: ElementNode | string, depth: number): string {
+    if (typeof node === "string") {
+      return node;
+    }
+
+    const { tag, props, children, comment } = node;
+    const propEntries = Object.entries(props);
+    const propFragments = propEntries
+      .map(([key, value]) => {
+        if (typeof value === "string") {
+          if (value.includes("\n")) {
+            return `${key}={\"${value.replace("\n", "\\n")}\"}`;
+          }
+
+          return `${key}="${value}"`;
+        }
+
+        if (typeof value === "number") {
+          return `${key}={${value}}`;
+        }
+
+        if (typeof value === "boolean") {
+          return `${key}={${value}}`;
+        }
+
+        if (isElement(value)) {
+          return `${key}={${recursive(value, depth + 1)}}`;
+        }
+
+        if (typeof value === "object") {
+          return `${key}={${JSON.stringify(value)}}`;
+        }
+
+        if (typeof value === "undefined") {
+          return undefined;
+        }
+      })
+      .filter(exists);
+
+    const oneLiner = propFragments.join(" ");
+    const propsString =
+      propEntries.length === 0
+        ? ""
+        : ` ${
+            oneLiner.length < 80
+              ? oneLiner
+              : `\n${"  ".repeat(depth + 1)}${propFragments.join(
+                  `\n${"  ".repeat(depth + 1)}`,
+                )}\n${"  ".repeat(depth)}`
+          }`;
+
+    if (children == null || children.length === 0) {
+      return `<${tag}${propsString} />${comment ? `{/* ${comment} */}` : ""}`;
+    }
+
+    const result = [
+      `<${tag}${propsString}>`,
+      ...ensureArray(children)
+        .filter(exists)
+        .map((child) => recursive(child, depth + 1))
+        .map((str) => "  ".repeat(depth + 1) + str),
+      `${"  ".repeat(depth)}</${tag}>${comment ? `{/* ${comment} */}` : ""}`,
+    ].join("\n");
+
+    return result;
+  }
+
+  return recursive(element, 0);
+}

package/src/layout.ts

@@ -0,0 +1,289 @@
+import type {
+  NormalizedComponentNode,
+  NormalizedFrameNode,
+  NormalizedInstanceNode,
+  NormalizedSceneNode,
+} from "./normalizer/types";
+import { getLayoutVariableName, inferDimension, inferRadius } from "./variable";
+
+interface FigmaLayoutProps {
+  layoutMode?: NormalizedFrameNode["layoutMode"];
+  layoutWrap?: NormalizedFrameNode["layoutWrap"];
+  paddingLeft?: NormalizedFrameNode["paddingLeft"];
+  paddingRight?: NormalizedFrameNode["paddingRight"];
+  paddingTop?: NormalizedFrameNode["paddingTop"];
+  paddingBottom?: NormalizedFrameNode["paddingBottom"];
+  primaryAxisAlignItems?: NormalizedFrameNode["primaryAxisAlignItems"];
+  counterAxisAlignItems?: NormalizedFrameNode["counterAxisAlignItems"];
+  primaryAxisSizingMode?: NormalizedFrameNode["primaryAxisSizingMode"];
+  counterAxisSizingMode?: NormalizedFrameNode["counterAxisSizingMode"];
+  layoutGrow?: NormalizedFrameNode["layoutGrow"];
+  layoutAlign?: NormalizedFrameNode["layoutAlign"];
+  itemSpacing?: NormalizedFrameNode["itemSpacing"];
+  counterAxisSpacing?: NormalizedFrameNode["counterAxisSpacing"];
+  boundVariables?: NormalizedFrameNode["boundVariables"];
+  cornerRadius?: NormalizedFrameNode["cornerRadius"];
+  rectangleCornerRadii?: NormalizedFrameNode["rectangleCornerRadii"];
+  children: NormalizedSceneNode[];
+}
+
+type LayoutPropHandler = (props: FigmaLayoutProps) => string | number | boolean | undefined;
+
+const layoutPropHandlers = {
+  flexDirection: ({ layoutMode }) => (layoutMode === "HORIZONTAL" ? "row" : "column"),
+  justifyContent: ({ primaryAxisAlignItems }) => {
+    switch (primaryAxisAlignItems) {
+      case "MIN":
+        return "flexStart";
+      case "CENTER":
+        return "center";
+      case "MAX":
+        return "flexEnd";
+      case "SPACE_BETWEEN":
+        return "spaceBetween";
+    }
+  },
+  alignItems: ({ counterAxisAlignItems, children }) => {
+    const isStretch = children.every((child) => {
+      if (!("layoutAlign" in child)) {
+        return false;
+      }
+
+      return child.layoutAlign === "STRETCH";
+    });
+
+    if (isStretch) {
+      return "stretch";
+    }
+
+    switch (counterAxisAlignItems) {
+      case "MIN":
+        return "flexStart";
+      case "CENTER":
+        return "center";
+      case "MAX":
+        return "flexEnd";
+      case "BASELINE":
+        return "baseline";
+    }
+  },
+  flexWrap: ({ layoutWrap }) => (layoutWrap === "WRAP" ? "wrap" : "nowrap"),
+  flexGrow: ({ layoutGrow }) => layoutGrow,
+  alignSelf: ({ layoutAlign }) => {
+    switch (layoutAlign) {
+      case "STRETCH":
+        return "stretch";
+      case "MIN":
+        return "flexStart";
+      case "CENTER":
+        return "center";
+      case "MAX":
+        return "flexEnd";
+    }
+  },
+  gap: ({ itemSpacing, boundVariables, primaryAxisAlignItems, children }) =>
+    children.length <= 1
+      ? 0
+      : primaryAxisAlignItems === "SPACE_BETWEEN"
+        ? 0
+        : boundVariables?.itemSpacing
+          ? getLayoutVariableName(boundVariables.itemSpacing.id)
+          : inferDimension(itemSpacing ?? 0),
+  paddingTop: ({ paddingTop, boundVariables }) =>
+    boundVariables?.paddingTop
+      ? getLayoutVariableName(boundVariables.paddingTop.id)
+      : inferDimension(paddingTop ?? 0),
+  paddingBottom: ({ paddingBottom, boundVariables }) =>
+    boundVariables?.paddingBottom
+      ? getLayoutVariableName(boundVariables.paddingBottom.id)
+      : inferDimension(paddingBottom ?? 0),
+  paddingLeft: ({ paddingLeft, boundVariables }) =>
+    boundVariables?.paddingLeft
+      ? getLayoutVariableName(boundVariables.paddingLeft.id)
+      : inferDimension(paddingLeft ?? 0),
+  paddingRight: ({ paddingRight, boundVariables }) =>
+    boundVariables?.paddingRight
+      ? getLayoutVariableName(boundVariables.paddingRight.id)
+      : inferDimension(paddingRight ?? 0),
+  borderRadius: ({ cornerRadius, boundVariables }) => {
+    // If all corner radii are the same, use the first one
+    if (
+      cornerRadius &&
+      boundVariables?.bottomLeftRadius === boundVariables?.bottomRightRadius &&
+      boundVariables?.bottomLeftRadius === boundVariables?.topLeftRadius &&
+      boundVariables?.bottomLeftRadius === boundVariables?.topRightRadius
+    ) {
+      return boundVariables?.bottomLeftRadius
+        ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
+        : inferRadius(cornerRadius ?? 0);
+    }
+
+    // TODO: handle individual corner radii
+    return undefined;
+  },
+  borderTopLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
+    boundVariables?.topLeftRadius
+      ? getLayoutVariableName(boundVariables.topLeftRadius.id)
+      : inferRadius(rectangleCornerRadii?.[0] ?? 0),
+  borderTopRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
+    boundVariables?.topRightRadius
+      ? getLayoutVariableName(boundVariables.topRightRadius.id)
+      : inferRadius(rectangleCornerRadii?.[1] ?? 0),
+  borderBottomLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
+    boundVariables?.bottomLeftRadius
+      ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
+      : inferRadius(rectangleCornerRadii?.[2] ?? 0),
+  borderBottomRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
+    boundVariables?.bottomRightRadius
+      ? getLayoutVariableName(boundVariables.bottomRightRadius.id)
+      : inferRadius(rectangleCornerRadii?.[3] ?? 0),
+} satisfies Record<string, LayoutPropHandler>;
+
+type LayoutProps = keyof typeof layoutPropHandlers;
+
+type LayoutShorthandHandler = (props: Record<LayoutProps, string | number | boolean | undefined>) =>
+  | {
+      value: string | number | boolean | undefined;
+      exclude: LayoutProps[];
+    }
+  | undefined;
+
+const layoutShorthandHandlers = {
+  paddingX: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
+    if (
+      paddingLeft === paddingRight &&
+      paddingTop === paddingBottom &&
+      paddingLeft === paddingTop
+    ) {
+      return undefined;
+    }
+    if (paddingLeft === paddingRight) {
+      const value =
+        paddingLeft === "globalGutter" || paddingLeft === "betweenChips"
+          ? `spacingX.${paddingLeft}`
+          : paddingLeft;
+      return {
+        value,
+        exclude: ["paddingLeft", "paddingRight"],
+      };
+    }
+    return undefined;
+  },
+  paddingY: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
+    if (
+      paddingLeft === paddingRight &&
+      paddingTop === paddingBottom &&
+      paddingLeft === paddingTop
+    ) {
+      return undefined;
+    }
+    if (paddingTop === paddingBottom) {
+      return {
+        value: paddingTop,
+        exclude: ["paddingTop", "paddingBottom"],
+      };
+    }
+    return undefined;
+  },
+  padding: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
+    if (
+      paddingLeft === paddingRight &&
+      paddingTop === paddingBottom &&
+      paddingLeft === paddingTop
+    ) {
+      return {
+        value: paddingLeft,
+        exclude: ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"],
+      };
+    }
+    return undefined;
+  },
+} satisfies Record<string, LayoutShorthandHandler>;
+
+type LayoutShorthandProps = keyof typeof layoutShorthandHandlers;
+
+const layoutPropDefaults: Record<string, string | number | boolean> = {
+  flexDirection: "row",
+  justifyContent: "flexStart",
+  alignItems: "stretch",
+  flexWrap: "nowrap",
+  flexGrow: 0,
+  alignSelf: "auto",
+  gap: 0,
+  padding: 0,
+  paddingX: 0,
+  paddingY: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  borderRadius: 0,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+} satisfies Record<LayoutProps | LayoutShorthandProps, string | number | boolean>;
+
+type FrameLikeNode = NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode;
+
+export function createLayoutProps(
+  node: FrameLikeNode,
+): Record<LayoutProps | LayoutShorthandProps, string | number | boolean> {
+  const boundVariables = node.boundVariables;
+  const children = node.children;
+
+  const autoLayoutProperties = {
+    layoutMode: node.layoutMode,
+    layoutWrap: node.layoutWrap,
+    paddingLeft: node.paddingLeft,
+    paddingRight: node.paddingRight,
+    paddingTop: node.paddingTop,
+    paddingBottom: node.paddingBottom,
+    primaryAxisAlignItems: node.primaryAxisAlignItems,
+    counterAxisAlignItems: node.counterAxisAlignItems,
+    primaryAxisSizingMode: node.primaryAxisSizingMode,
+    counterAxisSizingMode: node.counterAxisSizingMode,
+    layoutGrow: node.layoutGrow,
+    layoutAlign: node.layoutAlign,
+    itemSpacing: node.itemSpacing,
+    counterAxisSpacing: node.counterAxisSpacing,
+  };
+
+  const radiusProperties = {
+    cornerRadius: node.cornerRadius,
+    topLeftRadius: node.rectangleCornerRadii?.[0],
+    topRightRadius: node.rectangleCornerRadii?.[1],
+    bottomRightRadius: node.rectangleCornerRadii?.[2],
+    bottomLeftRadius: node.rectangleCornerRadii?.[3],
+  };
+
+  const result: Record<string, string | number | boolean> = {};
+
+  for (const [prop, handler] of Object.entries(layoutPropHandlers)) {
+    const value = handler({
+      ...autoLayoutProperties,
+      ...radiusProperties,
+      boundVariables,
+      children,
+    });
+    if (value !== undefined && value !== layoutPropDefaults[prop]) {
+      result[prop] = value;
+    }
+  }
+
+  for (const [prop, handler] of Object.entries(layoutShorthandHandlers)) {
+    const shorthandResult = handler(result);
+    if (shorthandResult === undefined) {
+      continue;
+    }
+    const { value, exclude } = shorthandResult;
+    if (value !== undefined && value !== layoutPropDefaults[prop]) {
+      result[prop] = value;
+      for (const excludedProp of exclude) {
+        delete result[excludedProp];
+      }
+    }
+  }
+
+  return result;
+}

package/src/node-util.ts

@@ -0,0 +1,49 @@
+import type { NormalizedInstanceNode, NormalizedSceneNode } from "./normalizer/types";
+
+export function traverseNode(
+  node: NormalizedSceneNode,
+  callback: (node: NormalizedSceneNode) => void,
+) {
+  if ("children" in node) {
+    node.children.forEach((child) => traverseNode(child, callback));
+  } else {
+    callback(node);
+  }
+}
+
+export function findOne(
+  node: NormalizedSceneNode,
+  callback: (node: NormalizedSceneNode) => boolean,
+) {
+  let result: NormalizedSceneNode | undefined;
+
+  traverseNode(node, (n) => {
+    if (callback(n)) {
+      result = n;
+    }
+  });
+
+  return result;
+}
+
+export function findAll(
+  node: NormalizedSceneNode,
+  callback: (node: NormalizedSceneNode) => boolean,
+) {
+  const result: NormalizedSceneNode[] = [];
+
+  traverseNode(node, (n) => {
+    if (callback(n)) {
+      result.push(n);
+    }
+  });
+
+  return result;
+}
+
+export function findAllInstances<T>({ node, key }: { node: NormalizedSceneNode; key: string }) {
+  return findAll(
+    node,
+    (n) => n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key),
+  ) as (NormalizedInstanceNode & { componentProperties: T })[];
+}