Drop preset styles from db

After discussing with @kof figured we do not need to store preset styles in db as after sdk upgrade components may still break. Sdk versioning along with its hardcoded values will solve the problem better.
webstudio-is · Jan 25, 2023 · 169fd63 · 169fd63
1 parent ee8e1be
commit 169fd63
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 179 deletions.
diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx
@@ -30,7 +30,6 @@ import {
   useRootInstance,
   useSetBreakpoints,
   useSetDesignTokens,
-  useSetPresetStyles,
   useSetRootInstance,
   useSetStyles,
   useSubscribeScrollState,
@@ -151,7 +150,6 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
   useSetBreakpoints(data.breakpoints);
   useSetDesignTokens(data.designTokens);
   useAllUserProps(data.props);
-  useSetPresetStyles(data.tree.presetStyles);
   useSetStyles(data.tree.styles);
   useSetRootInstance(data.tree.root);
   setParams(data.params ?? null);

diff --git a/apps/designer/app/canvas/shared/styles.ts b/apps/designer/app/canvas/shared/styles.ts
@@ -1,11 +1,10 @@
 import { useEffect } from "react";
 import { useSubscribe } from "~/shared/pubsub";
-import { addGlobalRules, getPresetStyleRules } from "@webstudio-is/project";
+import { addGlobalRules } from "@webstudio-is/project";
 import {
   selectedInstanceIdStore,
   useBreakpoints,
   useDesignTokens,
-  usePresetStyles,
 } from "~/shared/nano-states";
 import {
   type Styles,
@@ -103,26 +102,19 @@ export const GlobalStyles = ({ assets }: { assets: Array<Asset> }) => {
     tokensCssEngine.render();
   }, [tokens]);
 
-  const [presetStyles] = usePresetStyles();
-
   useIsomorphicLayoutEffect(() => {
     presetStylesEngine.clear();
-    const presetStyleRules = getPresetStyleRules(presetStyles);
     for (const component of getComponentNames()) {
       const meta = getComponentMeta(component);
-      // render preset style and fallback to hardcoded one
-      // because could not be added yet to db
-      const presetStyle =
-        presetStyleRules.find((item) => item.component === component)?.style ??
-        meta.presetStyle;
+      const presetStyle = meta.presetStyle;
       if (presetStyle !== undefined) {
         presetStylesEngine.addStyleRule(`[data-ws-component=${component}]`, {
           style: presetStyle,
         });
       }
     }
     presetStylesEngine.render();
-  }, [presetStyles]);
+  }, []);
 
   return null;
 };

diff --git a/apps/designer/app/shared/css-utils/generate-css-text.ts b/apps/designer/app/shared/css-utils/generate-css-text.ts
@@ -1,13 +1,13 @@
 import { json } from "@remix-run/node";
 import { db } from "@webstudio-is/project/server";
-import {
-  addGlobalRules,
-  getPresetStyleRules,
-  getStyleRules,
-} from "@webstudio-is/project";
+import { addGlobalRules, getStyleRules } from "@webstudio-is/project";
 import { loadCanvasData } from "~/shared/db";
 import { createCssEngine } from "@webstudio-is/css-engine";
-import { idAttribute } from "@webstudio-is/react-sdk";
+import {
+  getComponentMeta,
+  getComponentNames,
+  idAttribute,
+} from "@webstudio-is/react-sdk";
 import type { BuildParams } from "../router-utils";
 
 export const generateCssText = async (buildParams: BuildParams) => {
@@ -35,9 +35,14 @@ export const generateCssText = async (buildParams: BuildParams) => {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
 
-  const presetStyleRules = getPresetStyleRules(canvasData.tree?.presetStyles);
-  for (const { component, style } of presetStyleRules) {
-    engine.addStyleRule(`[data-ws-component="${component}"]`, { style });
+  for (const component of getComponentNames()) {
+    const meta = getComponentMeta(component);
+    const presetStyle = meta.presetStyle;
+    if (presetStyle !== undefined) {
+      engine.addStyleRule(`[data-ws-component=${component}]`, {
+        style: presetStyle,
+      });
+    }
   }
 
   const styleRules = getStyleRules(canvasData.tree?.styles);

diff --git a/apps/designer/app/shared/nano-states/nano-states.ts b/apps/designer/app/shared/nano-states/nano-states.ts
@@ -1,11 +1,6 @@
 import { atom, computed, type WritableAtom } from "nanostores";
 import { useStore } from "@nanostores/react";
-import type {
-  ComponentName,
-  Instance,
-  PresetStyles,
-  Styles,
-} from "@webstudio-is/react-sdk";
+import type { ComponentName, Instance, Styles } from "@webstudio-is/react-sdk";
 import type {
   DropTargetChangePayload,
   DragStartPayload,
@@ -47,14 +42,6 @@ export const instancesIndexStore = computed(
   }
 );
 
-export const presetStylesContainer = atom<PresetStyles>([]);
-export const usePresetStyles = () => useValue(presetStylesContainer);
-export const useSetPresetStyles = (presetStyles: PresetStyles) => {
-  useSyncInitializeOnce(() => {
-    presetStylesContainer.set(presetStyles);
-  });
-};
-
 export const stylesContainer = atom<Styles>([]);
 /**
  * Indexed styles data is recomputed on every styles update

diff --git a/packages/project/src/db/tree.ts b/packages/project/src/db/tree.ts
@@ -5,8 +5,6 @@ import {
   type ComponentName,
   type InstancesItem,
   Instance,
-  PresetStyles,
-  findMissingPresetStyles,
   Styles,
   Instances,
   Props,
@@ -41,7 +39,6 @@ const normalizeTree = (instance: Instance, instances: InstancesItem[]) => {
 
 export const createTree = (): TreeData => {
   const root = utils.tree.createInstance({ component: "Body" });
-  const presetStyles = findMissingPresetStyles([], [root.component]);
   const styles: Styles = [];
   const instances: Instances = [];
   normalizeTree(root, instances);
@@ -50,7 +47,6 @@ export const createTree = (): TreeData => {
   return {
     root,
     props,
-    presetStyles,
     styles,
   };
 };
@@ -68,7 +64,6 @@ export const create = async (
       root: "",
       instances: JSON.stringify(instances),
       props: JSON.stringify(treeData.props),
-      presetStyles: JSON.stringify(treeData.presetStyles),
       styles: serializeStyles(treeData.styles),
     },
   });
@@ -118,14 +113,12 @@ export const loadById = async (
   const root = Instance.parse(denormalizeTree(instances));
 
   const props = Props.parse(JSON.parse(tree.props));
-  const presetStyles = PresetStyles.parse(JSON.parse(tree.presetStyles));
   const styles = await parseStyles(tree.styles);
 
   return {
     ...tree,
     root,
     props,
-    presetStyles,
     styles,
   };
 };
@@ -141,15 +134,6 @@ export const clone = async (
   return await create(tree, client);
 };
 
-const collectUsedComponents = (instance: Instance, components: Set<string>) => {
-  components.add(instance.component);
-  for (const child of instance.children) {
-    if (child.type === "instance") {
-      collectUsedComponents(child, components);
-    }
-  }
-};
-
 export const patch = async (
   { treeId }: { treeId: Tree["id"] },
   patches: Array<Patch>
@@ -159,13 +143,6 @@ export const patch = async (
     throw new Error(`Tree ${treeId} not found`);
   }
   const clientRoot = applyPatches(tree.root, patches);
-  const components = new Set<ComponentName>();
-  collectUsedComponents(tree.root, components);
-  const missingPresetStyles = findMissingPresetStyles(
-    tree.presetStyles,
-    Array.from(components)
-  );
-  const presetStyles = [...tree.presetStyles, ...missingPresetStyles];
 
   const root = Instance.parse(clientRoot);
   const instances: Instances = [];
@@ -175,7 +152,6 @@ export const patch = async (
     data: {
       root: "",
       instances: JSON.stringify(instances),
-      presetStyles: JSON.stringify(presetStyles),
     },
     where: { id: treeId },
   });

diff --git a/packages/project/src/shared/styles/style-rules.test.ts b/packages/project/src/shared/styles/style-rules.test.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "@jest/globals";
 import type { Styles } from "@webstudio-is/react-sdk";
-import { getStyleRules, getPresetStyleRules } from "./style-rules";
+import { getStyleRules } from "./style-rules";
 
 test("get a list of style rules grouped by instance and breakpoint", () => {
   const styles: Styles = [
@@ -60,50 +60,3 @@ test("get a list of style rules grouped by instance and breakpoint", () => {
     ]
   `);
 });
-
-test("get a list of preset styles grouped by component", () => {
-  expect(
-    getPresetStyleRules([
-      {
-        component: "Box",
-        property: "width",
-        value: { type: "keyword", value: "auto" },
-      },
-      {
-        component: "Box",
-        property: "height",
-        value: { type: "keyword", value: "auto" },
-      },
-      {
-        component: "Paragraph",
-        property: "width",
-        value: { type: "keyword", value: "auto" },
-      },
-    ])
-  ).toMatchInlineSnapshot(`
-    [
-      {
-        "component": "Box",
-        "style": {
-          "height": {
-            "type": "keyword",
-            "value": "auto",
-          },
-          "width": {
-            "type": "keyword",
-            "value": "auto",
-          },
-        },
-      },
-      {
-        "component": "Paragraph",
-        "style": {
-          "width": {
-            "type": "keyword",
-            "value": "auto",
-          },
-        },
-      },
-    ]
-  `);
-});
diff --git a/packages/project/src/shared/styles/style-rules.ts b/packages/project/src/shared/styles/style-rules.ts
@@ -1,5 +1,5 @@
 import type { Style } from "@webstudio-is/css-data";
-import type { PresetStyles, Styles } from "@webstudio-is/react-sdk";
+import type { Styles } from "@webstudio-is/react-sdk";
 
 type StyleRule = {
   instanceId: string;
@@ -23,24 +23,3 @@ export const getStyleRules = (styles?: Styles) => {
   }
   return Array.from(stylesMap.values());
 };
-
-type PresetStyleRule = {
-  component: string;
-  style: Style;
-};
-
-export const getPresetStyleRules = (presetStyles?: PresetStyles) => {
-  const presetStylesMap = new Map<string, PresetStyleRule>();
-  if (presetStyles === undefined) {
-    return [];
-  }
-  for (const { component, property, value } of presetStyles) {
-    let presetStyleRule = presetStylesMap.get(component);
-    if (presetStyleRule === undefined) {
-      presetStyleRule = { component, style: {} };
-      presetStylesMap.set(component, presetStyleRule);
-    }
-    presetStyleRule.style[property] = value;
-  }
-  return Array.from(presetStylesMap.values());
-};
diff --git a/packages/react-sdk/src/db/style.ts b/packages/react-sdk/src/db/style.ts
@@ -1,56 +1,9 @@
 import { z } from "zod";
 import {
   type StyleProperty,
-  StyleValue,
   SharedStyleValue,
   ImageValue,
 } from "@webstudio-is/css-data";
-import {
-  type ComponentName,
-  getComponentMeta,
-  getComponentNames,
-} from "../components";
-
-export const PresetStylesItem = z.object({
-  component: z.enum(getComponentNames() as [ComponentName]),
-  // @todo can't figure out how to make property to be enum
-  property: z.string() as z.ZodType<StyleProperty>,
-  value: SharedStyleValue as z.ZodType<StyleValue>,
-});
-
-export type PresetStylesItem = z.infer<typeof PresetStylesItem>;
-
-export const PresetStyles = z.array(PresetStylesItem);
-
-export type PresetStyles = z.infer<typeof PresetStyles>;
-
-export const findMissingPresetStyles = (
-  presetStyles: PresetStyles,
-  components: ComponentName[]
-) => {
-  const populatedComponents = new Set();
-  for (const style of presetStyles) {
-    populatedComponents.add(style.component);
-  }
-  const missingPresetStyles: PresetStyles = [];
-  for (const component of components) {
-    if (populatedComponents.has(component)) {
-      continue;
-    }
-    const meta = getComponentMeta(component);
-    if (meta.presetStyle === undefined) {
-      continue;
-    }
-    for (const [property, value] of Object.entries(meta.presetStyle)) {
-      missingPresetStyles.push({
-        component,
-        property: property as StyleProperty,
-        value,
-      });
-    }
-  }
-  return missingPresetStyles;
-};
 
 const StoredImageValue = z.object({
   type: z.literal("image"),

diff --git a/packages/react-sdk/src/db/types.ts b/packages/react-sdk/src/db/types.ts
@@ -1,13 +1,12 @@
 import type { InstanceProps as DbInstanceProps } from "@webstudio-is/prisma-client";
 import type { Instance } from "./instance";
 import type { Props, PropsItem } from "./props";
-import type { PresetStyles, Styles } from "./style";
+import type { Styles } from "./style";
 
 export type Tree = {
   id: string;
   root: Instance;
   props: Props;
-  presetStyles: PresetStyles;
   styles: Styles;
 };