move publish and usePublish functions to sdk

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,

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 = {

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,

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);

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;

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();

app/canvas/shared/pubsub.ts

@@ -1,9 +0,0 @@
-export { useSubscribe } from "@webstudio-is/sdk";
-
-export const publish = <Type extends string, Payload = undefined>(action: {
-  type: Type;
-  payload?: Payload;
-}) => {
-  window.parent.postMessage(action, "*");
-  window.postMessage(action, "*");
-};

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();

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

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.

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 = {

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,

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 = {

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";
 

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,

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,

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,

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";
 

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";

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 = () => ({

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";

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";

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";

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";

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,

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",

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) => {

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<string>();
@@ -90,7 +90,7 @@ const Content = ({ project }: PublishProps) => {
   );
 };
 
-export const Publish = ({ project }: PublishProps) => {
+export const PublishButton = ({ project }: PublishButtonProps) => {
   const [isOpen, setIsOpen] = useIsPublishDialogOpen();
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>

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 (
     <Popover open={isOpen} onOpenChange={setIsOpen}>

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) => {
       <Breakpoints publish={publish} />
       <Flex gap="1" align="center">
         <SyncStatus />
-        <Preview publish={publish} />
-        <Share path={config.previewPath} project={project} />
-        <Publish project={project} />
+        <PreviewButton publish={publish} />
+        <ShareButton path={config.previewPath} project={project} />
+        <PublishButton project={project} />
       </Flex>
     </Flex>
   );

app/designer/shared/canvas-iframe/index.ts

@@ -1,2 +1 @@
 export { CanvasIframe } from "./canvas-iframe";
-export * from "./pubsub";

app/designer/shared/canvas-iframe/pubsub.ts

@@ -1,23 +0,0 @@
-import { useRef, useCallback, MutableRefObject } from "react";
-export { useSubscribe } from "@webstudio-is/sdk";
-
-export type Publish = <Type, Payload = undefined>(action: {
-  type: Type;
-  payload?: Payload;
-}) => void;
-
-type UsePublish = [Publish, MutableRefObject<HTMLIFrameElement | null>];
-
-export const usePublish = (): UsePublish => {
-  const iframeRef = useRef<HTMLIFrameElement>(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];
-};

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<keyof typeof shortcuts>;

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",

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"