feat(migration): migrate project to typescript

Author: ahmedatigui

.gitignore

@@ -3,3 +3,4 @@ npm-debug.log
 .idea/
 .DS_Store
 dist
+.yarn/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/warning",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "keywords": [
     "codex editor",
     "warning",
@@ -16,10 +16,12 @@
   ],
   "main": "./dist/warning.umd.js",
   "module": "./dist/warning.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/warning.mjs",
-      "require": "./dist/warning.umd.js"
+      "require": "./dist/warning.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
@@ -31,10 +33,13 @@
     "email": "team@ifmo.su"
   },
   "devDependencies": {
+    "typescript": "^5.6.3",
     "vite": "^4.5.0",
-    "vite-plugin-css-injected-by-js": "^3.3.0"
+    "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vite-plugin-dts": "^4.3.0"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.4"
+    "@codexteam/icons": "^0.3.2",
+    "@editorjs/editorjs": "^2.30.7"
   }
 }

src/index.js src/index.ts

@@ -1,3 +1,14 @@
+/**
+ * import types
+ */
+import type {
+  API,
+  ToolboxConfig,
+  BlockTool,
+  ToolConfig,
+  BlockToolData,
+} from '@editorjs/editorjs';
+
 /**
  * Import Tool's icon
  */
@@ -8,38 +19,70 @@ import { IconWarning } from '@codexteam/icons';
  */
 import './index.css';
 
+interface WarningCSS {
+  baseClass: string;
+  wrapper: string;
+  title: string;
+  input: string;
+  message: string;
+}
+
 /**
- * @class Warning
- * @classdesc Warning Tool for Editor.js
- * @property {WarningData} data - Warning Tool`s input and output data
- * @property {object} api - Editor.js API instance
- *
  * @typedef {object} WarningData
  * @description Warning Tool`s input and output data
  * @property {string} title - warning`s title
  * @property {string} message - warning`s message
- *
+ */
+export interface WarningData extends BlockToolData {
+  title: string;
+  message: string;
+}
+
+/**
  * @typedef {object} WarningConfig
  * @description Warning Tool`s initial configuration
  * @property {string} titlePlaceholder - placeholder to show in warning`s title input
  * @property {string} messagePlaceholder - placeholder to show in warning`s message input
  */
-export default class Warning {
+export interface WarningConfig extends ToolConfig {
+  titlePlaceholder?: string;
+  messagePlaceholder?: string;
+}
+
+interface WarningConstructorArgs {
+  data: WarningData;
+  config?: WarningConfig;
+  api: API;
+  readOnly: boolean;
+}
+
+/**
+ * @class Warning
+ * @classdesc Warning Tool for Editor.js
+ * @property {WarningData} data - Warning Tool`s input and output data
+ * @property {API} api - Editor.js API instance
+ */
+export default class Warning implements BlockTool {
+  private api: API;
+  private readOnly: boolean;
+  private data: WarningData;
+  titlePlaceholder: string;
+  messagePlaceholder: string;
 
   /**
    * Notify core that read-only mode is supported
    */
-  static get isReadOnlySupported() {
+  static get isReadOnlySupported(): boolean {
     return true;
   }
 
   /**
    * Get Toolbox settings
    *
    * @public
-   * @returns {string}
+   * @returns {ToolboxConfig}
    */
-  static get toolbox() {
+  static get toolbox(): ToolboxConfig {
     return {
       icon: IconWarning,
       title: 'Warning',
@@ -52,7 +95,7 @@ export default class Warning {
    * @public
    * @returns {boolean}
    */
-  static get enableLineBreaks() {
+  static get enableLineBreaks(): boolean {
     return true;
   }
 
@@ -62,7 +105,7 @@ export default class Warning {
    * @public
    * @returns {string}
    */
-  static get DEFAULT_TITLE_PLACEHOLDER() {
+  static get DEFAULT_TITLE_PLACEHOLDER(): string {
     return 'Title';
   }
 
@@ -72,16 +115,16 @@ export default class Warning {
    * @public
    * @returns {string}
    */
-  static get DEFAULT_MESSAGE_PLACEHOLDER() {
+  static get DEFAULT_MESSAGE_PLACEHOLDER(): string {
     return 'Message';
   }
 
   /**
    * Warning Tool`s styles
    *
-   * @returns {object}
+   * @returns {WarningCSS}
    */
-  get CSS() {
+  get CSS(): WarningCSS {
     return {
       baseClass: this.api.styles.block,
       wrapper: 'cdx-warning',
@@ -94,17 +137,20 @@ export default class Warning {
   /**
    * Render plugin`s main Element and fill it with saved data
    *
-   * @param {WarningData} data — previously saved data
-   * @param {WarningConfig} config — user config for Tool
-   * @param {object} api - Editor.js API
-   * @param {boolean} readOnly - read-only mode flag
+   * @param {object} params — constructor params
+   * @param {WarningData} params.data — previously saved data
+   * @param {WarningConfig} params.config — user config for Tool
+   * @param {API} params.api - Editor.js API
+   * @param {boolean} params.readOnly - read-only mode flag
    */
-  constructor({ data, config, api, readOnly }) {
+  constructor({ data, config, api, readOnly }: WarningConstructorArgs) {
     this.api = api;
     this.readOnly = readOnly;
 
-    this.titlePlaceholder = config.titlePlaceholder || Warning.DEFAULT_TITLE_PLACEHOLDER;
-    this.messagePlaceholder = config.messagePlaceholder || Warning.DEFAULT_MESSAGE_PLACEHOLDER;
+    this.titlePlaceholder =
+      config?.titlePlaceholder || Warning.DEFAULT_TITLE_PLACEHOLDER;
+    this.messagePlaceholder =
+      config?.messagePlaceholder || Warning.DEFAULT_MESSAGE_PLACEHOLDER;
 
     this.data = {
       title: data.title || '',
@@ -117,7 +163,7 @@ export default class Warning {
    *
    * @returns {Element}
    */
-  render() {
+  render(): HTMLElement {
     const container = this._make('div', [this.CSS.baseClass, this.CSS.wrapper]);
     const title = this._make('div', [this.CSS.input, this.CSS.title], {
       contentEditable: !this.readOnly,
@@ -143,13 +189,13 @@ export default class Warning {
    * @param {HTMLDivElement} warningElement - element to save
    * @returns {WarningData}
    */
-  save(warningElement) {
+  save(warningElement: HTMLDivElement): WarningData {
     const title = warningElement.querySelector(`.${this.CSS.title}`);
     const message = warningElement.querySelector(`.${this.CSS.message}`);
 
     return Object.assign(this.data, {
-      title: title.innerHTML,
-      message: message.innerHTML,
+      title: title?.innerHTML ?? '',
+      message: message?.innerHTML ?? '',
     });
   }
 
@@ -161,7 +207,11 @@ export default class Warning {
    * @param  {object} attributes        - any attributes
    * @returns {Element}
    */
-  _make(tagName, classNames = null, attributes = {}) {
+  private _make<K extends keyof HTMLElementTagNameMap>(
+    tagName: K,
+    classNames: string | string[] | null = null,
+    attributes: { [key: string]: any } = {}
+  ): HTMLElementTagNameMap[K] {
     const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {
@@ -171,7 +221,7 @@ export default class Warning {
     }
 
     for (const attrName in attributes) {
-      el[attrName] = attributes[attrName];
+      (el as any)[attrName] = attributes[attrName];
     }
 
     return el;
@@ -180,7 +230,6 @@ export default class Warning {
   /**
    * Sanitizer config for Warning Tool saved data
    *
-   * @returns {object}
    */
   static get sanitize() {
     return {

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": ["dom", "ESNext"],
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    "isolatedModules": true,
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

vite.config.js

@@ -1,5 +1,6 @@
 import path from "path";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import dts from "vite-plugin-dts";
 import * as pkg from "./package.json";
 
 const NODE_ENV = process.argv.mode || "development";
@@ -9,7 +10,7 @@ export default {
   build: {
     copyPublicDir: false,
     lib: {
-      entry: path.resolve(__dirname, "src", "index.js"),
+      entry: path.resolve(__dirname, "src", "index.ts"),
       name: "Warning",
       fileName: "warning",
     },
@@ -19,5 +20,5 @@ export default {
     VERSION: JSON.stringify(VERSION),
   },
 
-  plugins: [cssInjectedByJsPlugin()],
+  plugins: [cssInjectedByJsPlugin(), dts()],
 };