fix: upgrade lwc rollup to support compat (#646)

* fix: comapt mode in rollup

* fix: util refactor for better testing

* chore: upgrade best

* perf: change back to prod

packages/lwc-engine/scripts/rollup/rollup.config.es-and-cjs.js

@@ -43,6 +43,8 @@ function rollupConfig(config) {
 
 module.exports = [
     rollupConfig({ format:'es', target:'es2017' }),
+    rollupConfig({ format:'es', target:'es5' }),
+
     rollupConfig({ format:'cjs', target:'es2017' }),
     rollupConfig({ format: 'cjs', target: 'es5' }),
 ];

packages/rollup-plugin-lwc-compiler/package.json

@@ -9,13 +9,13 @@
   },
   "devDependencies": {
     "lwc-compiler": "0.29.1",
-    "lwc-engine": "0.29.1"
+    "lwc-engine": "0.29.1",
+    "rollup-plugin-compat": "0.18.12"
   },
   "dependencies": {
     "es5-proxy-compat": "0.18.12",
     "glob": "^7.1.2",
     "lwc-module-resolver": "0.29.1",
-    "rollup-plugin-compat": "0.18.12",
     "rollup-pluginutils": "^2.0.1"
   },
   "peerDependencies": {

packages/rollup-plugin-lwc-compiler/src/__tests__/index.spec.js

@@ -3,6 +3,7 @@ const path = require('path');
 const rollup = require('rollup');
 const prettier = require('prettier');
 const rollupCompile = require('../index');
+const { getLwcEnginePath } = require('../utils');
 
 function pretty(str) {
     return prettier.format(str);
@@ -63,11 +64,36 @@ describe('rollup in prod_compat mode', () => {
     });
 });
 
+
+describe('rollup compat with engine in es5', () => {
+    const rollupOptions = {
+        allowUnnamespaced: true,
+        mode: 'compat',
+        compat: {
+            polyfills: false,
+        },
+    };
+
+    it(`simple app`, async () => {
+        const lwcPath = getLwcEnginePath(rollupOptions.mode);
+        const input = path.join(simpleAppDir, 'main.js');
+        const bundle = await rollup.rollup({ input, plugins: [rollupCompile(rollupOptions)] });
+        const result = await bundle.generate({
+            format: 'iife',
+            name: 'test'
+        });
+
+        const modules = Object.keys(result.modules);
+        expect(modules).toContain(lwcPath);
+
+    });
+});
+
 const globalModules = { lwc: 'Engine' };
 function doRollup(input, options = {}) {
     return rollup.rollup({
         input,
-        external: (id) => id in globalModules,
+        external: (id) => (id in globalModules),
         plugins: [ rollupCompile(options) ],
         onwarn(warn) {
             if (warn && warn.code !== 'UNRESOLVED_IMPORT') {

packages/rollup-plugin-lwc-compiler/src/constants.js

@@ -1,6 +1,5 @@
-/* eslint-env node */
 
-const DEFAULT_NS = 'x';
+const LWC_ENGINE = 'lwc';
 const DEFAULT_MODE = 'dev';
 const DEFAULT_OPTIONS = {
     mode: DEFAULT_MODE,
@@ -9,7 +8,7 @@ const DEFAULT_OPTIONS = {
 };
 
 module.exports = {
-    DEFAULT_NS,
     DEFAULT_OPTIONS,
-    DEFAULT_MODE
+    DEFAULT_MODE,
+    LWC_ENGINE
 };

packages/rollup-plugin-lwc-compiler/src/index.js

@@ -6,30 +6,16 @@ const compiler = require("lwc-compiler");
 const pluginUtils = require("rollup-pluginutils");
 const replacePlugin = require("rollup-plugin-replace");
 const lwcResolver = require("lwc-module-resolver");
-const rollupCompatPlugin = require("rollup-plugin-compat").default;
+const {
+    getModuleQualifiedName,
+    normalizeResult,
+    getLwcEnginePath,
+    resolveRollupCompat
+} = require('./utils');
 
+const { LWC_ENGINE, DEFAULT_OPTIONS, DEFAULT_MODE } = require("./constants");
 
-const { DEFAULT_NS, DEFAULT_OPTIONS, DEFAULT_MODE } = require("./constants");
 
-function getModuleQualifiedName(file) {
-    const registry = {
-        entry: file,
-        moduleSpecifier: null,
-        moduleName: null,
-        moduleNamespace: DEFAULT_NS
-    };
-
-    const rootParts = path.dirname(file).split(path.sep);
-
-    registry.moduleName = rootParts.pop();
-    registry.moduleNamespace = rootParts.pop();
-
-    return registry;
-}
-
-function normalizeResult(result) {
-    return { code: result.code || result, map: result.map || { mappings: "" } };
-}
 
 /*
     API for rollup-compat plugin:
@@ -44,11 +30,9 @@ function normalizeResult(result) {
 module.exports = function rollupLwcCompiler(pluginOptions = {}) {
     const { include, exclude } = pluginOptions;
     const filter = pluginUtils.createFilter(include, exclude);
-    const mergedPluginOptions = Object.assign({}, DEFAULT_OPTIONS, pluginOptions,);
-    const { mode, compat } = mergedPluginOptions;
-
-    // We will compose compat plugin on top of this one
-    const rollupCompatInstance = rollupCompatPlugin(compat);
+    const mergedPluginOptions = Object.assign({}, DEFAULT_OPTIONS, pluginOptions);
+    const { mode } = mergedPluginOptions;
+    const rollupCompat = resolveRollupCompat(mergedPluginOptions);
 
     // Closure to store the resolved modules
     let modulePaths = {};
@@ -70,6 +54,11 @@ module.exports = function rollupLwcCompiler(pluginOptions = {}) {
         },
 
         resolveId(importee, importer) {
+            // lwc is special
+            if (importee === LWC_ENGINE) {
+                return getLwcEnginePath(mode);
+            }
+
             // Resolve entry point if the import references a LWC module
             if (modulePaths[importee]) {
                 return modulePaths[importee].entry;
@@ -85,7 +74,7 @@ module.exports = function rollupLwcCompiler(pluginOptions = {}) {
             }
 
             // Check if compat needs to resolve this file
-            return rollupCompatInstance.resolveId(importee, importer);
+            return rollupCompat.resolveId(importee, importer);
         },
 
         load(id) {
@@ -97,11 +86,12 @@ module.exports = function rollupLwcCompiler(pluginOptions = {}) {
             }
 
             // Check if compat knows how to load this file
-            return rollupCompatInstance.load(id);
+            return rollupCompat.load(id);
         },
 
         async transform(code, id) {
-            if (!filter(id)) {
+            // Filter user-land config and lwc import
+            if (!filter(id) || id === getLwcEnginePath(mode)) {
                 return;
             }
 
@@ -111,7 +101,7 @@ module.exports = function rollupLwcCompiler(pluginOptions = {}) {
 
             let result = code;
 
-            if (!rollupCompatInstance.knownCompatModule(id)) {
+            if (!rollupCompat.knownCompatModule(id)) {
                 result = await compiler.transform(code, id, {
                     mode: DEFAULT_MODE, // Use always default mode since any other (prod or compat) will be resolved later
                     name: moduleRegistry.moduleName,
@@ -124,7 +114,7 @@ module.exports = function rollupLwcCompiler(pluginOptions = {}) {
 
             if (mode === "compat" || mode === "prod_compat") {
                 result = normalizeResult(
-                    rollupCompatInstance.transform(result.code, id)
+                    rollupCompat.transform(result.code, id)
                 );
             }
 
@@ -133,9 +123,10 @@ module.exports = function rollupLwcCompiler(pluginOptions = {}) {
 
         transformBundle(code) {
             if (mode === "compat" || mode === "prod_compat") {
-                code = rollupCompatInstance.transformBundle(code);
+                code = rollupCompat.transformBundle(code);
             }
-            let result = undefined;
+
+            let result;
             if (mode === "prod" || mode === "prod_compat") {
                 const rollupReplace = replacePlugin({
                     "process.env.NODE_ENV": JSON.stringify("production")

packages/rollup-plugin-lwc-compiler/src/utils.js

@@ -0,0 +1,61 @@
+const path = require('path');
+
+function getModuleQualifiedName(file) {
+    const registry = {
+        entry: file,
+        moduleSpecifier: null,
+        moduleName: null,
+        moduleNamespace: null
+    };
+
+    const rootParts = path.dirname(file).split(path.sep);
+
+    registry.moduleName = rootParts.pop();
+    registry.moduleNamespace = rootParts.pop();
+
+    return registry;
+}
+
+function normalizeResult(result) {
+    return { code: result.code || result, map: result.map || { mappings: "" } };
+}
+
+function getLwcEnginePath(mode) {
+    const path = require.resolve('lwc-engine');
+    const moduleTypeFolder = 'modules';
+    const target = mode.includes('compat') ? 'es5' : 'es2017';
+
+    return path
+        .replace('commonjs', moduleTypeFolder)
+        .replace('es2017', target);
+}
+
+function resolveRollupCompat({ mode, compat }) {
+    if (mode === 'compat' || mode === 'prod_compat') {
+        try {
+            // We will compose compat plugin on top of this one (delegated)
+            return require("rollup-plugin-compat").default(compat);
+        } catch (e) {
+            throw new Error(
+                `Unable to compile resources for mode ${mode}` +
+                `In order to use "compat" mode, you must include 'rollup-plugin-compat' as part of your dependencies`
+            );
+        }
+    }
+    // If we are not in compat, rollup becomes a noop
+    // This just simplifies the logic bellow
+    return {
+        resolveId() { return undefined; },
+        load() { return undefined; },
+        knownCompatModule() { return false; },
+        transform(src) { return src; },
+        transformBundle(src) { return src; }
+    };
+}
+
+module.exports = {
+    getModuleQualifiedName,
+    normalizeResult,
+    getLwcEnginePath,
+    resolveRollupCompat
+};