Merge pull request #68 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: 12
+          node-version: 19
           registry-url: https://registry.npmjs.org/
       - run: yarn
       - run: yarn build

.npmignore

@@ -1,5 +1,5 @@
 .idea/
 assets/
 src/
-webpack.config.js
+vite.config.js
 yarn.lock

README.md

@@ -10,36 +10,20 @@ Works only with pasted image URLs and requires no server-side uploader.
 
 ## Installation
 
-### Install via NPM
-
 Get the package
 
 ```shell
-npm i --save-dev @editorjs/simple-image
+yarn add @editorjs/simple-image
 ```
 
 Include module at your application
 
 ```javascript
-const SimpleImage = require('@editorjs/simple-image');
+import SimpleImage from "@editorjs/simple-image";
 ```
 
-### Download to your project's source dir
-
-1. Upload folder `dist` from repository
-2. Add `dist/bundle.js` file to your page.
-
-### Load from CDN
+Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/simple-image)
 
-You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/simple-image).
-
-`https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest`
-
-Then require this script on page with Editor.js.
-
-```html
-<script src="..."></script>
-```
 
 ## Usage
 
@@ -48,12 +32,12 @@ Add a new Tool to the `tools` property of the Editor.js initial config.
 ```javascript
 var editor = EditorJS({
   ...
-  
+
   tools: {
     ...
     image: SimpleImage,
   }
-  
+
   ...
 });
 ```
@@ -82,16 +66,15 @@ This Tool has no config params
 | withBackground | `boolean` | need to add background          |
 | stretched      | `boolean` | stretch image to screen's width |
 
-
 ```json
 {
-    "type" : "image",
-    "data" : {
-        "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
-        "caption" : "Roadster // tesla.com",
-        "withBorder" : false,
-        "withBackground" : false,
-        "stretched" : true
-    }
+  "type": "image",
+  "data": {
+    "url": "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
+    "caption": "Roadster // tesla.com",
+    "withBorder": false,
+    "withBackground": false,
+    "stretched": true
+  }
 }
 ```

package.json

@@ -1,9 +1,8 @@
 {
   "name": "@editorjs/simple-image",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "keywords": [
     "codex editor",
-    "tool",
     "image",
     "server-less",
     "editor.js",
@@ -12,23 +11,28 @@
   "description": "SimpleImage Tool for Editor.js",
   "license": "MIT",
   "repository": "https://github.com/editor-js/simple-image",
-  "main": "./dist/bundle.js",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/simple-image.umd.js",
+  "module": "./dist/simple-image.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/simple-image.mjs",
+      "require": "./dist/simple-image.umd.js"
+    }
+  },
   "scripts": {
-    "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch"
+    "dev": "vite",
+    "build": "vite build"
   },
   "author": {
     "name": "CodeX",
     "email": "team@codex.so"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^1.0.0",
-    "style-loader": "^0.21.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"

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: "SimpleImage",
+      fileName: "simple-image",
+    },
+  },
+  define: {
+    NODE_ENV: JSON.stringify(NODE_ENV),
+    VERSION: JSON.stringify(VERSION),
+  },
+
+  plugins: [cssInjectedByJsPlugin()],
+};