Replace Babel + AMD with Browserify + Babelify

Author: kottenator

.gitignore

@@ -1,7 +1,8 @@
 # Project generated files
 *.pyc
 /tests/test_project/compressor/
-/*.egg-info
+/*.egg-info/
+/.eggs/
 
 # Vagrant
 /.vagrant/

.travis.yml

@@ -5,7 +5,7 @@ python:
 before_install:
   - nvm install 4.0
   - npm install -g node-sass postcss-cli autoprefixer
-  - npm install -g babel-cli babel-preset-es2015 babel-plugin-transform-es2015-modules-amd
+  - npm install -g browserify babelify babel-preset-es2015
 install:
   - pip install -e .[test]
 script:

README.md

@@ -31,7 +31,7 @@ It also enables Django static imports in SCSS, see the example below.
 // settings.py
 
 COMPRESS_PRECOMPILERS = (
-    ('text/x-scss', 'compressor_toolkit.precompilers.SCSSFilter'),
+    ('text/x-scss', 'compressor_toolkit.precompilers.SCSSCompiler'),
 )
 ```
 
@@ -79,21 +79,20 @@ But there is a way to use it: transpilers that compile ES6 into good old ES5 syn
 
 The add-on does next:
 ES6 → (
-[Babel](https://github.com/sass/node-sass) +
-[AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md)
+[Babel](http://babeljs.io/) +
+[Browserify](http://browserify.org/)
 ) → ES5.
 
-By default, AMD module ID is generated from file URL:
-`{{ STATIC_URL }}app/js/module.js` → `app/js/module`,
-but you can set it explicitly - see the example below.
+It also enables Django static imports in ES6, see the example below.
+
 
 #### Usage
 
 ```py
 // settings.py
 
 COMPRESS_PRECOMPILERS = (
-    ('module', 'compressor_toolkit.precompilers.ES6Filter'),
+    ('module', 'compressor_toolkit.precompilers.ES6Compiler'),
 )
 ```
 
@@ -102,15 +101,8 @@ COMPRESS_PRECOMPILERS = (
 
 {% load compress %}
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
-
 {% compress js %}
-  <script type="module" src="{% static 'base/framework.js' %}"></script>
-  <script type="module" data-module-id="main/scripts" src="{% static 'app/scripts.js' %}"></script>
-  <script>
-    // entry point
-    require(['main/scripts']);
-  </script>
+  <script type="module" src="{% static 'app/scripts.js' %}"></script>
 {% endcompress %}
 ```
 
@@ -137,9 +129,8 @@ new Framework('1.0.1');
 
 #### Requisites
 
-You need `babel-cli`, `babel-preset-es2015` and `babel-plugin-transform-es2015-modules-amd`
-to be installed. Quick install:
+You need `babelify` and `babel-preset-es2015` to be installed. Quick install:
 
 ```sh
-npm install -g babel-cli babel-preset-es2015 babel-plugin-transform-es2015-modules-amd
+npm install -g browserify babelify babel-preset-es2015
 ```

compressor_toolkit/precompilers.py

@@ -3,31 +3,52 @@
 from compressor.filters import CompilerFilter
 from django.conf import settings
 from django.contrib.staticfiles import finders
-from django.core.exceptions import ImproperlyConfigured
+from django.core.files.temp import NamedTemporaryFile
 
 
-def get_all_static():
-    """
-    Get all the static files directories found by ``STATICFILES_FINDERS``
+class BaseCompiler(CompilerFilter):
+    infile_ext = ''
 
-    :return: set of paths (top-level folders only)
-    """
-    static_dirs = set()
+    def input(self, **kwargs):
+        """
+        Specify temporary input file extension.
+
+        Browserify requires explicit file extension (".js" or ".json" by default).
+        https://github.com/substack/node-browserify/issues/1469
+        """
+        if self.infile is None and "{infile}" in self.command:
+            if self.filename is None:
+                self.infile = NamedTemporaryFile(mode='wb', suffix=self.infile_ext)
+                self.infile.write(self.content.encode(self.default_encoding))
+                self.infile.flush()
+                self.options += (
+                    ('infile', self.infile.name),
+                )
+        return super(BaseCompiler, self).input(**kwargs)
+
+    @staticmethod
+    def get_all_static():
+        """
+        Get all the static files directories found by ``STATICFILES_FINDERS``
+
+        :return: set of paths (top-level folders only)
+        """
+        static_dirs = set()
 
-    for finder in settings.STATICFILES_FINDERS:
-        finder = finders.get_finder(finder)
+        for finder in settings.STATICFILES_FINDERS:
+            finder = finders.get_finder(finder)
 
-        if hasattr(finder, 'storages'):
-            for storage in finder.storages.values():
-                static_dirs.add(storage.location)
+            if hasattr(finder, 'storages'):
+                for storage in finder.storages.values():
+                    static_dirs.add(storage.location)
 
-        if hasattr(finder, 'storage'):
-            static_dirs.add(finder.storage.location)
+            if hasattr(finder, 'storage'):
+                static_dirs.add(finder.storage.location)
 
-    return static_dirs
+        return static_dirs
 
 
-class SCSSFilter(CompilerFilter):
+class SCSSCompiler(BaseCompiler):
     """
     django-compressor pre-compiler for SCSS files.
 
@@ -37,10 +58,12 @@ class SCSSFilter(CompilerFilter):
     2. ``postcss --use autoprefixer -r output.css``
     """
     command = (
-        'node-sass --output-style expanded {include-static} {infile} {outfile} && '
+        'node-sass --output-style expanded {paths} {infile} {outfile} && '
         'postcss --use autoprefixer --autoprefixer.browsers "ie >= 9, > 5%" -r {outfile}'
     )
 
+    infile_ext = '.scss'
+
     def __init__(self, content, attrs, *args, **kwargs):
         """
         Include all available 'static' dirs:
@@ -56,47 +79,43 @@ def __init__(self, content, attrs, *args, **kwargs):
                 font-size: $title-font-size;
             }
         """
-        static_dirs = get_all_static()
-
         self.options += (
-            ('include-static', ' '.join(['--include-path {}'.format(s) for s in static_dirs])),
+            ('paths', ' '.join(['--include-path {}'.format(s) for s in self.get_all_static()])),
         )
 
-        super(SCSSFilter, self).__init__(content, self.command, *args, **kwargs)
+        super(SCSSCompiler, self).__init__(content, self.command, *args, **kwargs)
 
 
-class ES6Filter(CompilerFilter):
+class ES6Compiler(BaseCompiler):
     """
     django-compressor pre-compiler for ES6 files.
 
-    Transforms ES6 to ES5 AMD module using ``babel``.
+    Transforms ES6 to ES5 using Browserify + Babel.
     """
     command = (
-        'NPM_ROOT=`npm root -g` && '
-        'babel --presets=$NPM_ROOT/babel-preset-es2015 '
-        '--plugins=$NPM_ROOT/babel-plugin-transform-es2015-modules-amd '
-        '--module-id={module-id} "{infile}" -o "{outfile}"'
+        'export NODE_PATH={paths} && '
+        'browserify "{infile}" -o "{outfile}" --no-bundle-external --node '
+        '-t [ {node_modules}/babelify --presets={node_modules}/babel-preset-es2015 ]'
     )
 
+    infile_ext = '.js'
+
     def __init__(self, content, attrs, *args, **kwargs):
         """
-        Add extra option for compiler:
+        Include all available 'static' dirs:
 
-            'module-id': 'app/script'
+            export NODE_PATH="path/to/app-1/static/:path/to/app-2/static/" && browserify ...
 
-        That's AMD module ID for '/static/app/script.js' static file.
-        """
-        module_id = attrs.get('data-module-id')
-        if not module_id:
-            module_src = attrs.get('src')
-            if not module_src:
-                raise ImproperlyConfigured(
-                    "Module should contain either \"data-module-id\" or \"src\" attribute"
-                )
-            module_id = os.path.splitext(module_src.replace(settings.STATIC_URL, ''))[0]
+        So you can do imports inside your ES6 modules:
 
+            import controller from 'app-1/page-controller';
+            import { login, signup } from 'app-2/pages';
+
+            controller.registerPages(login, signup);
+        """
         self.options += (
-            ('module-id', module_id),
+            ('node_modules', getattr(settings, 'COMPRESS_NODE_MODULES', '/usr/lib/node_modules')),
+            ('paths', os.pathsep.join(self.get_all_static())),
         )
 
-        super(ES6Filter, self).__init__(content, self.command, *args, **kwargs)
+        super(ES6Compiler, self).__init__(content, self.command, *args, **kwargs)

tests/conftest.py

@@ -1,45 +1,46 @@
 import os
+import shutil
 
+from compressor.base import Compressor
 from django.conf import settings
 import pytest
 
 
+COMPRESSOR_HASH = 'test-hash'
+
+
+def pytest_configure():
+    shutil.rmtree(settings.COMPRESS_ROOT, ignore_errors=True)
+
+
+@pytest.fixture(autouse=True)
+def fake_compressor_filename(monkeypatch):
+    monkeypatch.setattr('compressor.base.get_hexdigest', lambda text, length: COMPRESSOR_HASH)
+
+
 @pytest.fixture
-def assert_precompiled():
+def precompiled():
     """
     Fixture that does the following steps:
 
     - searches given static file, e.g. 'app/layout.scss'
     - finds corresponding pre-compiled file generated by ``django-compressor``
-    - asserts pre-compiled file contents with given expected contents
+    - returns pre-compiled file contents
 
     Usage:
 
-        assert_precompiled('app/layout.scss', 'css', '.title {\n  font-size: 30px;\n}\n')
+        assert precompiled('app/layout.scss', 'css') == '.title {\n  font-size: 30px;\n}\n'
     """
-    # can't import ``Compressor`` before Django is configured
-    from compressor.base import Compressor
-
-    def runner(original_file_path, file_type, compiled_file_contents):
+    def runner(original_file_path, file_type):
         """
         :param original_file_path: e.g. 'app/layout.scss'
         :param file_type: 'css' or 'js'
-        :param compiled_file_contents: e.g. '.title {\n  font-size: 30px;\n}\n'
         """
         original_file_name = os.path.basename(original_file_path)
-
         compiled_file_path = os.path.join(
             settings.COMPRESS_ROOT,
-            Compressor(output_prefix=file_type).get_filepath(
-                compiled_file_contents,
-                original_file_name
-            )
+            Compressor(output_prefix=file_type).get_filepath('...', original_file_name)
         )
-
-        assert os.path.exists(compiled_file_path), \
-            "Compiled file \"{}\" not found".format(compiled_file_path)
-
-        with open(compiled_file_path) as compiled_file:
-            assert compiled_file.read() == compiled_file_contents
-
+        with open(compiled_file_path) as f:
+            return f.read()
     return runner