feature #859 Implement Stimulus bridge configurator (tgalopin)

This PR was merged into the main branch.

Discussion
----------

Implement Stimulus bridge configurator

Implement Stimulus bridge configurator for Symfony UX

Commits
-------

c84cfb3 Implement Stimulus bridge configurator

Author: fabpot

fixtures/stimulus/assets/app.js

@@ -0,0 +1,4 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+import '@symfony/autoimport';
+
+export const app = startStimulusApp(require.context('./controllers', true, /\.(j|t)sx?$/));

fixtures/stimulus/assets/controllers.json

@@ -0,0 +1,14 @@
+{
+    "controllers": {
+        "@symfony/mock-module": {
+            "mock": {
+                "webpackMode": "lazy",
+                "enabled": true,
+                "autoimport": {
+                    "@symfony/mock-module/dist/style.css": true
+                }
+            }
+        }
+    },
+    "entrypoints": []
+}

fixtures/stimulus/assets/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+    connect() {
+        console.log('app-controller');
+    }
+}

fixtures/stimulus/autoimport/index.js

@@ -0,0 +1 @@
+import '@symfony/mock-module/dist/style.css';

fixtures/stimulus/autoimport/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "@symfony/autoimport",
+    "license": "MIT",
+    "version": "1.0.0",
+    "main": "./index.js"
+}

fixtures/stimulus/controllers/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '@symfony/mock-module/mock': import(/* webpackMode: "eager" */ '@symfony/mock-module/dist/controller'),
+};

fixtures/stimulus/controllers/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "@symfony/controllers",
+    "license": "MIT",
+    "version": "1.0.0",
+    "main": "./index.js"
+}

fixtures/stimulus/mock-module/dist/controller.js

@@ -0,0 +1,7 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+    connect() {
+        console.log('mock-module-controller');
+    }
+}

fixtures/stimulus/mock-module/dist/style.css

@@ -0,0 +1 @@
+body {}

fixtures/stimulus/mock-module/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@symfony/mock-module",
+    "license": "MIT",
+    "version": "1.0.0",
+    "symfony": {
+        "controllers": {
+            "mock": {
+                "main": "dist/controller.js",
+                "webpackMode": "eager",
+                "enabled": true,
+                "autoimport": {
+                    "@symfony/mock-module/dist/style.css": true
+                }
+            }
+        }
+    }
+}

index.js

@@ -1018,6 +1018,17 @@ class Encore {
         return this;
     }
 
+    /**
+     * If enabled, the Stimulus bridge is used to load Stimulus controllers from PHP packages.
+     *
+     * @returns {Encore}
+     */
+    enableStimulusBridge(controllerJsonPath) {
+        webpackConfig.enableStimulusBridge(controllerJsonPath);
+
+        return this;
+    }
+
     /**
      * If enabled, the react preset is added to Babel.
      *

lib/WebpackConfig.js

@@ -105,6 +105,7 @@ class WebpackConfig {
         this.useLessLoader = false;
         this.useStylusLoader = false;
         this.useSassLoader = false;
+        this.useStimulusBridge = false;
         this.useReact = false;
         this.usePreact = false;
         this.useVueLoader = false;
@@ -121,6 +122,9 @@ class WebpackConfig {
             resolveUrlLoader: true,
             resolveUrlLoaderOptions: {}
         };
+        this.stimulusOptions = {
+            controllerJsonPath: null,
+        };
         this.preactOptions = {
             preactCompat: false
         };
@@ -680,6 +684,24 @@ class WebpackConfig {
         this.stylusLoaderOptionsCallback = stylusLoaderOptionsCallback;
     }
 
+    enableStimulusBridge(controllerJsonPath) {
+        this.useStimulusBridge = true;
+
+        if (!fs.existsSync(controllerJsonPath)) {
+            throw new Error(`File "${controllerJsonPath}" could not be found.`);
+        }
+
+        // Add configured entrypoints
+        const controllersData = JSON.parse(fs.readFileSync(controllerJsonPath));
+        const rootDir = path.dirname(path.resolve(controllerJsonPath));
+
+        for (let name in controllersData.entrypoints) {
+            this.addEntry(name, rootDir + '/' + controllersData.entrypoints[name]);
+        }
+
+        this.stimulusOptions.controllersJsonPath = controllerJsonPath;
+    }
+
     enableReactPreset() {
         this.useReact = true;
     }

lib/config-generator.js

@@ -40,6 +40,7 @@ const assetOutputDisplay = require('./plugins/asset-output-display');
 const notifierPluginUtil = require('./plugins/notifier');
 const sharedEntryConcatPuginUtil = require('./plugins/shared-entry-concat');
 const PluginPriorities = require('./plugins/plugin-priorities');
+const stimulusBridge = require('./plugins/stimulus-bridge');
 const applyOptionsCallback = require('./utils/apply-options-callback');
 const sharedEntryTmpName = require('./utils/sharedEntryTmpName');
 const copyEntryTmpName = require('./utils/copyEntryTmpName');
@@ -457,6 +458,8 @@ class ConfigGenerator {
 
         variableProviderPluginUtil(plugins, this.webpackConfig);
 
+        stimulusBridge(plugins, this.webpackConfig);
+
         cleanPluginUtil(plugins, this.webpackConfig);
 
         definePluginUtil(plugins, this.webpackConfig);

lib/plugins/stimulus-bridge.js

@@ -0,0 +1,27 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
+const createPlugin = require('@symfony/stimulus-bridge/webpack-helper');
+const fs = require('fs');
+
+/**
+ * @param {Array} plugins
+ * @param {WebpackConfig} webpackConfig
+ * @return {void}
+ */
+module.exports = function(plugins, webpackConfig) {
+    if (webpackConfig.useStimulusBridge) {
+        plugins.push({
+            plugin: createPlugin(JSON.parse(fs.readFileSync(webpackConfig.stimulusOptions.controllersJsonPath))),
+        });
+    }
+};

package.json

@@ -51,13 +51,18 @@
     "webpack-dev-server": "^3.1.14",
     "webpack-manifest-plugin": "^2.0.2",
     "webpack-sources": "^1.3.0",
+    "webpack-virtual-modules": "^0.2.2",
     "yargs-parser": "^18.1.3"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.0.0",
+    "@symfony/mock-module": "file:fixtures/stimulus/mock-module",
+    "@symfony/controllers": "file:fixtures/stimulus/controllers",
+    "@symfony/autoimport": "file:fixtures/stimulus/autoimport",
+    "@symfony/stimulus-bridge": "^1.0.0",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
     "@vue/babel-preset-jsx": "^1.0.0-beta.3",
     "@vue/compiler-sfc": "^3.0.0-beta.9",
@@ -87,6 +92,7 @@
     "sass": "^1.17.0",
     "sass-loader": "^9.0.1",
     "sinon": "^9.0.2",
+    "stimulus": "^1.1.1",
     "strip-ansi": "^6.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

test/functional.js

@@ -2072,6 +2072,34 @@ module.exports = {
             });
         });
 
+        it('Symfony - Stimulus standard app is built correctly', () => {
+            const appDir = testSetup.createTestAppDir();
+
+            const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
+            config.enableSingleRuntimeChunk();
+            config.setPublicPath('/build');
+            config.addEntry('main', './stimulus/assets/app.js');
+            config.enableStimulusBridge(__dirname + '/../fixtures/stimulus/assets/controllers.json');
+            config.configureBabel(function(config) {
+                config.plugins.push('@babel/plugin-proposal-class-properties');
+            });
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                expect(config.outputPath).to.be.a.directory().with.deep.files([
+                    'main.js',
+                    'main.css',
+                    'manifest.json',
+                    'entrypoints.json',
+                    'runtime.js',
+                ]);
+
+                // test controllers and style are shipped
+                webpackAssert.assertOutputFileContains('main.js', 'app-controller');
+                webpackAssert.assertOutputFileContains('main.js', 'mock-module-controller');
+                webpackAssert.assertOutputFileContains('main.css', 'body {}');
+            });
+        });
+
         describe('copyFiles() allows to copy files and folders', () => {
             it('Single file copy', (done) => {
                 const config = createWebpackConfig('www/build', 'production');