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

Migrate to vite

.babelrc

@@ -1,8 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-env"
-  ],
-  "plugins": [
-    "@babel/plugin-transform-runtime"
-  ]
-}
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

.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

@@ -2,6 +2,7 @@
 docs/
 src/
 test/
+vite.config.js
+postcss.config.js
 .babelrc
-webpack.config.js
 yarn.lock

README.md

@@ -31,12 +31,10 @@ Tool uses Editor.js pasted patterns handling and inserts iframe with embedded co
 
 ## Installation
 
-### Install via NPM
-
 Get the package
 
 ```shell
-npm i --save @editorjs/embed
+yarn add @editorjs/embed
 ```
 
 Include module at your application
@@ -45,16 +43,7 @@ Include module at your application
 import Embed from '@editorjs/embed';
 ```
 
-### Load from CDN
-You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/embed).
-
-`https://cdn.jsdelivr.net/npm/@editorjs/embed@latest`
-
-Then require this script on page with Editor.js.
-
-```html
-<script src="..."></script>
-```
+Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/embed@latest)
 
 ## Usage
 

package.json

@@ -1,20 +1,29 @@
 {
   "name": "@editorjs/embed",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "keywords": [
     "codex editor",
     "embed",
-    "tool",
     "editor.js",
     "editorjs"
   ],
   "description": "Embed Tool for Editor.js",
   "license": "MIT",
   "repository": "https://github.com/editor-js/embed",
-  "main": "./dist/bundle.js",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/embed.umd.js",
+  "module": "./dist/embed.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/embed.mjs",
+      "require": "./dist/embed.umd.js"
+    }
+  },
   "scripts": {
-    "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch",
+    "dev": "vite",
+    "build": "vite build",
     "test": "mocha -r @babel/register -r ignore-styles --recursive ./test",
     "lint": "eslint src/ --ext .js",
     "lint:errors": "eslint src/ --ext .js --quiet",
@@ -25,24 +34,19 @@
     "email": "team@codex.so"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/register": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
-    "babel-loader": "^8.1.0",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/register": "^7.22.15",
     "chai": "^4.2.0",
-    "css-loader": "^3.5.3",
     "debounce": "^1.2.0",
     "eslint": "^7.25.0",
     "eslint-config-codex": "^1.6.1",
     "ignore-styles": "^5.0.1",
     "mocha": "^7.1.1",
-    "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.1",
     "postcss-nested-ancestors": "^2.0.0",
-    "style-loader": "^1.2.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
-  }
+    "vite": "^4.5.0",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
+  },
+  "dependencies": {}
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-nested-ancestors'),
+    require('postcss-nested'),
+  ],
+};

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