PDCL-10688 - Support custom builds using the npm package #1087
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| /* | ||
| Copyright 2023 Adobe. All rights reserved. | ||
| This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. You may obtain a copy | ||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| Unless required by applicable law or agreed to in writing, software distributed under | ||
| the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| OF ANY KIND, either express or implied. See the License for the specific language | ||
| governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| module.exports = excludedModules => { | ||
| return { | ||
| visitor: { | ||
| ImportDeclaration(path) { | ||
| let skipWhenComments = []; | ||
| if (path.node.leadingComments) { | ||
| skipWhenComments = path.node.leadingComments.filter(c => { | ||
| return c.value.trim().startsWith("@skipwhen"); | ||
| }); | ||
| } | ||
|
|
||
| if (skipWhenComments.length > 0) { | ||
| const [, webSDKModuleName, value] = skipWhenComments[0].value.match( | ||
| "ENV.(.*) === (false|true)" | ||
| ); | ||
|
|
||
| if (excludedModules[webSDKModuleName] === value) { | ||
| const variableName = path.node.specifiers[0].local.name; | ||
|
|
||
| // Wrap the variable declaration in an IIFE to turn it into an expression | ||
| path.replaceWithSourceString( | ||
| `(() => { const ${variableName} = () => {}; })()` | ||
| ); | ||
| } | ||
| } | ||
| }, | ||
| ExportDefaultDeclaration(path) { | ||
| if (path.node.declaration.type === "ArrayExpression") { | ||
| path.node.declaration.elements = path.node.declaration.elements.filter( | ||
| element => { | ||
| if (element.name) { | ||
| const variableName = element.name; | ||
| const componentName = variableName | ||
| .replace("create", "") | ||
| .toLowerCase(); | ||
| return !Object.keys(excludedModules).includes( | ||
| `alloy_${componentName}` | ||
| ); | ||
| } | ||
| return true; | ||
| } | ||
| ); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| /* | ||
| Copyright 2023 Adobe. All rights reserved. | ||
| This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. You may obtain a copy | ||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| Unless required by applicable law or agreed to in writing, software distributed under | ||
| the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| OF ANY KIND, either express or implied. See the License for the specific language | ||
| governing permissions and limitations under the License. | ||
| */ | ||
| const fs = require("fs"); | ||
| const path = require("path"); | ||
| const { rollup } = require("rollup"); | ||
| const nodeResolve = require("@rollup/plugin-node-resolve").default; | ||
| const commonjs = require("@rollup/plugin-commonjs"); | ||
| const babel = require("@rollup/plugin-babel").default; | ||
| const terser = require("rollup-plugin-terser").terser; | ||
| const yargs = require("yargs/yargs"); | ||
| const { hideBin } = require("yargs/helpers"); | ||
| const conditionalBuildBabelPlugin = require("./conditionalBuildBabelPlugin"); | ||
|
|
||
| // Path to componentCreators.js | ||
| const componentCreatorsPath = path.join( | ||
| __dirname, | ||
| "../../src/core/componentCreators.js" | ||
| ); | ||
|
|
||
| // Read componentCreators.js | ||
| const componentCreatorsContent = fs.readFileSync(componentCreatorsPath, "utf8"); | ||
|
|
||
| // Extract optional components based on @skipwhen directive | ||
| const optionalComponents = componentCreatorsContent | ||
| .split("\n") | ||
| .filter(line => line.trim().startsWith("/* @skipwhen")) | ||
| .map(line => { | ||
| const match = line.match(/ENV\.alloy_([a-zA-Z0-9]+) === false/); | ||
| if (match) { | ||
| const [, componentName] = match; | ||
| return componentName.toLowerCase(); // Ensure this matches the expected format for exclusion | ||
| } | ||
| return null; | ||
| }) | ||
| .filter(Boolean); | ||
|
|
||
| console.log("Optional Components:", optionalComponents); // Debugging line | ||
|
|
||
| const argv = yargs(hideBin(process.argv)) | ||
| .scriptName("build:custom") | ||
| .usage(`$0 --exclude ${optionalComponents.join(" ")}`) | ||
| .option("exclude", { | ||
| describe: "the components that you want to be excluded from the build", | ||
| choices: optionalComponents, | ||
| type: "array" | ||
| }) | ||
| .array("exclude") | ||
| .check(() => { | ||
| // No need to check for required components as we're using @skipwhen to determine optionality | ||
| return true; | ||
| }).argv; | ||
|
|
||
| if (!argv.exclude) { | ||
| console.log( | ||
| `No components excluded. To exclude components, try running "npm run build:custom -- --exclude personalization". Your choices are: ${optionalComponents.join( | ||
| ", " | ||
| )}` | ||
| ); | ||
| process.exit(0); | ||
| } | ||
|
|
||
| const buildConfig = (minify, sandbox) => { | ||
| const plugins = [ | ||
| nodeResolve({ | ||
| preferBuiltins: false, | ||
| mainFields: ["component", "main", "browser"] | ||
| }), | ||
| commonjs(), | ||
| babel({ | ||
| plugins: [ | ||
| conditionalBuildBabelPlugin( | ||
| (argv.exclude || []).reduce((previousValue, currentValue) => { | ||
| previousValue[`alloy_${currentValue}`] = "false"; | ||
| return previousValue; | ||
| }, {}) | ||
| ) | ||
| ] | ||
| }) | ||
| ]; | ||
| if (minify) { | ||
| plugins.push(terser()); | ||
| } | ||
| let filename = `dist/alloy${minify ? ".min" : ""}.js`; | ||
| if (sandbox) { | ||
| filename = `sandbox/public/alloy${minify ? ".min" : ""}.js`; | ||
| } | ||
| return { | ||
| input: "src/standalone.js", | ||
| output: [ | ||
| { | ||
| file: filename, | ||
| 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" + | ||
| " return;\n" + | ||
| "}\n", | ||
| sourcemap: false | ||
| } | ||
| ], | ||
| plugins | ||
| }; | ||
| }; | ||
|
|
||
| const getFileSizeInKB = filePath => { | ||
| const stats = fs.statSync(filePath); | ||
| const fileSizeInBytes = stats.size; | ||
| return (fileSizeInBytes / 1024).toFixed(2); | ||
| }; | ||
|
|
||
| const buildWithComponents = async sandbox => { | ||
| const prodBuild = buildConfig(false, sandbox); | ||
| const minifiedBuild = buildConfig(true, sandbox); | ||
|
|
||
| const bundleProd = await rollup(prodBuild); | ||
| console.log("✔️ Built alloy.js"); | ||
| await bundleProd.write(prodBuild.output[0]); | ||
| console.log(`✔️ Wrote alloy.js to ${prodBuild.output[0].file}`); | ||
| console.log(`📏 Size: ${getFileSizeInKB(prodBuild.output[0].file)} KB`); | ||
|
|
||
| const bundleMinified = await rollup(minifiedBuild); | ||
|
|
||
| console.log("✔️ Built alloy.min.js"); | ||
| await bundleMinified.write(minifiedBuild.output[0]); | ||
| console.log(`✔️ Wrote alloy.min.js to ${minifiedBuild.output[0].file}`); | ||
| console.log(`📏 Size: ${getFileSizeInKB(minifiedBuild.output[0].file)} KB`); | ||
| }; | ||
|
|
||
| buildWithComponents(!!process.env.SANDBOX); | ||
|
There was a problem hiding this comment. I can see some customers wanting an allow-list instead of an exclude-list. |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| #!/usr/bin/env node | ||
|
|
||
| const fs = require("fs"); | ||
| const glob = require("glob"); | ||
| const createTestCafe = require("testcafe"); | ||
|
|
||
| fs.readFile("dist/alloy.js", "utf8", (readFileErr, alloyData) => { | ||
| if (readFileErr) { | ||
| console.error(`readFile error: ${readFileErr}`); | ||
| return; | ||
| } | ||
|
|
||
| // Extract componentCreators array from alloyData | ||
| const componentCreatorsMatch = alloyData.match( | ||
| /var componentCreators = \[(.*?)\];/s | ||
| ); | ||
| if (!componentCreatorsMatch) { | ||
| console.error("componentCreators array not found in dist/alloy.js"); | ||
| return; | ||
| } | ||
| const componentCreators = componentCreatorsMatch[1] | ||
| .split(",") | ||
| .map(name => name.trim().replace("create", "")); | ||
|
|
||
| // Convert component creator function names to component names | ||
| const componentNames = componentCreators.map( | ||
| creator => creator.charAt(0).toLowerCase() + creator.slice(1) // Ensure first letter is lowercase to match directory names | ||
| ); | ||
|
|
||
| // Define a mapping from component names to their test directory names | ||
| const componentNameToTestDirMapping = { | ||
| dataCollector: "Data Collector", | ||
| activityCollector: "Activity Collector", | ||
| identity: "Identity", | ||
| audiences: "Audiences", | ||
| context: "Context", | ||
| privacy: "Privacy", | ||
| eventMerge: "EventMerge", | ||
| libraryInfo: "LibraryInfo", | ||
| machineLearning: "MachineLearning", | ||
| decisioningEngine: "DecisioningEngine" | ||
| }; | ||
|
|
||
| // Adjust componentNames using the mapping | ||
| const adjustedComponentNames = componentNames.map( | ||
| name => componentNameToTestDirMapping[name] || name | ||
| ); | ||
|
|
||
| // Generate a glob pattern to match only the included components' test specs | ||
| const includedComponentsPattern = adjustedComponentNames.join("|"); | ||
| const testSpecsGlobPattern = `test/functional/specs/@(${includedComponentsPattern})/**/*.js`; | ||
|
|
||
| glob(testSpecsGlobPattern, (globErr, files) => { | ||
| if (globErr) { | ||
| console.error(globErr); | ||
| process.exit(1); | ||
| } | ||
|
|
||
| if (files.length === 0) { | ||
| console.log("No test files found for the included components."); | ||
| return; | ||
| } | ||
|
|
||
| createTestCafe().then(testcafe => { | ||
| const runner = testcafe.createRunner(); | ||
| runner | ||
| .src(files) | ||
| .browsers("chrome") | ||
| .run() | ||
| .then(failedCount => { | ||
| console.log(`Tests finished. Failed count: ${failedCount}`); | ||
| testcafe.close(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One of the goals of this project is to get Adobe Tags to support this build method. To that end whatever thing we make could be used by other Tags extension developers. There is a lot of specific logic inside of the conditionalBuildBabelPlugin code that only applies to our specific use-case. For example, when I see a directive named @skipwhen it makes me think I could put this in front of anything; however, from this code it looks like you could only use it in front of an import and also if you are using the variable in an array.
I did a bit of research about conditionally building things in javascript. One of the established patterns within javascript libraries is to use an if statement that references process.env. This is especially used when referencing process.env.NODE_ENV. i.e.
I put together a sample to see if this would work with Rollup. I've also noticed that a lot of rollup systems have plugins or ways to accomplish this. https://github.com/jonsnyder/conditional-compilation-sample
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point @jonsnyder!
@shammowla Please check out Jon's sample and maybe let's schedule a work session to make this PR more reusable.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe that the Babel plugin was from @dompuiu, so it may have something to do with how he envisions Launch support will happen i.e. furance/forge will run Babel but not rollup.