Split demo site into its own package

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Build all packages
         run: |
-          npx turbo build build-library
+          npx turbo build
         env:
           NODE_ENV: production
       - name: Lint and type-check

README.md

@@ -6,7 +6,7 @@
 A reimplementation of Winamp in HTML5 and JavaScript with full skin support.
 As seen on [TechCrunch], [Motherboard], [Gizmodo], Hacker News ([1], [2], [3], [4]), and [elsewhere](./packages/webamp/docs/press.md).
 
-[![Screenshot of Webamp](https://raw.githubusercontent.com/captbaritone/webamp/master/packages/webamp/demo/images/preview.png)](https://webamp.org)
+[![Screenshot of Webamp](https://raw.githubusercontent.com/captbaritone/webamp/master/packages/webamp-demo/images/preview.png)](https://webamp.org)
 
 Check out this [Twitter thread](https://twitter.com/captbaritone/status/961274714013319168) for an illustrated list of features. Works in modern versions of Edge, Firefox, Safari and Chrome. IE is [not supported](http://caniuse.com/#feat=audio-api).
 
@@ -19,7 +19,7 @@ Check out this [Twitter thread](https://twitter.com/captbaritone/status/96127471
 Webamp uses a [monorepo](https://en.wikipedia.org/wiki/Monorepo) approach, so in addition to the Webamp NPM module, this repository contains code for a few closely related projects and some pieces of Webamp which are published as standalone modules:
 
 - [`packages/webamp`](https://github.com/captbaritone/webamp/tree/master/packages/webamp): The [Webamp NPM module](https://www.npmjs.com/package/webamp)
-- [`packages/webamp/demo`](https://github.com/captbaritone/webamp/tree/master/packages/webamp/demo): The demo site which lives at [webamp.org](https://webamp.org)
+- [`packages/webamp-demo`](https://github.com/captbaritone/webamp/tree/master/packages/webamp-demo): The demo site which lives at [webamp.org](https://webamp.org)
 - [`packages/webamp-docs`](https://github.com/captbaritone/webamp/tree/master/packages/webamp-docs): The documentation site for Webamp the NPM library which lives at [docs.webamp.org](https://docs.webamp.org)
 - [`packages/ani-cursor`](https://github.com/captbaritone/webamp/tree/master/packages/ani-cursor): An NPM module for rendering animiated `.ani` cursors as CSS animations
 - [`packages/skin-database`](https://github.com/captbaritone/webamp/tree/master/packages/skin-database): The server component of https://skins.webamp.org which also runs our [Twitter bot](https://twitter.com/winampskins), and a Discord bot for our community chat

netlify.toml

@@ -1,6 +1,6 @@
 [build]
 command = "pnpm run deploy"
-publish = "packages/webamp/dist/demo-site/"
+publish = "packages/webamp-demo/dist/"
 
 # A short URL for listeners of https://changelog.com/podcast/291
 [[redirects]]

package.json

@@ -15,7 +15,7 @@
     "test:unit": "jest",
     "lint": "npx turbo lint",
     "type-check": "pnpm --filter webamp type-check && pnpm --filter ani-cursor type-check && pnpm --filter skin-database type-check && pnpm --filter webamp-docs type-check && pnpm --filter winamp-eqf type-check",
-    "deploy": "npx turbo webamp#build webamp-modern#build --concurrency 1 && mv packages/webamp-modern/build packages/webamp/dist/demo-site/modern",
+    "deploy": "npx turbo build webamp-modern#build --concurrency 1 && mv packages/webamp-modern/build packages/webamp-demo/dist/modern",
     "format": "prettier --write '**/*.{js,ts,tsx}'"
   },
   "devDependencies": {

packages/webamp/demo/index.html → packages/webamp-demo/index.html

@@ -63,7 +63,7 @@
       </a>
       <a
         target="_blank"
-        href="https://github.com/captbaritone/webamp/blob/master/packages/webamp/docs/music-credits.md"
+        href="https://github.com/captbaritone/webamp/blob/master/packages/webamp-demo/docs/music-credits.md"
         id="music-credits"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

packages/webamp/demo/js/DemoDesktop.tsx → packages/webamp-demo/js/DemoDesktop.tsx

@@ -1,10 +1,10 @@
-import WebampLazy from "../../js/webampLazy";
+import WebampLazy from "../../webamp/js/webampLazy";
 import { Suspense } from "react";
 import WebampIcon from "./WebampIcon";
 // import Mp3Icon from "./Mp3Icon";
 import SkinIcon from "./SkinIcon";
 import { /* defaultInitialTracks, */ SHOW_DESKTOP_ICONS } from "./config";
-import { useWindowSize } from "../../js/hooks";
+import { useWindowSize } from "../../webamp/js/hooks";
 import availableSkins from "./availableSkins";
 import DesktopLinkIcon from "./DesktopLinkIcon";
 import museumIcon from "../images/icons/internet-folder-32x32.png";

packages/webamp/demo/js/MilkIcon.tsx → packages/webamp-demo/js/MilkIcon.tsx

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

packages/webamp/demo/js/Mp3Icon.tsx → packages/webamp-demo/js/Mp3Icon.tsx

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

packages/webamp/demo/js/SkinIcon.tsx → packages/webamp-demo/js/SkinIcon.tsx

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

packages/webamp/demo/js/SoundCloud.ts → packages/webamp-demo/js/SoundCloud.ts

@@ -1,4 +1,4 @@
-import { Track } from "../../js/types";
+import { Track } from "../../webamp/js/types";
 
 const CLIENT_ID = "T9EbIJ75SnsJK3iX8lOZaDlGIYgQB32G";
 

packages/webamp/demo/js/WebampIcon.tsx → packages/webamp-demo/js/WebampIcon.tsx

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

packages/webamp/demo/js/butterchurnOptions.ts → packages/webamp-demo/js/butterchurnOptions.ts

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

packages/webamp/demo/js/choreography.ts → packages/webamp-demo/js/choreography.ts

@@ -1,5 +1,5 @@
-import Webamp from "../../js/webampLazy";
-import { Slider } from "../../js/types";
+import Webamp from "../../webamp/js/webampLazy";
+import { Slider } from "../../webamp/js/types";
 import { batch } from "react-redux";
 
 const BANDS: Slider[] = [

packages/webamp/demo/js/config.ts → packages/webamp-demo/js/config.ts

@@ -1,4 +1,4 @@
-import { Track, URLTrack, PartialState } from "../../js/types";
+import { Track, URLTrack, PartialState } from "../../webamp/js/types";
 // @ts-ignore
 import llamaAudio from "../mp3/llama-2.91.mp3";
 

packages/webamp/demo/js/dropboxFilePicker.ts → packages/webamp-demo/js/dropboxFilePicker.ts

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

packages/webamp/demo/js/eventLogger.ts → packages/webamp-demo/js/eventLogger.ts

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

packages/webamp/demo/js/index.tsx → packages/webamp-demo/js/index.tsx

@@ -6,7 +6,7 @@ import isButterchurnSupported from "butterchurn/dist/isSupported.min";
 import { getWebampConfig } from "./webampConfig";
 import * as SoundCloud from "./SoundCloud";
 
-import WebampLazy from "../../js/webampLazy";
+import WebampLazy from "../../webamp/js/webampLazy";
 
 import { disableMarquee, skinUrl as configSkinUrl } from "./config";
 import DemoDesktop from "./DemoDesktop";

packages/webamp/demo/js/screenshotInitialState.ts → packages/webamp-demo/js/screenshotInitialState.ts

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

packages/webamp/demo/js/webampConfig.ts → packages/webamp-demo/js/webampConfig.ts

@@ -6,15 +6,15 @@ 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, AppState, WindowLayout } from "../../webamp/js/types";
 
 import { getButterchurnOptions } from "./butterchurnOptions";
 import dropboxFilePicker from "./dropboxFilePicker";
 import availableSkins from "./availableSkins";
 
 import { initialTracks, initialState } from "./config";
 import screenshotInitialState from "./screenshotInitialState";
-import { InjectableDependencies, PrivateOptions } from "../../js/webampLazy";
+import { InjectableDependencies, PrivateOptions } from "../../webamp/js/webampLazy";
 
 const NOISY_ACTION_TYPES = new Set([
   "STEP_MARQUEE",

packages/webamp-demo/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "webamp-demo",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@sentry/browser": "5.9.1",
+    "ani-cursor": "workspace:*",
+    "butterchurn": "3.0.0-beta.5",
+    "butterchurn-presets": "3.0.0-beta.4",
+    "classnames": "^2.2.5",
+    "invariant": "^2.2.3",
+    "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
+    "milkdrop-preset-converter-aws": "^0.1.6",
+    "music-metadata": "^11.6.0",
+    "music-metadata-browser": "^0.6.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-redux": "^8.0.5",
+    "redux": "^5.0.0-alpha.0",
+    "redux-sentry-middleware": "^0.1.3",
+    "redux-thunk": "^3.1.0",
+    "reselect": "^3.0.1",
+    "strtok3": "^10.3.1",
+    "tinyqueue": "^3.0.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "typescript": "^5.6.2",
+    "vite": "^5.2.12",
+    "webamp": "workspace:*",
+    "winamp-eqf": "workspace:*"
+  }
+}

packages/webamp/demo/readme.md → packages/webamp-demo/readme.md

@@ -1,6 +1,8 @@
 # Webamp.org
 
-The Webamp demo site, [webamp.org](https://webamp.org), uses the same interface as the NPM module but adds the following functionality by utilizing Webamp's public API
+> **Note:** This package is the source for the [webamp.org](https://webamp.org) demo site. It is not a good reference for how to use Webamp in your own project — it relies on private internal APIs and imports library source directly. For examples of how to use Webamp as a consumer, see the [examples](../../examples/) directory or the [documentation site](https://docs.webamp.org).
+
+The demo site uses the same interface as the NPM module but adds the following functionality by utilizing Webamp's public API
 
 - Error reporting using [Sentry](https://sentry.io)
 - Analytics using [Google Analytics](https://analytics.google.com/analytics/web/)
@@ -9,35 +11,37 @@ The Webamp demo site, [webamp.org](https://webamp.org), uses the same interface
 
 Additionally, it makes use of some private Webamp APIs to add the following functionality:
 
-- [Butterchun](https://github.com/jberg/butterchurn) integration to render [MilkDrop](https://en.wikipedia.org/wiki/MilkDrop) visualizations. We intend to make this part of the public API soon.
+- [Butterchurn](https://github.com/jberg/butterchurn) integration to render [MilkDrop](https://en.wikipedia.org/wiki/MilkDrop) visualizations. We intend to make this part of the public API soon.
 - "Screenshot" mode `https://webamp.org/?screenshot=1` which can be used together with [Puppeteer](https://github.com/GoogleChrome/puppeteer) to automate the generation of Winamp skin screenshots
 
+## Development
+
+    pnpm start
+
+This starts a Vite dev server that imports the webamp library source directly via relative paths. Any edits to files in `packages/webamp/js/` are immediately reflected in the browser without a rebuild step.
+
 ## Production Builds
 
-To do an optimized build of the demo site, you can run:
+To do an optimized build of the demo site:
 
     pnpm run build
 
-If you wish to test this build locally, run:
+To test the production build locally:
 
     pnpm run serve
 
-Then open the local ip/port that is output to the console in your browser.
-
 ## Deploying
 
-[Netlify](https://www.netlify.com/) watches GitHub for new versions of master. When a new version is seen, it is automatically built using `npm run build` and pushed to the server. Additionally, Netlify will run a build on every pull request and include a link under the heading "Deploy preview ready!". This enables easy high level testing of pull requests.
+[Netlify](https://www.netlify.com/) watches GitHub for new versions of master. When a new version is seen, it is automatically built and pushed to the server. Additionally, Netlify will run a build on every pull request and include a link under the heading "Deploy preview ready!".
 
 In short, deploying should be as simple as pushing a commit to master.
 
-Additionally, if you want to fork the project, deploying should be as simple as setting up a free Netlify account
-
 ### Advanced Usage
 
 There are some "feature flags" which you can manipulate by passing a specially crafted URL hash. Simply supply a JSON blob after the `#` of the URL to change these settings:
 
 - `skinUrl` (string) Url of the default skin to use. Note, this file must be served with the correct Allows Origin header.
 - `audioUrl` (string) Url of the default audio file to use. Note, this file must be served with the correct Allows Origin header.
-- `initialState` (object) Override the [initial Redux state](packages/webamp/js/reducers/index.ts). Values from this object will be recursively merged into the actual default state.
+- `initialState` (object) Override the initial Redux state. Values from this object will be recursively merged into the actual default state.
 
-**Note:** These are intended mostly as development tools and are subject to change at any time.
+**Note:** These are intended mostly as development tools and are subject to change at any time.

packages/webamp-demo/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

packages/webamp-demo/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import nodePolyfills from "rollup-plugin-polyfill-node";
+
+export default defineConfig({
+  build: {
+    outDir: "dist",
+    chunkSizeWarningLimit: 2500,
+  },
+  assetsInclude: ["**/*.wsz", "**/*.mp3"],
+  plugins: [
+    // Needed for music-metadata-browser which uses polyfillable node APIs
+    // @ts-expect-error Rollup plugin type mismatch with Vite's stricter types
+    nodePolyfills(),
+  ],
+});

packages/webamp/README.md

@@ -2,26 +2,22 @@
 
 ## Development
 
-I do most development by starting the demo site in dev mode and iterating that way. The following commands will install all dependencies, run an initial development build and then start a local server. Every time you save a file, it will rebuild the bundle and automatically refresh the page.
+The demo site in `packages/webamp-demo` imports the library source directly, so you can iterate on the library with live reloading:
 
-    # First clone the repo, then...
-    cd webamp
-    # Change into the NPM module's sub directory
-    cd packages/webamp
-    # __Note:__ Please use pnpm over npm/yarn, since pnpm will respect our `pnpm-lock.yaml` file
-    pnpm install
+    cd packages/webamp-demo
     pnpm start
 
-`http://localhost:8080/` should automatically open in your browser.
+Any edits to library source files in `packages/webamp/js/` are immediately reflected in the browser — no rebuild needed.
 
-    # Run tests and lint checks
+    # Run tests
+    cd packages/webamp
     pnpm test
 
 ## Building
 
-The NPM module is built separately from the demo site. To build it run:
+To build the library for publishing:
 
-    pnpm run build-library
+    pnpm run build
 
 This will write files to `./built`.
 

packages/webamp/package.json

@@ -12,11 +12,6 @@
   "types": "built/types/js/webamp.d.ts",
   "browser": "built/webamp.bundle.min.mjs",
   "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead",
-  "targets": {
-    "demo-site": {
-      "source": "demo/index.html"
-    }
-  },
   "exports": {
     ".": {
       "require": "./built/webamp.bundle.min.js",
@@ -40,11 +35,8 @@
     "lint-fix": "eslint . --ext ts,tsx,js --fix",
     "lint": "eslint . --ext ts,tsx,js",
     "type-check": "tsc",
-    "build": "vite build --emptyOutDir",
-    "build-library": "node ./scripts/rollup.mjs",
-    "prepublishOnly": "npm run build-library && npm run type-check",
-    "serve": "vite preview",
-    "start": "vite",
+    "build": "node ./scripts/rollup.mjs",
+    "prepublishOnly": "npm run build && npm run type-check",
     "test": "vitest run",
     "tdd": "vitest",
     "format": "prettier --write \"**/*.{js,ts,tsx,d.ts,css}\"",
@@ -71,22 +63,19 @@
   },
   "homepage": "https://github.com/captbaritone/webamp/",
   "devDependencies": {
-    "@sentry/browser": "5.9.1",
     "ani-cursor": "workspace:*",
     "butterchurn": "3.0.0-beta.5",
     "butterchurn-presets": "3.0.0-beta.4",
     "classnames": "^2.2.5",
     "invariant": "^2.2.3",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "milkdrop-preset-converter-aws": "^0.1.6",
     "music-metadata": "^11.6.0",
     "music-metadata-browser": "^0.6.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^8.0.5",
     "redux": "^5.0.0-alpha.0",
-    "redux-sentry-middleware": "^0.1.3",
     "redux-thunk": "^3.1.0",
     "reselect": "^3.0.1",
     "strtok3": "^10.3.1",
@@ -119,8 +108,7 @@
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.2.12"
+    "typescript": "^5.6.2"
   },
   "prettier": {
     "trailingComma": "es5"