(refactor) Migrate from webpack to vite

.eslintrc.js → .eslintrc.cjs

@@ -1,18 +1,27 @@
 const fs = require('fs');
+const path = require('path');
 
 const packages = fs
-  .readdirSync(`${__dirname}/packages`, { withFileTypes: true })
+  .readdirSync(path.join(__dirname, 'packages'), { withFileTypes: true })
   .filter(dirent => dirent.isDirectory())
   .map(dirent => dirent.name);
 
 module.exports = {
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser', // handles both JS and TS
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module', // enables ESM imports
+    ecmaFeatures: {
+      jsx: true, // for React
+    },
+  },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:cypress/recommended',
-    'prettier',
     'plugin:import/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
   ],
   env: {
     es6: true,
@@ -27,10 +36,22 @@ module.exports = {
     DECAP_CMS_CORE_VERSION: false,
     CMS_ENV: false,
   },
+  plugins: ['@emotion', 'cypress', 'unicorn', '@typescript-eslint'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+    'import/core-modules': [...packages, 'decap-cms-app/dist/esm'],
+  },
   rules: {
-    'no-console': [0],
-    'react/prop-types': [0],
-    'import/no-named-as-default': 0,
+    'no-console': 'off',
+    'react/prop-types': 'off',
+    'import/no-named-as-default': 'off',
     'import/order': [
       'error',
       {
@@ -43,7 +64,7 @@ module.exports = {
     '@emotion/pkg-renaming': 'error',
     '@emotion/import-from-emotion': 'error',
     '@emotion/styled-import': 'error',
-    'require-atomic-updates': [0],
+    'require-atomic-updates': 'off',
     'object-shorthand': ['error', 'always'],
     'func-style': ['error', 'declaration'],
     'prefer-const': [
@@ -55,51 +76,29 @@ module.exports = {
     'unicorn/prefer-string-slice': 'error',
     'react/no-unknown-property': ['error', { ignore: ['css', 'bold', 'italic', 'delete'] }],
   },
-  plugins: ['babel', '@emotion', 'cypress', 'unicorn'],
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-    },
-    'import/core-modules': [...packages, 'decap-cms-app/dist/esm'],
-  },
   overrides: [
     {
       files: ['*.ts', '*.tsx'],
-      parser: '@typescript-eslint/parser',
-      extends: [
-        'eslint:recommended',
-        'plugin:react/recommended',
-        'plugin:cypress/recommended',
-        'plugin:@typescript-eslint/recommended',
-        'prettier',
-        'plugin:import/recommended',
-        'plugin:import/typescript',
-      ],
-      parserOptions: {
-        ecmaVersion: 2018,
-        sourceType: 'module',
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
       rules: {
-        'no-duplicate-imports': [0], // handled by @typescript-eslint
-        '@typescript-eslint/ban-types': [0], // TODO enable in future
-        '@typescript-eslint/no-non-null-assertion': [0],
+        'no-duplicate-imports': 'off', // handled by TS
+        '@typescript-eslint/ban-types': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
         '@typescript-eslint/consistent-type-imports': 'error',
-        '@typescript-eslint/explicit-function-return-type': [0],
-        '@typescript-eslint/explicit-module-boundary-types': [0],
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
         '@typescript-eslint/no-duplicate-imports': 'error',
         '@typescript-eslint/no-use-before-define': [
           'error',
           { functions: false, classes: true, variables: true },
         ],
       },
     },
+    {
+      files: ['*.js', '*.jsx'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off', // allow require in JS
+      },
+    },
   ],
+  ignorePatterns: ['scripts/**', 'dist/**', 'node_modules/**'], // ignore scripts to avoid ESM parse issues
 };

.gitignore

@@ -20,3 +20,4 @@ coverage/
 .temp/
 storybook-static/
 .nx/cache
+**/.swc/

.swcrc

@@ -0,0 +1,27 @@
+{
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "importSource": "@emotion/react"
+      },
+      "hidden": {
+        "jest": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs",
+    "strict": false,
+    "strictMode": false,
+    "lazy": false,
+    "noInterop": false
+  }
+}

CONTRIBUTING.md

@@ -49,12 +49,12 @@ Runs the `clean` script and builds the CMS packages.
 npm run build
 ```
 
-### build-preview
+### preview
 
-Runs the `build` and `build-preview` scripts in each package and serves the resulting build locally.
+Runs the `build` and `preview` scripts in each package and serves the resulting build locally.
 
 ```sh
-npm run build-preview
+npm run preview
 ```
 
 ### test
@@ -122,9 +122,8 @@ In order to debug a specific issue follow the next steps:
 1. Replace `dev-test/config.yml` with the relevant `config.yml`. If you want to test the backend, make sure that the `backend` property of the config indicates which backend you use (GitHub, Gitlab, Bitbucket etc) and path to the repo.
 
 ```js
-backend:
-  name: github
-  repo: owner-name/repo-name
+backend: name: github;
+repo: owner - name / repo - name;
 ```
 
 2. Change the content of `dev-test/index.html` to:
@@ -145,6 +144,7 @@ backend:
   </body>
 </html>
 ```
+
 The most important thing is to make sure that Decap CMS is loaded from the `dist` folder. This way, every time you make changes to the source code, they will be compiled and reflected immediately on `localhost`.
 
 3. Run `npm run start`
@@ -157,11 +157,11 @@ When debugging the CMS with Git Gateway you must:
 1. Have a Netlify site with [Git Gateway](https://docs.netlify.com/visitor-access/git-gateway/) and [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) enabled. An easy way to create such a site is to use a [template](https://www.decapcms.org/docs/start-with-a-template/), for example the [Gatsby template](https://app.netlify.com/start/deploy?repository=https://github.com/decaporg/gatsby-starter-decap-cms&stack=cms)
 2. Tell the CMS the URL of your Netlify site using a local storage item. To do so:
 
-    1. Open `http://localhost:8080/` in the browser
-    2. Open the Developer Console. Write the below command and press enter: `localStorage.setItem('netlifySiteURL', 'https://yourwebsiteurl.netlify.app/')`
-    3. To be sure, you can run this command as well: `localStorage.getItem('netlifySiteURL')`
-    4. Refresh the page
-    5. You should be able to log in via your Netlify Identity email/password
+   1. Open `http://localhost:8080/` in the browser
+   2. Open the Developer Console. Write the below command and press enter: `localStorage.setItem('netlifySiteURL', 'https://yourwebsiteurl.netlify.app/')`
+   3. To be sure, you can run this command as well: `localStorage.getItem('netlifySiteURL')`
+   4. Refresh the page
+   5. You should be able to log in via your Netlify Identity email/password
 
 ### Fine tune the way you run unit tests
 

__mocks__/styleMock.js

@@ -1 +1 @@
-module.exports = {};
+export default {};

__mocks__/svgrTransform.js

@@ -0,0 +1,48 @@
+import path from 'path';
+
+export default {
+  process(src, filename) {
+    const componentName =
+      'Svg' + path.basename(filename, path.extname(filename)).replace(/[^a-zA-Z0-9]/g, '');
+
+    // Extract only the inner markup of the original <svg> to avoid nested <svg><svg ...></svg></svg>
+    const innerMatch = src.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i);
+    const inner = innerMatch ? innerMatch[1] : src;
+    const escapedInner = inner.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+
+    // Extract a few common attributes from the original <svg ...>
+    const openTagMatch = src.match(/<svg([^>]*)>/i);
+    const openTagAttrs = openTagMatch ? openTagMatch[1] : '';
+    const attrRegex = /([a-zA-Z_:][a-zA-Z0-9:_.-]*)\s*=\s*"([^"]*)"/g;
+    const picked = {};
+    const allowed = new Set(['width', 'height', 'viewBox', 'fill', 'xmlns']);
+    let m;
+    while ((m = attrRegex.exec(openTagAttrs))) {
+      const key = m[1];
+      const val = m[2];
+      if (allowed.has(key)) {
+        picked[key] = val;
+      }
+    }
+    const attrsJson = JSON.stringify(picked);
+
+    const code = `
+      const React = require('react');
+      // Render a single <svg> and inline only the inner content of the source file to avoid nested <svg>
+      const ${componentName} = React.forwardRef(function ${componentName}(props, ref) {
+        return React.createElement('svg', {
+          ref,
+          ...${attrsJson},
+          ...props,
+          dangerouslySetInnerHTML: { __html: \`${escapedInner}\` }
+        });
+      });
+
+      exports.ReactComponent = ${componentName};
+      module.exports = ${componentName};
+      module.exports.ReactComponent = ${componentName};
+    `;
+
+    return { code };
+  },
+};

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+export default { extends: ['@commitlint/config-conventional'] };