Merge branch 'release/0.2.1'

Author: titouanmathis

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## v0.2.1 - 2025.10.17
+
+### Added
+
+- Add support for auto-types in the script editor ([#37](https://github.com/studiometa/playground/pull/37), [0a3a495](https://github.com/studiometa/playground/commit/0a3a495))
+
 ## v0.2.0 - 2025.10.16
 
 ### Added

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/playground-root",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A packaged web development playground",
   "type": "module",
   "private": true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/playground-demo",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "private": true,
   "scripts": {

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/playground",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -65,7 +65,9 @@
     "fast-glob": "^3.3.2",
     "fflate": "^0.8.2",
     "monaco-editor": "^0.52.2",
+    "monaco-editor-auto-typings": "0.4.6",
     "monaco-editor-webpack-plugin": "^7.1.0",
+    "path-browserify": "1.0.1",
     "tailwindcss": "4.1.13",
     "webpack-virtual-modules": "^0.6.2"
   },

packages/playground/package.json

@@ -2,7 +2,7 @@ import { Base } from '@studiometa/js-toolkit';
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
 import { debounce } from '@studiometa/js-toolkit/utils';
 import type { editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
-import * as monaco from 'monaco-editor';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import { themeIsDark, watchTheme } from '../store/index.js';
 
@@ -26,6 +26,13 @@ export default class Editor extends Base<EditorProps> {
    */
   editor: editor.IStandaloneCodeEditor;
 
+  /**
+   * Monaco.
+   */
+  get monaco() {
+    return monaco;
+  }
+
   /**
    * Language of the editor.
    */
@@ -37,7 +44,7 @@ export default class Editor extends Base<EditorProps> {
     const { addJsAutocompletion } = await import('../utils/js/index.js');
     const value = await this.getInitialValue();
 
-    this.editor = monaco.editor.create(this.$el, {
+    this.editor = this.monaco.editor.create(this.$el, {
       value,
       language: this.language,
       minimap: { enabled: false },
@@ -49,9 +56,9 @@ export default class Editor extends Base<EditorProps> {
       theme: (await themeIsDark()) ? 'vs-dark' : 'vs',
     });
 
-    const disposeHTML = emmetHTML(monaco, ['html']);
-    const disposeCSS = emmetCSS(monaco, ['css']);
-    addJsAutocompletion(monaco.languages);
+    const disposeHTML = emmetHTML(this.monaco, ['html']);
+    const disposeCSS = emmetCSS(this.monaco, ['css']);
+    addJsAutocompletion(this.monaco.languages);
 
     this.$on(
       'destroyed',

packages/playground/src/front/js/components/Editor.ts

@@ -204,6 +204,7 @@ ${html}
       const esbuild = await this.esbuild();
       const results = await esbuild.transform(newScript, {
         target: 'es2020',
+        loader: 'ts',
       });
       this.script.remove();
       this.script = this.doc.createElement('script');

packages/playground/src/front/js/components/Iframe.ts

@@ -1,9 +1,15 @@
+import { AutoTypings, LocalStorageCache, JsDelivrSourceResolver } from 'monaco-editor-auto-typings';
 import { getScript, setScript } from '../store/index.js';
 import Editor from './Editor.js';
 
 export default class ScriptEditor extends Editor {
+  /**
+   * Autotyping instance.
+   */
+  autoTypings: AutoTypings;
+
   get language(): string {
-    return 'javascript';
+    return 'typescript';
   }
 
   async getInitialValue() {
@@ -13,4 +19,18 @@ export default class ScriptEditor extends Editor {
   onContentChange({ args: [value] }) {
     setScript(value);
   }
+
+  async mounted() {
+    await super.mounted();
+
+    this.autoTypings = await AutoTypings.create(this.editor, {
+      sourceCache: new LocalStorageCache(),
+      sourceResolver: new JsDelivrSourceResolver(),
+      monaco: this.monaco,
+    });
+  }
+
+  destroyed() {
+    this.autoTypings.dispose();
+  }
 }

packages/playground/src/front/js/components/ScriptEditor.ts

@@ -1,4 +1,5 @@
 import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import type { PartialDeep } from 'type-fest';
 import type { Preset } from '@studiometa/webpack-config';
 import { prototyping } from '@studiometa/webpack-config-preset-prototyping';
@@ -116,6 +117,15 @@ export function playgroundPreset(options?: PartialDeep<PlaygroundPresetOptions>)
       if (!context.isDev) {
         await productionBuildPreset().handler(config, context);
       }
+
+      await context.extendWebpack(config, (webpackConfig) => {
+        webpackConfig.resolve = {
+          ...webpackConfig.resolve,
+          fallback: {
+            path: fileURLToPath(import.meta.resolve('path-browserify')),
+          },
+        };
+      });
     },
   };
 }