Use Vite builder (codex-team#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
fajarridikc · Apr 13, 2023 · aafab1d · aafab1d
1 parent 0491155
commit aafab1d
Show file tree

Hide file tree

Showing 32 changed files with 2,416 additions and 4,935 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -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
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -19,6 +19,5 @@ jobs:
             ${{ runner.OS }}-build-
             ${{ runner.OS }}-
 
-      - run: yarn install
-
+      - run: yarn
       - run: yarn lint
diff --git a/.gitmodules b/.gitmodules
@@ -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

diff --git a/.postcssrc.yml b/.postcssrc.yml
@@ -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: {}
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -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
 

diff --git a/example/example-dev.html b/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>
@@ -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>

diff --git a/example/example-i18n.html b/example/example-i18n.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>

diff --git a/example/example-multiple.html b/example/example-multiple.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 -->

diff --git a/example/example-popup.html b/example/example-popup.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 -->

diff --git a/example/example-rtl.html b/example/example-rtl.html
@@ -9,8 +9,8 @@
   <meta charset="UTF-8">
   <title>Editor.js RTL 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>
@@ -70,7 +70,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>

diff --git a/example/example.html b/example/example.html
@@ -4,8 +4,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>