diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c591b6..3d0a433 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## v0.4.0 - 2026.08.28 + +### Changed + +- ⚠️ Migrate the front-end to `@studiometa/js-toolkit` v4 (`^4.0.0-alpha.1`, published on the `next` dist-tag). The shipped shell called `createApp()`, which v4 removed, so any consumer already on v4 got `TypeError: createApp is not a function` before the playground rendered anything. Registration is now `registerComponent(Playground)`, and the page template declares `data-component="Playground"` on `` so an instance exists because its element is in the document. Consumers must be on js-toolkit v4 ([#79](https://github.com/studiometa/playground/pull/79)) +- ⚠️ `createPlayground()` no longer returns an application object — v4 has none. It configures the playground and registers the root component ([#79](https://github.com/studiometa/playground/pull/79)) +- ⚠️ Coordination between the root component and the editors no longer relies on mount order. v4 gives no ordering guarantee between a parent and its children, so `Playground` watches `EditorVisibility`, `Editors` and `Iframe` with `$watchChildren()` and pushes the editor visibility onto every instance it sees, including the ones that mount after it. `Resizable` watches its `ResizableSync` children the same way, and reaches the nearest one from a cursor with `$closest()` ([#79](https://github.com/studiometa/playground/pull/79)) +- ⚠️ `HtmlEditor`, `ScriptEditor` and `StyleEditor` declare their own `config.name`. They used to inherit `Editor`'s, which v4 would have registered under the wrong `data-component` token ([#79](https://github.com/studiometa/playground/pull/79)) +- Editing the script now rebuilds the preview's JavaScript realm. v4 registers a component class under its name once and ignores a second registration of the same name, so re-running an edited script in the same realm kept the author's first version of every class — the editor looked dead. The reload button resets the realm for the same reason ([#79](https://github.com/studiometa/playground/pull/79)) +- Editors dispose their Monaco instance and drop their theme subscription when they unmount, through the cleanup `mounted()` returns. v3 had no teardown at all ([#79](https://github.com/studiometa/playground/pull/79)) + +### Fixed + +- Clear the `is-resizing` state from the drag service rather than from a `pointerup` bound to the handle. A pointer released away from the handle never delivered that event, so the class stayed and `is-resizing:pointer-events-none` left the preview iframe unclickable ([#79](https://github.com/studiometa/playground/pull/79)) +- Register the preview's import map once per document instead of once per rebuild, which reported one console warning per overlapping specifier ([#79](https://github.com/studiometa/playground/pull/79)) +- `ResizableSync.set()` writes to `style.width` / `style.height` rather than to non-existent `width` / `height` element properties, so a synchronised panel keeps its measured size ([#79](https://github.com/studiometa/playground/pull/79)) + ## v0.3.14 - 2026.08.10 ### Fixed diff --git a/package-lock.json b/package-lock.json index 273974e..7750d40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@studiometa/playground-root", - "version": "0.3.14", + "version": "0.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@studiometa/playground-root", - "version": "0.3.14", + "version": "0.4.0", "workspaces": [ "packages/*" ], @@ -2218,33 +2218,6 @@ "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==", "license": "MIT" }, - "node_modules/@motionone/easing": { - "version": "10.18.0", - "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz", - "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==", - "license": "MIT", - "dependencies": { - "@motionone/utils": "^10.18.0", - "tslib": "^2.3.1" - } - }, - "node_modules/@motionone/types": { - "version": "10.17.1", - "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz", - "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==", - "license": "MIT" - }, - "node_modules/@motionone/utils": { - "version": "10.18.0", - "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz", - "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==", - "license": "MIT", - "dependencies": { - "@motionone/types": "^10.17.1", - "hey-listen": "^1.0.8", - "tslib": "^2.3.1" - } - }, "node_modules/@napi-rs/wasm-runtime": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz", @@ -3655,13 +3628,12 @@ "license": "MIT" }, "node_modules/@studiometa/js-toolkit": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/@studiometa/js-toolkit/-/js-toolkit-3.4.3.tgz", - "integrity": "sha512-CF7+Q5JgK8d8730pnC+CfdtsCT1ayABkzsSLoihKtcx36uOJv1tDNGRMl8rsUFTUk4HTmROQAHrsmaqTH8pfUg==", + "version": "4.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/@studiometa/js-toolkit/-/js-toolkit-4.0.0-alpha.1.tgz", + "integrity": "sha512-Ei3OITjFTx3D/sWBKegDww1ybw8TopwFSlRqS6KnpRA5fDAl0/jDr1ANyiPwJDEj7oXCD1a5sMIHxmA0stdOTw==", "license": "MIT", "dependencies": { - "@motionone/easing": "^10.18.0", - "deepmerge": "^4.3.1" + "morphdom": "^2.7.8" } }, "node_modules/@studiometa/oxlint-config": { @@ -8446,12 +8418,6 @@ "he": "bin/he" } }, - "node_modules/hey-listen": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", - "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==", - "license": "MIT" - }, "node_modules/hookable": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/hookable/-/hookable-6.0.1.tgz", @@ -11215,6 +11181,12 @@ "webpack": "^4.37.0 || ^5.0.0" } }, + "node_modules/morphdom": { + "version": "2.7.8", + "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.8.tgz", + "integrity": "sha512-D/fR4xgGUyVRbdMGU6Nejea1RFzYxYtyurG4Fbv2Fi/daKlWKuXGLOdXtl+3eIwL110cI2hz1ZojGICjjFLgTg==", + "license": "MIT" + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -16893,7 +16865,7 @@ }, "packages/demo": { "name": "@studiometa/playground-demo", - "version": "0.3.14", + "version": "0.4.0", "dependencies": { "@studiometa/playground": "*", "esbuild": "0.27.3" @@ -16901,10 +16873,10 @@ }, "packages/playground": { "name": "@studiometa/playground", - "version": "0.3.14", + "version": "0.4.0", "license": "MIT", "dependencies": { - "@studiometa/js-toolkit": "^3.4.3", + "@studiometa/js-toolkit": "^4.0.0-alpha.1", "@studiometa/webpack-config": "^6.3.6", "@studiometa/webpack-config-preset-prototyping": "^6.3.6", "@studiometa/webpack-config-preset-tailwindcss-4": "6.3.6", @@ -16937,7 +16909,7 @@ }, "packages/playground-preview": { "name": "@studiometa/playground-preview", - "version": "0.3.14", + "version": "0.4.0", "license": "MIT", "devDependencies": { "@vitest/browser": "^4.0.18", diff --git a/package.json b/package.json index 8651411..8b45206 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@studiometa/playground-root", - "version": "0.3.14", + "version": "0.4.0", "description": "A packaged web development playground", "type": "module", "private": true, diff --git a/packages/demo/meta.config.js b/packages/demo/meta.config.js index d2114fa..fbcbfa8 100644 --- a/packages/demo/meta.config.js +++ b/packages/demo/meta.config.js @@ -14,7 +14,10 @@ export default defineWebpackConfig({ syncColorScheme: true, dependencies: [ { + // Pinned: js-toolkit v4 is published on the `next` dist-tag, so an + // unversioned esm.sh URL would still serve v3. specifier: '@studiometa/js-toolkit', + version: '4.0.0-alpha.1', esmSh: { bundle: false }, subpaths: true, }, @@ -28,12 +31,12 @@ export default defineWebpackConfig({ html: resolve('./html-loader.ts'), }, defaults: { - html: '

hello world

', + html: '

hello world

', style: `html.dark { color: #fff; background-color: #222; }`, - script: `import { Base, createApp } from '@studiometa/js-toolkit'; + script: `import { Base, registerComponent } from '@studiometa/js-toolkit'; import { greet, isDefined } from 'demo-lib'; class App extends Base { @@ -48,7 +51,7 @@ class App extends Base { } } -createApp(App);`, +registerComponent(App);`, }, }), ], diff --git a/packages/demo/package.json b/packages/demo/package.json index 903af64..6b8c247 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "@studiometa/playground-demo", - "version": "0.3.14", + "version": "0.4.0", "type": "module", "private": true, "scripts": { diff --git a/packages/playground-preview/README.md b/packages/playground-preview/README.md index d8ce2c2..2ea4af5 100644 --- a/packages/playground-preview/README.md +++ b/packages/playground-preview/README.md @@ -44,21 +44,21 @@ For longer code snippets, use `