From 169fd63d3de542a49eeb3efdce1816fcc65f6cd3 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Wed, 25 Jan 2023 17:30:46 +0300 Subject: [PATCH] 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. --- apps/designer/app/canvas/canvas.tsx | 2 - apps/designer/app/canvas/shared/styles.ts | 14 ++---- .../app/shared/css-utils/generate-css-text.ts | 23 +++++---- .../app/shared/nano-states/nano-states.ts | 15 +----- packages/project/src/db/tree.ts | 24 --------- .../src/shared/styles/style-rules.test.ts | 49 +------------------ .../project/src/shared/styles/style-rules.ts | 23 +-------- packages/react-sdk/src/db/style.ts | 47 ------------------ packages/react-sdk/src/db/types.ts | 3 +- 9 files changed, 21 insertions(+), 179 deletions(-) diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx index 53253e17d091..a2a167fd3d63 100644 --- 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 index 04691f113b25..232862fb9907 100644 --- 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,18 +102,11 @@ export const GlobalStyles = ({ assets }: { assets: Array }) => { 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, @@ -122,7 +114,7 @@ export const GlobalStyles = ({ assets }: { assets: Array }) => { } } 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 index 90b1f50418f4..981585cbc7ad 100644 --- 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 index 0f661f258ae1..17673857da36 100644 --- 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([]); -export const usePresetStyles = () => useValue(presetStylesContainer); -export const useSetPresetStyles = (presetStyles: PresetStyles) => { - useSyncInitializeOnce(() => { - presetStylesContainer.set(presetStyles); - }); -}; - export const stylesContainer = atom([]); /** * 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 index 03196843ad3b..d48b1bf1c4e4 100644 --- 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) => { - 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 @@ -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(); - 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 index e11e69c20503..b773941b5050 100644 --- 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 index 3572ffea65a0..952b1930ade1 100644 --- 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(); - 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 index 66be63c109cc..711bcc2e42f5 100644 --- 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, - value: SharedStyleValue as z.ZodType, -}); - -export type PresetStylesItem = z.infer; - -export const PresetStyles = z.array(PresetStylesItem); - -export type PresetStyles = z.infer; - -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 index 42dc55e754f3..6d2d6be743a2 100644 --- 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; };