feat: migrate to vite [WIP]

CONTRIBUTING.md

@@ -40,6 +40,22 @@ Clone this repository and install the dependencies:
 ```
 git clone git@github.com:cloudscape-design/components.git
 cd components
+npm install
+```
+
+To generate the build artifacts, run the following command:
+
+```
+npm run build
+```
+
+Then, start the dev-server by running:
+
+```
+npm start
+```
+
+This will start the vite dev server at http://localhost:8080 with HMR.
 ```
 
 For setup, building, and running locally, see [Setup](docs/SETUP.md).

build-tools/tasks/a11y.js

@@ -8,16 +8,26 @@ const { parseArgs } = require('node:util');
 
 module.exports = task('test:a11y', async () => {
   const options = {
-    shard: {
-      type: 'string',
-    },
+    shard: { type: 'string' },
+    mode: { type: 'string' },
   };
-  const shard = parseArgs({ options, strict: false }).values.shard;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
-    env: {
-      NODE_ENV: 'development',
-    },
-  });
+  const { shard, mode } = parseArgs({ options, strict: false }).values;
+
+  const serverMode = mode ?? (process.env.CI ? 'preview' : 'dev');
+  let server;
+
+  if (serverMode === 'preview') {
+    console.log('Starting Vite preview server...');
+    server = execa('vite', ['preview', '--config', 'vite.config.integ.js', '--port', '8080']);
+  } else {
+    console.log('Starting Vite dev server...');
+    server = execa('vite', ['--config', 'vite.config.integ.js'], {
+      env: {
+        NODE_ENV: 'development',
+      },
+    });
+  }
+
   await waitOn({ resources: ['http://localhost:8080'] });
 
   const files = glob.sync('src/**/__a11y__/**/*.test.ts');
@@ -30,5 +40,5 @@ module.exports = task('test:a11y', async () => {
     env: { ...process.env, NODE_OPTIONS: '--experimental-vm-modules' },
   });
 
-  devServer.cancel();
+  server.cancel();
 });

build-tools/tasks/build-pages.js

@@ -1,23 +1,22 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 const { cpSync } = require('node:fs');
-const { promisify } = require('util');
-const webpack = require('webpack');
+const { build } = require('vite');
 const { parallel } = require('gulp');
 const path = require('path');
 const { mkdirSync, existsSync } = require('fs');
-const createConfig = require('../../pages/webpack.config.cjs');
 const { task } = require('../utils/gulp-utils');
 const workspace = require('../utils/workspace');
 
-const asyncWebpack = promisify(webpack);
-
 async function buildPagesStatic() {
-  const stats = await asyncWebpack(createConfig());
-
-  console.log(stats.toString({ colors: true }));
-  if (stats.hasErrors()) {
-    throw new Error('Error while running webpack');
+  try {
+    await build({
+      configFile: path.resolve(__dirname, '../../vite.config.js'),
+      mode: 'production',
+    });
+  } catch (error) {
+    console.error('Error while running vite build:', error);
+    throw error;
   }
 }
 

build-tools/tasks/integ.js

@@ -10,14 +10,30 @@ module.exports = task('test:integ', async () => {
   const options = {
     shard: { type: 'string' },
     reactVersion: { type: 'string' },
+    mode: { type: 'string' },
   };
-  const { shard, reactVersion = '16' } = parseArgs({ options, strict: false }).values;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
-    env: {
-      NODE_ENV: 'development',
-      REACT_VERSION: reactVersion,
-    },
-  });
+  const { shard, reactVersion = '16', mode } = parseArgs({ options, strict: false }).values;
+
+  const serverMode = mode ?? (process.env.CI ? 'preview' : 'dev');
+  let server;
+
+  if (serverMode === 'preview') {
+    console.log('Starting Vite preview server...');
+    server = execa('vite', ['preview', '--config', 'vite.config.integ.js', '--port', '8080'], {
+      env: {
+        REACT_VERSION: reactVersion,
+      },
+    });
+  } else {
+    console.log('Starting Vite dev server...');
+    server = execa('vite', ['--config', 'vite.config.integ.js'], {
+      env: {
+        NODE_ENV: 'development',
+        REACT_VERSION: reactVersion,
+      },
+    });
+  }
+
   await waitOn({ resources: ['http://localhost:8080'] });
 
   const files = glob.sync('src/**/__integ__/**/*.test.ts');
@@ -30,5 +46,5 @@ module.exports = task('test:integ', async () => {
     env: { ...process.env, NODE_OPTIONS: '--experimental-vm-modules', REACT_VERSION: reactVersion },
   });
 
-  devServer.cancel();
+  server.cancel();
 });

build-tools/tasks/motion.js

@@ -9,14 +9,30 @@ const { parseArgs } = require('node:util');
 module.exports = task('test:motion', async () => {
   const options = {
     reactVersion: { type: 'string' },
+    mode: { type: 'string' },
   };
-  const { reactVersion = '16' } = parseArgs({ options, strict: false }).values;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
-    env: {
-      NODE_ENV: 'development',
-      REACT_VERSION: reactVersion,
-    },
-  });
+  const { reactVersion = '16', mode } = parseArgs({ options, strict: false }).values;
+
+  const serverMode = mode ?? (process.env.CI ? 'preview' : 'dev');
+  let server;
+
+  if (serverMode === 'preview') {
+    console.log('Starting Vite preview server...');
+    server = execa('vite', ['preview', '--config', 'vite.config.integ.js', '--port', '8080'], {
+      env: {
+        REACT_VERSION: reactVersion,
+      },
+    });
+  } else {
+    console.log('Starting Vite dev server...');
+    server = execa('vite', ['--config', 'vite.config.integ.js'], {
+      env: {
+        NODE_ENV: 'development',
+        REACT_VERSION: reactVersion,
+      },
+    });
+  }
+
   await waitOn({ resources: ['http://localhost:8080'] });
 
   const files = glob.sync('src/**/__motion__/**/*.test.ts');
@@ -25,5 +41,5 @@ module.exports = task('test:motion', async () => {
     env: { ...process.env, NODE_OPTIONS: '--experimental-vm-modules' },
   });
 
-  devServer.cancel();
+  server.cancel();
 });

eslint.config.mjs

@@ -156,7 +156,7 @@ export default tsEslint.config(
     },
   },
   {
-    files: ['.github/**', 'build-tools/**', 'scripts/**', 'pages/webpack.*', 'jest.*.js', 'gulpfile.js'],
+    files: ['.github/**', 'build-tools/**', 'scripts/**', 'jest.*.js', 'gulpfile.js'],
     languageOptions: {
       globals: {
         ...globals.node,