diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c3f10b..08889a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # CHANGELOG +## 3.1.0 + +* Automatically enabled Stimulus's "debug" mode when doing a dev build. You will + now, while developing, see debugging information in your browser's console log! + See #65. + ## 3.0.0 Dropped support for `stimulus` 2.0, in favor of `@hotwired/stimulus` version 3. @@ -7,8 +13,9 @@ You can read about Stimulus version on its [release announcement](https://world. The most important change needed is to: -* Remove `stimulus` from your `package.json` file, replace it with `"@hotwired/stimulus": "^3.0"` - and run `yarn install`. Also upgrade `@symfony/webpack-encore` to 1.7.0 or later. +* Remove `stimulus` from your `package.json` file and replace it with `"@hotwired/stimulus": "^3.0"`. + Also change your `@symfony/webpack-encore` version to `^1.7` and `@symfony/stimulus-bridge` to `^3.0`. + After making these changes, run `yarn install`. * Update all of your controllers to replace any imports for `stimulus` with imports from `@hotwired/stimulus`: @@ -18,8 +25,8 @@ The most important change needed is to: +import { Controller } from '@hotwired/stimulus'; ``` -* Upgrade any `symfony/ux-*` PHP packages that you have installed to version 2 or later. Then - run `yarn install --force`. +* In `composer.json`, update any `symfony/ux-*` packages that you have installed to version `^2.0`. + Run `composer up "symfony/ux-*"`. Once that finishes, run `yarn install --force`. ## 2.0.0 diff --git a/README.md b/README.md index 496c47b..55ab79a 100644 --- a/README.md +++ b/README.md @@ -267,6 +267,34 @@ application.register('autocomplete', Autocomplete) export { app }; ``` +## Writing TypeScript controllers + +If you want to write TypeScript controllers, make sure the target of your TypeScript config is set to `ES6`: + +```json +{ + "compilerOptions": { + //... + "target": "ES6", + }, + //... +} +``` + +If you don't you may face the following issue in your browser console when the controller is called: + +``` +# Error thrown in Chrome console: +Uncaught (in promise) TypeError: Class constructor Controller cannot be invoked without 'new' + +# Error thrown in Firefox console: +Uncaught (in promise) TypeError: class constructors must be invoked with 'new' +``` + +The error is caused when an ES5 class tries to "extend" an ES6 class. If the target is not correctly set, +TypeScript will transpile the controller to old ES5 code. But Stimulus 3 uses pure ES6 classes. +This causes an incompatibility, hence the need to target ES6 explicitly. + ## Run tests ```sh diff --git a/dist/index.js b/dist/index.js index 2cca8c8..5ee09e8 100644 --- a/dist/index.js +++ b/dist/index.js @@ -31,6 +31,9 @@ function identifierForContextKey(key) { function startStimulusApp(context) { const application = Application.start(); + if (process.env.NODE_ENV === 'development') { + application.debug = true; + } if (context) { application.load(definitionsFromContext(context)); } diff --git a/package.json b/package.json index ee612a5..371f408 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@symfony/stimulus-bridge", "description": "Stimulus integration bridge for Symfony projects", - "version": "3.0.0", + "version": "3.1.0", "main": "dist/index.js", "license": "MIT", "author": "Titouan Galopin ", diff --git a/src/index.ts b/src/index.ts index 53b40b4..3d3b0eb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,6 +20,10 @@ import symfonyControllers from './webpack/loader!@symfony/stimulus-bridge/contro export function startStimulusApp(context: any) { const application = Application.start(); + if (process.env.NODE_ENV === 'development') { + application.debug = true; + } + if (context) { application.load(definitionsFromContext(context)); }