Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(aurelia): Add an Aurelia plugin option and expose module resolve #248

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(aurelia): Add an Aurelia plugin option and expose module resolve #248

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9b5cc67
feat(aurelia): Add an Aurelia plugin option and expose module resolve
tomtomau Jan 25, 2018
785e8ae
fixes from PR review
tomtomau Jan 31, 2018
fbed96d
Fixes from PR
tomtomau Feb 3, 2018
7285fdd
Write tests for Aurelia and fix ensurePackagesExist call
tomtomau Feb 3, 2018
720abcd
Add tests for the configureResolveModules option
tomtomau Feb 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -629,6 +629,33 @@ const publicApi = {
return this;
},

/**
* If enabled, the Aurelia plugin is enabled
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a link to Aurelia here? And what are some valid callback options. We usually like to show an example :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done :)

*
* https://github.com/aurelia/webpack-plugin
*
* Encore.enableAureliaPlugin();
*
* or with configuration options:
*
* Encore.enableAureliaPlugin(function(options) {
* // Set the startup module to hint webpack to module tracing
* options.aureliaApp = "main";
* });
*
* Read about more configuration options that are available:
*
* https://github.com/aurelia/webpack-plugin/wiki
*
* @param {function} aureliaLoaderOptionsCallback
* @returns {exports}
*/
enableAureliaPlugin(aureliaLoaderOptionsCallback = () => {}) {
webpackConfig.enableAureliaPlugin(aureliaLoaderOptionsCallback);

return this;
},

/**
* If enabled, display build notifications using
* webpack-notifier.
Expand Down Expand Up @@ -705,6 +732,12 @@ const publicApi = {
return this;
},

configureResolveModules(directories) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this related to Aurelia? I mean, I know it's a webpack feature, but is it needed? I'm not familiar at all with Aurelia, so you'll have to help us out :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll give my best understanding, again, not super familiar with Webpack.

This is something that's required for Aurelia. Aurelia uses dynamic module loading a fair bit, which means that Webpack doesn't understand how to resolve those dynamic modules. This option then tells Webpack to try resolving via a particular path.

For example, my Webpack config code:

Encore
    // ...
    .configureResolveModules([
        './assets/app',
        'node_modules'
    ]);

You can read more about it on the aurelia/webpack-plugin Wiki page.

webpackConfig.configureResolveModules(directories);

return this;
},

/**
* If enabled, the output directory is emptied between each build (to remove old files).
*
Expand Down
11 changes: 11 additions & 0 deletions lib/WebpackConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ class WebpackConfig {
this.sharedCommonsEntryName = null;
this.providedVariables = {};
this.configuredFilenames = {};
this.resolveModules = null;

// Features/Loaders flags
this.useVersioning = false;
Expand All @@ -59,6 +60,7 @@ class WebpackConfig {
this.useReact = false;
this.usePreact = false;
this.useVueLoader = false;
this.useAurelia = false;
this.useTypeScriptLoader = false;
this.useForkedTypeScriptTypeChecking = false;
this.useWebpackNotifier = false;
Expand Down Expand Up @@ -403,6 +405,11 @@ class WebpackConfig {
this.vueLoaderOptionsCallback = vueLoaderOptionsCallback;
}

enableAureliaPlugin(aureliaPluginConfig = {}) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the index.js file that method is called with a callback, not an object.

Usually we expect callbacks there and applies them on the default configs shipped with Encore (you can check configureManifestPlugin() for instance).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep - my bad!

this.useAurelia = true;
this.aureliaPluginConfig = aureliaPluginConfig;
}

enableBuildNotifications(enabled = true, notifierPluginOptionsCallback = () => {}) {
if (typeof notifierPluginOptionsCallback !== 'function') {
throw new Error('Argument 2 to enableBuildNotifications() must be a callback function.');
Expand Down Expand Up @@ -436,6 +443,10 @@ class WebpackConfig {
this.configuredFilenames = configuredFilenames;
}

configureResolveModules(directories) {
this.resolveModules = directories;
}

cleanupOutputBeforeBuild(paths = ['**/*'], cleanWebpackPluginOptionsCallback = () => {}) {
if (!Array.isArray(paths)) {
throw new Error('Argument 1 to cleanupOutputBeforeBuild() must be an Array of paths - e.g. [\'**/*\']');
Expand Down
14 changes: 14 additions & 0 deletions lib/config-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const stylusLoaderUtil = require('./loaders/stylus');
const babelLoaderUtil = require('./loaders/babel');
const tsLoaderUtil = require('./loaders/typescript');
const vueLoaderUtil = require('./loaders/vue');

// plugins utils
const extractTextPluginUtil = require('./plugins/extract-text');
const deleteUnusedEntriesPluginUtil = require('./plugins/delete-unused-entries');
Expand All @@ -33,6 +34,7 @@ const uglifyPluginUtil = require('./plugins/uglify');
const friendlyErrorPluginUtil = require('./plugins/friendly-errors');
const assetOutputDisplay = require('./plugins/asset-output-display');
const notifierPluginUtil = require('./plugins/notifier');
const aureliaPluginUtil = require('./plugins/aurelia');
const PluginPriorities = require('./plugins/plugin-priorities');

class ConfigGenerator {
Expand Down Expand Up @@ -89,6 +91,10 @@ class ConfigGenerator {
config.resolve.alias['react-dom'] = 'preact-compat';
}

if (this.webpackConfig.resolveModules && Array.isArray(this.webpackConfig.resolveModules)) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this Array.isArray check should be put directly into the configureResolveModules() method of the WebpackConfig.js file and display an error if the given parameter isn't an array (see cleanupOutputBeforeBuild() for instance).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

config.resolve.modules = this.webpackConfig.resolveModules;
}

return config;
}

Expand Down Expand Up @@ -209,6 +215,12 @@ class ConfigGenerator {
});
}

if (this.webpackConfig.useAurelia) {
rules.push(
{ test: /\.html$/i, use: 'html-loader' }
);
}

this.webpackConfig.loaders.forEach((loader) => {
rules.push(loader);
});
Expand Down Expand Up @@ -243,6 +255,8 @@ class ConfigGenerator {

notifierPluginUtil(plugins, this.webpackConfig);

aureliaPluginUtil(plugins, this.webpackConfig);

if (!this.webpackConfig.runtimeConfig.outputJson) {
const friendlyErrorPlugin = friendlyErrorPluginUtil(this.webpackConfig);
plugins.push({
Expand Down
5 changes: 5 additions & 0 deletions lib/features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ const features = {
packages: ['vue', 'vue-loader', 'vue-template-compiler'],
description: 'load VUE files'
},
aurelia: {
method: 'enableAureliaPlugin()',
packages: ['aurelia-webpack-plugin'],
description: 'Build Aurelia projects'
},
notifier: {
method: 'enableBuildNotifications()',
packages: ['webpack-notifier'],
Expand Down
31 changes: 31 additions & 0 deletions lib/plugins/aurelia.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*
* 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 PluginPriorities = require('./plugin-priorities');
const loaderFeatures = require('../features');

/**
* @param {Array} plugins
* @param {WebpackConfig} webpackConfig
* @return {void}
*/
module.exports = function(plugins, webpackConfig) {
if (!webpackConfig.useAurelia) return;

loaderFeatures.ensurePackagesExist('aurelia-webpack-plugin');

const AureliaPlugin = require.resolve('aurelia-webpack-plugin');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't that be require('aurelia-webpack-plugin') since a require.resolve() call would return a string and not a constructor?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be more precise it should probably be something like:

const { AureliaPlugin } = require('aurelia-webpack-plugin');

or without the destructuring assignment:

const AureliaPlugin = require('aurelia-webpack-plugin').AureliaPlugin;


plugins.push({
plugin: new AureliaPlugin(webpackConfig.aureliaPluginConfig),
priority: PluginPriorities.AureliaPlugin
});
};
1 change: 1 addition & 0 deletions lib/plugins/plugin-priorities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,5 @@ module.exports = {
NamedModulesPlugin: 0,
WebpackChunkHash: 0,
WebpackNotifier: 0,
AureliaPlugin: 0
};
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"yargs": "^8.0.1"
},
"devDependencies": {
"aurelia-webpack-plugin": "^2.0.0-rc.5",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that's a RC version, is it stable enough (I don't know Aurelia at all)?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, yes. Aurelia has a solid track record of releasing RC's that rarely have many breaking changes. 2.0 of this plugin has not been released but 1.x has been abandoned. They tend to run RC's for a while to be certain that their true x.0 release is reliable after being battle tested a bit :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When 2.0 is released, I'll do my best to remember to come back and update this though :)

"autoprefixer": "^6.7.7",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
Expand Down
Loading