@vocab/webpack 1.2.0 → 1.2.2

package/README.md

@@ -20,10 +20,11 @@ Vocab helps you ship multiple languages without compromising the reliability of
 
 ### Step 1: Install Dependencies
 
-Vocab is a monorepo with different packages you can install depending on your usage, the below list will get you started using the cli, React and webpack integrations.
+Vocab is a monorepo with different packages you can install depending on your usage, the below list will get you started using the CLI and React integration.
 
 ```bash
-$ npm i --save @vocab/cli @vocab/react @vocab/webpack
+$ npm i --save-dev @vocab/cli
+$ npm i --save @vocab/core @vocab/react
 ```
 
 ### Step 2: Configure Vocab
@@ -116,6 +117,10 @@ Right now every language is loaded into your web application all the time, which
 
 This is done using the **VocabWebpackPlugin**. Applying this plugin to your client webpack configuration will replace all vocab files with a dynamic asynchronous chunks designed for the web.
 
+```bash
+$ npm i --save-dev @vocab/webpack
+```
+
 **webpack.config.js**
 
 ```js
@@ -206,7 +211,7 @@ module.exports = {
    */
   generatedLanguages: [
     {
-      name: 'generatedLangauge',
+      name: 'generatedLanguage',
       extends: 'en',
       generator: {
         transformElement: capitalize,
@@ -296,6 +301,10 @@ const App = () => (
 
 The `@vocab/pseudo-localize` package exports low-level functions that can be used for pseudo-localization of translation messages.
 
+```bash
+$ npm i --save-dev @vocab/pseudo-localize
+```
+
 ```ts
 import {
   extendVowels,

package/loader/dist/vocab-webpack-loader.cjs.dev.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var path = require('path');
+var cjsModuleLexer = require('cjs-module-lexer');
 var esModuleLexer = require('es-module-lexer');
 var core = require('@vocab/core');
 var chunkName_dist_vocabWebpackChunkName = require('../../chunk-name/dist/vocab-webpack-chunk-name.cjs.dev.js');
@@ -12,7 +13,27 @@ require('debug');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var path__default = /*#__PURE__*/_interopDefault(path);
+var cjsModuleLexer__namespace = /*#__PURE__*/_interopNamespace(cjsModuleLexer);
+var esModuleLexer__namespace = /*#__PURE__*/_interopNamespace(esModuleLexer);
 
 const trace = logger.trace.extend('loader');
 
@@ -52,8 +73,14 @@ function renderLanguageLoaderAsync(resourcePath, loadedTranslation) {
     );
   };
 }
-function findExportNames(source) {
-  const [, exports] = esModuleLexer.parse(source);
+function findExportNames(source, mode) {
+  if (mode === 'esm') {
+    const [, exports] = esModuleLexer__namespace.parse(source);
+    return exports;
+  }
+  const {
+    exports
+  } = cjsModuleLexer__namespace.parse(source);
   return exports;
 }
 async function vocabLoader(source) {
@@ -62,7 +89,6 @@ async function vocabLoader(source) {
   if (!callback) {
     throw new Error(`Webpack didn't provide an async callback`);
   }
-  await esModuleLexer.init;
   const config = this.getOptions();
   const devJsonFilePath = core.getDevLanguageFileFromTsFile(this.resourcePath);
   const loadedTranslation = core.loadTranslation({
@@ -76,16 +102,35 @@ async function vocabLoader(source) {
     return;
   }
   const renderLanguageLoader = renderLanguageLoaderAsync.call(this, devJsonFilePath, loadedTranslation);
-  const loadedLanguages = Object.keys(loadedTranslation.languages);
-  const exportName = findExportNames(source)[0];
-  const result = /* ts */`
-    import { createLanguage, createTranslationFile } from '@vocab/webpack/${target}';
-
+  const translations = /* ts */`
     const translations = createTranslationFile({
-      ${loadedLanguages.map(lang => `${JSON.stringify(lang)}: ${renderLanguageLoader(lang)}`).join(',\n')}
-    });
-    export { translations as ${exportName} };
+      ${Object.keys(loadedTranslation.languages).map(lang => `${JSON.stringify(lang)}: ${renderLanguageLoader(lang)}`).join(',\n')}
+      });
   `;
+  let result;
+
+  // this is necessary for the Web Assembly boot
+  await esModuleLexer__namespace.init;
+  const esmExports = findExportNames(source, 'esm');
+  if (esmExports.length > 0) {
+    const exportName = esmExports[0];
+    trace(`Found ESM export '${exportName}' in ${this.resourcePath}`);
+    result = /* ts */`
+      import { createLanguage, createTranslationFile } from '@vocab/webpack/${target}';
+      ${translations}
+      export { translations as ${exportName} };
+    `;
+  } else {
+    // init needs to be called and waited upon
+    await cjsModuleLexer__namespace.init();
+    const exportName = findExportNames(source, 'cjs')[0];
+    trace(`Found CJS export '${exportName}' in ${this.resourcePath}`);
+    result = /* ts */`
+      const { createLanguage, createTranslationFile } = require('@vocab/webpack/${target}');
+      ${translations}
+      exports.${exportName} = translations;
+    `;
+  }
   trace('Created translation file', result);
   callback(null, result);
 }

package/loader/dist/vocab-webpack-loader.cjs.prod.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var path = require('path');
+var cjsModuleLexer = require('cjs-module-lexer');
 var esModuleLexer = require('es-module-lexer');
 var core = require('@vocab/core');
 var chunkName_dist_vocabWebpackChunkName = require('../../chunk-name/dist/vocab-webpack-chunk-name.cjs.prod.js');
@@ -12,7 +13,27 @@ require('debug');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var path__default = /*#__PURE__*/_interopDefault(path);
+var cjsModuleLexer__namespace = /*#__PURE__*/_interopNamespace(cjsModuleLexer);
+var esModuleLexer__namespace = /*#__PURE__*/_interopNamespace(esModuleLexer);
 
 const trace = logger.trace.extend('loader');
 
@@ -52,8 +73,14 @@ function renderLanguageLoaderAsync(resourcePath, loadedTranslation) {
     );
   };
 }
-function findExportNames(source) {
-  const [, exports] = esModuleLexer.parse(source);
+function findExportNames(source, mode) {
+  if (mode === 'esm') {
+    const [, exports] = esModuleLexer__namespace.parse(source);
+    return exports;
+  }
+  const {
+    exports
+  } = cjsModuleLexer__namespace.parse(source);
   return exports;
 }
 async function vocabLoader(source) {
@@ -62,7 +89,6 @@ async function vocabLoader(source) {
   if (!callback) {
     throw new Error(`Webpack didn't provide an async callback`);
   }
-  await esModuleLexer.init;
   const config = this.getOptions();
   const devJsonFilePath = core.getDevLanguageFileFromTsFile(this.resourcePath);
   const loadedTranslation = core.loadTranslation({
@@ -76,16 +102,35 @@ async function vocabLoader(source) {
     return;
   }
   const renderLanguageLoader = renderLanguageLoaderAsync.call(this, devJsonFilePath, loadedTranslation);
-  const loadedLanguages = Object.keys(loadedTranslation.languages);
-  const exportName = findExportNames(source)[0];
-  const result = /* ts */`
-    import { createLanguage, createTranslationFile } from '@vocab/webpack/${target}';
-
+  const translations = /* ts */`
     const translations = createTranslationFile({
-      ${loadedLanguages.map(lang => `${JSON.stringify(lang)}: ${renderLanguageLoader(lang)}`).join(',\n')}
-    });
-    export { translations as ${exportName} };
+      ${Object.keys(loadedTranslation.languages).map(lang => `${JSON.stringify(lang)}: ${renderLanguageLoader(lang)}`).join(',\n')}
+      });
   `;
+  let result;
+
+  // this is necessary for the Web Assembly boot
+  await esModuleLexer__namespace.init;
+  const esmExports = findExportNames(source, 'esm');
+  if (esmExports.length > 0) {
+    const exportName = esmExports[0];
+    trace(`Found ESM export '${exportName}' in ${this.resourcePath}`);
+    result = /* ts */`
+      import { createLanguage, createTranslationFile } from '@vocab/webpack/${target}';
+      ${translations}
+      export { translations as ${exportName} };
+    `;
+  } else {
+    // init needs to be called and waited upon
+    await cjsModuleLexer__namespace.init();
+    const exportName = findExportNames(source, 'cjs')[0];
+    trace(`Found CJS export '${exportName}' in ${this.resourcePath}`);
+    result = /* ts */`
+      const { createLanguage, createTranslationFile } = require('@vocab/webpack/${target}');
+      ${translations}
+      exports.${exportName} = translations;
+    `;
+  }
   trace('Created translation file', result);
   callback(null, result);
 }

package/loader/dist/vocab-webpack-loader.esm.js

@@ -1,5 +1,6 @@
 import path from 'path';
-import { init, parse } from 'es-module-lexer';
+import * as cjsModuleLexer from 'cjs-module-lexer';
+import * as esModuleLexer from 'es-module-lexer';
 import { getDevLanguageFileFromTsFile, loadTranslation } from '@vocab/core';
 import { getChunkName } from '../../chunk-name/dist/vocab-webpack-chunk-name.esm.js';
 import { t as trace$1 } from '../../dist/logger-e1862ea1.esm.js';
@@ -44,8 +45,14 @@ function renderLanguageLoaderAsync(resourcePath, loadedTranslation) {
     );
   };
 }
-function findExportNames(source) {
-  const [, exports] = parse(source);
+function findExportNames(source, mode) {
+  if (mode === 'esm') {
+    const [, exports] = esModuleLexer.parse(source);
+    return exports;
+  }
+  const {
+    exports
+  } = cjsModuleLexer.parse(source);
   return exports;
 }
 async function vocabLoader(source) {
@@ -54,7 +61,6 @@ async function vocabLoader(source) {
   if (!callback) {
     throw new Error(`Webpack didn't provide an async callback`);
   }
-  await init;
   const config = this.getOptions();
   const devJsonFilePath = getDevLanguageFileFromTsFile(this.resourcePath);
   const loadedTranslation = loadTranslation({
@@ -68,16 +74,35 @@ async function vocabLoader(source) {
     return;
   }
   const renderLanguageLoader = renderLanguageLoaderAsync.call(this, devJsonFilePath, loadedTranslation);
-  const loadedLanguages = Object.keys(loadedTranslation.languages);
-  const exportName = findExportNames(source)[0];
-  const result = /* ts */`
-    import { createLanguage, createTranslationFile } from '@vocab/webpack/${target}';
-
+  const translations = /* ts */`
     const translations = createTranslationFile({
-      ${loadedLanguages.map(lang => `${JSON.stringify(lang)}: ${renderLanguageLoader(lang)}`).join(',\n')}
-    });
-    export { translations as ${exportName} };
+      ${Object.keys(loadedTranslation.languages).map(lang => `${JSON.stringify(lang)}: ${renderLanguageLoader(lang)}`).join(',\n')}
+      });
   `;
+  let result;
+
+  // this is necessary for the Web Assembly boot
+  await esModuleLexer.init;
+  const esmExports = findExportNames(source, 'esm');
+  if (esmExports.length > 0) {
+    const exportName = esmExports[0];
+    trace(`Found ESM export '${exportName}' in ${this.resourcePath}`);
+    result = /* ts */`
+      import { createLanguage, createTranslationFile } from '@vocab/webpack/${target}';
+      ${translations}
+      export { translations as ${exportName} };
+    `;
+  } else {
+    // init needs to be called and waited upon
+    await cjsModuleLexer.init();
+    const exportName = findExportNames(source, 'cjs')[0];
+    trace(`Found CJS export '${exportName}' in ${this.resourcePath}`);
+    result = /* ts */`
+      const { createLanguage, createTranslationFile } = require('@vocab/webpack/${target}');
+      ${translations}
+      exports.${exportName} = translations;
+    `;
+  }
   trace('Created translation file', result);
   callback(null, result);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vocab/webpack",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "dist/vocab-webpack.cjs.js",
   "module": "dist/vocab-webpack.esm.js",
   "exports": {
@@ -39,8 +39,9 @@
     "web"
   ],
   "dependencies": {
-    "@vocab/core": "^1.3.0",
+    "@vocab/core": "^1.3.1",
     "chalk": "^4.1.0",
+    "cjs-module-lexer": "^1.2.2",
     "debug": "^4.3.1",
     "es-module-lexer": "^0.9.3",
     "virtual-resource-loader": "^1.0.1"