Migrate from unlayer-types to @unlayer/types

demo/src/example/index.tsx

@@ -3,7 +3,10 @@ import styled from 'styled-components';
 
 import packageJson from '../../../package.json';
 import EmailEditor, { EditorRef, EmailEditorProps } from '../../../src'; // use react-email-editor instead
-import sample from './sample.json';
+import type { JSONTemplate } from '@unlayer/types';
+import _sample from './sample.json';
+
+const sample = _sample as any as JSONTemplate<'email'>;
 
 const Container = styled.div`
   display: flex;
@@ -71,11 +74,12 @@ const Example = () => {
       setPreview(false);
     } else {
       unlayer?.showPreview('desktop');
+      // unlayer?.showPreview({ device: 'desktop', resolution: 1024 })
       setPreview(true);
     }
   };
 
-  const onDesignLoad = (data) => {
+  const onDesignLoad = (data: { design: JSONTemplate<'email'> }) => {
     console.log('onDesignLoad', data);
   };
 

package.json

@@ -30,7 +30,7 @@
     }
   },
   "dependencies": {
-    "unlayer-types": "latest"
+    "@unlayer/types": "latest"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.2",

src/EmailEditor.tsx

@@ -4,19 +4,22 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
+import type { DisplayMode, UnlayerEditor } from '@unlayer/types';
 
 import pkg from '../package.json';
-import { Editor, EditorRef, EmailEditorProps } from './types';
+import { EditorRef, EmailEditorProps } from './types';
 import { loadScript } from './loadScript';
 
 const win = typeof window === 'undefined' ? { __unlayer_lastEditorId: 0 } : window
 win.__unlayer_lastEditorId = win.__unlayer_lastEditorId || 0;
 
-export const EmailEditor = React.forwardRef<EditorRef, EmailEditorProps>(
-  (props, ref) => {
+function EmailEditorInner<TDisplayMode extends DisplayMode | undefined = 'email'>(
+  props: EmailEditorProps<TDisplayMode>,
+  ref: React.Ref<EditorRef<TDisplayMode>>,
+) {
     const { onLoad, onReady, scriptUrl, minHeight = 500, style = {} } = props;
 
-    const [editor, setEditor] = useState<Editor | null>(null);
+    const [editor, setEditor] = useState<UnlayerEditor<TDisplayMode> | null>(null);
 
     const [hasLoadedEmbedScript, setHasLoadedEmbedScript] = useState(false);
 
@@ -25,10 +28,10 @@ export const EmailEditor = React.forwardRef<EditorRef, EmailEditorProps>(
       [props.editorId]
     );
 
-    const options: EmailEditorProps['options'] = {
+    const options = {
       ...(props.options || {}),
       appearance: props.appearance ?? props.options?.appearance,
-      displayMode: props?.displayMode || props.options?.displayMode || 'email',
+      displayMode: props?.displayMode || props.options?.displayMode || 'email' as const,
       locale: props.locale ?? props.options?.locale,
       projectId: props.projectId ?? props.options?.projectId,
       tools: props.tools ?? props.options?.tools,
@@ -103,5 +106,10 @@ export const EmailEditor = React.forwardRef<EditorRef, EmailEditorProps>(
         <div id={editorId} style={{ ...style, flex: 1 }} />
       </div>
     );
-  }
-);
+}
+
+export const EmailEditor = React.forwardRef(EmailEditorInner) as <
+  TDisplayMode extends DisplayMode | undefined = 'email',
+>(
+  props: EmailEditorProps<TDisplayMode> & React.RefAttributes<EditorRef<TDisplayMode>>,
+) => React.ReactElement | null;

src/types.ts

@@ -1,33 +1,32 @@
-/// <reference path="../node_modules/unlayer-types/embed.d.ts" />
-
 import { CSSProperties } from 'react';
 
-import Embed from 'embed/index';
-import { Editor as EditorClass } from 'embed/Editor';
-import { AppearanceConfig, DisplayMode, ToolsConfig } from 'state/types/types';
-
-export type Unlayer = typeof Embed;
-export type UnlayerOptions = Parameters<Unlayer['createEditor']>[0];
-export type Editor = InstanceType<typeof EditorClass>;
-
-export interface EditorRef {
-  editor: Editor | null;
+import type {
+  AppearanceConfig,
+  DisplayMode,
+  ToolsConfig,
+  UnlayerEditor,
+  UnlayerEmbed,
+  UnlayerOptions,
+} from '@unlayer/types';
+
+export interface EditorRef<TDisplayMode extends DisplayMode | undefined = 'email'> {
+  editor: UnlayerEditor<TDisplayMode> | null;
 }
 
-export interface EmailEditorProps {
+export interface EmailEditorProps<TDisplayMode extends DisplayMode | undefined = 'email'> {
   editorId?: string | undefined;
   minHeight?: number | string | undefined;
-  onLoad?(unlayer: Editor): void;
-  onReady?(unlayer: Editor): void;
-  options?: UnlayerOptions | undefined;
+  onLoad?(unlayer: UnlayerEditor<TDisplayMode>): void;
+  onReady?(unlayer: UnlayerEditor<TDisplayMode>): void;
+  options?: Omit<UnlayerOptions, 'displayMode'> & { displayMode?: TDisplayMode };
   scriptUrl?: string | undefined;
   style?: CSSProperties | undefined;
 
   // redundant props -- already available in options
   /** @deprecated */
   appearance?: AppearanceConfig | undefined;
-  /** @deprecated */
-  displayMode?: DisplayMode;
+  /** @deprecated Use options.displayMode instead */
+  displayMode?: TDisplayMode;
   /** @deprecated */
   locale?: string | undefined;
   /** @deprecated */
@@ -37,7 +36,7 @@ export interface EmailEditorProps {
 }
 
 declare global {
-  const unlayer: Unlayer;
+  const unlayer: UnlayerEmbed;
 
   interface Window {
     __unlayer_lastEditorId: number;