Use Vite builder (#2300)

* vite builder initial

* save

* add displayName

* add paragraph from npm

* fix postcss apply

* remove some packages, fix tests

* Update cypress.yml

* remove logs

* remove unused packages

* update path to image

* update

* Update index.html

* Update cypress.yml

* Update cypress.yml

* Update cypress.yml

* remove displayName field

* update names

* Update index.ts

* Update index.ts

* update packages

* remove packages

* postcss preserve: true

* Update index.html

* Update editor-modules.d.ts

* use public dir for static

* Update vite.config.js

* update modules type

* Update CHANGELOG.md

Author: talyguryn

.babelrc

@@ -1,42 +1,21 @@
-name: Tests
+name: Cypress
+
 on: [pull_request]
+
 jobs:
-  firefox:
+  run-tests:
+    strategy:
+      matrix:
+        browser: [firefox, chrome, edge]
+
     runs-on: ubuntu-latest
     steps:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
       - uses: actions/checkout@v3
-      - run: yarn ci:pull_paragraph
       - uses: cypress-io/github-action@v5
         with:
           config: video=false
-          browser: firefox
-          build: yarn build
-  chrome:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - uses: actions/checkout@v3
-      - run: yarn ci:pull_paragraph
-      - uses: cypress-io/github-action@v5
-        with:
-          config: video=false
-          browser: chrome
-          build: yarn build
-  edge:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - uses: actions/checkout@v3
-      - run: yarn ci:pull_paragraph
-      - uses: cypress-io/github-action@v5
-        with:
-          config: video=false
-          browser: edge
+          browser: ${{ matrix.browser }}
           build: yarn build

.github/workflows/cypress.yml

@@ -19,6 +19,5 @@ jobs:
             ${{ runner.OS }}-build-
             ${{ runner.OS }}-
 
-      - run: yarn install
-
+      - run: yarn
       - run: yarn lint

.github/workflows/eslint.yml

@@ -16,9 +16,6 @@
 [submodule "example/tools/simple-image"]
 	path = example/tools/simple-image
 	url = https://github.com/editor-js/simple-image
-[submodule "src/tools/paragraph"]
-	path = src/tools/paragraph
-	url = https://github.com/editor-js/paragraph
 [submodule "example/tools/marker"]
 	path = example/tools/marker
 	url = https://github.com/editor-js/marker

.gitmodules

@@ -1,8 +1,4 @@
 plugins:
-  # Consumes files by @import rule
-  # https://github.com/postcss/postcss-import
-  postcss-import: {}
-
   # Apply custom property sets via @apply rule
   # https://github.com/pascalduez/postcss-apply
   postcss-apply: {}
@@ -26,24 +22,10 @@ plugins:
     # https://github.com/csstools/postcss-preset-env#preserve
     preserve: false
 
-    # Enable or disable specific polyfills
-    # https://github.com/csstools/postcss-preset-env#features
-    #
-    # List of available plugins
-    # https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js
-    features:
-      # Modify colors using the color-mod() function in CSS
-      # https://github.com/jonathantneal/postcss-color-mod-function
-      color-mod-function: {}
-
   # Nested rules unwrapper
   # https://github.com/postcss/postcss-nested
   #
   # As you know 'postcss-preset-env' plugin has an ability to process
   # 'postcss-nesting' feature but it does not work with BEM
   # Report: https://github.com/csstools/postcss-preset-env/issues/40
   postcss-nested: {}
-
-  # Compression tool
-  # https://github.com/cssnano/cssnano
-  cssnano: {}

.postcssrc.yml

@@ -14,6 +14,7 @@
 - `Fix` — *ToolsAPI* — `pasteConfig` getter with `false` value could be used to disable paste handling by Editor.js core. Could be useful if your tool has its own paste handler.
 - `Improvement` — *Dependencies* — Upgrade Cypress to v12, upgrade related libraries to latest versions.
 - `CI` — Use Ubuntu container for Edge tests runner.
+- `Improvement` — Use Vite as build system instead of Webpack.
 
 ### 2.26.5
 

docs/CHANGELOG.md

@@ -10,8 +10,8 @@
   <meta charset="UTF-8">
   <title>Editor.js 🤩🧦🤨 example</title>
   <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="assets/demo.css" rel="stylesheet">
-  <script src="assets/json-preview.js"></script>
+  <link href="../public/assets/demo.css" rel="stylesheet">
+  <script src="../public/assets/json-preview.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@@ -107,7 +107,7 @@
   <script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
 
   <!-- Load Editor.js's Core -->
-  <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true;"></script>
+  <script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true;"></script>
 
   <!-- Initialization -->
   <script>

example/example-dev.html

@@ -10,8 +10,8 @@
   <meta charset="UTF-8">
   <title>Editor.js 🤩🧦🤨 example</title>
   <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="assets/demo.css" rel="stylesheet">
-  <script src="assets/json-preview.js"></script>
+  <link href="../public/assets/demo.css" rel="stylesheet">
+  <script src="../public/assets/json-preview.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@@ -61,7 +61,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
 
 <!-- Load Editor.js's Core -->
-<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+<script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
 
 <!-- Initialization -->
 <script>

example/example-i18n.html

@@ -9,7 +9,7 @@
  <head>
    <meta charset="UTF-8">
    <title>Editor.js 🤩🧦🤨 example: Multiple instances</title>
-   <link href="assets/demo.css" rel="stylesheet">
+   <link href="../public/assets/demo.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  </head>
  <body>
@@ -41,7 +41,7 @@
    </div>
 
    <!-- Load Editor.js's Core -->
-   <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+   <script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
    <script src="./tools/header/dist/bundle.js"></script><!-- Header -->
 
    <!-- Initialization -->

example/example-multiple.html

@@ -9,7 +9,7 @@
  <head>
    <meta charset="UTF-8">
    <title>Editor.js 🤩🧦🤨 example: Popup</title>
-   <link href="assets/demo.css" rel="stylesheet">
+   <link href="../public/assets/demo.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  </head>
  <body>
@@ -111,7 +111,7 @@ <h2>
    </div>
 
    <!-- Load Editor.js's Core -->
-   <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+   <script src="../dist/editorjs.umd.js" onload="document.getElementById('hint-core').hidden = true"></script>
    <script src="./tools/header/dist/bundle.js"></script><!-- Header -->
 
    <!-- Initialization -->