Merge pull request #40 from Sozialarchiv/ts

To typescript migrated

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/delimiter",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "keywords": [
     "codex editor",
     "delimiter",
@@ -15,10 +15,12 @@
   ],
   "main": "./dist/delimiter.umd.js",
   "module": "./dist/delimiter.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/delimiter.mjs",
-      "require": "./dist/delimiter.umd.js"
+      "require": "./dist/delimiter.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
@@ -30,10 +32,13 @@
     "email": "team@ifmo.su"
   },
   "devDependencies": {
-    "vite": "^4.5.0",
-    "vite-plugin-css-injected-by-js": "^3.3.0"
+    "vite": "^5.4.1",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.0.3",
+    "@editorjs/editorjs": "^2.30.5",
+    "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.5"
+    "@codexteam/icons": "^0.3.2"
   }
 }

src/index.js → src/index.ts

@@ -2,7 +2,7 @@
  * Build styles
  */
 import './index.css';
-
+import {API, BlockTool, BlockToolConstructorOptions, BlockToolData, ToolboxConfig, PasteConfig, PasteEvent} from "@editorjs/editorjs";
 import { IconDelimiter } from '@codexteam/icons'
 
 /**
@@ -18,24 +18,35 @@ import { IconDelimiter } from '@codexteam/icons'
  * @typedef {Object} DelimiterData
  * @description Tool's input and output data format
  */
-export default class Delimiter {
+export default class Delimiter implements BlockTool {
 
   /**
    * Notify core that read-only mode is supported
    * @return {boolean}
    */
-  static get isReadOnlySupported() {
+  static get isReadOnlySupported(): boolean {
     return true;
   }
 
   /**
    * Allow Tool to have no content
    * @return {boolean}
    */
-  static get contentless() {
+  static get contentless(): boolean {
     return true;
   }
 
+  private api: API
+
+  private _CSS: {
+    block: string
+    wrapper: string
+  }
+
+  private data: BlockToolData
+
+  private _element: HTMLDivElement
+
   /**
    * Render plugin`s main Element and fill it with saved data
    *
@@ -44,27 +55,26 @@ export default class Delimiter {
    *   config - user config for Tool
    *   api - Editor.js API
    */
-  constructor({data, config, api}) {
+  constructor({data, config, api}: BlockToolConstructorOptions) {
     this.api = api;
 
     this._CSS = {
       block: this.api.styles.block,
       wrapper: 'ce-delimiter'
     };
 
-    this._data = {};
     this._element = this.drawView();
 
     this.data = data;
   }
 
   /**
    * Create Tool's view
-   * @return {HTMLElement}
+   * @return {HTMLDivElement}
    * @private
    */
-  drawView() {
-    let div = document.createElement('DIV');
+  drawView(): HTMLDivElement {
+    let div = document.createElement('div');
 
     div.classList.add(this._CSS.wrapper, this._CSS.block);
 
@@ -76,7 +86,7 @@ export default class Delimiter {
    * @returns {HTMLDivElement}
    * @public
    */
-  render() {
+  render(): HTMLDivElement {
     return this._element;
   }
 
@@ -86,7 +96,7 @@ export default class Delimiter {
    * @returns {DelimiterData} - saved data
    * @public
    */
-  save(toolsContent) {
+  save(toolsContent: HTMLElement): BlockToolData {
     return {};
   }
 
@@ -97,19 +107,19 @@ export default class Delimiter {
    *
    * @return {{icon: string, title: string}}
    */
-  static get toolbox() {
+  static get toolbox(): ToolboxConfig {
     return {
       icon: IconDelimiter,
       title: 'Delimiter'
     };
   }
-  
+
   /**
    * Delimiter onPaste configuration
    *
    * @public
    */
-  static get pasteConfig() {
+  static get pasteConfig(): PasteConfig {
     return { tags: ['HR'] };
   }
 
@@ -118,7 +128,7 @@ export default class Delimiter {
    *
    * @param {PasteEvent} event - event with pasted data
    */
-  onPaste(event) {
+  onPaste(event: PasteEvent): void {
     this.data = {};
   }
 }

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "nodenext"
+  }
+}

vite.config.js

@@ -1,6 +1,7 @@
 import path from "path";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import * as pkg from "./package.json";
+import dts from "vite-plugin-dts";
 
 const NODE_ENV = process.argv.mode || "development";
 const VERSION = pkg.version;
@@ -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: "Delimiter",
       fileName: "delimiter",
     },
@@ -19,5 +20,11 @@ export default {
     VERSION: JSON.stringify(VERSION),
   },
 
-  plugins: [cssInjectedByJsPlugin()],
+  plugins: [
+    cssInjectedByJsPlugin(),
+    dts({
+      //insertTypesEntry: true,
+      tsconfigPath: './tsconfig.json'
+    }),
+  ],
 };