build(ui): fix bundle script

packages/ui/package.json

@@ -30,7 +30,7 @@
   },
   "scripts": {
     "dev": "vite serve ./dev --host",
-    "build": "rollup -c",
+    "build": "tsx ./tools/build.ts",
     "build:vite": "vite build",
     "build:watch": "vite build --watch",
     "pre-commit": "lint-staged --relative",
@@ -91,9 +91,16 @@
     "solid-use": "^0.5.0"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "6.0.0",
+    "@rollup/plugin-node-resolve": "14.1.0",
     "@types/node": "^18.7.13",
+    "@vanilla-extract/rollup-plugin": "1.2.0",
+    "chalk": "4.1.2",
+    "merge-anything": "5.0.4",
+    "pretty-ms": "8.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.1",
+    "rollup-plugin-terser": "7.0.2",
     "rollup-preset-solid": "^1.4.0",
     "solid-js": "^1.5.2",
     "tiny-glob": "^0.2.9",

packages/ui/rollup.config.ts

@@ -0,0 +1,37 @@
+import {defineConfig, ModuleFormat, OutputOptions, RollupOptions} from 'rollup';
+import {dependencies, peerDependencies} from './package.json';
+import withSolid from './tools/with-solid';
+
+const externals = [
+  ...Object.keys(peerDependencies),
+  ...Object.keys(dependencies),
+  'solid-js/web',
+  'solid-js/store',
+  '@vanilla-extract/recipes/createRuntimeFn',
+];
+
+function buildOutput(format: ModuleFormat): OutputOptions {
+  return {
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    assetFileNames({name}) {
+      return name!.replace(/^src\//, '');
+    },
+    exports: 'named',
+    dir: `./dist/${format}`,
+    format: format,
+  };
+}
+
+const solidConfig = withSolid({
+  input: {
+    index: 'src/index.tsx',
+    'lightTheme.css': './src/lib/themes/light-theme.css.ts',
+    'darkTheme.css': './src/lib/themes/dark-theme.css.ts',
+  },
+  targets: ['esm', 'cjs'],
+  external: externals,
+  output: [buildOutput('esm'), buildOutput('cjs')],
+});
+
+export default defineConfig(solidConfig as RollupOptions);

packages/ui/src/lib/primitives/ColorPicker/ColorPicker.tsx

@@ -5,11 +5,9 @@ import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {PropsWithChildren, Show} from 'solid-js';
 import {useFloating} from '../../hooks';
 import {backgroundColorVar} from '../../theme';
-import {Box} from '../Box';
 import {Popover} from '../Popover';
 import {createPopoverPortal} from '../Popover/create-popover-portal';
 import * as styles from './ColorPicker.css';
-import {ColorPickerColorItemProps} from './ColorPicker.css';
 import {ColorPickerPopover} from './ColorPickerPopover';
 
 export interface ColorPickerProps {
@@ -100,27 +98,3 @@ export function ColorPicker(props: PropsWithChildren<ColorPickerProps>) {
     </>
   );
 }
-
-type ColorPickerPresetItemProps = {
-  title: string;
-  color: string;
-  onClick: (color: string) => void;
-  active: boolean;
-} & ColorPickerColorItemProps;
-
-export function ColorPickerPresetItem(
-  props: PropsWithChildren<ColorPickerPresetItemProps>,
-) {
-  return (
-    <Box
-      class={styles.colorItem({
-        active: props.active,
-      })}
-      title={props.title}
-      style={assignInlineVars({
-        [backgroundColorVar]: props.color,
-      })}
-      onClick={() => props.onClick(props.color)}
-    />
-  );
-}

packages/ui/src/lib/primitives/ColorPicker/ColorPickerPopover.tsx

@@ -14,8 +14,8 @@ import {VStack} from '../Box';
 import {FlexField} from '../Field';
 import {SegmentedField, SegmentedFieldItem} from '../SegmentedField';
 import {TextField} from '../TextField';
-import {ColorPickerPresetItem} from './ColorPicker';
 import * as styles from './ColorPicker.css';
+import {ColorPickerPresetItem} from './ColorPickerPresetItem';
 
 enum ColorPickerSelectionMode {
   gradient = 'gradient',

packages/ui/src/lib/primitives/ColorPicker/ColorPickerPresetItem.tsx

@@ -0,0 +1,30 @@
+import {assignInlineVars} from '@vanilla-extract/dynamic';
+import {PropsWithChildren} from 'solid-js';
+import {backgroundColorVar} from '../../theme';
+import {Box} from '../Box';
+import * as styles from './ColorPicker.css';
+import {ColorPickerColorItemProps} from './ColorPicker.css';
+
+type ColorPickerPresetItemProps = {
+  title: string;
+  color: string;
+  onClick: (color: string) => void;
+  active: boolean;
+} & ColorPickerColorItemProps;
+
+export function ColorPickerPresetItem(
+  props: PropsWithChildren<ColorPickerPresetItemProps>,
+) {
+  return (
+    <Box
+      class={styles.colorItem({
+        active: props.active,
+      })}
+      title={props.title}
+      style={assignInlineVars({
+        [backgroundColorVar]: props.color,
+      })}
+      onClick={() => props.onClick(props.color)}
+    />
+  );
+}

packages/ui/tools/build.ts

@@ -0,0 +1,56 @@
+import chalk from 'chalk';
+import {isAbsolute, resolve} from 'path';
+import ms from 'pretty-ms';
+import {OutputOptions, rollup, RollupOptions} from 'rollup';
+import rollupConfig from '../rollup.config';
+
+const log = chalk;
+const outputOptions = rollupConfig.output as OutputOptions[];
+
+build();
+
+function relativeId(id: string): string {
+  if (!isAbsolute(id)) return id;
+  return resolve(id);
+}
+
+async function build() {
+  let bundle;
+  const start = Date.now();
+  let buildFailed = false;
+  try {
+    // create a bundle
+    const files = outputOptions.map(t => relativeId(t.file! || t.dir!));
+    let inputFiles: string | undefined;
+    if (typeof rollupConfig.input === 'string') {
+      inputFiles = rollupConfig.input;
+    } else if (rollupConfig.input instanceof Array) {
+      inputFiles = rollupConfig.input.join(', ');
+    } else if (
+      typeof rollupConfig.input === 'object' &&
+      rollupConfig.input !== null
+    ) {
+      inputFiles = Object.values(rollupConfig.input).join(', ');
+    }
+    console.log(
+      log.cyan(`\n${log.bold(inputFiles!)} → ${log.bold(files.join(', '))}...`),
+    );
+    bundle = await rollup(rollupConfig);
+    await Promise.all((outputOptions as RollupOptions[]).map(bundle.write));
+    console.log(
+      log.green(
+        `created ${log.bold(files.join(', '))} in ${chalk.bold(
+          ms(Date.now() - start),
+        )}`,
+      ),
+    );
+  } catch (error) {
+    buildFailed = true;
+    console.error(error);
+  }
+  if (bundle) {
+    // closes the bundle
+    await bundle.close();
+  }
+  process.exit(buildFailed ? 1 : 0);
+}