Add vite support

.changeset/fluffy-spies-remain.md

@@ -0,0 +1,30 @@
+---
+'playroom': minor
+---
+
+Adds support for vite. This allows user to configure a bundler, by specifying a `bundler` option in their Playroom config.
+
+This new option is required, and can have values of `'vite' | 'webpack'`. Additionally to this, we also added a `viteConfig` config field, which can be used similarly to `webpackConfig`, with this parameter you can specify a callback and return a vite configuration object.
+
+```js
+// playroom.config.js
+const svgr = require("vite-plugin-svgr");
+
+/**
+ * @type {import('../../../src/types').PlayroomConfig}
+ */
+module.exports = {
+  components: './components.ts',
+  snippets: './snippets.ts',
+  outputPath: './dist',
+  scope: './useScope.ts',
+  themes: './themes.ts',
+  frameComponent: './FrameComponent.tsx',
+  outputPath: './dist',
+  openBrowser: false,
+  bundler: 'vite',
+  viteConfig: () => ({
+    plugins: [svgr()]
+  })
+};
+```

.github/workflows/validate.yml

@@ -54,6 +54,9 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+      - name: Type Check
+        run: pnpm typecheck
+
       - name: Test
         run: pnpm test
 

README.md

@@ -11,10 +11,12 @@ Simultaneously design across a variety of themes and screen sizes, powered by JS
 
 Playroom allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation.
 
-- Iterate on your designs in the final medium.
-- Create quick mock-ups and interactive prototypes with real code.
-- Exercise and evaluate the flexibility of your design system.
-- Share your work with others by simply copying the URL.
+- :sparkles: Iterate on your designs in the final medium.
+- :zap: Create quick mock-ups and interactive prototypes with real code.
+- :microscope: Exercise and evaluate the flexibility of your design system.
+- :exploding_head: Share your work with others by simply copying the URL.
+- :boom: Supports both [vite](https://vitejs.dev/) and [webpack](https://webpack.js.org/).
+- :star: Supports TypeScript and React out of the box when using Vite as a bundler.
 
 ## Demos
 
@@ -56,30 +58,51 @@ Add the following scripts to your `package.json`:
 Add a `playroom.config.js` file to the root of your project:
 
 ```js
+/**
+ * @type {import('playroom').PlayroomConfig}
+ */
 module.exports = {
   components: './src/components',
   outputPath: './dist/playroom',
 
   // Optional:
   title: 'My Awesome Library',
   themes: './src/themes',
+  // these files can also have the .ts/.tsx extension
   snippets: './playroom/snippets.js',
   frameComponent: './playroom/FrameComponent.js',
   scope: './playroom/useScope.js',
   widths: [320, 768, 1024],
   port: 9000,
   openBrowser: true,
-  paramType: 'search', // default is 'hash'
+  paramType: 'search', // default is 'hash'. When using 'search' the iframes may refresh on every change.
   exampleCode: `
     <Button>
       Hello World!
     </Button>
   `,
   baseUrl: '/playroom/',
+  // you can also specify 'vite' as a bundler and use the 'viteConfig' config key
+  bundler: 'vite',
+  viteConfig: () => ({
+    // Custom vite config goes here...
+  }),
+  iframeSandbox: 'allow-scripts',
+};
+```
+
+You can also use Webpack as a bundler:
+
+```js
+/**
+ * @type {import('playroom').PlayroomConfig}
+ */
+module.exports = {
+  // ... other config
+  bundler: 'webpack',
   webpackConfig: () => ({
     // Custom webpack config goes here...
   }),
-  iframeSandbox: 'allow-scripts',
 };
 ```
 

cypress/projects/basic/playroom.config.js

@@ -5,4 +5,5 @@ module.exports = {
   outputPath: './dist',
   openBrowser: false,
   storageKey: 'playroom-example-basic',
+  bundler: 'webpack',
 };

cypress/projects/themed/playroom.config.js

@@ -7,4 +7,5 @@ module.exports = {
   paramType: 'search',
   port: 9001,
   storageKey: 'playroom-example-themed',
+  bundler: 'webpack',
 };

cypress/projects/typescript/playroom.config.js

@@ -4,6 +4,7 @@ module.exports = {
   outputPath: './dist',
   openBrowser: false,
   storageKey: 'playroom-example-typescript',
+  bundler: 'webpack',
   webpackConfig: () => ({
     module: {
       rules: [

cypress/projects/vite/FrameComponent.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { Theme } from './themes';
+
+const parent = {
+  border: '1px solid currentColor',
+  padding: '10px 10px 10px 15px',
+};
+
+const FrameComponent = ({
+  theme,
+  children,
+}: {
+  theme: Theme;
+  children: ReactNode;
+}) => (
+  <div>
+    FrameComponent (theme: &quot;{theme.name}&quot;)
+    {children ? <div style={parent}>{children}</div> : null}
+  </div>
+);
+
+export default FrameComponent;

cypress/projects/vite/components.ts

@@ -0,0 +1,2 @@
+export { Foo } from './components/Foo';
+export { Bar } from './components/Bar';

cypress/projects/vite/components/Bar.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue' | 'black';
+  children: React.ReactNode;
+};
+
+export const Bar: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Bar{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);

cypress/projects/vite/components/Foo.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue' | 'black';
+  children: React.ReactNode;
+};
+
+export const Foo: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Foo{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);

cypress/projects/vite/components/styles.ts

@@ -0,0 +1,4 @@
+export const parent = {
+  border: '4px solid currentColor',
+  padding: '10px 10px 10px 15px',
+};

cypress/projects/vite/playroom.config.js

@@ -0,0 +1,15 @@
+/**
+ * @type {import('../../../src/types').PlayroomConfig}
+ */
+module.exports = {
+  components: './components.ts',
+  snippets: './snippets.ts',
+  outputPath: './dist',
+  scope: './useScope.ts',
+  themes: './themes.ts',
+  frameComponent: './FrameComponent.tsx',
+  outputPath: './dist',
+  openBrowser: false,
+  storageKey: 'playroom-example-vite',
+  bundler: 'vite',
+};

cypress/projects/vite/snippets.ts

@@ -0,0 +1,22 @@
+export default [
+  {
+    group: 'Foo',
+    name: 'Default',
+    code: '<Foo>Foo</Foo>',
+  },
+  {
+    group: 'Foo',
+    name: 'Red',
+    code: '<Foo color="red">Red Foo</Foo>',
+  },
+  {
+    group: 'Bar',
+    name: 'Default',
+    code: '<Bar>Bar</Bar>',
+  },
+  {
+    group: 'Bar',
+    name: 'Blue',
+    code: '<Bar color="blue">Blue Bar</Bar>',
+  },
+];

cypress/projects/vite/themes.ts

@@ -0,0 +1,6 @@
+export type Theme = {
+  name: string;
+};
+
+export const themeOne = { name: 'one' } satisfies Theme;
+export const themeTwo = { name: 'two' } satisfies Theme;

cypress/projects/vite/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "module": "es2022",
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "es2022"],
+    "target": "es2022"
+  }
+}

cypress/projects/vite/useScope.ts

@@ -0,0 +1,4 @@
+export default () => ({
+  hello: () => 'HELLO',
+  world: () => 'WORLD',
+});

cypress/support/utils.js

@@ -2,7 +2,7 @@
 /// <reference types="cypress" />
 import dedent from 'dedent';
 
-import { createUrl } from '../../utils';
+import { createUrl } from '../../src/utils/url';
 import { isMac } from '../../src/utils/formatting';
 
 const WAIT_FOR_FRAME_TO_RENDER = 1000;

lib/build.js

@@ -1,24 +1,51 @@
 const webpack = require('webpack');
+const vite = require('vite');
 const makeWebpackConfig = require('./makeWebpackConfig');
+const makeViteConfig = require('./makeViteConfig');
 const noop = () => {};
 
+/**
+ *
+ * @param {import('../src/internalTypes').InternalPlayroomConfig} config
+ * @param {(...args: any[]) => void} callback
+ */
 module.exports = async (config, callback = noop) => {
-  const webpackConfig = await makeWebpackConfig(config, { production: true });
+  if (config.bundler === 'webpack') {
+    const webpackConfig = await makeWebpackConfig(config, { production: true });
+    webpack(webpackConfig, (err, stats) => {
+      // https://webpack.js.org/api/node/#error-handling
+      if (err) {
+        const errorMessage = [err.stack || err, err.details]
+          .filter(Boolean)
+          .join('/n/n');
+        return callback(errorMessage);
+      }
 
-  webpack(webpackConfig, (err, stats) => {
-    // https://webpack.js.org/api/node/#error-handling
-    if (err) {
-      const errorMessage = [err.stack || err, err.details]
-        .filter(Boolean)
-        .join('/n/n');
-      return callback(errorMessage);
-    }
+      if (stats.hasErrors()) {
+        const info = stats.toJson();
+        return callback(info.errors.map((error) => error.message).join('\n\n'));
+      }
 
-    if (stats.hasErrors()) {
-      const info = stats.toJson();
-      return callback(info.errors.map((error) => error.message).join('\n\n'));
+      return callback();
+    });
+  } else if (config.bundler === 'vite') {
+    const viteConfig = await makeViteConfig(
+      { ...config, baseUrl: '' },
+      {
+        production: true,
+      }
+    );
+    try {
+      await vite.build(viteConfig);
+      return callback();
+    } catch (e) {
+      console.error('Error building playroom with vite');
+      console.error(e);
+      return callback(e.toString());
     }
-
-    return callback();
-  });
+  } else {
+    throw new Error(
+      `Unknown bundler "${config.bundler}. Add the 'bundler' field with a value of 'webpack' or 'vite' to your playroom config."`
+    );
+  }
 };

lib/makeDefaultWebpackConfig.js

@@ -1,3 +1,6 @@
+/**
+ * @param {import('../src/internalTypes').InternalPlayroomConfig} playroomConfig
+ */
 module.exports = (playroomConfig) => ({
   module: {
     rules: [