feat: add vite to bundle

Author: joshuaellis

packages/strapi-design-system/.eslintignore renamed to .eslintignore

@@ -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

packages/strapi-design-system/.eslintrc.js renamed to .eslintrc.js

@@ -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",
@@ -27,15 +27,23 @@
   },
   "devDependencies": {
     "@specifyapp/cli": "^0.0.51",
+    "@vitejs/plugin-react": "^2.2.0",
     "chokidar-cli": "^3.0.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.20.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-mdx": "^1.17.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
     "fs-extra": "^10.0.0",
     "husky": "=4",
-    "jest-styled-components": "^7.1.1",
     "lerna": "^4.0.0",
     "lint-staged": ">=10",
     "plop": "^2.7.4",
+    "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "url-loader": "^4.1.1"
+    "tiny-glob": "^0.2.9",
+    "vite": "^3.2.2"
   },
   "husky": {
     "hooks": {

.gitignore

@@ -1,4 +1,12 @@
 node_modules
 storybook-static
 .DS_Store
-src
+src
+codemod
+.storybook
+__mocks__
+jest.config.js
+playwright.config.js
+test-bundler.js
+vite.config.js
+yarn.lock

packages/strapi-design-system/.prettierrc.js renamed to .prettierrc.js

@@ -1,14 +1,25 @@
 {
   "name": "@strapi/design-system",
   "version": "1.2.5",
-  "main": "index.js",
   "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./": "./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",
     "@playwright/test": "1.20.0",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
@@ -18,27 +29,17 @@
     "@testing-library/react": "^11.2.5",
     "axe-playwright": "^1.1.11",
     "babel-jest": "^29.2.2",
-    "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",
-    "eslint-plugin-mdx": "^1.17.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
     "intl": "^1.2.5",
     "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
-    "prettier": "^2.2.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",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.5.0"
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
     "@strapi/icons": "^1.2.4",
@@ -47,22 +48,16 @@
     "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1"
   },
-  "dependencies": {
-    "@floating-ui/react-dom": "^1.0.0",
-    "@internationalized/number": "^3.1.1",
-    "compute-scroll-into-view": "^1.0.17",
-    "jest-environment-jsdom": "^29.2.2",
-    "prop-types": "^15.7.2"
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    }
   },
   "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",

package.json

@@ -0,0 +1,36 @@
+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) => {
+  console.log(paths, resolve(__dirname, './src/index.js'));
+  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()],
+  });
+});