Stability improvements

Author: P0lip

.eslintrc

@@ -10,18 +10,5 @@
     "import/no-dynamic-require": "warn",
     "global-require": "warn",
     "no-continue": "off"
-  },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [
-          ".js"
-        ],
-        "moduleDirectory": [
-          "node_modules",
-          "."
-        ]
-      }
-    }
   }
 }

.nvmrc

@@ -1 +1 @@
-stable
+10.10

README.md

@@ -23,7 +23,7 @@ Your Webpack config
 Babel plugin traverses all ObjectExpression nodes in order to find messages object.
 When a matching object is found, it extracts useful data (such as IDs) and assigns it to file's context, which is read and processed by Webpack plugin later on.
 Once bundle is about to be emitted, we slice the languages to separate files and make some optimization.
-Each language file can be accessed un `messages/{langCode}.json`.
+Each language file can be accessed at `messages/{langCode}.json`.
 
 ## Features
 
@@ -38,6 +38,17 @@ By default, react-intl-optimizer does not remove unused message pairs, as it's s
 * add some documentation
 * tests
 
+
+## Caveats
+
+* No dynamic ID resolution
+* No multiple threads support
+
+
+## Kudos
+
+
+
 ## LICENSE
 
 [MIT](https://github.com/P0lip/react-intl-optimizer/blob/master/LICENSE)

package.json

@@ -28,24 +28,30 @@
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
     "lint": "eslint --cache --cache-location .cache/ src/",
+    "webpack": "webpack-cli",
     "test": "exit 0",
-    "prepublish": "yarn lint && yarn test && yarn build"
+    "prepublish": "yarn lint && yarn test && yarn build",
+    "postpublish": "rm babel.js && rm.webpack.js"
+  },
+  "dependencies": {
+    "uniqid": "5.0.3"
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "7.1.2",
     "@babel/plugin-external-helpers": "7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
     "@babel/plugin-syntax-dynamic-import": "7.0.0",
     "@babel/plugin-transform-modules-commonjs": "7.1.0",
     "@babel/preset-env": "7.1.0",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "10.0.1",
+    "babel-loader": "8.0.4",
     "babel-plugin-dynamic-import-node": "2.1.0",
     "eslint": "^5.6.1",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.11.0",
     "rollup": "^0.66.4",
-    "rollup-plugin-babel": "4.0.3"
+    "rollup-plugin-babel": "4.0.3",
+    "webpack": "4.21.0",
+    "webpack-cli": "3.1.2"
   }
 }

src/babel/index.js

@@ -1,22 +1,33 @@
-import { isValidMessagesShape, getMessages } from './utils';
+import {
+  isValidMessagesShape,
+  messagesObjectVisitor,
+  fileMessages,
+} from './utils';
+import { METADATA_NAME } from '../consts';
 
-const MESSAGES = Symbol('ReactIntlMessages');
-
-// eslint-disable-next-line no-unused-vars
-export default function ({ types: t }) {
+export default function () {
   return {
     post(file) {
-      file.metadata['react-intl'] = file[MESSAGES];
+      const messages = fileMessages.get(file);
+
+      if (messages !== undefined) {
+        file.metadata[METADATA_NAME] = messages;
+      }
     },
 
     visitor: {
-      ObjectExpression(path, state) {
+      CallExpression(path, { file }) {
+        const callee = path.get('callee');
+
+        if (callee.referencesImport('react-intl', 'defineMessages')) {
+          path.traverse(messagesObjectVisitor, { file });
+          path.skip();
+        }
+      },
+
+      ObjectExpression(path, { file }) {
         if (isValidMessagesShape(path)) {
-          if (state.file[MESSAGES] !== undefined) {
-            state.file[MESSAGES].push(...getMessages(path));
-          } else {
-            state.file[MESSAGES] = getMessages(path);
-          }
+          path.traverse(messagesObjectVisitor, { file });
         }
       },
     },

src/babel/utils.js

@@ -1,3 +1,16 @@
+import { getActualId } from '../mangler/utils';
+import { SUBSCRIBER_NAME } from '../consts';
+
+export const fileMessages = new WeakMap();
+
+const addMessage = (file, messageId) => {
+  if (fileMessages.has(file)) {
+    fileMessages.get(file).push(messageId);
+  } else {
+    fileMessages.set(file, [messageId]);
+  }
+};
+
 export const isValidMessagesShape = (node) => {
   if (!node.isObjectExpression()) {
     return false;
@@ -17,11 +30,11 @@ export const isValidMessagesShape = (node) => {
         continue;
       }
 
-      if (prop.get('key').node.name === 'defaultMessage') {
+      if (prop.get('key').isIdentifier({ name: 'defaultMessage' })) {
         continue;
       }
 
-      if (prop.get('key').node.name === 'id' && prop.get('value').isStringLiteral() && typeof prop.get('value').node.value === 'string') {
+      if (prop.get('key').isIdentifier({ name: 'id' }) && prop.get('value').isStringLiteral()) {
         continue;
       }
 
@@ -34,18 +47,20 @@ export const isValidMessagesShape = (node) => {
   return true;
 };
 
-export function getMessages(node, messages = []) {
-  for (const prop of node.get('properties')) {
-    if (prop.isObjectExpression()) {
-      getMessages(prop, messages);
-    } else if (prop.isObjectProperty()) {
-      if (prop.isObjectExpression()) {
-        getMessages(prop.get('value'), messages);
-      } else if (prop.get('key').node.name === 'id') {
-        messages.push(String(prop.get('value').node.value));
+export const messagesObjectVisitor = {
+  ObjectProperty(path) {
+    const { mangleMap = null } = global[SUBSCRIBER_NAME] || {};
+
+    if (path.get('key').isIdentifier({ name: 'id' })) {
+      const valueNode = path.get('value').node;
+      const { value } = valueNode;
+      const actualId = getActualId(mangleMap, value);
+
+      if (actualId !== value) {
+        valueNode.value = actualId;
       }
-    }
-  }
 
-  return messages;
-}
+      addMessage(this.file, actualId);
+    }
+  },
+};

src/consts.js

@@ -0,0 +1,2 @@
+export const SUBSCRIBER_NAME = 'metadataReactIntlOptimizer';
+export const METADATA_NAME = 'react-intl-optimizer';

src/mangler/mangler.js

@@ -0,0 +1,23 @@
+import uniqid from 'uniqid';
+
+export class MangleMap extends Map {
+  constructor(whitelist) {
+    super();
+
+    for (const id of whitelist) {
+      this.set(id, id);
+    }
+  }
+
+  get(key) {
+    let id = super.get(key);
+    if (id !== undefined) {
+      return id;
+    }
+
+    id = uniqid.process();
+    this.set(key, id.length >= key ? key : id);
+
+    return id;
+  }
+}

src/mangler/utils.js

@@ -0,0 +1,6 @@
+
+export function getActualId(mangleMap, id) {
+  if (mangleMap === null) return id;
+
+  return mangleMap.get(id);
+}

src/webpack/index.js

@@ -1,43 +1,79 @@
-import { filterMessagesObj } from './utils';
+import { createReplacer, mangleMessagesObj } from './utils';
+import { SUBSCRIBER_NAME, METADATA_NAME } from '../consts';
+import { MangleMap } from '../mangler/mangler';
 
-class ReactIntlPlugin {
-  constructor({ messages, keepUnused = true }) {
+class ReactIntlOptimizer {
+  constructor({
+    messages,
+    optimization = {},
+    output = langKey => `messages/${langKey}.json`,
+  }) {
     this.messages = messages;
-    this.keepUnused = keepUnused;
+    this.optimization = optimization;
+    this.output = output;
   }
 
   static get metadataContextFunctionName() {
-    return 'metadataReactIntlPlugin';
+    return SUBSCRIBER_NAME;
   }
 
   apply(compiler) {
-    const allMessagesIDs = new Set();
-
-    compiler.hooks.compilation.tap('ReactIntlPlugin', (compilation) => {
-      compilation.hooks.normalModuleLoader.tap('ReactIntlPlugin', (context) => {
-        context[ReactIntlPlugin.metadataContextFunctionName] = (metadata) => {
-          if (!this.keepUnused && metadata['react-intl']) {
-            for (const id of metadata['react-intl']) {
-              allMessagesIDs.add(id);
+    const {
+      mangle,
+      unsafeMangling,
+      removeUnused = false,
+      whitelist = [],
+    } = this.optimization;
+
+    const allMessagesIDs = removeUnused
+      ? new Set()
+      : null;
+
+    const mangleMap = mangle
+      ? new MangleMap(whitelist)
+      : null;
+
+    compiler.hooks.beforeRun.tapAsync(ReactIntlOptimizer.name, (compilation, callback) => {
+      // todo: let's try to avoid such exposure...
+      // prepare mangle map aot and just pass it as an option to babel-loader
+      global[ReactIntlOptimizer.metadataContextFunctionName] = {
+        mangleMap,
+      };
+
+      callback();
+    });
+
+    if (removeUnused) {
+      compiler.hooks.compilation.tap(ReactIntlOptimizer.name, (compilation) => {
+        compilation.hooks.normalModuleLoader.tap(ReactIntlOptimizer.name, (context) => {
+          context[ReactIntlOptimizer.metadataContextFunctionName] = (metadata) => {
+            if (metadata[METADATA_NAME] !== undefined) {
+              for (const id of metadata[METADATA_NAME]) {
+                allMessagesIDs.add(id);
+              }
             }
-          }
-        };
+          };
+        });
       });
-    });
+    }
+
+    compiler.hooks.emit.tapAsync(ReactIntlOptimizer.name, (compilation, callback) => {
+      const replacer = createReplacer(
+        whitelist,
+        allMessagesIDs,
+      );
+
+      for (const [langKey, allMessages] of Object.entries(this.messages)) {
+        let messages = allMessages;
 
-    compiler.hooks.emit.tapAsync('ReactIntlPlugin', (compilation, callback) => {
-      allMessagesIDs.delete('');
+        if (mangle) {
+          messages = mangleMessagesObj(messages, mangleMap);
+        }
 
-      for (const [langKey, messages] of Object.entries(this.messages)) {
-        const jsonString = JSON.stringify(
-          this.keepUnused
-            ? messages
-            : filterMessagesObj({ ...messages }, allMessagesIDs),
-        );
+        const jsonString = JSON.stringify(messages, replacer);
 
-        const filename = `messages/${langKey}.json`;
+        const filename = this.output(langKey);
 
-        compilation.fileDependencies.add(filename);
         compilation.assets[filename] = {
           source: () => jsonString,
           size: () => jsonString.length,
@@ -49,4 +85,4 @@ class ReactIntlPlugin {
   }
 }
 
-export default ReactIntlPlugin;
+export default ReactIntlOptimizer;

src/webpack/utils.js

@@ -1,7 +1,18 @@
-export function filterMessagesObj(messages, foundIDs) {
-  for (const key of Object.keys(messages)) {
-    if (!foundIDs.has(key)) {
+export function createReplacer(whitelist, foundIds) {
+  return (key, value) => {
+    if (key === '' || foundIds === null || foundIds.has(key) || whitelist.includes(key)) {
+      return value;
+    }
+
+    return undefined;
+  };
+}
+
+export function mangleMessagesObj(messages, mangleMap) {
+  for (const [key, value] of Object.entries(messages)) {
+    if (mangleMap.has(key)) {
       delete messages[key];
+      messages[mangleMap.get(key)] = value;
     }
   }