Merge pull request #138 from editor-js/migrate/vite

Migrate to vite

.github/workflows/npm-publish.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 19
           registry-url: https://registry.npmjs.org/
       - run: yarn
       - run: yarn build

.npmignore

@@ -3,6 +3,6 @@ assets/
 src/
 .eslintrc
 postcss.config.js
-webpack.config.js
+vite.config.js
 test.html
 yarn.lock

README.md

@@ -9,14 +9,19 @@ The Table Block for the [Editor.js](https://editorjs.io). Finally improved.
 Get the package
 
 ```shell
-npm i --save @editorjs/table
+yarn add @editorjs/table
 ```
-or
 
-```shell
-yarn add @editorjs/table
+Include module at your application
+
+```javascript
+import Table from '@editorjs/table'
 ```
 
+Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/table@latest)
+
+
+
 ## Usage
 
 Add a new Tool to the `tools` property of the Editor.js initial config.

package.json

@@ -1,15 +1,25 @@
 {
   "name": "@editorjs/table",
   "description": "Table for Editor.js",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "license": "MIT",
-  "main": "./dist/table.js",
+  "repository": "https://github.com/editor-js/table",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/table.umd.js",
+  "module": "./dist/table.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/table.mjs",
+      "require": "./dist/table.umd.js"
+    }
+  },
   "scripts": {
-    "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch",
+    "dev": "vite",
+    "build": "vite build",
     "lint": "eslint -c ./.eslintrc --ext .js --fix ."
   },
-  "repository": "https://github.com/editor-js/table",
   "author": {
     "name": "CodeX Team",
     "email": "[email protected]"
@@ -28,15 +38,12 @@
     "eslint": "^5.8.0",
     "eslint-config-codex": "github:codex-team/eslint-config",
     "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.1.0",
     "postcss-nesting": "^7.0.0",
-    "style-loader": "^0.23.1",
-    "svg-inline-loader": "^0.8.0",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3"
+    "vite": "^4.5.0",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
   },
   "dependencies": {
     "@codexteam/icons": "^0.0.6"
   }
-}
+}

src/toolbox.js

@@ -1,7 +1,6 @@
-import Popover from './utils/popover';
-import * as $ from './utils/dom';
-import ToolboxIcon from './img/toolboxIcon.svg'
-
+import Popover from "./utils/popover";
+import * as $ from "./utils/dom";
+import { IconMenuSmall } from "@codexteam/icons";
 /**
  * Toolbox is a menu for manipulation of rows/cols
  *
@@ -21,7 +20,7 @@ export default class Toolbox {
    * @param {function} onClose - callback fired when the Popover is closing
    * @param {string} [cssModifier] - the modifier for the Toolbox. Allows to add some specific styles.
    */
-  constructor({api, items, onOpen, onClose, cssModifier = ''}) {
+  constructor({ api, items, onOpen, onClose, cssModifier = "" }) {
     this.api = api;
 
     this.items = items;
@@ -38,9 +37,9 @@ export default class Toolbox {
    */
   static get CSS() {
     return {
-      toolbox: 'tc-toolbox',
-      toolboxShowed: 'tc-toolbox--showed',
-      toggler: 'tc-toolbox__toggler'
+      toolbox: "tc-toolbox",
+      toolboxShowed: "tc-toolbox--showed",
+      toggler: "tc-toolbox__toggler",
     };
   }
 
@@ -57,12 +56,12 @@ export default class Toolbox {
    * @returns {Element}
    */
   createToolbox() {
-    const wrapper = $.make('div', [
+    const wrapper = $.make("div", [
       Toolbox.CSS.toolbox,
-      (this.cssModifier ? `${Toolbox.CSS.toolbox}--${this.cssModifier}` : '')
+      this.cssModifier ? `${Toolbox.CSS.toolbox}--${this.cssModifier}` : "",
     ]);
 
-    wrapper.dataset.mutationFree = 'true';
+    wrapper.dataset.mutationFree = "true";
     const popover = this.createPopover();
     const toggler = this.createToggler();
 
@@ -78,11 +77,11 @@ export default class Toolbox {
    * @returns {Element}
    */
   createToggler() {
-    const toggler = $.make('div', Toolbox.CSS.toggler, {
-      innerHTML: ToolboxIcon
+    const toggler = $.make("div", Toolbox.CSS.toggler, {
+      innerHTML: IconMenuSmall,
     });
 
-    toggler.addEventListener('click', () => {
+    toggler.addEventListener("click", () => {
       this.togglerClicked();
     });
 
@@ -96,7 +95,7 @@ export default class Toolbox {
    */
   createPopover() {
     this.popover = new Popover({
-      items: this.items
+      items: this.items,
     });
 
     return this.popover.render();

vite.config.js

@@ -0,0 +1,23 @@
+import path from "path";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import * as pkg from "./package.json";
+
+const NODE_ENV = process.argv.mode || "development";
+const VERSION = pkg.version;
+
+export default {
+  build: {
+    copyPublicDir: false,
+    lib: {
+      entry: path.resolve(__dirname, "src", "index.js"),
+      name: "Table",
+      fileName: "table",
+    },
+  },
+  define: {
+    NODE_ENV: JSON.stringify(NODE_ENV),
+    VERSION: JSON.stringify(VERSION),
+  },
+
+  plugins: [cssInjectedByJsPlugin()],
+};