Trial switching to vite/rollup

packages/webamp/.gitignore

@@ -1,5 +1,6 @@
 **/node_modules
 
+/dist
 /built
 /demo/built
 /coverage

packages/webamp/demo/js/DemoDesktop.tsx

@@ -1,4 +1,4 @@
-import { WebampLazy } from "./Webamp";
+import WebampLazy from "../../js/webampLazy";
 import { Suspense } from "react";
 import WebampIcon from "./WebampIcon";
 // import Mp3Icon from "./Mp3Icon";

packages/webamp/demo/js/MilkIcon.tsx

@@ -1,4 +1,5 @@
-import { WebampLazy, loadPresets } from "./Webamp";
+import type WebampLazy from "../../js/webampLazy";
+import { loadPresets } from "../../js/actionCreators/milkdrop";
 import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";

packages/webamp/demo/js/Mp3Icon.tsx

@@ -1,4 +1,5 @@
-import { WebampLazy, URLTrack } from "./Webamp";
+import WebampLazy from "../../js/webampLazy";
+import { URLTrack } from "../../js/types";
 import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";

packages/webamp/demo/js/SkinIcon.tsx

@@ -1,4 +1,4 @@
-import { WebampLazy } from "./Webamp";
+import WebampLazy from "../../js/webampLazy";
 // @ts-ignore
 import iconSmall from "../images/icons/paint-file-32x32.png";
 import DesktopIcon from "./DesktopIcon";

packages/webamp/demo/js/WebampIcon.tsx

@@ -1,4 +1,4 @@
-import { WebampLazy } from "./Webamp";
+import WebampLazy from "../../js/webampLazy";
 import { useEffect, useState } from "react";
 // @ts-ignore
 import iconSmall from "../images/icons/winamp2-32x32.png";

packages/webamp/demo/js/availableSkins.ts

@@ -1,17 +1,17 @@
 // @ts-ignore
-import osx from "url:../skins/MacOSXAqua1-5.wsz";
+import osx from "../skins/MacOSXAqua1-5.wsz";
 // @ts-ignore
-import topaz from "url:../skins/TopazAmp1-2.wsz";
+import topaz from "../skins/TopazAmp1-2.wsz";
 // @ts-ignore
-import visor from "url:../skins/Vizor1-01.wsz";
+import visor from "../skins/Vizor1-01.wsz";
 // @ts-ignore
-import xmms from "url:../skins/XMMS-Turquoise.wsz";
+import xmms from "../skins/XMMS-Turquoise.wsz";
 // @ts-ignore
-import zaxon from "url:../skins/ZaxonRemake1-0.wsz";
+import zaxon from "../skins/ZaxonRemake1-0.wsz";
 // @ts-ignore
-import green from "url:../skins/Green-Dimension-V2.wsz";
+import green from "../skins/Green-Dimension-V2.wsz";
 // @ts-ignore
-import internetArchive from "url:../skins/Internet-Archive.wsz";
+import internetArchive from "../skins/Internet-Archive.wsz";
 
 export default [
   { url: green, name: "Green Dimension V2" },

packages/webamp/demo/js/butterchurnOptions.ts

@@ -1,4 +1,4 @@
-import { ButterchurnOptions } from "./Webamp";
+import { ButterchurnOptions } from "../../js/types";
 
 const KNOWN_PRESET_URLS_REGEXES = [
   /^https:\/\/unpkg\.com\/butterchurn-presets\/.*\.json$/,

packages/webamp/demo/js/config.ts

@@ -1,6 +1,6 @@
-import { Track, URLTrack, PartialState } from "./Webamp";
+import { Track, URLTrack, PartialState } from "../../js/types";
 // @ts-ignore
-import llamaAudio from "url:../mp3/llama-2.91.mp3";
+import llamaAudio from "../mp3/llama-2.91.mp3";
 
 interface Config {
   initialTracks?: Track[];

packages/webamp/demo/js/dropboxFilePicker.ts

@@ -1,4 +1,4 @@
-import { FilePicker } from "./Webamp";
+import { FilePicker } from "../../js/types";
 
 interface DropboxFile {
   link: string;

packages/webamp/demo/js/eventLogger.ts

@@ -1,5 +1,5 @@
 import { log, GoogleAnalyticsEvent } from "./logger";
-import { Action } from "./Webamp";
+import { Action } from "../../js/types";
 
 function logEventFromAction(action: Action): GoogleAnalyticsEvent | null {
   switch (action.type) {

packages/webamp/demo/js/index.tsx

@@ -5,14 +5,14 @@ import isButterchurnSupported from "butterchurn/dist/isSupported.min";
 import { getWebampConfig } from "./webampConfig";
 import * as SoundCloud from "./SoundCloud";
 
+import WebampLazy from "../../js/webampLazy";
 import {
-  WebampLazy,
   DISABLE_MARQUEE,
+  SET_DUMMY_VIZ_DATA,
+  SET_EQ_AUTO,
   TOGGLE_REPEAT,
   TOGGLE_SHUFFLE,
-  SET_EQ_AUTO,
-  SET_DUMMY_VIZ_DATA,
-} from "./Webamp";
+} from "../../js/actionTypes";
 
 import { disableMarquee, skinUrl as configSkinUrl } from "./config";
 import DemoDesktop from "./DemoDesktop";

packages/webamp/demo/js/mediaSession.ts

@@ -1,4 +1,4 @@
-import { WebampLazy } from "./Webamp";
+import type WebampLazy from "../../js/webampLazy";
 
 export default function enableMediaSession(webamp: WebampLazy) {
   if ("mediaSession" in navigator) {

packages/webamp/demo/js/screenshotInitialState.ts

@@ -1,4 +1,4 @@
-import { PartialState } from "./Webamp";
+import { PartialState } from "../../js/types";
 
 const defaultTracksState = {
   "0": {

packages/webamp/demo/js/webampConfig.ts

@@ -6,28 +6,24 @@ import isButterchurnSupported from "butterchurn/dist/isSupported.min";
 import { loggerMiddleware } from "./eventLogger";
 import * as SoundCloud from "./SoundCloud";
 
+import { Action, Options, AppState, WindowLayout } from "../../js/types";
+
 import {
-  Action,
-  Options,
-  PrivateOptions,
-  WINDOWS,
   STEP_MARQUEE,
   UPDATE_TIME_ELAPSED,
   UPDATE_WINDOW_POSITIONS,
   SET_VOLUME,
   SET_BALANCE,
   SET_BAND_VALUE,
-  AppState,
-  WindowLayout,
-} from "./Webamp";
+} from "../../js/actionTypes";
 
 import { getButterchurnOptions } from "./butterchurnOptions";
 import dropboxFilePicker from "./dropboxFilePicker";
 import availableSkins from "./availableSkins";
 
 import { initialTracks, initialState } from "./config";
 import screenshotInitialState from "./screenshotInitialState";
-import { InjectableDependencies } from "../../js/webampLazy.jsx";
+import { InjectableDependencies, PrivateOptions } from "../../js/webampLazy";
 
 const NOISY_ACTION_TYPES = new Set([
   STEP_MARQUEE,

packages/webamp/js/actionCreators/media.ts

@@ -15,7 +15,7 @@ import {
 } from "../actionTypes";
 
 import { MEDIA_STATUS } from "../constants";
-import { openMediaFileDialog } from "./";
+import { openMediaFileDialog } from "./files";
 import { GetState, Dispatch, Thunk, Action } from "../types";
 import * as Selectors from "../selectors";
 

packages/webamp/js/components/App.tsx

@@ -25,7 +25,7 @@ import { useTypedSelector, useActionCreator } from "../hooks";
 import Css from "./Css";
 
 // @ts-ignore
-import cssText from "bundle-text:../../css/webamp.css";
+import cssText from "../../css/webamp.css?inline";
 
 interface Props {
   filePickers: FilePicker[];

packages/webamp/package.json

@@ -11,42 +11,6 @@
   "unpkg": "built/webamp.bundle.min.js",
   "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead",
   "targets": {
-    "eager-cjs": {
-      "source": "js/webamp.ts",
-      "outputFormat": "commonjs",
-      "isLibrary": false,
-      "optimize": false
-    },
-    "eager-cjs-min": {
-      "source": "js/webamp.ts",
-      "outputFormat": "commonjs",
-      "isLibrary": false,
-      "optimize": true
-    },
-    "eager-mjs": {
-      "source": "js/webamp.ts",
-      "outputFormat": "esmodule",
-      "isLibrary": false,
-      "optimize": false
-    },
-    "lazy-cjs": {
-      "source": "js/webampLazy.tsx",
-      "outputFormat": "commonjs",
-      "isLibrary": false,
-      "optimize": false
-    },
-    "lazy-cjs-min": {
-      "source": "js/webampLazy.tsx",
-      "outputFormat": "commonjs",
-      "isLibrary": false,
-      "optimize": true
-    },
-    "lazy-mjs": {
-      "source": "js/webampLazy.tsx",
-      "outputFormat": "esmodule",
-      "isLibrary": false,
-      "optimize": false
-    },
     "demo-site": {
       "source": "demo/index.html"
     }
@@ -63,22 +27,16 @@
       "types": "./built/types/js/webampLazy.d.ts"
     }
   },
-  "eager-cjs": "built/webamp.bundle.js",
-  "eager-cjs-min": "built/webamp.bundle.min.js",
-  "eager-mjs": "built/webamp.bundle.mjs",
-  "lazy-cjs": "built/webamp.lazy-bundle.js",
-  "lazy-cjs-min": "built/webamp.lazy-bundle.min.js",
-  "lazy-mjs": "built/webamp.lazy-bundle.mjs",
   "scripts": {
     "lint-fix": "eslint . --ext ts,tsx,js --fix",
     "lint": "eslint . --ext ts,tsx,js",
     "type-check": "tsc",
-    "build": "parcel build --target demo-site",
-    "build-library": "parcel build --target eager-cjs --target eager-cjs-min --target eager-mjs --target lazy-cjs --target lazy-cjs-min --target lazy-mjs --target types --reporter @parcel/reporter-bundle-analyzer",
+    "build": "vite build",
+    "build-library": "node ./scripts/rollup.mjs",
     "prepublishOnly": "npm run build-library && npm run type-check",
     "publish-next": "yarn publish --new-version=\"0.0.0-next-$(git rev-parse --short HEAD)\" --tag next",
     "serve": "http-server ./dist/demo-site",
-    "start": "parcel demo/index.html",
+    "start": "vite",
     "test": "jest --config=config/jest.unit.js",
     "tdd": "jest --config=config/jest.unit.js --watch",
     "format": "prettier --write \"**/*.{js,ts,tsx,d.ts,css}\"",
@@ -107,6 +65,13 @@
   "homepage": "https://github.com/captbaritone/webamp/",
   "devDependencies": {
     "@parcel/reporter-bundle-analyzer": "^2.8.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/classnames": "^2.2.6",
     "@types/fscreen": "^1.0.1",
     "@types/invariant": "^2.2.29",
@@ -132,11 +97,17 @@
     "jest-puppeteer": "^10.0.1",
     "parcel": "^2.8.2",
     "postcss": "^8.4.21",
+    "postcss-import": "^16.1.0",
     "puppeteer": "^22.2.0",
     "react-test-renderer": "^17.0.1",
+    "rollup": "^4.18.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "style-loader": "^0.23.1",
     "typescript": "^5.3.3",
-    "url-loader": "^1.1.2"
+    "url-loader": "^1.1.2",
+    "vite": "^5.2.12"
   },
   "jest": {
     "globalSetup": "jest-environment-puppeteer/setup",

packages/webamp/scripts/rollup.mjs

@@ -0,0 +1,85 @@
+import { rollup } from "rollup";
+import { getPlugins } from "./rollupPlugins.mjs";
+
+/**
+ * Each object here represents a different bundle/build. This enables us to
+ * define the full matrix of module types/entry points/bundle style (minified?)
+ * as well as where those files should end up.
+ */
+const BUNDLES = [
+  {
+    name: "Minified WebampLazy UMD",
+    input: "js/webampLazy.tsx",
+    minify: false,
+    output: {
+      file: "built/webamp.lazy-bundle.js",
+      format: "umd",
+      name: "Webamp",
+    },
+  },
+  {
+    name: "Minified WebampLazy UMD",
+    input: "js/webampLazy.tsx",
+    minify: true,
+    output: {
+      file: "built/webamp.lazy-bundle.min.js",
+      format: "umd",
+      name: "Webamp",
+    },
+  },
+  {
+    name: "Minified WebampLazy ES",
+    input: "js/webampLazy.tsx",
+    minify: true,
+    output: {
+      file: "built/webamp.lazy-bundle.min.mjs",
+      format: "module",
+    },
+  },
+  {
+    name: "Webamp UMD",
+    input: "js/webamp.ts",
+    minify: false,
+    output: {
+      file: "built/webamp.bundle.js",
+      format: "umd",
+      name: "Webamp",
+    },
+  },
+  {
+    name: "Minified Webamp UMD",
+    input: "js/webamp.ts",
+    minify: true,
+    output: {
+      file: "built/webamp.bundle.min.js",
+      format: "umd",
+      name: "Webamp",
+    },
+  },
+  {
+    name: "Webamp ES",
+    input: "js/webamp.ts",
+    minify: true,
+    output: {
+      file: "built/webamp.bundle.mjs",
+      format: "module",
+    },
+  },
+];
+
+build();
+
+async function build() {
+  for (const bundleDesc of BUNDLES) {
+    console.log(`=======[ Building ${bundleDesc.name} ]=======`);
+    const plugins = getPlugins({
+      outputFile: bundleDesc.output.file,
+      minify: bundleDesc.minify,
+    });
+    const bundle = await rollup({ input: bundleDesc.input, plugins });
+    await bundle.write({
+      sourcemap: true,
+      ...bundleDesc.output,
+    });
+  }
+}