From 2cdfff21f4788a25fbf82dcb9217c90dbbd47a22 Mon Sep 17 00:00:00 2001 From: Liad Yosef Date: Mon, 9 Dec 2024 23:20:32 +0200 Subject: [PATCH] organize types --- .../canvas-strategies/canvas-strategy-types.ts | 6 ++++-- .../src/components/canvas/plugins/style-plugins.ts | 7 ++++--- .../tailwind-responsive-utils.ts | 5 ++--- .../update-class-list.ts | 5 ++--- .../canvas/plugins/tailwind-style-plugin.ts | 13 +++---------- 5 files changed, 15 insertions(+), 21 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts index 0e98222ddd13..03da8982132a 100644 --- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts +++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts @@ -112,10 +112,12 @@ export function controlWithProps

(value: ControlWithProps

): ControlWithProp export type StyleInfoReader = (elementPath: ElementPath) => StyleInfo | null -export type StyleInfoFactory = (context: { +export type StyleInfoContext = { projectContents: ProjectContentTreeRoot jsxMetadata: ElementInstanceMetadataMap -}) => StyleInfoReader +} + +export type StyleInfoFactory = (context: StyleInfoContext) => StyleInfoReader export interface InteractionCanvasState { interactionTarget: InteractionTarget diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts index 206f63d2daff..e3569302dc9a 100644 --- a/editor/src/components/canvas/plugins/style-plugins.ts +++ b/editor/src/components/canvas/plugins/style-plugins.ts @@ -51,15 +51,16 @@ export function deleteCSSProp(property: string): DeleteCSSProp { export type StyleUpdate = UpdateCSSProp | DeleteCSSProp +export type StylePluginContext = { + sceneWidth?: number +} export interface StylePlugin { name: string styleInfoFactory: StyleInfoFactory readStyleFromElementProps: ( attributes: JSXAttributes, prop: T, - context?: { - sceneWidth?: number - }, + context: StylePluginContext, ) => CSSStyleProperty> | null updateStyles: ( editorState: EditorState, diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/tailwind-responsive-utils.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/tailwind-responsive-utils.ts index 7cda77cbb34f..3e0f6ca423c6 100644 --- a/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/tailwind-responsive-utils.ts +++ b/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/tailwind-responsive-utils.ts @@ -5,6 +5,7 @@ import { extractScreenSizeFromCss } from '../../responsive-utils' import { TailwindPropertyMapping } from '../tailwind-style-plugin' import { parseTailwindPropertyFactory } from '../tailwind-style-plugin' import { getTailwindClassMapping } from '../tailwind-style-plugin' +import type { StylePluginContext } from '../style-plugins' export const TAILWIND_DEFAULT_SCREENS = { sm: '640px', @@ -82,9 +83,7 @@ export function getPropertiesToAppliedModifiersMap( currentClassNameAttribute: string, propertyNames: string[], config: Config | null, - context: { - sceneWidth?: number - }, + context: StylePluginContext, ): Record { const parseTailwindProperty = parseTailwindPropertyFactory(config, context) const classMapping = getTailwindClassMapping(currentClassNameAttribute.split(' '), config) diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts index cf55d6460b90..e22d61796e89 100644 --- a/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts +++ b/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts @@ -20,6 +20,7 @@ import { applyValuesAtPath } from '../../commands/utils/property-utils' import * as PP from '../../../../core/shared/property-path' import type { Config } from 'tailwindcss/types/config' import { getPropertiesToAppliedModifiersMap } from './tailwind-responsive-utils' +import type { StylePluginContext } from '../style-plugins' export type ClassListUpdate = | { type: 'add'; property: string; value: string } @@ -40,9 +41,7 @@ export const runUpdateClassList = ( element: ElementPath, classNameUpdates: ClassListUpdate[], config: Config | null, - context: { - sceneWidth?: number - }, + context: StylePluginContext, ): EditorStateWithPatch => { const currentClassNameAttribute = getClassNameAttribute(getElementFromProjectContents(element, editorState.projectContents)) diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts index 7a7691a3ffd0..9eee2e85972c 100644 --- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts +++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts @@ -6,7 +6,7 @@ import { getElementFromProjectContents } from '../../editor/store/editor-state' import type { ParsedCSSProperties } from '../../inspector/common/css-utils' import { cssParsers } from '../../inspector/common/css-utils' import { mapDropNulls } from '../../../core/shared/array-utils' -import type { StylePlugin } from './style-plugins' +import type { StylePlugin, StylePluginContext } from './style-plugins' import type { Config } from 'tailwindcss/types/config' import type { ParsedVariant, StyleInfo } from '../canvas-types' import { cssStyleProperty, cssVariant, type CSSStyleProperty } from '../canvas-types' @@ -32,12 +32,7 @@ export type TailwindHoverModifier = { type: 'hover'; value: string } export type TailwindGeneralModifier = TailwindMediaModifier | TailwindHoverModifier export const parseTailwindPropertyFactory = - ( - config: Config | null, - context: { - sceneWidth?: number - }, - ) => + (config: Config | null, context: StylePluginContext) => ( styleDefinition: StyleValueVariants | undefined, prop: T, @@ -173,9 +168,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => { readStyleFromElementProps:

( attributes: JSXAttributes, prop: P, - context?: { - sceneWidth?: number - }, + context: StylePluginContext, ): CSSStyleProperty> | null => { const classNameAttribute = defaultEither( null,