squash

yext · Sep 14, 2023 · a0f0904 · a0f0904
1 parent 09ea61e
commit a0f0904
Show file tree

Hide file tree

Showing 11 changed files with 1,001 additions and 729 deletions.
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -34,3 +34,4 @@ jobs:
       - run: npm run build
       - run: npm run build-test-site -w=apps/test-site
       - run: npm run typecheck-jest
+      - run: npm run size-limit -w=packages/studio-ui
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/studio-plugin/src/parsers/ComponentTreeParser.ts b/packages/studio-plugin/src/parsers/ComponentTreeParser.ts
@@ -11,15 +11,13 @@ import {
   ComponentState,
   ComponentStateKind,
   ErrorComponentState,
-  RepeaterState,
-  StandardOrModuleComponentState,
+  StandardComponentState,
 } from "../types/ComponentState";
 import { v4 } from "uuid";
 import { FileMetadataKind, TypelessPropVal } from "../types";
 import StudioSourceFileParser from "./StudioSourceFileParser";
 import StaticParsingHelpers from "./helpers/StaticParsingHelpers";
-import TypeGuards from "../utils/TypeGuards";
-import ParsingOrchestrator from "../orchestrators/ParsingOrchestrator";
+import ParsingOrchestrator from "../ParsingOrchestrator";
 import MissingPropsChecker from "./MissingPropsChecker";
 
 export type GetFileMetadata = ParsingOrchestrator["getFileMetadata"];
@@ -72,17 +70,10 @@ export default class ComponentTreeParser {
     };
 
     if (component.isKind(SyntaxKind.JsxExpression)) {
-      const { selfClosingElement, listExpression } =
-        StaticParsingHelpers.parseJsxExpression(component);
-      const parsedRepeaterElement = this.parseRepeaterElement(
-        defaultImports,
-        selfClosingElement,
-        listExpression
+      throw new Error(
+        `Jsx nodes of kind "${component.getKindName()}" are not supported for direct use` +
+          " in page files."
       );
-      return {
-        ...commonComponentState,
-        ...parsedRepeaterElement,
-      };
     }
 
     if (!ComponentTreeParser.isNotFragmentElement(component)) {
@@ -119,39 +110,12 @@ export default class ComponentTreeParser {
     return !["Fragment", "React.Fragment"].includes(name);
   }
 
-  private parseRepeaterElement(
-    defaultImports: Record<string, string>,
-    repeatedComponent: JsxSelfClosingElement,
-    listExpression: string
-  ): Omit<RepeaterState, "uuid" | "parentUUID"> {
-    const componentName =
-      StaticParsingHelpers.parseJsxElementName(repeatedComponent);
-    const parsedRepeatedComponent = this.parseElement(
-      repeatedComponent,
-      componentName,
-      defaultImports
-    );
-    if (parsedRepeatedComponent.kind === ComponentStateKind.BuiltIn) {
-      throw new Error(
-        "Error parsing map expression: repetition of built-in components is not supported."
-      );
-    }
-    return {
-      kind: ComponentStateKind.Repeater,
-      listExpression,
-      repeatedComponent: {
-        ...parsedRepeatedComponent,
-        componentName,
-      },
-    };
-  }
-
   private parseElement(
     component: JsxElement | JsxSelfClosingElement,
     componentName: string,
     defaultImports: Record<string, string>
   ):
-    | Pick<StandardOrModuleComponentState, "kind" | "props" | "metadataUUID">
+    | Pick<StandardComponentState, "kind" | "props" | "metadataUUID">
     | Pick<BuiltInState, "kind" | "props">
     | Omit<ErrorComponentState, "componentName"> {
     const attributes: JsxAttributeLike[] = component.isKind(
@@ -197,12 +161,8 @@ export default class ComponentTreeParser {
         props,
       };
     }
-    const { kind: fileMetadataKind, metadataUUID, propShape } = fileMetadata;
+    const { metadataUUID, propShape } = fileMetadata;
 
-    const componentStateKind =
-      fileMetadataKind === FileMetadataKind.Module
-        ? ComponentStateKind.Module
-        : ComponentStateKind.Standard;
     const props = StaticParsingHelpers.parseJsxAttributes(
       attributes,
       propShape
@@ -225,7 +185,7 @@ export default class ComponentTreeParser {
     }
 
     return {
-      kind: componentStateKind,
+      kind: ComponentStateKind.Standard,
       metadataUUID,
       props,
     };

diff --git a/packages/studio-plugin/src/utils/TypeGuards.ts b/packages/studio-plugin/src/utils/TypeGuards.ts
@@ -1,21 +1,15 @@
 import {
   ComponentState,
   ComponentStateKind,
-  EditableComponentState,
   FileMetadata,
-  FileMetadataKind,
-  ModuleMetadata,
-  ModuleState,
   PropShape,
   PropType,
   PropVal,
   PropValueKind,
   PropValues,
   PropValueType,
-  RepeaterState,
   SiteSettingsShape,
   SiteSettingsValues,
-  StandardOrModuleComponentState,
 } from "../types";
 
 import {
@@ -158,43 +152,6 @@ export default class TypeGuards {
     return typeof value === "string" && value.startsWith("siteSettings.");
   }
 
-  static isModuleMetadata(
-    metadata?: FileMetadata | null
-  ): metadata is ModuleMetadata {
-    return metadata?.kind === FileMetadataKind.Module;
-  }
-
-  static isModuleState(
-    componentState: ComponentState
-  ): componentState is ModuleState {
-    return componentState.kind === ComponentStateKind.Module;
-  }
-
-  static isStandardOrModuleComponentState(
-    componentState: ComponentState
-  ): componentState is StandardOrModuleComponentState {
-    return (
-      componentState.kind === ComponentStateKind.Module ||
-      componentState.kind === ComponentStateKind.Standard
-    );
-  }
-
-  static isRepeaterState(
-    componentState: ComponentState
-  ): componentState is RepeaterState {
-    return componentState.kind === ComponentStateKind.Repeater;
-  }
-
-  static isEditableComponentState(
-    componentState: ComponentState
-  ): componentState is EditableComponentState {
-    return (
-      componentState.kind === ComponentStateKind.Module ||
-      componentState.kind === ComponentStateKind.Standard ||
-      componentState.kind === ComponentStateKind.Repeater
-    );
-  }
-
   static isSiteSettingsValues(
     propValues: PropValues
   ): propValues is SiteSettingsValues {

diff --git a/packages/studio-ui/.gitignore b/packages/studio-ui/.gitignore
@@ -1 +1 @@
-stats.html
+stats.html
diff --git a/packages/studio-ui/.size-limit.cjs b/packages/studio-ui/.size-limit.cjs
@@ -0,0 +1,7 @@
+module.exports = [
+  {
+    path: "lib/src/index.js",
+    limit: "700 kB",
+    gzip: false,
+  },
+];
diff --git a/packages/studio-ui/package.json b/packages/studio-ui/package.json
@@ -17,9 +17,10 @@
   "scripts": {
     "dev": "npm run copy-svg && tsc --watch --preserveWatchOutput -p tsconfig.json",
     "copy-svg": "npx copyfiles \"src/**/*.svg\" lib",
-    "build": "rimraf lib && npm run copy-svg && tsc -p tsconfig.json",
+    "build": "vite build",
     "test": "jest",
-    "typecheck-jest": "npx tsc -p tests/tsconfig.json"
+    "typecheck-jest": "npx tsc -p tests/tsconfig.json",
+    "size-limit": "size-limit"
   },
   "dependencies": {
     "@dhmk/zustand-lens": "^2.0.5",
@@ -51,6 +52,7 @@
     "@babel/plugin-syntax-flow": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@rollup/plugin-typescript": "^10.0.1",
+    "@size-limit/file": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -67,6 +69,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "resize-observer-polyfill": "^1.5.1",
     "rollup-plugin-visualizer": "^5.9.2",
+    "size-limit": "^9.0.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.5.3"
   },

diff --git a/packages/studio-ui/src/components/PreviewPanel.tsx b/packages/studio-ui/src/components/PreviewPanel.tsx
@@ -1,60 +1,26 @@
 import { Dispatch, SetStateAction, useMemo } from "react";
 import useStudioStore from "../store/useStudioStore";
-import usePreviewProps from "../hooks/usePreviewProps";
 import ComponentTreePreview from "./ComponentTreePreview";
 import useRawSiteSettings from "../hooks/useRawSiteSettings";
-import { ComponentStateHelpers, TypeGuards } from "@yext/studio-plugin";
-import get from "lodash/get";
 import { ITooltip } from "react-tooltip";
 
 export default function PreviewPanel(props: {
   setTooltipProps: Dispatch<SetStateAction<ITooltip>>;
 }) {
   const { setTooltipProps } = props;
-  const [componentTree, moduleUUIDBeingEdited, getComponentState] =
-    useStudioStore((store) => [
-      store.actions.getComponentTree(),
-      store.pages.moduleUUIDBeingEdited,
-      store.actions.getComponentState,
-    ]);
-
-  const pageExpressionSources = usePageExpressionSources();
-
-  const state = moduleUUIDBeingEdited
-    ? getComponentState(componentTree, moduleUUIDBeingEdited)
-    : undefined;
-  const list =
-    state && TypeGuards.isRepeaterState(state)
-      ? get(pageExpressionSources, state.listExpression)
-      : undefined;
-  const item = Array.isArray(list) ? list[0] : undefined;
-
-  const extractedState =
-    state && TypeGuards.isEditableComponentState(state)
-      ? ComponentStateHelpers.extractRepeatedState(state)
-      : undefined;
-  const parentPreviewProps = usePreviewProps(
-    extractedState,
-    pageExpressionSources,
-    item
-  );
-
-  const expressionSources = useMemo(
-    () => ({
-      ...pageExpressionSources,
-      ...(moduleUUIDBeingEdited && { props: parentPreviewProps }),
-    }),
-    [pageExpressionSources, moduleUUIDBeingEdited, parentPreviewProps]
+  const componentTree = useStudioStore((store) =>
+    store.actions.getComponentTree()
   );
 
+  const pageExpressionSources = usePageExpressionSources();
   if (!componentTree) {
     return null;
   }
 
   return (
     <ComponentTreePreview
       componentTree={componentTree}
-      expressionSources={expressionSources}
+      expressionSources={pageExpressionSources}
       setTooltipProps={setTooltipProps}
     />
   );

diff --git a/packages/studio-ui/src/components/RepeaterPreview.tsx b/packages/studio-ui/src/components/RepeaterPreview.tsx