Get ready to publish Alloy as an NPM repo

.babelrc

@@ -3,7 +3,6 @@
     [
       "@babel/preset-env",
       {
-        "modules": false,
         "targets": {
           "browsers": [
             "last 2 Chrome versions",
@@ -20,5 +19,29 @@
       "loose": true
     }],
     "version"
-  ]
+  ],
+  "env": {
+    "rollup": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": false
+          }
+        ]
+      ]
+    },
+    "npm": {
+      "ignore": [
+        "src/baseCode.js",
+        "src/standalone.js"
+      ],
+      "plugins": [
+        ["@babel/plugin-transform-modules-commonjs", {
+          "strict": true,
+          "noInterop": true
+        }]
+      ]
+    }
+  }
 }

README.md

@@ -2,8 +2,8 @@
 
 # Alloy
 
-Alloy is the code name for the Adobe Experience Platform Web SDK. It allows for streaming data into the platform, syncing identities, personalizing content, and more.
+Alloy is the code name for the Adobe Experience Platform Web SDK. It allows for recording events into Adobe Experience Platform, syncing identities, personalizing content, and more.
 
 For documentation on how to use Alloy, please see the [user documentation](https://adobe.ly/36dGGp6).
 
-For documentation on how to contribute to Alloy, please see the [developer documentation](https://github.com/adobe/alloy/wiki).
+For documentation on how to contribute to Alloy, please see the [developer documentation](https://github.com/adobe/alloy/wiki).

coverageignore.js

@@ -14,4 +14,10 @@ governing permissions and limitations under the License.
  * Patterns of source files (files within the src directory) that should be
  * ignored for test coverage checks and reporting.
  */
-module.exports = ["**/.*", "**/constants/**", "**/index.js"];
+module.exports = [
+  "**/.*",
+  "**/constants/**",
+  "**/index.js",
+  "baseCode.js",
+  "standalone.js"
+];

package.json

@@ -1,8 +1,13 @@
 {
   "name": "@adobe/alloy",
   "version": "2.3.0",
-  "description": "Client-Side SDK for Unified Data Collection",
-  "main": "src/core/index.js",
+  "description": "Adobe Experience Platform Web SDK",
+  "main": "dist/es5/index.js",
+  "module": "dist/es6/index.js",
+  "files": [
+    "dist/es5",
+    "dist/es6"
+  ],
   "scripts": {
     "install": "cd sandbox && npm install",
     "clean": "rimraf dist",
@@ -14,15 +19,16 @@
     "test:unit:browserstack:local": "karma start karma.browserstack.conf.js",
     "test:unit:browserstack:ci": "karma start karma.browserstack.conf.js --browsers bs_chrome_windows,bs_safari_macos,bs_firefox_windows,bs_ie_windows --single-run --reporters spec,BrowserStack",
     "test:unit:coverage": "karma start --single-run --reporters spec,coverage",
-    "test:functional": "rollup -c --environment BUILD:prodStandalone && EDGE_BASE_PATH=\"ee-pre-prd\" ALLOY_ENV=\"int\" testcafe chrome",
-    "test:functional:watch": "EDGE_BASE_PATH=\"ee-pre-prd\" ALLOY_ENV=\"int\" BUILD=\"prodStandalone\" ./scripts/watchFunctionalTests.js",
+    "test:functional": "rollup -c --environment BASE_CODE,NPM_LIBRARY_LOCAL && EDGE_BASE_PATH=\"ee-pre-prd\" ALLOY_ENV=\"int\" testcafe chrome",
+    "test:functional:watch": "EDGE_BASE_PATH=\"ee-pre-prd\" ALLOY_ENV=\"int\" ./scripts/watchFunctionalTests.js",
     "test:functional:ci:chrome": "EDGE_BASE_PATH=\"ee-pre-prd\" ALLOY_ENV=\"int\" testcafe 'browserstack:chrome@87:Windows 10'",
     "test:functional:ci:ie": "EDGE_BASE_PATH=\"ee-pre-prd\" ALLOY_ENV=\"int\" testcafe 'browserstack:ie@11:Windows 10'",
     "test:functional:cron:prod": "ALLOY_ENV=\"prod\" testcafe 'browserstack:chrome@87:OS X'",
     "test:functional:api": "testcafe chrome:headless",
     "sandbox:build": "cd sandbox && npm run build",
-    "dev": "concurrently --names build,sandbox \"rollup -c -w\" \"cd sandbox && export REACT_APP_NONCE=321 && npm start\"",
-    "build": "npm run format && npm run lint && npm run clean && concurrently \"rollup -c --environment BUILD:prodStandalone\" \"rollup -c --environment MINIFY,BUILD:prodStandalone\" \"rollup -c --environment BUILD:prodReactor\" && echo \"Base Code:\" && terser src/baseCode/index.js --mangle --compress unused=false",
+    "dev": "concurrently --names build,sandbox \"rollup -c -w --environment SANDBOX\" \"cd sandbox && export REACT_APP_NONCE=321 && npm start\"",
+    "build": "npm run format && npm run lint && npm run clean && concurrently \"rollup -c --environment BASE_CODE,NPM_LIBRARY_PROD,NPM_LIBRARY_LOCAL\" \"rollup -c --environment MINIFY,BASE_CODE\" && echo \"Base Code:\" && cat dist/baseCode.min.js",
+    "prepublish": "rimraf dist && babel src --out-dir dist/es5 --env-name npm && babel src --out-dir dist/es6 --ignore src/baseCode.js,src/standalone.js --no-babelrc --plugins version",
     "checkthattestfilesexist": "./scripts/checkThatTestFilesExist.js"
   },
   "husky": {
@@ -56,7 +62,7 @@
   "license": "Apache-2.0",
   "bundlesize": [
     {
-      "path": "./dist/standalone/alloy.min.js"
+      "path": "./dist/alloy.min.js"
     }
   ],
   "dependencies": {
@@ -68,6 +74,8 @@
     "uuid": "^3.3.2"
   },
   "devDependencies": {
+    "@adobe/alloy": "file:./",
+    "@babel/cli": "^7.12.8",
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/plugin-transform-template-literals": "^7.4.4",
@@ -102,12 +110,12 @@
     "read-cache": "^1.0.0",
     "recursive-readdir": "^2.2.2",
     "request": "^2.88.0",
+    "rimraf": "^3.0.2",
     "rollup": "^2.29.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-glob-import": "^0.4.5",
     "rollup-plugin-istanbul": "^2.0.1",
-    "rollup-plugin-jscc": "^2.0.0",
     "rollup-plugin-license": "^2.2.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",

rollup.config.js

@@ -11,110 +11,134 @@ governing permissions and limitations under the License.
 */
 
 import path from "path";
-import jscc from "rollup-plugin-jscc";
 import resolve from "rollup-plugin-node-resolve";
 import commonjs from "rollup-plugin-commonjs";
 import babel from "rollup-plugin-babel";
 import { terser } from "rollup-plugin-terser";
 import license from "rollup-plugin-license";
 
-const buildTargets = {
-  PROD_STANDALONE: "prodStandalone",
-  PROD_REACTOR: "prodReactor",
-  DEV: "dev"
-};
-
-const destDirectoryByBuildTarget = {
-  [buildTargets.PROD_STANDALONE]: "dist/standalone/",
-  [buildTargets.PROD_REACTOR]: "dist/reactor/",
-  [buildTargets.DEV]: "sandbox/public/"
-};
-
-const buildTarget = process.env.BUILD || buildTargets.DEV;
+// Boolean Environment Options:
+// Should the output files be minified?
 const minify = process.env.MINIFY;
-const destDirectory = destDirectoryByBuildTarget[buildTarget];
+// If true, output files to sandbox, if false output files to dist/
+const sandbox = process.env.SANDBOX;
+// Build the base code file?
+const baseCode = process.env.BASE_CODE;
+// Build the npm library local rollup file? (This is used to test the npm version in functional tests)
+const npmLibraryLocal = process.env.NPM_LIBRARY_LOCAL;
+// Build the npm library rollup based on the production npm library?
+const npmLibraryProd = process.env.NPM_LIBRARY_PROD;
+
+const destDirectory = sandbox ? "sandbox/public" : "dist/";
 
 const minifiedExtension = minify ? ".min" : "";
 
-const plugins = [
-  jscc({
-    values: {
-      _DEV: buildTarget === buildTargets.DEV,
-      _REACTOR: buildTarget === buildTargets.PROD_REACTOR
-    }
-  }),
-  resolve({
-    preferBuiltins: false,
-    // Support the browser field in dependencies' package.json.
-    // Useful for the uuid package.
-    mainFields: ["module", "main", "browser"]
-  }),
-  commonjs(),
-  babel()
-];
-
-if (minify) {
-  plugins.push(terser());
-}
+const BASE_CODE = "baseCode";
+const STANDALONE = "standalone";
+const NPM_LIBRARY_LOCAL = "npmLibraryLocal";
+const NPM_LIBRARY_PROD = "npmLibraryProd";
+
+const buildPlugins = version => {
+  const plugins = [
+    resolve({
+      preferBuiltins: false,
+      // Support the browser field in dependencies' package.json.
+      // Useful for the uuid package.
+      mainFields: ["module", "main", "browser"]
+    }),
+    commonjs(),
+    babel({ envName: "rollup" })
+  ];
+
+  if (minify && version === BASE_CODE) {
+    plugins.push(
+      terser({
+        mangle: true,
+        compress: {
+          unused: true
+        },
+        output: {
+          wrap_func_args: false
+        },
+        toplevel: true
+      })
+    );
+  }
+  if (minify && version !== BASE_CODE) {
+    plugins.push(terser());
+  }
 
-if (buildTarget !== buildTargets.DEV) {
-  plugins.push(
-    license({
-      banner: {
-        content: {
-          file: path.join(__dirname, "LICENSE_BANNER")
+  if (!sandbox && version === STANDALONE) {
+    plugins.push(
+      license({
+        banner: {
+          content: {
+            file: path.join(__dirname, "LICENSE_BANNER")
+          }
         }
+      })
+    );
+  }
+
+  return plugins;
+};
+
+const config = [];
+
+if (baseCode) {
+  config.push({
+    input: "src/baseCode.js",
+    output: [
+      {
+        file: `${destDirectory}baseCode${minifiedExtension}.js`,
+        format: "cjs",
+        strict: false
       }
-    })
-  );
+    ],
+    plugins: buildPlugins(BASE_CODE)
+  });
 }
 
-const config = {
-  input: "src/core/index.js",
+config.push({
+  input: "src/standalone.js",
   output: [
     {
       file: `${destDirectory}alloy${minifiedExtension}.js`,
-      // For the Reactor-specific build, we need to use the CommonJS format
-      // for output instead of IIFE, otherwise Rollup doesn't know whether the
-      // "external" modules (as defined elsewhere in this configuration) are
-      // coming from global variables or from another CommonJS bundler, so
-      // it adds a bunch of cruft to accommodate and logs build warnings.
-      // Because we have to use the CommonJS format for the Reactor-specific
-      // build, we can't just use an "intro" that looks like:
-      // if (IE less than version 11) {
-      //   console.warn("unsupported browser");
-      //   return;
-      // }
-      // because you can't "return" from a CommonJS module. Therefore, we have
-      // to do an if-else for an "intro" and "outro".
-      // If we do an if-else, we're not compliant with strict mode, because
-      // babel inserts its function declarations directly inside our if-else.
-      // Because function declarations are not allowed directly within an
-      // if-else in strict mode, we need to wrap babel's
-      // function declarations (and our own code) inside an IIFE.
-      // So, what we end up with is output using "format: cjs" but with an
-      // appropriate intro and outro that provides browser checking and an
-      // IIFE. This works for both Reactor-specific and standalone use cases.
-      format: "cjs",
-      // Allow non-IE browsers and IE11
-      // document.documentMode was added in IE8, and is specific to IE.
-      // IE7 and lower are not ES5 compatible so will get a parse error loading
-      // the library.
+      format: "iife",
       intro:
         "if (document.documentMode && document.documentMode < 11) {\n" +
         "  console.warn('The Adobe Experience Cloud Web SDK does not support IE 10 and below.');\n" +
-        "} else {\n" +
-        "  (function() {",
-      outro: "  })();\n}"
+        "  return;\n" +
+        "}\n"
     }
   ],
-  plugins
-};
+  plugins: buildPlugins(STANDALONE)
+});
 
-// If we're building for Reactor, we'll use Reactor's core modules
-// (named @adobe/reactor-*) instead of including the packages directly.
-if (buildTarget === buildTargets.PROD_REACTOR) {
-  config.external = name => /^@adobe\/reactor-/.test(name);
+if (npmLibraryLocal) {
+  config.push({
+    input: "test/functional/helpers/npmLibraryLocal.js",
+    output: [
+      {
+        file: `${destDirectory}npmLibraryLocal${minifiedExtension}.js`,
+        format: "iife"
+      }
+    ],
+    plugins: buildPlugins(NPM_LIBRARY_LOCAL)
+  });
+}
+
+if (npmLibraryProd) {
+  config.push({
+    input: "test/functional/helpers/npmLibraryProd.js",
+    output: [
+      {
+        file: `${destDirectory}npmLibraryProd${minifiedExtension}.js`,
+        format: "iife"
+      }
+    ],
+    plugins: buildPlugins(NPM_LIBRARY_PROD)
+  });
 }
 
 export default config;

rollup.test.config.js

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 const path = require("path");
-const jscc = require("rollup-plugin-jscc");
 const resolve = require("rollup-plugin-node-resolve");
 const globImport = require("rollup-plugin-glob-import");
 const commonjs = require("rollup-plugin-commonjs");
@@ -23,19 +22,14 @@ const ignorePatterns = require("./coverageignore");
 const argv = minimist(process.argv.slice(2));
 const plugins = [
   globImport(),
-  jscc({
-    values: {
-      _REACTOR: true
-    }
-  }),
   resolve({
     preferBuiltins: false,
     // Support the browser field in dependencies' package.json.
     // Useful for the uuid package.
     mainFields: ["module", "main", "browser"]
   }),
   commonjs(),
-  babel()
+  babel({ envName: "rollup" })
 ];
 
 if (argv.reporters && argv.reporters.split(",").includes("coverage")) {

scripts/watchFunctionalTests.js

@@ -55,7 +55,8 @@ const effectByEventCode = {
 
 (async () => {
   const { options, warnings } = await loadConfigFile(
-    path.join(__dirname, "../rollup.config.js")
+    path.join(__dirname, "../rollup.config.js"),
+    { environment: "BASE_CODE,NPM_LIBRARY_LOCAL" }
   );
 
   warnings.flush();