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.

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
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 18 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -629,6 +629,18 @@ 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 :)

*
* @param {function} aureliaLoaderOptionsCallback
* @returns {exports}
*/
enableAurelia(aureliaLoaderOptionsCallback = () => {}) {
Copy link
Member

Choose a reason for hiding this comment

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

If it's a plugin, we try to include that in the name to help be transparent. So, enableAureliaPlugin

webpackConfig.enableAurelia(aureliaLoaderOptionsCallback);

return this;
},

/**
* If enabled, display build notifications using
* webpack-notifier.
Expand Down Expand Up @@ -705,6 +717,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
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;
}

enableAurelia(aureliaPluginConfig = {}) {
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
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
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: 'enableAurelia()',
packages: ['aurelia-webpack-plugin'],
description: 'Build Aurelia projects'
},
notifier: {
method: 'enableBuildNotifications()',
packages: ['webpack-notifier'],
Expand Down
27 changes: 27 additions & 0 deletions lib/plugins/aurelia.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* This file is part of the Symfony Webpack Encore package.
*
* (c) Fabien Potencier <fabien@symfony.com>
*
* 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 { AureliaPlugin } = require('aurelia-webpack-plugin');

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

plugins.push({
plugin: new AureliaPlugin(webpackConfig.aureliaPluginConfig),
priority: PluginPriorities.AureliaPlugin
});
};
1 change: 1 addition & 0 deletions lib/plugins/plugin-priorities.js
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
};
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
},
"homepage": "https://github.com/symfony/webpack-encore",
"dependencies": {
"aurelia-loader-webpack": "^2.1.0",
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 needed? Is this a loader or a plugin?

Also, these should be in devDependencies. The lib/features.js should cause the user to see a nice error that they need to install these (instead of us shipping Encore with them included)

"aurelia-webpack-plugin": "^2.0.0-rc.5",
"babel-core": "^6.24.0",
"babel-loader": "^7.1.0",
"babel-preset-env": "^1.2.2",
Expand Down