feature #888 updating stimulus-bridge plugin to work with proposed new loader (weaverryan)

This PR was squashed before being merged into the main branch.

Discussion
----------

updating stimulus-bridge plugin to work with proposed new loader

Partner to symfony/stimulus-bridge#14

* [x] Wait for partner PR to be merged

Commits
-------

5640760 updating stimulus-bridge plugin to work with proposed new loader

Author: weaverryan

fixtures/stimulus/assets/app.js

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

fixtures/stimulus/autoimport/index.js

@@ -131,6 +131,7 @@ class WebpackConfig {
             resolveUrlLoader: true,
             resolveUrlLoaderOptions: {}
         };
+        /** @deprecated */
         this.stimulusOptions = {
             controllerJsonPath: null,
         };
@@ -686,6 +687,9 @@ class WebpackConfig {
         }
 
         this.stimulusOptions.controllersJsonPath = controllerJsonPath;
+        this.addAliases({
+            '@symfony/stimulus-bridge/controllers.json': path.resolve(controllerJsonPath),
+        });
     }
 
     enableBuildCache(buildDependencies, callback = (cache) => {}) {

fixtures/stimulus/autoimport/package.json

@@ -151,7 +151,7 @@ const features = {
     stimulus: {
         method: 'enableStimulusBridge()',
         packages: [
-            { name: '@symfony/stimulus-bridge' },
+            { name: '@symfony/stimulus-bridge', enforce_version: true },
             { name: 'stimulus' }
         ],
         description: 'enable Stimulus bridge'

fixtures/stimulus/controllers/index.js

@@ -12,16 +12,28 @@
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
 const loaderFeatures = require('../features');
 const fs = require('fs');
+const packageHelper = require('../package-helper');
+const semver = require('semver');
 
 /**
+ * Support for @symfony/stimulus-bridge 1.1 or lower.
+ *
  * @param {Array} plugins
  * @param {WebpackConfig} webpackConfig
+ * @deprecated
  * @return {void}
  */
 module.exports = function(plugins, webpackConfig) {
     if (webpackConfig.useStimulusBridge) {
         loaderFeatures.ensurePackagesExistAndAreCorrectVersion('stimulus');
 
+        const version = packageHelper.getPackageVersion('@symfony/stimulus-bridge');
+        if (semver.satisfies(version, '^1.2.0')) {
+            // package is new and doesn't require this plugin
+
+            return;
+        }
+
         const createPlugin = require('@symfony/stimulus-bridge/webpack-helper'); // eslint-disable-line node/no-unpublished-require
 
         plugins.push({

fixtures/stimulus/controllers/package.json

@@ -58,10 +58,8 @@
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.0.0",
-    "@symfony/autoimport": "file:fixtures/stimulus/autoimport",
-    "@symfony/controllers": "file:fixtures/stimulus/controllers",
     "@symfony/mock-module": "file:fixtures/stimulus/mock-module",
-    "@symfony/stimulus-bridge": "^1.0.0",
+    "@symfony/stimulus-bridge": "^1.1.0",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
     "@vue/babel-preset-jsx": "^1.0.0",
     "@vue/compiler-sfc": "^3.0.2",

lib/WebpackConfig.js

@@ -18,6 +18,8 @@ const path = require('path');
 const testSetup = require('./helpers/setup');
 const fs = require('fs-extra');
 const getVueVersion = require('../lib/utils/get-vue-version');
+const packageHelper = require('../lib/package-helper');
+const semver = require('semver');
 
 function createWebpackConfig(outputDirName = '', command, argv = {}) {
     const webpackConfig = testSetup.createWebpackConfig(
@@ -427,15 +429,15 @@ describe('Functional tests using webpack', function() {
                     ]);
 
                     webpackAssert.assertOutputFileContains(
-                        'styles.79943add.css',
+                        'styles.[hash:8].css',
                         'font-size: 50px;'
                     );
                     webpackAssert.assertManifestPathDoesNotExist(
                         'styles.js'
                     );
                     webpackAssert.assertManifestPath(
                         'styles.css',
-                        '/styles.79943add.css'
+                        '/styles.[hash:8].css'
                     );
 
                     done();
@@ -466,7 +468,7 @@ describe('Functional tests using webpack', function() {
                     );
                     webpackAssert.assertManifestPath(
                         'styles.css',
-                        '/styles.css?79943addbc894efe'
+                        '/styles.css?[hash:16]'
                     );
 
                     done();
@@ -535,7 +537,7 @@ describe('Functional tests using webpack', function() {
                     ]);
 
                 webpackAssert.assertOutputFileContains(
-                    'bg.2eff0999.css',
+                    'bg.[hash:8].css',
                     '/build/images/symfony_logo.91beba37.png'
                 );
 
@@ -1913,9 +1915,17 @@ module.exports = {
             });
         });
 
-        it('Symfony - Stimulus standard app is built correctly', (done) => {
+        it('Symfony - Stimulus standard app is built correctly', function(done) {
             const appDir = testSetup.createTestAppDir();
 
+            const version = packageHelper.getPackageVersion('@symfony/stimulus-bridge');
+            if (!semver.satisfies(version, '^1.2.0')) {
+                // we support the old version, but it's not tested
+                this.skip();
+
+                return;
+            }
+
             const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
             config.enableSingleRuntimeChunk();
             config.setPublicPath('/build');
@@ -1930,13 +1940,14 @@ module.exports = {
                     'main.js',
                     'main.css',
                     'manifest.json',
+                    'node_modules_symfony_mock-module_dist_controller_js.js',
                     '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('node_modules_symfony_mock-module_dist_controller_js.js', 'mock-module-controller');
                 webpackAssert.assertOutputFileContains('main.css', 'body {}');
 
                 done();

lib/features.js

@@ -31,6 +31,23 @@ const readOutputFile = function(webpackConfig, filePath) {
     return fs.readFileSync(fullPath, 'utf8');
 };
 
+const getMatchedFilename = function(targetDirectory, filenameRegex) {
+    const actualFiles = fs.readdirSync(targetDirectory);
+    let foundFile = false;
+    actualFiles.forEach((actualFile) => {
+        // filter out directories
+        if (fs.statSync(path.join(targetDirectory, actualFile)).isDirectory()) {
+            return;
+        }
+
+        if (actualFile.match(filenameRegex)) {
+            foundFile = actualFile;
+        }
+    });
+
+    return foundFile;
+};
+
 /**
  * Returns a regex to use to match this filename
  *
@@ -61,12 +78,17 @@ class Assert {
     }
 
     assertOutputFileContains(filePath, expectedContents) {
-        const fullPath = path.join(this.webpackConfig.outputPath, filePath);
+        const actualFilename = getMatchedFilename(
+            this.webpackConfig.outputPath,
+            convertFilenameToMatcher(filePath)
+        );
 
-        if (!fs.existsSync(fullPath)) {
+        if (false === actualFilename) {
             throw new Error(`Output file "${filePath}" does not exist.`);
         }
 
+        const fullPath = path.join(this.webpackConfig.outputPath, actualFilename);
+
         const actualContents = fs.readFileSync(fullPath, 'utf8');
         if (!actualContents.includes(expectedContents)) {
             throw new Error(`Expected contents "${expectedContents}" not found in file ${fullPath}`);

lib/plugins/stimulus-bridge.js

@@ -970,16 +970,10 @@
   resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-2.0.0.tgz#54296d2a2dffd4f962d2e802d99a3fdd84b8845f"
   integrity sha512-D6tJWsAC024MwGEIKlUVYU8Ln87mlrmiwHvYAjipg+s8H4eLxUMQ3PZkWyPevfipH+oR3leuHsjYsK1gN5ViQA==
 
-"@symfony/autoimport@file:fixtures/stimulus/autoimport":
-  version "1.0.0"
-
-"@symfony/controllers@file:fixtures/stimulus/controllers":
-  version "1.0.0"
-
 "@symfony/mock-module@file:fixtures/stimulus/mock-module":
   version "1.0.0"
 
-"@symfony/stimulus-bridge@^1.0.0":
+"@symfony/stimulus-bridge@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@symfony/stimulus-bridge/-/stimulus-bridge-1.1.0.tgz#34548c633fe49bcda84cc812939f63640e698af7"
   integrity sha512-Sz8iwKQHBjrgCnxCGwH87S/J/Min0gX3EuXJaHi4vpibY3BjVm+WYuP8+OYPkMIROPyNZKYgTffFfJLBAFLwFQ==