Merge pull request #778 from strapi/releases/expermental-vite

.gitignore

@@ -4,4 +4,9 @@ node_modules
 .DS_Store
 yarn-debug.log*
 yarn-error.log*
-.idea
+.idea
+dist
+storybook-static
+test-results
+playwright-report
+packages/strapi-icons/src

README.md

@@ -29,20 +29,19 @@ Strapi Design System provides guidelines and tools to help anyone make Strapi's
 Install Strapi Design System and its peer dependencies:
 
 ```sh
-$ yarn add @strapi/design-system @strapi/icons styled-components
+$ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
 
 # or
 
-$ npm i @strapi/design-system @strapi/icons styled-components
+$ npm i react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
 ```
 
 ## Usage
 
 Wrap your application with the `ThemeProvider` and pass the default `lightTheme` provided by `@strapi/design-system`.
 
 ```jsx
-import { ThemeProvider } from "@strapi/design-system/ThemeProvider";
-import { lightTheme } from "@strapi/design-system/themes";
+import { ThemeProvider, lightTheme } from "@strapi/design-system";
 
 function App({ children }) {
   return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;

lerna.json

@@ -1,7 +1,5 @@
 {
-  "packages": [
-    "packages/*"
-  ],
-  "version": "1.2.8",
+  "packages": ["packages/*"],
+  "version": "0.0.0-vite-bundler.0",
   "npmClient": "yarn"
 }

package.json

@@ -6,10 +6,10 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "analyze:bundle": "lerna run analyze:bundle --stream",
     "bootstrap": "lerna bootstrap",
     "build-storybook": "lerna run build-storybook --stream",
     "build": "lerna run build --stream --scope=@strapi/icons && lerna run build --stream --scope=@strapi/design-system",
+    "clean": "lerna clean",
     "generate": "plop",
     "lint-staged": "lerna run lint-staged --stream --",
     "lint": "lerna run lint --stream",
@@ -23,17 +23,21 @@
     "test:e2e:ci": "lerna run test:e2e:ci",
     "test:e2e:watch": "lerna --scope @strapi/design-system exec -- yarn test:e2e:watch",
     "test:snapshots": "lerna --scope @strapi/design-system exec -- yarn  test -u",
-    "release": "lerna version --no-push --no-git-tag-version && yarn setup && git commit -am \"Releasing\" && lerna publish from-package --contents dist"
+    "release": "lerna version --no-push --no-git-tag-version && yarn setup && git commit -am \"Releasing\" && lerna publish from-package"
   },
   "devDependencies": {
     "@specifyapp/cli": "^0.0.51",
+    "@vitejs/plugin-react": "^2.2.0",
     "chokidar-cli": "^3.0.0",
+    "cross-env": "^7.0.3",
     "fs-extra": "^10.0.0",
     "husky": "=4",
     "lerna": "^4.0.0",
     "lint-staged": ">=10",
     "plop": "^2.7.4",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "tiny-glob": "^0.2.9",
+    "vite": "^3.2.2"
   },
   "husky": {
     "hooks": {

packages/strapi-design-system/.eslintrc

@@ -0,0 +1,34 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module", // Allows for the use of imports
+    "ecmaFeatures": {
+      "jsx": true // Allows for the parsing of JSX
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+    }
+  },
+  "extends": [
+    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  "rules": {
+    "react/sort-prop-types": 1,
+    "default-case": "error",
+    "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
+    "no-console": ["error", { "allow": ["warn", "error"] }]
+  },
+  "overrides": [
+    {
+      "files": "*.mdx",
+      "parser": "eslint-mdx",
+      "rules": {
+        "react/react-in-jsx-scope": "off",
+        "no-console": 0
+      }
+    }
+  ]
+}

packages/strapi-design-system/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2
+}

packages/strapi-design-system/jest.config.js

@@ -1,12 +1,10 @@
-module.exports = {
+export default {
   testRegex: ['src/.*\\.spec\\.(jsx|js)$', 'tests/.*\\.spec.js$'],
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './test-bundler.js'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
-    '^@strapi/icons/(.*)': '<rootDir>/../strapi-icons/dist/$1',
-    '^@strapi/icons': '<rootDir>/../strapi-icons/dist/index.js',
   },
   testEnvironment: 'jsdom',
   transform: {

packages/strapi-design-system/package.json

@@ -1,33 +1,41 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.2.8",
-  "main": "index.js",
+  "version": "0.0.0-vite-bundler.0",
   "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
     "@internationalized/number": "^3.1.1",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-transform-runtime": "^7.13.2",
-    "@babel/preset-env": "^7.13.0",
-    "@babel/preset-react": "^7.12.13",
     "@figspec/react": "^0.1.5",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/react": "^6.5.13",
+    "@strapi/icons": "^0.0.0-vite-bundler.0",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.5",
     "axe-playwright": "^1.1.11",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
@@ -38,17 +46,14 @@
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
-    "prettier": "^2.2.1",
+    "prettier": "^2.7.1",
     "qs": "^6.10.3",
     "react": "^17.0.1",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "storybook-dark-mode": "^1.1.2",
-    "styled-components": "^5.3.6",
-    "url-loader": "^4.1.1",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.5.0"
+    "styled-components": "^5.2.1"
   },
   "peerDependencies": {
     "@strapi/icons": "^1.2.8",
@@ -58,14 +63,10 @@
     "styled-components": "^5.2.1"
   },
   "scripts": {
-    "analyze:bundle": "cross-env BUNDLE_ANALYZE=1 webpack",
+    "dev": "vite",
     "prebuild": "rimraf dist",
-    "build": "yarn build:files && cross-env IS_V2=true yarn build:files",
-    "build:files": "yarn build:dev && yarn build:prod && yarn copy:files && yarn create:index-files",
-    "build:dev": "cross-env NODE_ENV=development webpack-cli",
-    "build:prod": "cross-env NODE_ENV=production webpack-cli",
-    "copy:files": "node ../../tools/copy-files.js",
-    "create:index-files": "node ./createIndexFiles.js",
+    "build": "yarn build:prod",
+    "build:prod": "vite build",
     "build-storybook": "build-storybook",
     "lint": "eslint . --ext .js,.jsx,.mdx --fix",
     "lint-staged": "eslint --fix",

packages/strapi-design-system/playwright.config.js

@@ -1,6 +1,6 @@
-const { devices } = require('@playwright/test');
+import { devices } from '@playwright/test';
 
-const config = {
+export default {
   testMatch: '**/__tests__/*.e2e.js',
   // Forbid test.only on CI
   forbidOnly: !!process.env.CI,
@@ -35,5 +35,3 @@ const config = {
     },
   ],
 };
-
-module.exports = config;

packages/strapi-design-system/src/Portal/Portal.js

@@ -1,5 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
 
 export const Portal = ({ children }) => {
   const rootRef = useRef(null);
@@ -23,3 +24,7 @@ export const Portal = ({ children }) => {
 
   return createPortal(children, rootRef.current);
 };
+
+Portal.propTypes = {
+  children: PropTypes.node.isRequired,
+};

packages/strapi-design-system/vite.config.js

@@ -0,0 +1,35 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import glob from 'tiny-glob';
+
+export default glob('./src/**/!(*.spec|*.e2e).{js,svg}').then(async (paths) => {
+  return defineConfig({
+    esbuild: {
+      loader: 'jsx',
+      include: /src\/.*\.jsx?$/,
+      exclude: [],
+    },
+    build: {
+      target: 'es2020',
+      lib: {
+        entry: {},
+        formats: ['cjs', 'es'],
+        fileName: (format) => {
+          return `[name].${format === 'es' ? 'js' : format}`;
+        },
+      },
+      rollupOptions: {
+        input: [resolve(__dirname, './src/index.js'), ...paths.map((path) => `./${path}`)],
+        // make sure to externalize deps that shouldn't be bundled
+        // into your library
+        external: (id) => !id.startsWith('.') && !id.startsWith('/'),
+        output: {
+          dir: 'dist',
+          preserveModules: true,
+        },
+      },
+    },
+    plugins: [react()],
+  });
+});