add typescript support, use unlayer-types package, add build commands

Author: omerzahidbajwa

jsconfig.json

@@ -1,53 +1,35 @@
 {
   "name": "vue-email-editor",
-  "version": "2.0.0",
-  "main": "./dist/vue-email-editor.common.js",
+  "version": "2.1.0",
+  "main": "vue-email-editor.es",
+  "types": "./components/index.d.ts",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --target lib --name vue-email-editor ./src/components/index.js",
     "lint": "vue-cli-service lint",
+    "build-dts": "touch ./dist/vue-email-editor.d.ts && cat ./dist/**/*.d.ts > ./dist/vue-email-editor.d.ts",
+    "copy-types": "cp ./src/components/types.ts ./dist/components/types.d.ts",
+    "build-bundle": "vite build && cd ./src/components && vue-tsc --emitDeclarationOnly && npm run copy-types",
     "release": "npm run build-bundle && npm publish"
   },
   "dependencies": {
-    "core-js": "^3.8.3",
+    "unlayer-types": "^1.52.0",
     "vue": "^3.2.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@babel/types": "^7.24.7",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "vue-router": "^4.0.16"
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "vue-dts-gen": "^0.3.0",
+    "vue-loader": "^17.4.2",
+    "vue-router": "^4.4.0",
+    "vue-template-compiler": "^2.7.16",
+    "vue-tsc": "^2.0.22"
   },
   "files": [
-    "dist/*",
-    "src/*",
-    "public/*",
-    "*.json",
-    "*.js"
-  ],
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
+    "dist"
   ]
 }

package-lock.json

@@ -6,28 +6,35 @@
   ></div>
 </template>
 
-<script>
-import { loadScript } from './loadScript';
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
 import pkg from '../../package.json';
-
+import { loadScript } from './loadScript';
+import { EmailEditorProps } from './types';
 let lastEditorId = 0;
 
-export default {
+export default defineComponent({
   name: 'EmailEditor',
   props: {
-    editorId: String,
-    options: Object,
-    projectId: Number,
-    tools: Object,
-    appearance: Object,
-    locale: String,
+    appearance: Object as PropType<EmailEditorProps['appearance']>,
+    displayMode: String as PropType<EmailEditorProps['displayMode']>,
+    editorId: String as PropType<EmailEditorProps['editorId']>,
+    locale: String as PropType<EmailEditorProps['locale']>,
+    projectId: Number as PropType<EmailEditorProps['projectId']>,
+    tools: Object as PropType<EmailEditorProps['tools']>,
     minHeight: {
-      type: String,
+      type: String as PropType<EmailEditorProps['minHeight']>,
       default: '500px',
-    },
+    }
+  },
+  data() {
+    return {
+      editor: null as EmailEditorProps['editor'],
+      options: Object as EmailEditorProps['options'],
+    };
   },
   computed: {
-    id() {
+    id(): string | undefined {
       return this.editorId || `editor-${++lastEditorId}`;
     },
   },
@@ -58,30 +65,30 @@ export default {
       this.editor = unlayer.createEditor({
         ...options,
         id: this.id,
-        displayMode: 'email',
+        displayMode: this.displayMode || 'email',
         source: {
           name: pkg.name,
           version: pkg.version,
         },
       });
 
       this.$emit('load');
-
+      
       this.editor.addEventListener('editor:ready', () => {
         this.$emit('ready');
       });
     },
-    loadDesign(design) {
-      this.editor.loadDesign(design);
+    loadDesign(design: any) {
+      this.editor?.loadDesign(design);
     },
-    saveDesign(callback) {
-      this.editor.saveDesign(callback);
+    saveDesign(callback: any) {
+      this.editor?.saveDesign(callback);
     },
-    exportHtml(callback) {
-      this.editor.exportHtml(callback);
+    exportHtml(callback: any) {
+      this.editor?.exportHtml(callback);
     },
   },
-};
+});
 </script>
 
 <style scoped>

package.json

@@ -0,0 +1,41 @@
+// ignore next line
+/// <reference path="../../node_modules/unlayer-types/embed.d.ts" />
+
+import Embed from 'embed/index';
+import { Editor as EditorClass } from 'embed/Editor';
+import { Config } from "embed/Config";
+import { AppearanceConfig, DisplayMode, ToolsConfig } from 'state/types/types';
+
+export type Unlayer = typeof Embed;
+export type Editor = InstanceType<typeof EditorClass>;
+
+export interface EmailEditorProps {
+  editor: Editor | null;
+  editorId?: string | undefined;
+  minHeight?: number | string | undefined;
+  onLoad?(unlayer: Editor): void;
+  onReady?(unlayer: Editor): void;
+  options?: Config;
+  scriptUrl?: string | undefined;
+  // style?: CSSProperties | undefined;
+
+  // redundant props -- already available in options
+  /** @deprecated */
+  appearance?: AppearanceConfig | undefined;
+  /** @deprecated */
+  displayMode?: DisplayMode;
+  /** @deprecated */
+  locale?: string | undefined;
+  /** @deprecated */
+  projectId?: number | undefined;
+  /** @deprecated */
+  tools?: ToolsConfig | undefined;
+}
+
+declare global {
+  const unlayer: Unlayer;
+
+  interface Window {
+    __unlayer_lastEditorId: number;
+  }
+}