Update docs, examples, and version for v2.3.0

captbaritone · claude · captbaritone · commit 6c3dd2a793c3 · 2026-06-15T20:42:10.000-07:00
- Bump package.json and Webamp.VERSION to 2.3.0
- Move changelog Unreleased items into 2.3.0 section
- Update "unreleased" references in docs to v2.3.0
- Switch all examples from renderWhenReady to renderInto
- Update multipleMilkdropPresets to use stable @^2 instead of @next
- Update lazy example to webamp@^2.3.0
- Update release skill with version bump and changelog steps

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/.claude/skills/release/SKILL.md b/.claude/skills/release/SKILL.md
@@ -0,0 +1,23 @@
+---
+name: release
+description: Cut a new webamp npm release
+---
+
+# Release webamp to npm
+
+## Steps
+1. Create and push a git tag: `git tag v{X.Y.Z} && git push origin v{X.Y.Z}`
+2. CI (`.github/workflows/ci.yml`) builds, tests, publishes
+3. Monitor: `gh run list --limit 3` then `gh run watch <id> --exit-status`
+4. Verify: `npm view webamp versions --json | tail -5`
+
+## How it works
+- Bump `version` in `packages/webamp/package.json` and `Webamp.VERSION` in `packages/webamp/js/webampLazy.tsx` to match the new version
+- Don't bump ani-cursor or winamp-eqf versions — CI sets those from the git tag
+- All 3 packages (webamp, ani-cursor, winamp-eqf) get the same version
+- Tagged releases publish to `latest`; master pushes publish `0.0.0-next-{sha}` to `next`
+- Uses npm provenance (OIDC)
+
+## Post-release
+- Update changelog: move "Unreleased" items into a new versioned section, then comment out the Unreleased section (`<!-- ... -->`)
+- Update docs (features reference version numbers — replace "unreleased" with the new version)
diff --git a/examples/lazy/index.html b/examples/lazy/index.html
@@ -7,7 +7,7 @@
     <title>Webamp</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" style="height: 100vh; position: relative"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/examples/lazy/package.json b/examples/lazy/package.json
@@ -17,6 +17,6 @@
     "butterchurn-presets": "3.0.0-beta.4",
     "jszip": "^3.10.1",
     "music-metadata": "^11.6.0",
-    "webamp": "^2.2.0"
+    "webamp": "^2.3.0"
   }
 }
diff --git a/examples/lazy/src/main.ts b/examples/lazy/src/main.ts
@@ -54,4 +54,4 @@ const webamp = new Webamp({
   },
 });
 
-webamp.renderWhenReady(document.getElementById("app")!);
+webamp.renderInto(document.getElementById("app")!);
diff --git a/examples/minimal/index.html b/examples/minimal/index.html
@@ -6,8 +6,8 @@
   </head>
 
   <body>
-    <div id="app" style="height: 100vh">
-      <!-- Webamp will attempt to center itself within this div -->
+    <div id="app" style="height: 100vh; position: relative">
+      <!-- Webamp will render as a child of this div -->
     </div>
     <script type="module">
       import Webamp from "https://unpkg.com/webamp@^2/butterchurn";
@@ -35,7 +35,7 @@
         ],
       });
 
-      webamp.renderWhenReady(document.getElementById("app"));
+      webamp.renderInto(document.getElementById("app"));
     </script>
   </body>
 </html>
diff --git a/examples/minimalMilkdrop/index.html b/examples/minimalMilkdrop/index.html
@@ -6,8 +6,8 @@
   </head>
 
   <body>
-    <div id="app" style="height: 100vh">
-      <!-- Webamp will attempt to center itself within this div -->
+    <div id="app" style="height: 100vh; position: relative">
+      <!-- Webamp will render as a child of this div -->
     </div>
     <script type="module">
       /**
@@ -31,7 +31,7 @@
           },
         ],
       });
-      webamp.renderWhenReady(document.getElementById("app"));
+      webamp.renderInto(document.getElementById("app"));
     </script>
   </body>
 </html>
diff --git a/examples/minimalWindowLayout/index.html b/examples/minimalWindowLayout/index.html
@@ -6,8 +6,8 @@
   </head>
 
   <body>
-    <div id="app" style="height: 100vh">
-      <!-- Webamp will attempt to center itself within this div -->
+    <div id="app" style="height: 100vh; position: relative">
+      <!-- Webamp will render as a child of this div -->
     </div>
     <script type="module">
       import Webamp from "https://unpkg.com/webamp@^2";
@@ -34,7 +34,7 @@
       });
 
       // Returns a promise indicating when it's done loading.
-      webamp.renderWhenReady(document.getElementById("app"));
+      webamp.renderInto(document.getElementById("app"));
     </script>
   </body>
 </html>
diff --git a/examples/multipleMilkdropPresets/index.html b/examples/multipleMilkdropPresets/index.html
@@ -6,13 +6,11 @@
   </head>
 
   <body>
-    <div id="app" style="height: 100vh">
-      <!-- Webamp will attempt to center itself within this div -->
+    <div id="app" style="height: 100vh; position: relative">
+      <!-- Webamp will render as a child of this div -->
     </div>
     <script type="module">
-      // The `requireButterchurnPresets` config option is not yet available in a stable release.
-      // for now you need to install a pre-release version of Webamp to use it.
-      import Webamp from "https://unpkg.com/webamp@0.0.0-next-41cfbbb/butterchurn";
+      import Webamp from "https://unpkg.com/webamp@^2/butterchurn";
       const webamp = new Webamp({
         initialTracks: [
           {
@@ -39,7 +37,7 @@
       });
 
       // Returns a promise indicating when it's done loading.
-      webamp.renderWhenReady(document.getElementById("app"));
+      webamp.renderInto(document.getElementById("app"));
     </script>
   </body>
 </html>
diff --git a/examples/multipleSkins/index.html b/examples/multipleSkins/index.html
@@ -6,8 +6,8 @@
   </head>
 
   <body>
-    <div id="app" style="height: 100vh">
-      <!-- Webamp will attempt to center itself within this div -->
+    <div id="app" style="height: 100vh; position: relative">
+      <!-- Webamp will render as a child of this div -->
     </div>
     <script type="module">
       import Webamp from "https://unpkg.com/webamp@^2";
@@ -51,7 +51,7 @@
       });
 
       // Returns a promise indicating when it's done loading.
-      webamp.renderWhenReady(document.getElementById("app"));
+      webamp.renderInto(document.getElementById("app"));
     </script>
   </body>
 </html>
diff --git a/examples/multipleTracks/index.html b/examples/multipleTracks/index.html
@@ -6,8 +6,8 @@
   </head>
 
   <body>
-    <div id="app" style="height: 100vh">
-      <!-- Webamp will attempt to center itself within this div -->
+    <div id="app" style="height: 100vh; position: relative">
+      <!-- Webamp will render as a child of this div -->
     </div>
     <script type="module">
       import Webamp from "https://unpkg.com/webamp@^2";
@@ -56,7 +56,7 @@
       });
 
       // Returns a promise indicating when it's done loading.
-      webamp.renderWhenReady(document.getElementById("app"));
+      webamp.renderInto(document.getElementById("app"));
     </script>
   </body>
 </html>
diff --git a/packages/webamp-docs/docs/03_initialization.md b/packages/webamp-docs/docs/03_initialization.md
@@ -13,7 +13,7 @@ Create a DOM element somewhere in your HTML document. This will be used by Webam
 :::tip
 **Webamp will not actually insert itself as a child of this element.** It will will insert itself as a child of the body element, and will attempt to center itself within this element. This is needed to allow the various Webamp windows to dragged around the page unencumbered.
 
-If you want Webamp to be a child of a specific element, use the [`renderInto(domNode)`](./06_API/03_instance-methods.md#renderintodomnode-htmlelement-promisevoid) method instead _(available in unreleased version)_. Note that the target element must have a non-static CSS position (e.g., `position: relative`) for this to work correctly.
+If you want Webamp to be a child of a specific element, use the [`renderInto(domNode)`](./06_API/03_instance-methods.md#renderintodomnode-htmlelement-promisevoid) method instead _(since v2.3.0)_. Note that the target element must have a non-static CSS position (e.g., `position: relative`) for this to work correctly.
 :::
 
 ## Initialize Webamp instance
diff --git a/packages/webamp-docs/docs/06_API/02_webamp-constructor.md b/packages/webamp-docs/docs/06_API/02_webamp-constructor.md
@@ -257,7 +257,7 @@ const webamp = new Webamp({
 
 ### `requireButterchurnPresets?: () => Promise<Preset[]>`
 
-**Since** [unreleased](../12_changelog.md#unreleased)
+**Since** [v2.3.0](../12_changelog.md#230)
 
 Milkdrop (Butterchurn) presets to be used. If not specified, the default presets
 included in the bundle will be used.
diff --git a/packages/webamp-docs/docs/06_API/03_instance-methods.md b/packages/webamp-docs/docs/06_API/03_instance-methods.md
@@ -239,7 +239,7 @@ Webamp will wait until it has fetched the skin and fully parsed it, and then ren
 
 A promise is returned which will resolve after the render is complete.
 
-**Since** [Unreleased](../12_changelog.md#unreleased)
+**Since** [v2.3.0](../12_changelog.md#230)
 
 ```ts
 const container = document.getElementById("webamp-container");
diff --git a/packages/webamp-docs/docs/12_changelog.md b/packages/webamp-docs/docs/12_changelog.md
@@ -1,12 +1,20 @@
 # Changelog
 
+<!--
 ## Unreleased
 
 _These changes are not yet published to NPM with an official version number._
 
 :::tip
 If you want access to the changes in this section before they are officially released you can do `npm install webamp@next`, or use it via CDN at `https://unpkg.com/webamp@next`.
 :::
+-->
+
+## 2.3.0
+
+:::info
+This is the current version of Webamp.
+:::
 
 ### Improvements
 
@@ -20,10 +28,6 @@ If you want access to the changes in this section before they are officially rel
 
 ## 2.2.0
 
-:::info
-This is the current version of Webamp.
-:::
-
 ### Improvements
 
 - Added new [`webamp/butterchurn`](./06_API/00_entrypoints.md#webampbutterchurn) entrypoint which includes Milkdrop window by default. This is the recommended entrypoint for users who want a fully featured Webamp and are not particularly concerned about bundle size.
diff --git a/packages/webamp/js/webampLazy.tsx b/packages/webamp/js/webampLazy.tsx
@@ -48,7 +48,7 @@ export interface InjectableDependencies {
 }
 
 class Webamp {
-  static VERSION = "2.2.0";
+  static VERSION = "2.3.0";
   _actionEmitter: Emitter;
   _root: ReactDOM.Root | null;
   _disposable: Disposable;
diff --git a/packages/webamp/package.json b/packages/webamp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webamp",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Winamp 2 implemented in HTML5 and JavaScript",
   "files": [
     "built",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,6 @@`
`17`	`17`	`"butterchurn-presets": "3.0.0-beta.4",`
`18`	`18`	`"jszip": "^3.10.1",`
`19`	`19`	`"music-metadata": "^11.6.0",`
`20`		`- "webamp": "^2.2.0"`
	`20`	`+ "webamp": "^2.3.0"`
`21`	`21`	`}`
`22`	`22`	`}`