Merge branch 'master' into webpack3

Author: weaverryan

CHANGELOG.md

@@ -1,5 +1,42 @@
 # CHANGELOG
 
+## 0.10.0
+
+ * [BC BREAK] If you're using `enableSassLoader()` AND passing an options
+   array, the options now need to be moved to the second argument:
+
+   ```js
+   // before
+   .enableSassLoader({ resolve_url_loader: true });
+
+   // after
+   enableSassLoader(function(sassOptions) {}, {
+       resolve_url_loader: true
+   })
+   ```
+
+## 0.9.1
+
+ * Syntax error fix - #64
+
+## 0.9.0
+
+ * [BEHAVIOR CHANGE] When using `autoProvidejQuery()`, `window.jQuery` is now also
+   included (and so will be re-written in the compiled files). If you're also exposing
+   `jQuery` as a global variable, you'll need to update your code:
+
+   ```js
+   // Before: if you had this
+   window.jQuery = require('jquery');
+
+   // After: change to this
+   global.jQuery = require('jquery');
+   ```
+
+  * Vue.js support! See #49
+
+  * Typescript support! See #50
+
 ## 0.8.0
 
  * Windows support fixed #28

README.md

@@ -19,3 +19,4 @@ feel. It aims to solve the most common Webpack use cases.
 ## Documentation
 
 [Read the Documentation on symfony.com](http://symfony.com/doc/current/frontend.html)
+or view a demo application: [symfony/symfony-demo](https://github.com/symfony/symfony-demo).

fixtures/js/index.ts

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

fixtures/js/render.ts

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

fixtures/js/render2.tsx

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

fixtures/js/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "compilerOptions": {}
+}

fixtures/vuejs/App.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <hello></hello>
+  </div>
+</template>
+
+<script>
+import Hello from './components/Hello'
+
+class TestClassSyntax {
+
+}
+
+export default {
+  name: 'app',
+  components: {
+    Hello
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+<style lang="scss">
+#app {
+  display: flex;
+  color: #2c3e90;
+}
+</style>
+
+<style lang="sass">
+#app
+  color: #2c3e90
+</style>
+
+<style lang="less">
+#app {
+  margin-top: 40px;
+}
+</style>

fixtures/vuejs/assets/logo.png

@@ -0,0 +1,53 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+      <br>
+      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

fixtures/vuejs/components/Hello.vue

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App'
+
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: { App }
+})

fixtures/vuejs/main.js

@@ -20,7 +20,7 @@ if (!runtimeConfig) {
     throw new Error('Are you trying to require index.js directly?');
 }
 
-const webpackConfig = new WebpackConfig(runtimeConfig);
+let webpackConfig = new WebpackConfig(runtimeConfig);
 
 module.exports = {
     /**
@@ -282,6 +282,18 @@ module.exports = {
     /**
      * Call this if you plan on loading SASS files.
      *
+     *     Encore.enableSassLoader();
+     *
+     * Or pass options to node-sass
+     *
+     *     Encore.enableSassLoader(function(options) {
+     *         // https://github.com/sass/node-sass#options
+     *         // options.includePaths = [...]
+     *     }, {
+     *         // set optional Encore-specific options
+     *         // resolve_url_loader: true
+     *     });
+     *
      * Supported options:
      *      * {bool} resolve_url_loader (default=true)
      *              Whether or not to use the resolve-url-loader.
@@ -291,11 +303,12 @@ module.exports = {
      *              to the original entry file... not whatever file
      *              the url() appears in.
      *
-     * @param {object} options
+     * @param {function} sassLoaderOptionsCallback
+     * @param {object} encoreOptions
      * @return {exports}
      */
-    enableSassLoader(options = {}) {
-        webpackConfig.enableSassLoader(options);
+    enableSassLoader(sassLoaderOptionsCallback = () => {}, encoreOptions = {}) {
+        webpackConfig.enableSassLoader(sassLoaderOptionsCallback, encoreOptions);
 
         return this;
     },
@@ -330,7 +343,8 @@ module.exports = {
     },
 
     /**
-     * If enabled, the react preset is added to Babel:
+     * If enabled, the react preset is added to Babel.
+     *
      * https://babeljs.io/docs/plugins/preset-react/
      *
      * @returns {exports}
@@ -341,6 +355,47 @@ module.exports = {
         return this;
     },
 
+    /**
+     * Call this if you plan on loading TypeScript files.
+     *
+     * Encore.enableTypeScriptLoader()
+     *
+     * Or, configure the ts-loader options:
+     *
+     * Encore.enableTypeScriptLoader(function(tsConfig) {
+     *      // https://github.com/TypeStrong/ts-loader/blob/master/README.md#loader-options
+     *      // tsConfig.silent = false;
+     * });
+     *
+     * @param {function} callback
+     * @return {exports}
+     */
+    enableTypeScriptLoader(callback = () => {}) {
+        webpackConfig.enableTypeScriptLoader(callback);
+    },
+
+    /**
+     * If enabled, the Vue.js loader is enabled.
+     *
+     * https://github.com/vuejs/vue-loader
+     *
+     *     Encore.enableVueLoader();
+     *
+     *     // or configure the vue-loader options
+     *     // https://vue-loader.vuejs.org/en/configurations/advanced.html
+     *     Encore.enableVueLoader(function(options) {
+     *          options.preLoaders = { ... }
+     *     });
+     *
+     * @param {function} vueLoaderOptionsCallback
+     * @returns {exports}
+     */
+    enableVueLoader(vueLoaderOptionsCallback = () => {}) {
+        webpackConfig.enableVueLoader(vueLoaderOptionsCallback);
+
+        return this;
+    },
+
     /**
      * If enabled, the output directory is emptied between
      * each build (to remove old files).
@@ -356,7 +411,7 @@ module.exports = {
     /**
      * Is this currently a "production" build?
      *
-     * @returns {*}
+     * @returns {boolean}
      */
     isProduction() {
         return webpackConfig.isProduction();
@@ -381,5 +436,17 @@ module.exports = {
             console.log(pe.render(error));
             process.exit(1); // eslint-disable-line
         }
+    },
+
+    /**
+     * Resets the Encore state to allow building a new config.
+     *
+     * getWebpackConfig should be used before resetting to build
+     * a config for the existing state.
+     *
+     * @returns {void}
+     */
+    reset() {
+        webpackConfig = new WebpackConfig(runtimeConfig);
     }
 };

index.js

@@ -41,6 +41,7 @@ class WebpackConfig {
         this.useSourceMaps = false;
         this.usePostCssLoader = false;
         this.useSassLoader = false;
+        this.sassLoaderOptionsCallback = function() {};
         this.sassOptions = {
             resolve_url_loader: true
         };
@@ -50,7 +51,11 @@ class WebpackConfig {
         this.providedVariables = {};
         this.babelConfigurationCallback = function() {};
         this.useReact = false;
+        this.useVueLoader = false;
+        this.vueLoaderOptionsCallback = () => {};
         this.loaders = [];
+        this.useTypeScriptLoader = false;
+        this.tsConfigurationCallback = function() {};
     }
 
     getContext() {
@@ -202,9 +207,15 @@ class WebpackConfig {
         this.usePostCssLoader = true;
     }
 
-    enableSassLoader(options = {}) {
+    enableSassLoader(sassLoaderOptionsCallback = () => {}, options = {}) {
         this.useSassLoader = true;
 
+        if (typeof sassLoaderOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to enableSassLoader() must be a callback function.');
+        }
+
+        this.sassLoaderOptionsCallback = sassLoaderOptionsCallback;
+
         for (const optionKey of Object.keys(options)) {
             if (!(optionKey in this.sassOptions)) {
                 throw new Error(`Invalid option "${optionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
@@ -222,6 +233,26 @@ class WebpackConfig {
         this.useReact = true;
     }
 
+    enableTypeScriptLoader(callback = () => {}) {
+        this.useTypeScriptLoader = true;
+
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to enableTypeScriptLoader() must be a callback function.');
+        }
+
+        this.tsConfigurationCallback = callback;
+    }
+
+    enableVueLoader(vueLoaderOptionsCallback = () => {}) {
+        this.useVueLoader = true;
+
+        if (typeof vueLoaderOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to enableVueLoader() must be a callback function.');
+        }
+
+        this.vueLoaderOptionsCallback = vueLoaderOptionsCallback;
+    }
+
     cleanupOutputBeforeBuild() {
         this.cleanupOutput = true;
     }
@@ -244,6 +275,7 @@ class WebpackConfig {
         this.autoProvideVariables({
             $: 'jquery',
             jQuery: 'jquery',
+            'window.jQuery': 'jquery',
         });
     }