@unlayer/types 1.386.1 → 1.386.3

package/README.md

@@ -25,14 +25,36 @@ const options: UnlayerOptions = {
   projectId: 12345,
 };
 
-// Work with designs
+// JSONTemplate types for each Display Mode
+type EmailDesign = JSONTemplate<'email'>; // body.values has preheaderText
+type PopupDesign = JSONTemplate<'popup'>; // body.values has popupPosition
+
+// Container and Tool types, e.g. BodyValues, RowValues, ButtonValues, etc
+type EmailBody = BodyValues<'email'>; // has preheaderText, lacks popupPosition
+type PopupBody = BodyValues<'popup'>; // has popupPosition, lacks preheaderText
+
+// The Unlayer instance propagates its display mode to method typings:
+declare const unlayer: UnlayerEditor<'email'>;
+unlayer.exportHtml((result) => {
+  const html = result.html;
+  const preheaderText = result.design.body.values.preheaderText; // typed, email-only field
+});
+
+// Alternatively, you can use the display mode generic on the method:
+unlayer.exportHtml<'popup'>((result) => {
+  const popupBackgroundColor = result.design.body.values.popupBackgroundColor; // available on popup mode
+  // @ts-expect-error
+  const preheaderText = result.design.body.values.preheaderText; // not available on popup mode
+});
+
+// Example of fully typed json manipulation
 function handleDesign(design: JSONTemplate) {
   for (const row of design.body.rows) {
     for (const column of row.columns) {
       for (const content of column.contents) {
         if (content.type === 'button') {
           // content.values type is narrowed to ButtonValues
-          console.info(content.values.buttonColors);
+          console.info('Button found', content.id, content.values.buttonColors);
         }
       }
     }
@@ -40,24 +62,6 @@ function handleDesign(design: JSONTemplate) {
 }
 ```
 
-### Display mode generics
-
-Export methods accept a display mode generic that narrows the design types:
-
-```ts
-type EmailDesign = JSONTemplate<'email'>; // body.values has preheaderText
-type PopupDesign = JSONTemplate<'popup'>; // body.values has popupPosition
-
-type EmailBody = BodyValues<'email'>; // has preheaderText, lacks popupPosition
-type PopupBody = BodyValues<'popup'>; // has popupPosition, lacks preheaderText
-
-declare const unlayer: UnlayerEditor;
-unlayer.exportHtml<'email'>((result) => {
-  const html = result.html;
-  const preheaderText = result.design.body.values.preheaderText; // typed, email-only field
-});
-```
-
 ## License
 
 MIT

package/dist/editor/editor.d.ts

@@ -201,7 +201,7 @@ declare class Frame {
     receiveMessage(event: any): void;
 }
 
-declare class EditorClass {
+declare class EditorClass<TClassDisplayMode extends DisplayMode | undefined = undefined> {
     frame: Frame | null;
     constructor(config?: Config);
     init(config?: Config): void;
@@ -239,14 +239,14 @@ declare class EditorClass {
     setTextDirection(textDirection: TextDirection | null): void;
     setTranslations(translations: Translations): void;
     loadBlank(bodyValues?: object): void;
-    loadDesign<TDisplayMode extends DisplayMode | undefined = undefined>(design: JSONTemplate<TDisplayMode>): void;
-    saveDesign<TDisplayMode extends DisplayMode | undefined = undefined>(callback: (data: JSONTemplate<TDisplayMode>) => void, options?: SaveDesignOptions): void;
-    exportHtml<TDisplayMode extends DisplayMode | undefined = undefined>(callback: (data: ExportHtmlResult<TDisplayMode>) => void, options?: ExportHtmlOptions): void;
-    exportLiveHtml<TDisplayMode extends DisplayMode | undefined = undefined>(callback: (data: ExportLiveHtmlResult<TDisplayMode>) => void, options?: ExportLiveHtmlOptions): void;
-    exportPlainText<TDisplayMode extends DisplayMode | undefined = undefined>(callback: (data: ExportPlainTextResult<TDisplayMode>) => void, options?: ExportPlainTextOptions): void;
-    exportImage<TDisplayMode extends DisplayMode | undefined = undefined>(callback: (data: ExportFromApiResult<TDisplayMode>) => void, options?: ExportImageFromApiOptions): void;
-    exportPdf<TDisplayMode extends DisplayMode | undefined = undefined>(callback: (data: ExportFromApiResult<TDisplayMode>) => void, options?: ExportPdfFromApiOptions): void;
-    exportZip<TDisplayMode extends DisplayMode | undefined = undefined>(callback: (data: ExportFromApiResult<TDisplayMode>) => void, options?: ExportZipFromApiOptions): void;
+    loadDesign<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(design: JSONTemplate<TDisplayMode>): void;
+    saveDesign<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(callback: (data: JSONTemplate<TDisplayMode>) => void, options?: SaveDesignOptions): void;
+    exportHtml<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(callback: (data: ExportHtmlResult<TDisplayMode>) => void, options?: ExportHtmlOptions): void;
+    exportLiveHtml<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(callback: (data: ExportLiveHtmlResult<TDisplayMode>) => void, options?: ExportLiveHtmlOptions): void;
+    exportPlainText<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(callback: (data: ExportPlainTextResult<TDisplayMode>) => void, options?: ExportPlainTextOptions): void;
+    exportImage<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(callback: (data: ExportFromApiResult<TDisplayMode>) => void, options?: ExportImageFromApiOptions): void;
+    exportPdf<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(callback: (data: ExportFromApiResult<TDisplayMode>) => void, options?: ExportPdfFromApiOptions): void;
+    exportZip<TDisplayMode extends DisplayMode | undefined = TClassDisplayMode>(callback: (data: ExportFromApiResult<TDisplayMode>) => void, options?: ExportZipFromApiOptions): void;
     setAppearance(appearance: DeepPartial<AppearanceConfig>): void;
     setTheme(theme: AppearanceConfig['theme']): void;
     setBodyValues(bodyValues: Partial<BodyValues>, bodyId?: number): void;
@@ -256,7 +256,7 @@ declare class EditorClass {
     showPreview(payload: {
         device?: Device;
         resolution?: number;
-    }): void;
+    } | Device): void;
     hidePreview(): void;
     canUndo(callback: (result: boolean) => void): void;
     canRedo(callback: (result: boolean) => void): void;
@@ -284,11 +284,19 @@ declare class EditorClass {
 }
 
 declare class Embed extends EditorClass {
-    createEditor(config: Config): EditorClass;
+    createEditor<TDisplayMode extends DisplayMode | undefined = undefined>(config: Config): EditorClass<TDisplayMode>;
 }
 
 declare const _default: Embed;
 
+export type UnlayerEditor<TDisplayMode extends DisplayMode | undefined = undefined> = EditorClass<TDisplayMode>;
+
+export type UnlayerEmbed<TDisplayMode extends DisplayMode | undefined = undefined> = Omit<Embed, keyof EditorClass> & EditorClass<TDisplayMode>;
+
+export type UnlayerOptions<TDisplayMode extends DisplayMode | undefined = undefined> = Omit<Config, 'displayMode'> & {
+    displayMode?: TDisplayMode extends undefined ? DisplayMode : TDisplayMode;
+};
+
 // ───────────────────────────────────────────────────────────────────────────
 // Other
 // ───────────────────────────────────────────────────────────────────────────
@@ -455,13 +463,3 @@ export interface WidgetConfig {
     mount: WidgetMountFn;
     render: WidgetRenderFn;
 }
-
-// ───────────────────────────────────────────────────────────────────────────
-// Main Exports
-// ───────────────────────────────────────────────────────────────────────────
-
-export type UnlayerEmbed = typeof _default;
-
-export type UnlayerOptions = Parameters<UnlayerEmbed['createEditor']>[0];
-
-export type UnlayerEditor = InstanceType<typeof EditorClass>;

package/dist/tools/button.d.ts

@@ -48,7 +48,6 @@ export type ButtonValues<
     label?: string;
   };
   buttonColors: {
-    [x: string]: unknown;
     color?: string;
     backgroundColor?: string;
     hoverColor?: string;

package/dist/tools/form.d.ts

@@ -81,7 +81,6 @@ export type FormValues<
   labelAlign: "left" | "center" | "right" | "justify";
   labelPadding: `${number}px` | `${number}px ${number}px` | `${number}px ${number}px ${number}px` | `${number}px ${number}px ${number}px ${number}px`;
   buttonColors: {
-    [x: string]: unknown;
     color?: string;
     backgroundColor?: string;
     hoverColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlayer/types",
-  "version": "1.386.1",
+  "version": "1.386.3",
   "license": "MIT",
   "private": false,
   "types": "./dist/index.d.ts",