Update @studiometa/playground to 0.3.1

package.json

@@ -29,14 +29,16 @@
   },
   "devDependencies": {
     "@studiometa/prettier-config": "4.4.0",
-    "@typescript/native-preview": "7.0.0-dev.20251108.1",
     "esbuild": "0.25.12",
     "fast-glob": "3.3.3",
     "gzip-size": "7.0.0",
     "oxlint": "1.26.0",
     "oxlint-tsgolint": "0.5.1",
     "prettier": "3.6.2"
   },
+  "overrides": {
+    "@typescript/vfs": "1.6.4"
+  },
   "dependencies": {
     "patch-package": "8.0.1"
   }

packages/docs/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@iconify-json/octicon": "1.2.17",
     "@shikijs/vitepress-twoslash": "3.15.0",
-    "@studiometa/playground": "0.2.1",
+    "@studiometa/playground": "0.3.1",
     "@studiometa/tailwind-config": "2.1.0",
     "@vueuse/components": "14.0.0",
     "@vueuse/core": "14.0.0",

packages/playground/meta.config.js

@@ -1,8 +1,5 @@
-import { resolve, join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
 import { playgroundPreset as playground, defineWebpackConfig } from '@studiometa/playground/preset';
-import CopyPlugin from 'copy-webpack-plugin';
-import esbuild from 'esbuild';
 
 export default defineWebpackConfig({
   presets: [
@@ -20,16 +17,25 @@ export default defineWebpackConfig({
       },
       tailwindcss: true,
       syncColorScheme: true,
+      htmlLanguage: { id: 'twig' },
       loaders: {
         html: resolve('./lib/twig-loader.js'),
       },
+      dependencies: [
+        '@motionone/easing',
+        'deepmerge',
+        { specifier: 'morphdom', source: 'morphdom' },
+        { specifier: '@studiometa/js-toolkit', source: '@studiometa/js-toolkit' },
+        {
+          specifier: '@studiometa/ui',
+          source: '../ui/**/*.ts',
+          entry: '../ui/index.ts',
+        },
+      ],
       importMap: {
-        '@motionone/easing': '/play/static/motionone-easing.js',
-        '@studiometa/js-toolkit': '/play/static/js-toolkit/index.js',
-        '@studiometa/js-toolkit/utils': '/play/static/js-toolkit/utils/index.js',
-        '@studiometa/ui': '/play/static/ui/index.js',
-        deepmerge: '/play/static/deepmerge.js',
-        morphdom: '/play/static/morphdom.js',
+        'morphdom': '/play/static/deps/morphdom/index.js',
+        '@studiometa/js-toolkit': '/play/static/deps/@studiometa/js-toolkit/index.js',
+        '@studiometa/ui': '/play/static/deps/@studiometa/ui/index.js',
       },
       defaults: {
         html: `{% html_element 'span' with { class: 'dark:text-white font-bold border-b-2 border-current' } %}
@@ -60,76 +66,6 @@ createApp(App);`,
     config.output.publicPath = '/play/';
     config.output.path = resolve('../docs/public/play/');
 
-    config.plugins.push(
-      new CopyPlugin({
-        patterns: [
-          {
-            from:
-              dirname(fileURLToPath(import.meta.resolve('@studiometa/js-toolkit'))) +
-              '/**/*.{js,ts,map}',
-            context: dirname(fileURLToPath(import.meta.resolve('@studiometa/js-toolkit'))),
-            to: join(config.output.path, 'static/js-toolkit/[path][name][ext]'),
-            toType: 'template',
-            info: {
-              minimized: true,
-            },
-          },
-          {
-            from: './static/*.js',
-            to: config.output.path,
-            info: { minimized: true },
-            transform: {
-              async transformer(content, filename) {
-                const result = await esbuild.build({
-                  bundle: true,
-                  target: 'es2022',
-                  write: false,
-                  format: 'esm',
-                  sourcemap: true,
-                  minify: false,
-                  loader: {
-                    '.ts': 'ts',
-                  },
-                  stdin: {
-                    contents: content,
-                    sourcefile: filename,
-                    resolveDir: config.context,
-                  },
-                });
-                return result.outputFiles.at(0).text;
-              },
-              cache: true,
-            },
-          },
-          {
-            from: '../ui/**/*.ts',
-            to: join(config.output.path, 'static/ui/[path][name].js'),
-            toType: 'template',
-            info: { minimized: true },
-            transform: {
-              async transformer(content, filename) {
-                const result = await esbuild.build({
-                  target: 'es2022',
-                  write: false,
-                  format: 'esm',
-                  sourcemap: true,
-                  minify: false,
-                  stdin: {
-                    contents: content,
-                    sourcefile: filename,
-                    resolveDir: dirname(filename),
-                    loader: 'ts',
-                  },
-                });
-                return result.outputFiles.at(0).text;
-              },
-              cache: true,
-            },
-          },
-        ],
-      }),
-    );
-
     config.optimization.splitChunks.cacheGroups = {
       vendors: {
         test: /[\\/]node_modules[\\/](?!.*\.css$)/,

packages/playground/package.json

@@ -9,7 +9,9 @@
     "build": "meta build"
   },
   "dependencies": {
-    "@studiometa/playground": "0.2.1",
-    "copy-webpack-plugin": "^13.0.1"
+    "@studiometa/playground": "0.3.1"
+  },
+  "devDependencies": {
+    "tsdown": "^0.21.1"
   }
 }

packages/playground/src/templates/pages/index.twig

@@ -1 +1 @@
-{% include '@playground/pages/index.twig' %}
+{% extends '@playground/pages/index.twig' %}