Merge pull request #3 from haroldiedema/feature/twig-enhancement

linaori · linaori · commit 6bdc1de5fe52 · 2015-09-22T11:45:43.000+02:00
Fixed readme &amp; added BabelLoader
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@
   - [Bundle configuration](#bundle-configuration)
   - [Shared dependencies](#shared-dependencies)
   - [Asset output directories](#asset-output-directories)
+  - [Ideal configuration](#ideal-configuration)
 - [Loaders](#loaders)
   - [CSS](#css)
   - [Less](#less)
@@ -234,7 +235,7 @@ webpack:
 webpack:
     output:
         path: '%kernel.root_dir%/../web'
-        dump_dir: '%kernel.root_dir%/../web/bundles'
+        dump_path: '%kernel.root_dir%/../web/bundles'
         public_path: '/'
 ```
 
@@ -244,6 +245,65 @@ that exists inside the DOCUMENT_ROOT directory.
 For example, if the `output.path` value is `%kernel.root_dir/../web/packed`, the value of `output.public_path` must be
 set to `/packed`.
 
+### Ideal configuration
+
+The following configuration requires the following modules to be present in your `node_modules` directory.
+
+ - webpack-extract-text-plugin
+ - style-loader
+ - css-loader
+ - less-loader
+ - url-loader
+ - babel-loader
+
+Because we're creating shared chunks of javascript files, you'll need to include '`/compiled/shared.js`' manually in
+your base template. The same might also be the case for your CSS files, depending on what you include and where you do
+it.
+
+config.yml
+```yaml
+webpack:
+    node:
+        binary: '/path/to/node'
+        node_modules_path: '%kernel.root_dir%/../node_modules'
+    output:
+        path: '%kernel.root_dir%/../web/compiled'
+        dump_path: '%kernel.root_dir%/../web/bundles'
+        public_path: '/compiled'
+        common_id: 'shared'
+    loaders:
+        css:
+            enabled: true
+            all_chunks: true
+            filename: '[name].css'
+        less:
+            enabled: true
+            all_chunks: true
+            filename: '[name].css'
+        url:
+            enabled: true
+        babel:
+            enabled: true
+```
+
+base.html.twig
+```html
+<head>
+    <script src="/compiled/shared.js"></script>
+</head>
+```
+
+Somewhere in your twig templates
+```twig
+{% webpack js "@YourBundle/SomeModule.js" %}
+    <script src="{{ asset }}"></script>
+{% endwebpack %}
+
+{% webpack css "@YourBundle/SomeModule.js" %}
+    <link rel="stylesheet" href="{{ asset }}">
+{% endwebpack %}
+```
+
 ## Loaders
 
 Loaders allow you to `require` files other than javascript. This package comes with 3 default loaders. 
@@ -258,6 +318,8 @@ Each loader has its own configuration under the `loaders` section.
 
 Enables loading CSS files.
 
+> You need the `css-loader` and `style-loader` node module for this to work.
+
 ```yaml
 webpack:
     loaders:
@@ -283,6 +345,8 @@ Enables loading less files.
 
 This plugin shares the exact same configuration settings as the CSS loader.
 
+> You need the `less-loader`, `css-loader` and `style-loader` node modules for this to work.
+
 ```webpack
 webpack:
     loaders:
@@ -300,10 +364,25 @@ This plugin only has an `enabled` setting. It is disabled by default.
 ```yaml
 webpack:
     loaders:
-       less:
+       url:
            enabled: true
 ```
 
+### Babel
+
+The Babel Loader transpiles ECMAScript 6 code to ECMAScript 5 code, allowing it to run in older browsers. The loader
+compiles `.jsx` files instead of `.js` files, because not all files need to be compiled. Once ES6 hits mainstream, all
+you would need to do is gradually rename your jsx files to js files and everything _should_ still work.
+
+> You need the `babel-loader` node module for this to work.
+
+```yaml
+webpack:
+    loaders:
+        babel:
+            enabled: true
+```
+
 ## Plugins
 
 The webpack-bundle package comes with an easy way to develop and use plugins. A plugin simply writes pieces of code
diff --git a/src/Bundle/Resources/config/loaders.yml b/src/Bundle/Resources/config/loaders.yml
@@ -11,3 +11,7 @@ services:
         class: Hostnet\Component\Webpack\Configuration\Loader\LessLoader
         tags:
             - { name: hostnet_webpack.config_extension }
+    hostnet_webpack.loader.babel:
+        class: Hostnet\Component\Webpack\Configuration\Loader\BabelLoader
+        tags:
+            - { name: hostnet_webpack.config_extension }
diff --git a/src/Component/Configuration/Loader/BabelLoader.php b/src/Component/Configuration/Loader/BabelLoader.php
@@ -0,0 +1,46 @@
+<?php
+namespace Hostnet\Component\Webpack\Configuration\Loader;
+
+use Hostnet\Component\Webpack\Configuration\CodeBlock;
+use Hostnet\Component\Webpack\Configuration\ConfigExtensionInterface;
+use Symfony\Component\Config\Definition\Builder\NodeBuilder;
+
+final class BabelLoader implements LoaderInterface, ConfigExtensionInterface
+{
+    /**
+     * @var array
+     */
+    private $config;
+
+    /**
+     * @param array $config
+     */
+    public function __construct(array $config = [])
+    {
+        $this->config = isset($config['loaders']['babel'])
+            ? $config['loaders']['babel']
+            : ['enabled' => false];
+    }
+
+    /** {@inheritdoc} */
+    public static function applyConfiguration(NodeBuilder $node_builder)
+    {
+        $node_builder
+            ->arrayNode('babel')
+                ->canBeDisabled()
+            ->end();
+    }
+
+    /** {@inheritdoc} */
+    public function getCodeBlocks()
+    {
+        if (! $this->config['enabled']) {
+            return [new CodeBlock()];
+        }
+
+        return [(new CodeBlock())->set(
+            CodeBlock::LOADER,
+            '{ test: /\.jsx$/, loader: \'babel-loader?cacheDirectory\' }'
+        )];
+    }
+}
diff --git a/test/Component/Configuration/Loader/BabelLoaderTest.php b/test/Component/Configuration/Loader/BabelLoaderTest.php
@@ -0,0 +1,50 @@
+<?php
+namespace Hostnet\Component\Webpack\Configuration\Loader;
+
+use Hostnet\Component\Webpack\Configuration\CodeBlock;
+use Symfony\Component\Config\Definition\Builder\TreeBuilder;
+
+/**
+ * @covers Hostnet\Component\Webpack\Configuration\Loader\UrlLoader
+ * @author Harold Iedema <hiedema@hostnet.nl>
+ */
+class BabelLoaderTest extends \PHPUnit_Framework_TestCase
+{
+    public function testConfigTreeBuilder()
+    {
+        $tree = new TreeBuilder();
+        $node = $tree->root('webpack')->children();
+
+        BabelLoader::applyConfiguration($node);
+        $node->end();
+
+        $config = $tree->buildTree()->finalize([]);
+
+        $this->assertArrayHasKey('babel', $config);
+        $this->assertArrayHasKey('enabled', $config['babel']);
+    }
+
+    public function testGetCodeBlockDefault()
+    {
+        $config = new BabelLoader();
+        $block  = $config->getCodeBlocks()[0];
+
+        $this->assertFalse($block->has(CodeBlock::LOADER));
+    }
+
+    public function testGetCodeBlockDisabled()
+    {
+        $config = new BabelLoader(['loaders' => ['babel' => ['enabled' => false]]]);
+        $block  = $config->getCodeBlocks()[0];
+
+        $this->assertFalse($block->has(CodeBlock::LOADER));
+    }
+
+    public function testGetCodeBlock()
+    {
+        $config = new BabelLoader(['loaders' => ['babel' => ['enabled' => true]]]);
+        $block  = $config->getCodeBlocks()[0];
+
+        $this->assertTrue($block->has(CodeBlock::LOADER));
+    }
+}
