Add ES module output (#65)

* Add `esModule` option * Convert loader sources to ES modules
ogonkov · Jul 5, 2020 · 57eb77e · 57eb77e
1 parent 87ce2a9
commit 57eb77e
Show file tree

Hide file tree

Showing 20 changed files with 132 additions and 63 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -90,7 +90,20 @@ module.exports = {
   // preset: null,
 
   // Run tests from one or more projects
-  // projects: null,
+  projects: [
+    {
+      displayName: 'cjs',
+      globals: {
+        __USE_ES__: false
+      }
+    },
+    {
+      displayName: 'es',
+      globals: {
+        __USE_ES__: true
+      }
+    }
+  ],
 
   // Use this configuration option to add custom reporters to Jest
   // reporters: undefined,

diff --git a/src/ast/get-assets.js b/src/ast/get-assets.js
@@ -12,6 +12,8 @@ import {StaticExtension} from '../static-extension/StaticExtension';
  *   'foo' + bar + 'qux'
  *
  * @param {nunjucks.nodes.Add} node
+ *
+ * @returns {string}
  */
 function getAddNodeValue(node) {
     if (!(node instanceof nunjucks.nodes.Add)) {

diff --git a/src/loader.js b/src/loader.js
@@ -7,6 +7,7 @@ import {toAssetsUUID} from './output/to-assets-uuid';
 import {ERROR_MODULE_NOT_FOUND, TEMPLATE_DEPENDENCIES} from './constants';
 import {getTemplateImports} from './output/get-template-imports';
 import {ASSETS_KEY} from './static-extension/contants';
+import {getModuleOutput} from './output/get-module-output';
 
 export default function nunjucksLoader(source) {
     const isWindows = process.platform === 'win32';
@@ -61,7 +62,7 @@ export default function nunjucksLoader(source) {
             isAsyncTemplate
         });
         callback(null, `
-        ${getTemplateImports(this, {
+        ${getTemplateImports(this, options.esModule, {
             assets: assetsUUID,
             dependencies,
             extensions,
@@ -70,8 +71,8 @@ export default function nunjucksLoader(source) {
         })}
         ${precompiled}
 
-        exports = module.exports = function nunjucksTemplate(ctx = {}) {
-          var nunjucks = runtime(
+        function nunjucksTemplate(ctx = {}) {
+          var nunjucks = (${getModuleOutput('runtime')})(
             ${envOptions},
             ${TEMPLATE_DEPENDENCIES}
           );
@@ -85,8 +86,13 @@ export default function nunjucksLoader(source) {
           return nunjucks.render(${resourcePathString}, ctx);
         };
 
-        exports.__nunjucks_precompiled_template__ = ${TEMPLATE_DEPENDENCIES}.templates[${resourcePathString}];
-        exports.${TEMPLATE_DEPENDENCIES} = ${TEMPLATE_DEPENDENCIES};
+        nunjucksTemplate.__nunjucks_precompiled_template__ = ${TEMPLATE_DEPENDENCIES}.templates[${resourcePathString}];
+        nunjucksTemplate.${TEMPLATE_DEPENDENCIES} = ${TEMPLATE_DEPENDENCIES};
+
+        ${options.esModule ?
+            'export default' :
+            'exports = module.exports ='
+        } nunjucksTemplate;
         `);
     }, function(error) {
         if (error.code === ERROR_MODULE_NOT_FOUND &&

diff --git a/src/output/get-assets.js b/src/output/get-assets.js
@@ -8,9 +8,10 @@ import {getDynamicPathRegexp} from './get-dynamic-path-regexp';
 
 /**
  * @param {Array.<string[]>} assets
+ * @returns {{imports: function(Object, boolean): string}}
  */
 export function getAssets(assets) {
-    function imports(loaderContext) {
+    function imports(loaderContext, esModule) {
         return assets.map(function([uuid, assetPath, assetImport]) {
             const args = getArgs(assetPath);
             const isDynamicImport = assetImport.startsWith('"');
@@ -38,9 +39,9 @@ export function getAssets(assets) {
             );
             const importInvocation = isDynamicImport ?
                 `const ${importVar} = function(${args.join()}) {
-                    return ${getImportStr(importPath, true)()}
+                    return ${getImportStr(importPath, esModule, true)()}
                 };` :
-                `${getImportStr(importPath)(importVar)}`;
+                `${getImportStr(importPath, esModule)(importVar)}`;
 
             return `
             ${importInvocation}

diff --git a/src/output/get-extensions.js b/src/output/get-extensions.js
@@ -5,11 +5,12 @@ import {IMPORTS_PREFIX, TEMPLATE_DEPENDENCIES} from '../constants';
 import {getModuleOutput} from './get-module-output';
 
 export function getExtensions(extensions) {
-    function imports(loaderContext) {
+    function imports(loaderContext, esModule) {
         return extensions.map(([name, importPath]) => {
             const importVar = toVar(`${IMPORTS_PREFIX}_ext_${name}`);
             const importStatement = getImportStr(
-                stringifyRequest(loaderContext, importPath)
+                stringifyRequest(loaderContext, importPath),
+                esModule
             )(importVar);
 
             return `

diff --git a/src/output/get-filters.js b/src/output/get-filters.js
@@ -5,11 +5,12 @@ import {toVar} from '../utils/to-var';
 import {getModuleOutput} from './get-module-output';
 
 export function getFilters(filters) {
-    function imports(loaderContext) {
+    function imports(loaderContext, esModule) {
         return filters.map(([filterName, importPath, filterInstance]) => {
             const importVar = toVar(`${IMPORTS_PREFIX}_filter_${filterName}`);
             const importStatement = getImportStr(
                 stringifyRequest(loaderContext, importPath),
+                esModule
             )(importVar);
 
             return `

diff --git a/src/output/get-globals.js b/src/output/get-globals.js
@@ -5,11 +5,12 @@ import {toVar} from '../utils/to-var';
 import {getModuleOutput} from './get-module-output';
 
 export function getGlobals(globals) {
-    function imports(loaderContext) {
+    function imports(loaderContext, esModule) {
         return globals.map(([globalImport, globalPath]) => {
             const importVar = toVar(`${IMPORTS_PREFIX}_global_${globalImport}`);
             const importStatement = getImportStr(
-                stringifyRequest(loaderContext,globalPath)
+                stringifyRequest(loaderContext,globalPath),
+                esModule
             )(importVar);
 
             return `

diff --git a/src/output/get-runtime-import.js b/src/output/get-runtime-import.js
@@ -2,11 +2,11 @@ import {stringifyRequest} from 'loader-utils';
 import path from 'path';
 import {getImportStr} from '../utils/get-import-str';
 
-export function getRuntimeImport(loaderContext) {
+export function getRuntimeImport(loaderContext, esModule) {
     const runtimePath = stringifyRequest(
         loaderContext,
         `${path.resolve(path.join(__dirname, '..', 'runtime.js'))}`
     );
 
-    return `${getImportStr(runtimePath)('runtime')}`
+    return `${getImportStr(runtimePath, esModule)('runtime')}`
 }
diff --git a/src/output/get-template-dependencies-import.js b/src/output/get-template-dependencies-import.js
@@ -32,6 +32,7 @@ function getImports(imports, assignments) {
 
 function foldDependenciesToImports(
     loaderContext,
+    esModule,
     [imports, assignment],
     [, fullPath],
     i
@@ -43,7 +44,7 @@ function foldDependenciesToImports(
     return [
         `
         ${imports}
-        ${getImportStr(path)(importVar)}
+        ${getImportStr(path, esModule)(importVar)}
         `,
         {
             templates: join('templates'),
@@ -65,13 +66,14 @@ function foldDependenciesToImports(
  *         ...dep0.__nunjucks_module_dependencies__.templates
  *     };
  *
- * @param loaderContext
+ * @param {Object} loaderContext
+ * @param {boolean} esModule
  * @param {Array<string[]>} dependencies
  * @returns {string}
  */
-export function getTemplateDependenciesImport(loaderContext, dependencies) {
+export function getTemplateDependenciesImport(loaderContext, esModule, dependencies) {
     return getImports(
-        ...dependencies.reduce(foldDependenciesToImports.bind(null, loaderContext), ['', {
+        ...dependencies.reduce(foldDependenciesToImports.bind(null, loaderContext, esModule), ['', {
             templates: '',
             globals: '',
             extensions: '',

diff --git a/src/output/get-template-imports.js b/src/output/get-template-imports.js
@@ -5,19 +5,19 @@ import {getAssets} from './get-assets';
 import {getExtensions} from './get-extensions';
 import {getFilters} from './get-filters';
 
-export function getTemplateImports(loader, {
+export function getTemplateImports(loader, esModule, {
     assets,
     dependencies,
     extensions,
     filters,
     globals
 }) {
     return `
-    ${getRuntimeImport(loader)}
-    ${getTemplateDependenciesImport(loader, dependencies)}
-    ${getGlobals(globals).imports(loader)}
-    ${getAssets(assets).imports(loader)}
-    ${getExtensions(extensions).imports(loader)}
-    ${getFilters(filters).imports(loader)}
+    ${getRuntimeImport(loader, esModule)}
+    ${getTemplateDependenciesImport(loader, esModule, dependencies)}
+    ${getGlobals(globals).imports(loader, esModule)}
+    ${getAssets(assets).imports(loader, esModule)}
+    ${getExtensions(extensions).imports(loader, esModule)}
+    ${getFilters(filters).imports(loader, esModule)}
     `;
 }
diff --git a/src/precompile/configure-environment.js b/src/precompile/configure-environment.js
@@ -2,7 +2,6 @@ import nunjucks from 'nunjucks';
 import {getModule} from '../utils/get-module';
 
 /**
- * @param env
  * @param {Object}   options
  * @param {string[]} options.searchPaths
  * @param {Object}   options.options

diff --git a/src/runtime.js b/src/runtime.js
@@ -1,8 +1,8 @@
-const {WebpackPrecompiledLoader} = require('./WebpackPrecompiledLoader');
+import {WebpackPrecompiledLoader} from './WebpackPrecompiledLoader';
 
-const nunjucks = require('nunjucks/browser/nunjucks-slim');
+import nunjucks from 'nunjucks/browser/nunjucks-slim';
 
-module.exports = function runtime(options, {
+export default function runtime(options, {
     globals,
     extensions,
     filters,
@@ -71,4 +71,4 @@ module.exports = function runtime(options, {
             );
         }
     };
-};
+}
diff --git a/src/schema.json b/src/schema.json
@@ -95,6 +95,10 @@
         }
       },
       "default": {}
+    },
+    "esModule": {
+      "type": "boolean",
+      "default": false
     }
   },
   "additionalProperties": false

diff --git a/src/utils/get-import-str.js b/src/utils/get-import-str.js
@@ -1,15 +1,30 @@
 /**
  * @param {string} path
+ * @param {boolean} [esModule]
  * @param {boolean} [isDynamic]
  * @returns {function(string, string): string}
  */
-export function getImportStr(path, isDynamic) {
+export function getImportStr(path, esModule, isDynamic) {
+    const isES = esModule === true;
+
     /**
      * @param {string} [name] Variable name to be used
      * @param {string} [sym]  Module symbol to be imported
      * @returns {string}
      */
     function getImportInvocationString(name, sym) {
+        if (isDynamic && isES) {
+            return `import(${path});`;
+        }
+
+        if (name && sym && isES) {
+            return `import {${sym} as ${name}} from ${path};`;
+        }
+
+        if (name && isES) {
+            return `import ${name} from ${path};`;
+        }
+
         if (name && sym) {
             return `const ${name} = require(${path}).${sym};`
         }

diff --git a/src/utils/get-possible-paths.js b/src/utils/get-possible-paths.js
@@ -1,31 +1,15 @@
-import path from 'path';
-import {unquote} from './unquote';
-
-function getFilePath(searchPath, possiblePath) {
-    const [firstPart, ...restParts] = possiblePath.split(' + ');
-    const filePath = path.resolve(searchPath, unquote(firstPart));
-
-    return restParts.length > 0 ?
-        `${[`"${filePath}"`, ...restParts].join(' + ')}` : filePath;
-}
+import {resolveSearchPaths} from './resolve-search-paths';
 
 /**
  * @param {string[]} paths
  * @param {string[]} searchPaths
- * @returns {Array.<[string, array]>}
+ * @returns {Array.<[string, string[]]>}
  */
 export function getPossiblePaths(paths, searchPaths) {
     return paths.map(function(possiblePath) {
         return [
             possiblePath,
-            searchPaths.map((searchPath) => [
-                path.resolve(searchPath),
-                getFilePath(searchPath, possiblePath)
-            ]).filter(function([basePath, filePath]) {
-                return unquote(filePath).startsWith(basePath);
-            }).map(function([, filePath]) {
-                return filePath;
-            })
+            resolveSearchPaths(possiblePath, searchPaths)
         ];
     });
 }
diff --git a/src/utils/get-string-base64-hash.js b/src/utils/get-string-base64-hash.js
@@ -2,7 +2,7 @@
 
 /**
  * @link https://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
- * @param str
+ * @param {string} str
  * @returns {*}
  */
 function getStringHash(str) {

diff --git a/src/utils/resolve-search-paths.js b/src/utils/resolve-search-paths.js
@@ -0,0 +1,26 @@
+import path from 'path';
+import {unquote} from './unquote';
+
+function getFilePath(searchPath, possiblePath) {
+    const [firstPart, ...restParts] = possiblePath.split(' + ');
+    const filePath = path.resolve(searchPath, unquote(firstPart));
+
+    return restParts.length > 0 ?
+        `${[`"${filePath}"`, ...restParts].join(' + ')}` : filePath;
+}
+
+/**
+ * @param {string}   possiblePath
+ * @param {string[]} searchPaths
+ * @returns {string[]}
+ */
+export function resolveSearchPaths(possiblePath, searchPaths) {
+    return searchPaths.map((searchPath) => [
+        path.resolve(searchPath),
+        getFilePath(searchPath, possiblePath)
+    ]).filter(function([basePath, filePath]) {
+        return unquote(filePath).startsWith(basePath);
+    }).map(function([, filePath]) {
+        return filePath;
+    })
+}
diff --git a/test/assets.test.js b/test/assets.test.js
@@ -1,6 +1,7 @@
 import compiler from './compiler';
 
 const loaderOptions = {
+    esModule: __USE_ES__,
     assetsPaths: [
         'test/fixtures/django_project/app_example/static'
     ]

diff --git a/test/compiler.js b/test/compiler.js
@@ -13,8 +13,8 @@ export default (fixture, options = {}) => {
         entry: `./${fixture}`,
         output: {
             libraryTarget: 'commonjs2',
-            path: path.resolve(__dirname),
-            filename: `bundles/${bundleName}.js`,
+            path: path.join(__dirname, 'bundles'),
+            filename: `${bundleName}.js`,
         },
         module: {
             rules: [{
@@ -46,7 +46,9 @@ export default (fixture, options = {}) => {
                 reject(new Error(stats.toJson().errors));
             }
 
-            resolve(require(`./bundles/${bundleName}.js`));
+            import(`./bundles/${bundleName}.js`).then(function(module) {
+                resolve(module.default || module);
+            });
         });
     });
 }