Konflikte die mit dem Master/Upstream bestanden behoben

Author: Patrick Taddey

fixtures/js/index.ts

@@ -1,3 +1,3 @@
-import render = require('./render');
+import render from './render';
 
-render();
+render();

fixtures/js/render.ts

@@ -1,5 +1,6 @@
 function render() {
-    document.getElementById('app').innerHTML = "<h1>Welcome to Your TypeScript App</h1>";
+    const html: string = "<h1>Welcome to Your TypeScript App</h1>";
+    document.getElementById('app').innerHTML = html;
 }
 
-export = render;
+export default render;

fixtures/js/render2.tsx

@@ -2,4 +2,4 @@ function render() {
     document.getElementById('app').innerHTML = "<h1>Welcome to Your TypeScript App</h1>";
 }
 
-export = render;
+export default render;

fixtures/js/tsconfig.json

@@ -1,3 +1,5 @@
 {
-  "compilerOptions": {}
-}
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true
+  }
+}

fixtures/preact/App.js

@@ -0,0 +1,9 @@
+import { h, Component } from 'preact';
+
+export default class App extends Component {
+    render() {
+        return (
+            <h1>This is a React component!</h1>
+        );
+    }
+}

fixtures/preact/main.js

@@ -0,0 +1,5 @@
+import { h, render } from 'preact';
+
+import App from './App';
+
+render(<App />, document.getElementById('app'));

index.js

@@ -476,6 +476,53 @@ class Encore {
         return this;
     }
 
+    /**
+     * Add a new cache group to Webpack's SplitChunksPlugin.
+     * This can, for instance, be used to extract code that
+     * is common to multiple entries into its own chunk.
+     *
+     * See: https://webpack.js.org/plugins/split-chunks-plugin/#examples
+     *
+     * For example:
+     *
+     * ```
+     * Encore.addCacheGroup('vendor', {
+     *     test: /[\\/]node_modules[\\/]react/
+     * });
+     * ```
+     *
+     * You can pass all the options supported by the SplitChunksPlugin
+     * but also the following shorthand provided by Encore:
+     *
+     * * `node_modules`: An array of `node_modules` packages names
+     *
+     * For example:
+     *
+     * ```
+     * Encore.addCacheGroup('vendor', {
+     *     node_modules: ['react', 'react-dom']
+     * });
+     * ```
+     *
+     * At least one of the `test` or the `node_modules` option
+     * should be provided.
+     *
+     * By default, the new cache group will be created with the
+     * following options:
+     * * `chunks` set to `"all"`
+     * * `enforce` set to `true`
+     * * `name` set to the value of the "name" parameter
+     *
+     * @param {string} name The chunk name (e.g. vendor to create a vendor.js)
+     * @param {object} options Cache group option
+     * @returns {Encore}
+     */
+    addCacheGroup(name, options) {
+        webpackConfig.addCacheGroup(name, options);
+
+        return this;
+    }
+
     /**
      * Copy files or folders to the build directory.
      *
@@ -1001,7 +1048,7 @@ class Encore {
 
     /**
      * If enabled, a Preact preset will be applied to
-     * the generated Webpack configuration.
+     * the generated Webpack and Babel configuration.
      *
      * ```
      * Encore.enablePreactPreset()
@@ -1024,12 +1071,15 @@ class Encore {
     }
 
     /**
-     * Call this if you plan on loading TypeScript files.
+     * Call this to process TypeScript files through ts-loader.
      *
      * ```
      * Encore.enableTypeScriptLoader()
      * ```
      *
+     * Or see Encore.enableBabelTypeScriptPreset() for a faster
+     * method of processing TypeScript files.
+     *
      * Or, configure the ts-loader options:
      *
      * ```
@@ -1065,6 +1115,42 @@ class Encore {
         return this;
     }
 
+
+    /**
+     * If enabled, a TypeScript preset will be applied to
+     * the generated Webpack and Babel configuration.
+     *
+     * ```
+     * Encore.enableBabelTypeScriptPreset()
+     * ```
+     *
+     * This method lets Babel handle your TypeScript code
+     * and cannot be used with `Encore.enableTypeScriptLoader()`
+     * or `Encore.enableForkedTypeScriptTypesChecking()`.
+     *
+     * Since all types are removed by Babel,
+     * you must run `tsc --noEmit` yourself for type checking.
+     *
+     * The Babel TypeScript preset can be configured,
+     * see https://babeljs.io/docs/en/babel-preset-typescript#options
+     * for available options.
+     *
+     * For example:
+     * ```
+     * Encore.enableBabelTypeScriptPreset({
+     *     isTSX: true
+     * })
+     * ```
+     *
+     * @param {object} options
+     * @returns {Encore}
+     */
+    enableBabelTypeScriptPreset(options) {
+        webpackConfig.enableBabelTypeScriptPreset(options);
+
+        return this;
+    }
+
     /**
      * If enabled, the Vue.js loader is enabled.
      *

lib/WebpackConfig.js

@@ -14,6 +14,7 @@ const fs = require('fs');
 const crypto = require('crypto');
 const RuntimeConfig = require('./config/RuntimeConfig'); //eslint-disable-line no-unused-vars
 const logger = require('./logger');
+const regexpEscaper = require('./utils/regexp-escaper');
 
 /**
  * @param {RuntimeConfig|null} runtimeConfig
@@ -84,6 +85,7 @@ class WebpackConfig {
         this.manifestKeyPrefix = null;
         this.sharedCommonsEntryName = null;
         this.sharedCommonsEntryFile = null;
+        this.cacheGroups = {};
         this.providedVariables = {};
         this.configuredFilenames = {};
         this.aliases = {};
@@ -109,6 +111,7 @@ class WebpackConfig {
         this.useEslintLoader = false;
         this.useTypeScriptLoader = false;
         this.useForkedTypeScriptTypeChecking = false;
+        this.useBabelTypeScriptPreset = false;
         this.useWebpackNotifier = false;
         this.useHandlebarsLoader = false;
 
@@ -130,6 +133,7 @@ class WebpackConfig {
             useBuiltIns: false,
             corejs: null,
         };
+        this.babelTypeScriptPresetOptions = {};
         this.vueOptions = {
             useJsx: false,
         };
@@ -518,6 +522,8 @@ class WebpackConfig {
     }
 
     createSharedEntry(name, file) {
+        logger.deprecation('Encore.createSharedEntry() is deprecated and will be removed in a future version, please use Encore.splitEntryChunks() or Encore.addCacheGroup() instead.');
+
         if (this.shouldSplitEntryChunks) {
             throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');
         }
@@ -537,6 +543,36 @@ class WebpackConfig {
         this.addEntry(name, file);
     }
 
+    addCacheGroup(name, options) {
+        if (typeof name !== 'string') {
+            throw new Error('Argument 1 to addCacheGroup() must be a string.');
+        }
+
+        if (typeof options !== 'object') {
+            throw new Error('Argument 2 to addCacheGroup() must be an object.');
+        }
+
+        if (!options['test'] && !options['node_modules']) {
+            throw new Error('Either the "test" option or the "node_modules" option of addCacheGroup() must be set');
+        }
+
+        if (options['node_modules']) {
+            if (!Array.isArray(options['node_modules'])) {
+                throw new Error('The "node_modules" option of addCacheGroup() must be an array');
+            }
+
+            options.test = new RegExp(`[\\\\/]node_modules[\\\\/](${
+                options['node_modules']
+                    .map(regexpEscaper)
+                    .join('|')
+            })[\\\\/]`);
+
+            delete options['node_modules'];
+        }
+
+        this.cacheGroups[name] = options;
+    }
+
     copyFiles(configs = []) {
         if (!Array.isArray(configs)) {
             configs = [configs];
@@ -656,6 +692,10 @@ class WebpackConfig {
     }
 
     enableTypeScriptLoader(callback = () => {}) {
+        if (this.useBabelTypeScriptPreset) {
+            throw new Error('Encore.enableTypeScriptLoader() can not be called when Encore.enableBabelTypeScriptPreset() has been called.');
+        }
+
         this.useTypeScriptLoader = true;
 
         if (typeof callback !== 'function') {
@@ -666,6 +706,9 @@ class WebpackConfig {
     }
 
     enableForkedTypeScriptTypesChecking(forkedTypeScriptTypesCheckOptionsCallback = () => {}) {
+        if (this.useBabelTypeScriptPreset) {
+            throw new Error('Encore.enableForkedTypeScriptTypesChecking() can not be called when Encore.enableBabelTypeScriptPreset() has been called.');
+        }
 
         if (typeof forkedTypeScriptTypesCheckOptionsCallback !== 'function') {
             throw new Error('Argument 1 to enableForkedTypeScriptTypesChecking() must be a callback function.');
@@ -676,6 +719,19 @@ class WebpackConfig {
             forkedTypeScriptTypesCheckOptionsCallback;
     }
 
+    enableBabelTypeScriptPreset(options = {}) {
+        if (this.useTypeScriptLoader) {
+            throw new Error('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableTypeScriptLoader() has been called.');
+        }
+
+        if (this.useForkedTypeScriptTypeChecking) {
+            throw new Error('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableForkedTypeScriptTypesChecking() has been called.');
+        }
+
+        this.useBabelTypeScriptPreset = true;
+        this.babelTypeScriptPresetOptions = options;
+    }
+
     enableVueLoader(vueLoaderOptionsCallback = () => {}, vueOptions = {}) {
         this.useVueLoader = true;
 

lib/config-generator.js

@@ -250,8 +250,7 @@ class ConfigGenerator {
 
         let rules = [
             applyRuleConfigurationCallback('javascript', {
-                // match .js and .jsx
-                test: /\.jsx?$/,
+                test: babelLoaderUtil.getTest(this.webpackConfig),
                 exclude: this.webpackConfig.babelOptions.exclude,
                 use: babelLoaderUtil.getLoaders(this.webpackConfig)
             }),
@@ -515,8 +514,20 @@ class ConfigGenerator {
             splitChunks.name = false;
         }
 
+        const cacheGroups = {};
+
+        for (const groupName in this.webpackConfig.cacheGroups) {
+            cacheGroups[groupName] = Object.assign(
+                {
+                    name: groupName,
+                    chunks: 'all',
+                    enforce: true
+                },
+                this.webpackConfig.cacheGroups[groupName]
+            );
+        }
+
         if (this.webpackConfig.sharedCommonsEntryName) {
-            const cacheGroups = {};
             cacheGroups[this.webpackConfig.sharedCommonsEntryName] = {
                 chunks: 'initial',
                 name: this.webpackConfig.sharedCommonsEntryName,
@@ -528,10 +539,10 @@ class ConfigGenerator {
                 // *definitely* included.
                 enforce: true,
             };
-
-            splitChunks.cacheGroups = cacheGroups;
         }
 
+        splitChunks.cacheGroups = cacheGroups;
+
         switch (this.webpackConfig.shouldUseSingleRuntimeChunk) {
             case true:
                 // causes a runtime.js to be emitted with the Webpack runtime

lib/config/validator.js

@@ -29,6 +29,8 @@ class Validator {
         this._validateDevServer();
 
         this._validateSharedEntryName();
+
+        this._validateCacheGroupNames();
     }
 
     _validateBasic() {
@@ -75,6 +77,18 @@ class Validator {
             logger.warning(`Passing "${this.webpackConfig.sharedCommonsEntryName}" to createSharedEntry() is not recommended, as it will override the built-in cache group by this name.`);
         }
     }
+
+    _validateCacheGroupNames() {
+        for (const groupName of Object.keys(this.webpackConfig.cacheGroups)) {
+            if (['vendors', 'defaultVendors', 'default'].includes(groupName)) {
+                logger.warning(`Passing "${groupName}" to addCacheGroup() is not recommended, as it will override the built-in cache group by this name.`);
+            }
+
+            if (groupName === this.webpackConfig.sharedCommonsEntryName) {
+                logger.warning('Using the same name when calling createSharedEntry() and addCacheGroup() is not recommended.');
+            }
+        }
+    }
 }
 
 module.exports = function(webpackConfig) {