From ed75f5ec3695455a3a57b641ef514efecf2ae259 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Tue, 17 May 2022 21:21:46 +0200 Subject: [PATCH] move publish and usePublish functions to sdk --- app/canvas/canvas.tsx | 2 +- .../wrapper-component/use-draggable.ts | 3 +-- app/canvas/shared/active-element.ts | 3 +-- app/canvas/shared/breakpoints.ts | 2 +- app/canvas/shared/copy-paste.ts | 2 +- app/canvas/shared/instance.ts | 3 ++- app/canvas/shared/pubsub.ts | 9 -------- app/canvas/shared/style.ts | 2 +- app/canvas/shared/sync/queue.ts | 2 +- app/canvas/shared/use-drag-drop-handlers.ts | 2 +- app/canvas/shared/use-shortcuts.ts | 3 +-- app/designer/designer.tsx | 4 ++-- .../features/breadcrumbs/Breadcrumbs.tsx | 3 +-- .../breakpoints/breakpoints-editor.tsx | 3 +-- .../features/breakpoints/breakpoints.tsx | 3 +-- .../breakpoints/use-subscribe-breakpoints.ts | 3 +-- .../breakpoints/use-subscribe-shortcuts.ts | 2 +- app/designer/features/inspector/inspector.tsx | 2 +- .../settings-panel/settings-panel.tsx | 3 +-- .../settings-panel/use-props-logic.ts | 8 +++++-- .../sidebar-left/panels/components.tsx | 3 +-- .../features/sidebar-left/panels/tree.tsx | 3 +-- .../features/sidebar-left/sidebar-left.tsx | 2 +- .../features/style-panel/style-panel.tsx | 2 +- .../features/style-panel/use-style-data.ts | 3 +-- app/designer/features/topbar/menu/menu.tsx | 2 +- app/designer/features/topbar/preview.tsx | 6 ++--- app/designer/features/topbar/publish.tsx | 6 ++--- app/designer/features/topbar/share.tsx | 6 ++--- app/designer/features/topbar/topbar.tsx | 17 +++++++------- app/designer/shared/canvas-iframe/index.ts | 1 - app/designer/shared/canvas-iframe/pubsub.ts | 23 ------------------- .../shared/shortcuts/use-publish-shortcuts.ts | 2 +- package.json | 2 +- yarn.lock | 8 +++---- 35 files changed, 55 insertions(+), 95 deletions(-) delete mode 100644 app/canvas/shared/pubsub.ts delete mode 100644 app/designer/shared/canvas-iframe/pubsub.ts diff --git a/app/canvas/canvas.tsx b/app/canvas/canvas.tsx index c576a43689..e2a8b1f1c2 100644 --- a/app/canvas/canvas.tsx +++ b/app/canvas/canvas.tsx @@ -10,8 +10,8 @@ import { WrapperComponent, globalStyles, Project, + useSubscribe, } from "@webstudio-is/sdk"; -import { useSubscribe } from "./shared/pubsub"; import { createElementsTree, setInstanceChildrenMutable, diff --git a/app/canvas/features/wrapper-component/use-draggable.ts b/app/canvas/features/wrapper-component/use-draggable.ts index 89c680a271..79b87960b6 100644 --- a/app/canvas/features/wrapper-component/use-draggable.ts +++ b/app/canvas/features/wrapper-component/use-draggable.ts @@ -1,8 +1,7 @@ import { useCallback, useEffect, useRef } from "react"; import { useDrag } from "react-dnd"; -import { type Instance } from "@webstudio-is/sdk"; +import { type Instance, publish } from "@webstudio-is/sdk"; import { type DragData } from "~/shared/component"; -import { publish } from "../../shared/pubsub"; //import { usePointerOutline } from "~/canvas/hooks"; type UseDraggable = { diff --git a/app/canvas/shared/active-element.ts b/app/canvas/shared/active-element.ts index d0503082b8..d49e7809ae 100644 --- a/app/canvas/shared/active-element.ts +++ b/app/canvas/shared/active-element.ts @@ -1,12 +1,11 @@ import { useCallback, useEffect } from "react"; -import { type Instance } from "@webstudio-is/sdk"; +import { type Instance, publish, useSubscribe } from "@webstudio-is/sdk"; import { findInstanceById } from "~/shared/tree-utils"; import { useSelectedInstance, useSelectedElement, useRootInstance, } from "./nano-values"; -import { publish, useSubscribe } from "./pubsub"; const eventOptions = { passive: true, diff --git a/app/canvas/shared/breakpoints.ts b/app/canvas/shared/breakpoints.ts index a4443ede4e..e52934c9f4 100644 --- a/app/canvas/shared/breakpoints.ts +++ b/app/canvas/shared/breakpoints.ts @@ -4,13 +4,13 @@ import { type Breakpoint, useSubscribe, setBreakpoints, + publish, } from "@webstudio-is/sdk"; import { useBreakpoints, breakpointsContainer, rootInstanceContainer, } from "./nano-values"; -import { publish } from "./pubsub"; import { deleteCssRulesByBreakpoint } from "~/shared/css-utils"; store.register("breakpoints", breakpointsContainer); diff --git a/app/canvas/shared/copy-paste.ts b/app/canvas/shared/copy-paste.ts index c56c8dfa28..c2c225acac 100644 --- a/app/canvas/shared/copy-paste.ts +++ b/app/canvas/shared/copy-paste.ts @@ -2,11 +2,11 @@ import { type InstanceProps, type Instance, allUserPropsContainer, + publish, } from "@webstudio-is/sdk"; import { selectedInstanceContainer } from "./nano-values"; import { cloneInstance } from "~/shared/tree-utils"; import { cloneProps } from "~/shared/props-utils"; -import { publish } from "./pubsub"; let currentInstance: Instance | undefined; let currentProps: InstanceProps | undefined; diff --git a/app/canvas/shared/instance.ts b/app/canvas/shared/instance.ts index 377236f9cf..52c5f59abe 100644 --- a/app/canvas/shared/instance.ts +++ b/app/canvas/shared/instance.ts @@ -7,6 +7,8 @@ import { allUserPropsContainer, getBrowserStyle, useAllUserProps, + useSubscribe, + publish, } from "@webstudio-is/sdk"; import { deleteInstanceMutable, @@ -24,7 +26,6 @@ import { useSelectedInstance, useSelectedElement, } from "./nano-values"; -import { useSubscribe, publish } from "./pubsub"; export const usePopulateRootInstance = (tree: Tree) => { const [, setRootInstance] = useRootInstance(); diff --git a/app/canvas/shared/pubsub.ts b/app/canvas/shared/pubsub.ts deleted file mode 100644 index 72a6ce25ac..0000000000 --- a/app/canvas/shared/pubsub.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { useSubscribe } from "@webstudio-is/sdk"; - -export const publish = (action: { - type: Type; - payload?: Payload; -}) => { - window.parent.postMessage(action, "*"); - window.postMessage(action, "*"); -}; diff --git a/app/canvas/shared/style.ts b/app/canvas/shared/style.ts index 3b89b60a0b..5ac8bbd79a 100644 --- a/app/canvas/shared/style.ts +++ b/app/canvas/shared/style.ts @@ -1,8 +1,8 @@ import store from "immerhin"; +import { useSubscribe } from "@webstudio-is/sdk"; import { type StyleUpdates } from "~/shared/component"; import { setInstanceStyleMutable } from "~/shared/tree-utils"; import { rootInstanceContainer, useSelectedInstance } from "./nano-values"; -import { useSubscribe } from "./pubsub"; export const useUpdateStyle = () => { const [selectedInstance] = useSelectedInstance(); diff --git a/app/canvas/shared/sync/queue.ts b/app/canvas/shared/sync/queue.ts index 437f0964bf..87ceb8c2af 100644 --- a/app/canvas/shared/sync/queue.ts +++ b/app/canvas/shared/sync/queue.ts @@ -1,5 +1,5 @@ import { type SyncStatus } from "~/shared/sync"; -import { publish } from "../pubsub"; +import { publish } from "@webstudio-is/sdk"; // @todo because of limitation with nested models and saving tree as a Json type // we load that entire Json to manipulate and if a second request happens before the first one has written diff --git a/app/canvas/shared/use-drag-drop-handlers.ts b/app/canvas/shared/use-drag-drop-handlers.ts index 25754b2a67..c3a30206d6 100644 --- a/app/canvas/shared/use-drag-drop-handlers.ts +++ b/app/canvas/shared/use-drag-drop-handlers.ts @@ -1,5 +1,6 @@ import { useState } from "react"; import memoize from "lodash.memoize"; +import { publish, useSubscribe } from "@webstudio-is/sdk"; import { type DragData, type DropData } from "~/shared/component"; import { findInstanceById } from "~/shared/tree-utils"; import { @@ -12,7 +13,6 @@ import { useRootInstance, useSelectedInstance, } from "./nano-values"; -import { publish, useSubscribe } from "./pubsub"; //import {usePointerOutline} from './use-pointer-outline' // Avoid recalculating rects for each node during dragging. diff --git a/app/canvas/shared/use-shortcuts.ts b/app/canvas/shared/use-shortcuts.ts index 197a7725b1..af6e002f3e 100644 --- a/app/canvas/shared/use-shortcuts.ts +++ b/app/canvas/shared/use-shortcuts.ts @@ -1,9 +1,8 @@ import { useHotkeys } from "react-hotkeys-hook"; import store from "immerhin"; -import { type Instance } from "@webstudio-is/sdk"; +import { type Instance, publish, useSubscribe } from "@webstudio-is/sdk"; import { shortcuts, options } from "~/shared/shortcuts"; import { useRootInstance, useSelectedInstance } from "./nano-values"; -import { publish, useSubscribe } from "./pubsub"; import { copy, paste } from "./copy-paste"; type HandlerEvent = { diff --git a/app/designer/designer.tsx b/app/designer/designer.tsx index b87fb4580f..51ab418095 100644 --- a/app/designer/designer.tsx +++ b/app/designer/designer.tsx @@ -1,14 +1,14 @@ import { useCallback, useState } from "react"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; -import { type Project } from "@webstudio-is/sdk"; +import { type Project, useSubscribe, usePublish } from "@webstudio-is/sdk"; import type { Config } from "~/config"; import type { SelectedInstanceData } from "~/shared/component"; import { Box, Flex, Grid, type CSS } from "~/shared/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import { SidebarLeft } from "./features/sidebar-left"; import { Inspector } from "./features/inspector"; -import { CanvasIframe, useSubscribe, usePublish } from "./shared/canvas-iframe"; +import { CanvasIframe } from "./shared/canvas-iframe"; import { useIsPreviewMode, useRootInstance, diff --git a/app/designer/features/breadcrumbs/Breadcrumbs.tsx b/app/designer/features/breadcrumbs/Breadcrumbs.tsx index 0c03fdd57e..0edadb61ba 100644 --- a/app/designer/features/breadcrumbs/Breadcrumbs.tsx +++ b/app/designer/features/breadcrumbs/Breadcrumbs.tsx @@ -1,8 +1,7 @@ import { ChevronRightIcon } from "~/shared/icons"; import { Button, Flex, Text } from "~/shared/design-system"; import { useSelectedInstancePath } from "../../shared/instance/use-selected-instance-path"; -import { Instance } from "@webstudio-is/sdk"; -import { Publish } from "../../shared/canvas-iframe"; +import { type Publish, type Instance } from "@webstudio-is/sdk"; import { useSelectedInstanceData } from "~/designer/shared/nano-values"; type BreadcrumbProps = { diff --git a/app/designer/features/breakpoints/breakpoints-editor.tsx b/app/designer/features/breakpoints/breakpoints-editor.tsx index b966abc8da..6d0a263c8b 100644 --- a/app/designer/features/breakpoints/breakpoints-editor.tsx +++ b/app/designer/features/breakpoints/breakpoints-editor.tsx @@ -1,9 +1,8 @@ import { useState } from "react"; import useDebounce from "react-use/lib/useDebounce"; -import { type Breakpoint } from "@webstudio-is/sdk"; +import { type Breakpoint, type Publish } from "@webstudio-is/sdk"; import { Button, TextField, Flex, Text } from "~/shared/design-system"; import { PlusIcon, TrashIcon } from "~/shared/icons"; -import { type Publish } from "~/designer/shared/canvas-iframe"; import ObjectId from "bson-objectid"; import { useBreakpoints } from "~/designer/shared/nano-values"; diff --git a/app/designer/features/breakpoints/breakpoints.tsx b/app/designer/features/breakpoints/breakpoints.tsx index 2c9fa06a83..e2764cf836 100644 --- a/app/designer/features/breakpoints/breakpoints.tsx +++ b/app/designer/features/breakpoints/breakpoints.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { useSubscribe, type Breakpoint } from "@webstudio-is/sdk"; +import { useSubscribe, type Breakpoint, type Publish } from "@webstudio-is/sdk"; import { DropdownMenu, DropdownMenuContent, @@ -12,7 +12,6 @@ import { Flex, } from "~/shared/design-system"; import { sort } from "~/shared/breakpoints"; -import { type Publish } from "../../shared/canvas-iframe"; import { useBreakpoints, useSelectedBreakpoint, diff --git a/app/designer/features/breakpoints/use-subscribe-breakpoints.ts b/app/designer/features/breakpoints/use-subscribe-breakpoints.ts index b20b250abb..5855b375d8 100644 --- a/app/designer/features/breakpoints/use-subscribe-breakpoints.ts +++ b/app/designer/features/breakpoints/use-subscribe-breakpoints.ts @@ -1,6 +1,5 @@ import { useEffect } from "react"; -import { Breakpoint } from "@webstudio-is/sdk"; -import { useSubscribe } from "~/designer/shared/canvas-iframe"; +import { Breakpoint, useSubscribe } from "@webstudio-is/sdk"; import { useBreakpoints, useSelectedBreakpoint, diff --git a/app/designer/features/breakpoints/use-subscribe-shortcuts.ts b/app/designer/features/breakpoints/use-subscribe-shortcuts.ts index 6ce18ad6f0..4fcee97e79 100644 --- a/app/designer/features/breakpoints/use-subscribe-shortcuts.ts +++ b/app/designer/features/breakpoints/use-subscribe-shortcuts.ts @@ -1,4 +1,4 @@ -import { useSubscribe } from "~/designer/shared/canvas-iframe"; +import { useSubscribe } from "@webstudio-is/sdk"; import { sort } from "~/shared/breakpoints"; import { useBreakpoints, diff --git a/app/designer/features/inspector/inspector.tsx b/app/designer/features/inspector/inspector.tsx index 1f4eb1a004..74f6517aa9 100644 --- a/app/designer/features/inspector/inspector.tsx +++ b/app/designer/features/inspector/inspector.tsx @@ -1,3 +1,4 @@ +import type { Publish } from "@webstudio-is/sdk"; import { Tabs, TabsList, @@ -9,7 +10,6 @@ import { } from "~/shared/design-system"; import { StylePanel } from "~/designer/features/style-panel"; import { SettingsPanel } from "~/designer/features/settings-panel"; -import type { Publish } from "~/designer/shared/canvas-iframe"; import { BrushIcon, GearIcon } from "~/shared/icons"; import { useSelectedInstanceData } from "~/designer/shared/nano-values"; diff --git a/app/designer/features/settings-panel/settings-panel.tsx b/app/designer/features/settings-panel/settings-panel.tsx index ea4820b472..72f4c365d0 100644 --- a/app/designer/features/settings-panel/settings-panel.tsx +++ b/app/designer/features/settings-panel/settings-panel.tsx @@ -1,6 +1,5 @@ -import { type UserProp } from "@webstudio-is/sdk"; +import { type UserProp, type Publish } from "@webstudio-is/sdk"; import { CollapsibleSection, ComponentInfo } from "~/designer/shared/inspector"; -import type { Publish } from "~/designer/shared/canvas-iframe"; import { TextField, Flex, Button, Box } from "~/shared/design-system"; import { PlusIcon, TrashIcon } from "~/shared/icons"; import type { SelectedInstanceData } from "~/shared/component"; diff --git a/app/designer/features/settings-panel/use-props-logic.ts b/app/designer/features/settings-panel/use-props-logic.ts index fd4cb10bc7..541cf69b0f 100644 --- a/app/designer/features/settings-panel/use-props-logic.ts +++ b/app/designer/features/settings-panel/use-props-logic.ts @@ -2,8 +2,12 @@ import produce from "immer"; import { useState, useCallback, useEffect, useRef } from "react"; import debounce from "lodash.debounce"; import ObjectId from "bson-objectid"; -import type { DeleteProp, UserProp, UserPropsUpdates } from "@webstudio-is/sdk"; -import type { Publish } from "~/designer/shared/canvas-iframe"; +import type { + DeleteProp, + UserProp, + UserPropsUpdates, + Publish, +} from "@webstudio-is/sdk"; import type { SelectedInstanceData } from "~/shared/component"; const getInitialProp = () => ({ diff --git a/app/designer/features/sidebar-left/panels/components.tsx b/app/designer/features/sidebar-left/panels/components.tsx index f2eb88c2a4..34615cbf38 100644 --- a/app/designer/features/sidebar-left/panels/components.tsx +++ b/app/designer/features/sidebar-left/panels/components.tsx @@ -1,10 +1,9 @@ import { useEffect, useRef, type MouseEventHandler, useCallback } from "react"; import { useDrag } from "react-dnd"; -import { type Instance } from "@webstudio-is/sdk"; +import { type Instance, type Publish } from "@webstudio-is/sdk"; import { Flex, Text } from "~/shared/design-system"; import { PlusIcon } from "~/shared/icons"; import { primitives, type DragData } from "~/shared/component"; -import { type Publish } from "~/designer/shared/canvas-iframe"; import { createInstance } from "~/shared/tree-utils"; import { CustomDragLayer } from "../custom-drag-layer"; import type { TabName } from "../types"; diff --git a/app/designer/features/sidebar-left/panels/tree.tsx b/app/designer/features/sidebar-left/panels/tree.tsx index 3db9175516..ac7d9a5402 100644 --- a/app/designer/features/sidebar-left/panels/tree.tsx +++ b/app/designer/features/sidebar-left/panels/tree.tsx @@ -1,8 +1,7 @@ -import { type Instance } from "@webstudio-is/sdk"; +import { type Instance, type Publish } from "@webstudio-is/sdk"; import { ListNestedIcon } from "~/shared/icons"; import { Flex } from "~/shared/design-system"; import { type SelectedInstanceData } from "~/shared/component"; -import { type Publish } from "~/designer/shared/canvas-iframe"; import { useSelectedInstancePath } from "~/designer/shared/instance/use-selected-instance-path"; import { useRootInstance } from "~/designer/shared/nano-values"; import { Tree } from "~/designer/shared/tree"; diff --git a/app/designer/features/sidebar-left/sidebar-left.tsx b/app/designer/features/sidebar-left/sidebar-left.tsx index 4a58d0e70e..1622fa0a1e 100644 --- a/app/designer/features/sidebar-left/sidebar-left.tsx +++ b/app/designer/features/sidebar-left/sidebar-left.tsx @@ -1,4 +1,5 @@ import { useState, useCallback } from "react"; +import { useSubscribe, type Publish } from "@webstudio-is/sdk"; import { Box, SidebarTabs, @@ -6,7 +7,6 @@ import { SidebarTabsList, SidebarTabsTrigger, } from "~/shared/design-system"; -import { useSubscribe, type Publish } from "../../shared/canvas-iframe"; import { useSelectedInstanceData } from "../../shared/nano-values"; import * as panels from "./panels"; import type { TabName } from "./types"; diff --git a/app/designer/features/style-panel/style-panel.tsx b/app/designer/features/style-panel/style-panel.tsx index 858da6d6f6..c386431dd7 100644 --- a/app/designer/features/style-panel/style-panel.tsx +++ b/app/designer/features/style-panel/style-panel.tsx @@ -1,4 +1,4 @@ -import type { Publish } from "~/designer/shared/canvas-iframe"; +import type { Publish } from "@webstudio-is/sdk"; import { willRender } from "~/designer/shared/breakpoints"; import { Box, Card, Paragraph } from "~/shared/design-system"; import type { SelectedInstanceData } from "~/shared/component"; diff --git a/app/designer/features/style-panel/use-style-data.ts b/app/designer/features/style-panel/use-style-data.ts index a6ff7626f6..b09e54e61c 100644 --- a/app/designer/features/style-panel/use-style-data.ts +++ b/app/designer/features/style-panel/use-style-data.ts @@ -1,7 +1,6 @@ import { useState, useMemo, useEffect, useCallback } from "react"; import type { SelectedInstanceData, StyleUpdates } from "~/shared/component"; -import { type StyleProperty } from "@webstudio-is/sdk"; -import { type Publish } from "~/designer/shared/canvas-iframe"; +import { type StyleProperty, type Publish } from "@webstudio-is/sdk"; import { useRootInstance, useSelectedBreakpoint, diff --git a/app/designer/features/topbar/menu/menu.tsx b/app/designer/features/topbar/menu/menu.tsx index 42349cf10e..4133fef988 100644 --- a/app/designer/features/topbar/menu/menu.tsx +++ b/app/designer/features/topbar/menu/menu.tsx @@ -1,4 +1,5 @@ import { useNavigate } from "react-router-dom"; +import { type Publish } from "@webstudio-is/sdk"; import { DropdownMenu, DropdownMenuContent, @@ -16,7 +17,6 @@ import { useIsShareDialogOpen, useIsPublishDialogOpen, } from "~/designer/shared/nano-values"; -import { type Publish } from "~/designer/shared/canvas-iframe"; const menuItemCss = { display: "flex", diff --git a/app/designer/features/topbar/preview.tsx b/app/designer/features/topbar/preview.tsx index 68298303bc..91a6b89ec7 100644 --- a/app/designer/features/topbar/preview.tsx +++ b/app/designer/features/topbar/preview.tsx @@ -1,13 +1,13 @@ +import { useSubscribe, type Publish } from "@webstudio-is/sdk"; import { EyeOpenIcon } from "~/shared/icons"; import { SimpleToggle } from "~/shared/design-system"; -import { useSubscribe, type Publish } from "~/designer/shared/canvas-iframe"; import { useIsPreviewMode } from "../../shared/nano-values"; -type PreviewProps = { +type PreviewButtonProps = { publish: Publish; }; -export const Preview = ({ publish }: PreviewProps) => { +export const PreviewButton = ({ publish }: PreviewButtonProps) => { const [isPreviewMode, setIsPreviewMode] = useIsPreviewMode(); const setValue = (value: boolean) => { diff --git a/app/designer/features/topbar/publish.tsx b/app/designer/features/topbar/publish.tsx index a120bfa2b6..e166b2083b 100644 --- a/app/designer/features/topbar/publish.tsx +++ b/app/designer/features/topbar/publish.tsx @@ -16,7 +16,7 @@ import { } from "~/shared/design-system"; import { useIsPublishDialogOpen } from "../../shared/nano-values"; -type PublishProps = { project: Project }; +type PublishButtonProps = { project: Project }; const host = typeof location === "object" @@ -25,7 +25,7 @@ const host = : location.host : ""; -const Content = ({ project }: PublishProps) => { +const Content = ({ project }: PublishButtonProps) => { const id = useId(); const fetcher = useFetcher(); const [url, setUrl] = useState(); @@ -90,7 +90,7 @@ const Content = ({ project }: PublishProps) => { ); }; -export const Publish = ({ project }: PublishProps) => { +export const PublishButton = ({ project }: PublishButtonProps) => { const [isOpen, setIsOpen] = useIsPublishDialogOpen(); return ( diff --git a/app/designer/features/topbar/share.tsx b/app/designer/features/topbar/share.tsx index 10b26d35c8..e46b27e962 100644 --- a/app/designer/features/topbar/share.tsx +++ b/app/designer/features/topbar/share.tsx @@ -11,9 +11,9 @@ import { Share1Icon } from "~/shared/icons"; import { type Project } from "@webstudio-is/sdk"; import { useIsShareDialogOpen } from "../../shared/nano-values"; -type ShareProps = { path: string; project: Project }; +type ShareButtonProps = { path: string; project: Project }; -const Content = ({ path, project }: ShareProps) => { +const Content = ({ path, project }: ShareButtonProps) => { if (typeof location === "undefined") { return null; } @@ -52,7 +52,7 @@ const Content = ({ path, project }: ShareProps) => { ); }; -export const Share = ({ path, project }: ShareProps) => { +export const ShareButton = ({ path, project }: ShareButtonProps) => { const [isOpen, setIsOpen] = useIsShareDialogOpen(); return ( diff --git a/app/designer/features/topbar/topbar.tsx b/app/designer/features/topbar/topbar.tsx index 567c550c7d..24c13813fd 100644 --- a/app/designer/features/topbar/topbar.tsx +++ b/app/designer/features/topbar/topbar.tsx @@ -1,19 +1,18 @@ -import type { Project } from "@webstudio-is/sdk"; +import type { Project, Publish } from "@webstudio-is/sdk"; import { Flex, type CSS } from "~/shared/design-system"; import type { Config } from "~/config"; -import { Preview } from "./preview"; -import { Share } from "./share"; -import { Publish } from "./publish"; +import { PreviewButton } from "./preview"; +import { ShareButton } from "./share"; +import { PublishButton } from "./publish"; import { SyncStatus } from "./sync-status"; import { Menu } from "./menu"; import { Breakpoints } from "../breakpoints"; -import { type Publish as PublishOnCanvas } from "../../shared/canvas-iframe"; type TopbarProps = { config: Config; css: CSS; project: Project; - publish: PublishOnCanvas; + publish: Publish; }; export const Topbar = ({ config, css, project, publish }: TopbarProps) => { @@ -33,9 +32,9 @@ export const Topbar = ({ config, css, project, publish }: TopbarProps) => { - - - + + + ); diff --git a/app/designer/shared/canvas-iframe/index.ts b/app/designer/shared/canvas-iframe/index.ts index 321fa7b27c..c9935a225b 100644 --- a/app/designer/shared/canvas-iframe/index.ts +++ b/app/designer/shared/canvas-iframe/index.ts @@ -1,2 +1 @@ export { CanvasIframe } from "./canvas-iframe"; -export * from "./pubsub"; diff --git a/app/designer/shared/canvas-iframe/pubsub.ts b/app/designer/shared/canvas-iframe/pubsub.ts deleted file mode 100644 index c56af0ed86..0000000000 --- a/app/designer/shared/canvas-iframe/pubsub.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { useRef, useCallback, MutableRefObject } from "react"; -export { useSubscribe } from "@webstudio-is/sdk"; - -export type Publish = (action: { - type: Type; - payload?: Payload; -}) => void; - -type UsePublish = [Publish, MutableRefObject]; - -export const usePublish = (): UsePublish => { - const iframeRef = useRef(null); - const publish = useCallback( - (action) => { - const element = iframeRef.current; - if (element?.contentWindow == null) return; - element.contentWindow.postMessage(action, "*"); - window.postMessage(action, "*"); - }, - [iframeRef] - ); - return [publish, iframeRef]; -}; diff --git a/app/designer/shared/shortcuts/use-publish-shortcuts.ts b/app/designer/shared/shortcuts/use-publish-shortcuts.ts index f6fe6ecb3d..95a14b76de 100644 --- a/app/designer/shared/shortcuts/use-publish-shortcuts.ts +++ b/app/designer/shared/shortcuts/use-publish-shortcuts.ts @@ -1,5 +1,5 @@ import { useHotkeys } from "react-hotkeys-hook"; -import { type Publish } from "~/designer/shared/canvas-iframe"; +import { type Publish } from "@webstudio-is/sdk"; import { shortcuts, options } from "~/shared/shortcuts"; const names = Object.keys(shortcuts) as Array; diff --git a/package.json b/package.json index 8be6ed4c8e..98ca0d4021 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "@remix-run/serve": "^1.2.3", "@remix-run/vercel": "^1.2.3", "@stitches/react": "^1.2.7", - "@webstudio-is/sdk": "^0.2.2", + "@webstudio-is/sdk": "^0.2.3", "bson-objectid": "^2.0.2", "camelcase": "^6.3.0", "hyphenate-style-name": "^1.0.4", diff --git a/yarn.lock b/yarn.lock index 7b3a747701..40f1b4f79c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1814,10 +1814,10 @@ dependencies: web-streams-polyfill "^3.1.1" -"@webstudio-is/sdk@^0.2.2": - version "0.2.2" - resolved "https://registry.yarnpkg.com/@webstudio-is/sdk/-/sdk-0.2.2.tgz#1e51286f7a29d1b427ce867f6f62be245c654fa5" - integrity sha512-FODU8hr96m0ZwuMrLaV82KUeCaIiuAE1bn0e7il0QMkceVq1C53AnZaGrWKz0TV+2NWBEOyJ557F8G1aOWBvLg== +"@webstudio-is/sdk@^0.2.3": + version "0.2.3" + resolved "https://registry.yarnpkg.com/@webstudio-is/sdk/-/sdk-0.2.3.tgz#6c07032b34a3b76e526e754eb9b6033743bfa28d" + integrity sha512-dOmjaszBuRj0GMaBauM141/dS9Fc/hqZRhe6E+aN0CiofMN3qDiKUBAeDye0kM8+0LdduALGuzmLaQqnaEp9Ng== dependencies: "@prisma/client" "^3.10.0" "@stitches/core" "^1.2.7"