From ce8d7c8fa78db449c9ec1ff34875fb1aed725420 Mon Sep 17 00:00:00 2001 From: mmitiche <86681870+mmitiche@users.noreply.github.com> Date: Mon, 11 Nov 2024 15:47:56 -0500 Subject: [PATCH 1/2] fix(quantic): babel async await plugin setup added to fix quantic issue with firefox (#4620) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## [SFINT-5784](https://coveord.atlassian.net/browse/SFINT-5784) continuation of @erocheleau 's work: https://github.com/coveo/ui-kit/pull/4363 As @erocheleau added in his PR: Salesforce LWS has a problem with static resources files using async/await on Firefox, before this PR the search interface indefinitely loads in Firefox when LWS is enabled. This PR adds a script to use Babel to transform the headless.js files we use to transform async to promises. Add babel to quantic Use babel plugin @babel/plugin-transform-async-to-generator to transform built headless.js to transform async to promise. Added this step prior to running the copy-static-resource in the nx build script. - Made sure this is still working correctly with Quantic and Headless v3. - Confirmed that the size of the Headless bundle after applying the babel async await plugin is not significantly bigger. - Confirmed that the search interface loads properly in Firefox. ### Before: https://github.com/user-attachments/assets/e6471fd9-d219-42ca-be93-05d2972e7937 ### After: https://github.com/user-attachments/assets/f5c880b0-c164-473d-88ad-3de62efd0bee ### Headless Size Before: Screenshot 2024-11-05 at 3 29 43 PM ### Headless Size After: Screenshot 2024-11-05 at 3 29 59 PM [SFINT-5784]: https://coveord.atlassian.net/browse/SFINT-5784?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --- package-lock.json | 226 ++++++++++++++++++++++ packages/quantic/babel.config.json | 3 + packages/quantic/copy-static-resources.js | 11 +- packages/quantic/package.json | 7 +- packages/quantic/project.json | 5 +- 5 files changed, 245 insertions(+), 7 deletions(-) create mode 100644 packages/quantic/babel.config.json diff --git a/package-lock.json b/package-lock.json index e03750373b7..0eefa2d3f00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2021,6 +2021,127 @@ "playwright-core": ">= 1.0.0" } }, + "node_modules/@babel/cli": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.25.6.tgz", + "integrity": "sha512-Z+Doemr4VtvSD2SNHTrkiFZ1LX+JI6tyRXAAOb4N9khIuPyoEPmTPJarPm8ljJV1D6bnMQjyHMWTT9NeKbQuXA==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.25", + "commander": "^6.2.0", + "convert-source-map": "^2.0.0", + "fs-readdir-recursive": "^1.1.0", + "glob": "^7.2.0", + "make-dir": "^2.1.0", + "slash": "^2.0.0" + }, + "bin": { + "babel": "bin/babel.js", + "babel-external-helpers": "bin/babel-external-helpers.js" + }, + "engines": { + "node": ">=6.9.0" + }, + "optionalDependencies": { + "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3", + "chokidar": "^3.6.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/cli/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/@babel/cli/node_modules/commander": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", + "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/@babel/cli/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@babel/cli/node_modules/make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@babel/cli/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@babel/cli/node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@babel/cli/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/@babel/cli/node_modules/slash": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", + "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@babel/code-frame": { "version": "7.25.9", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.9.tgz", @@ -7713,6 +7834,13 @@ "webpack": "^5.54.0" } }, + "node_modules/@nicolo-ribaudo/chokidar-2": { + "version": "2.1.8-no-fsevents.3", + "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", + "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==", + "dev": true, + "optional": true + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -32373,6 +32501,12 @@ "integrity": "sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==", "dev": true }, + "node_modules/fs-readdir-recursive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", + "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", + "dev": true + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -58836,6 +58970,8 @@ "marked": "12.0.2" }, "devDependencies": { + "@babel/cli": "7.25.6", + "@babel/plugin-transform-async-to-generator": "7.24.7", "@ckeditor/jsdoc-plugins": "39.9.1", "@coveo/relay-event-types": "12.0.1", "@coveo/release": "1.0.0", @@ -58971,6 +59107,18 @@ "node": ">=6.9.0" } }, + "packages/quantic/node_modules/@babel/helper-annotate-as-pure": { + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz", + "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==", + "dev": true, + "dependencies": { + "@babel/types": "^7.25.9" + }, + "engines": { + "node": ">=6.9.0" + } + }, "packages/quantic/node_modules/@babel/helper-compilation-targets": { "version": "7.24.8", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.8.tgz", @@ -59027,6 +59175,23 @@ "node": ">=6.9.0" } }, + "packages/quantic/node_modules/@babel/helper-remap-async-to-generator": { + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz", + "integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.25.9", + "@babel/helper-wrap-function": "^7.25.9", + "@babel/traverse": "^7.25.9" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "packages/quantic/node_modules/@babel/helper-simple-access": { "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz", @@ -59049,6 +59214,20 @@ "node": ">=6.9.0" } }, + "packages/quantic/node_modules/@babel/helper-wrap-function": { + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz", + "integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==", + "dev": true, + "dependencies": { + "@babel/template": "^7.25.9", + "@babel/traverse": "^7.25.9", + "@babel/types": "^7.25.9" + }, + "engines": { + "node": ">=6.9.0" + } + }, "packages/quantic/node_modules/@babel/helpers": { "version": "7.25.0", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz", @@ -59062,6 +59241,36 @@ "node": ">=6.9.0" } }, + "packages/quantic/node_modules/@babel/plugin-transform-async-to-generator": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz", + "integrity": "sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.24.7", + "@babel/helper-plugin-utils": "^7.24.7", + "@babel/helper-remap-async-to-generator": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "packages/quantic/node_modules/@babel/plugin-transform-async-to-generator/node_modules/@babel/helper-module-imports": { + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz", + "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==", + "dev": true, + "dependencies": { + "@babel/traverse": "^7.25.9", + "@babel/types": "^7.25.9" + }, + "engines": { + "node": ">=6.9.0" + } + }, "packages/quantic/node_modules/@lwc/babel-plugin-component": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/@lwc/babel-plugin-component/-/babel-plugin-component-6.5.0.tgz", @@ -59332,6 +59541,23 @@ "sfdx-lwc-jest": "bin/sfdx-lwc-jest" } }, + "packages/quantic/node_modules/@salesforce/sfdx-lwc-jest/node_modules/@babel/plugin-transform-async-to-generator": { + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz", + "integrity": "sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.22.15", + "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-remap-async-to-generator": "^7.22.20" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "packages/quantic/node_modules/@salesforce/sfdx-lwc-jest/node_modules/@lwc/compiler": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/@lwc/compiler/-/compiler-6.5.0.tgz", diff --git a/packages/quantic/babel.config.json b/packages/quantic/babel.config.json new file mode 100644 index 00000000000..2bec27d6243 --- /dev/null +++ b/packages/quantic/babel.config.json @@ -0,0 +1,3 @@ +{ + "plugins": ["@babel/plugin-transform-async-to-generator"] +} diff --git a/packages/quantic/copy-static-resources.js b/packages/quantic/copy-static-resources.js index 80cd35fbde0..134d64a93fe 100644 --- a/packages/quantic/copy-static-resources.js +++ b/packages/quantic/copy-static-resources.js @@ -1,6 +1,7 @@ const {promisify} = require('util'); const ncp = promisify(require('ncp')); const mkdir = promisify(require('fs').mkdir); +const rm = promisify(require('fs').rm); const copy = async (source, dest) => { try { @@ -69,19 +70,19 @@ const copyHeadless = async () => { {recursive: true} ); await copy( - '../../node_modules/@coveo/headless/dist/quantic/headless.js', + '.tmp/quantic-compiled/headless.js', './force-app/main/default/staticresources/coveoheadless/headless.js' ); await copy( - '../../node_modules/@coveo/headless/dist/quantic/case-assist/headless.js', + '.tmp/quantic-compiled/case-assist/headless.js', './force-app/main/default/staticresources/coveoheadless/case-assist/headless.js' ); await copy( - '../../node_modules/@coveo/headless/dist/quantic/insight/headless.js', + '.tmp/quantic-compiled/insight/headless.js', './force-app/main/default/staticresources/coveoheadless/insight/headless.js' ); await copy( - '../../node_modules/@coveo/headless/dist/quantic/recommendation/headless.js', + '.tmp/quantic-compiled/recommendation/headless.js', './force-app/main/default/staticresources/coveoheadless/recommendation/headless.js' ); await copy( @@ -89,6 +90,8 @@ const copyHeadless = async () => { './force-app/main/default/staticresources/coveoheadless/definitions' ); + await rm('.tmp', {recursive: true}); + console.info('Headless copied.'); }; diff --git a/packages/quantic/package.json b/packages/quantic/package.json index eec302e7097..6aff1a1d200 100644 --- a/packages/quantic/package.json +++ b/packages/quantic/package.json @@ -11,7 +11,7 @@ "url": "git+https://github.com/coveo/ui-kit.git" }, "scripts": { - "test": "npm run build:staticresources && npm run lint:check:tests && npm run validate:types && npm run test:unit", + "test": "npm run babel:headless && npm run build:staticresources && npm run lint:check:tests && npm run validate:types && npm run test:unit", "lint:check:tests": "eslint force-app/main/default/lwc/ --format junit -o reports/eslint.xml", "lint:fix": "npm run lint:fix:js", "lint:fix:js": "eslint --fix force-app/main/default/lwc/ && eslint --fix force-app/examples/main/lwc/ && prettier \"force-app/{,**}/*.js\" --write", @@ -42,7 +42,8 @@ "publish:bump": "npm run-script -w=@coveo/release bump", "promote:npm:latest": "npm run-script -w=@coveo/release promote-npm-prod", "preinstall": "node scripts/npm/check-sfdx-project.js", - "postinstall": "node scripts/npm/setup-quantic.js" + "postinstall": "node scripts/npm/setup-quantic.js", + "babel:headless": "babel ../../node_modules/@coveo/headless/dist/quantic --out-dir .tmp/quantic-compiled --extensions .js --minified" }, "dependencies": { "@coveo/bueno": "1.0.5", @@ -54,6 +55,8 @@ "node": "^20.9.0 || ^22.11.0" }, "devDependencies": { + "@babel/cli": "7.25.6", + "@babel/plugin-transform-async-to-generator": "7.24.7", "@ckeditor/jsdoc-plugins": "39.9.1", "@coveo/relay-event-types": "12.0.1", "@coveo/release": "1.0.0", diff --git a/packages/quantic/project.json b/packages/quantic/project.json index 000b6c351ce..f042087e7ed 100644 --- a/packages/quantic/project.json +++ b/packages/quantic/project.json @@ -21,7 +21,10 @@ ], "executor": "nx:run-commands", "options": { - "commands": ["npm run build:staticresources", "npm run build:doc"], + "commands": [ + "npm run babel:headless && npm run build:staticresources", + "npm run build:doc" + ], "parallel": true, "cwd": "packages/quantic" } From b52d936abf15fef7a4d0b8655c954bf22b652091 Mon Sep 17 00:00:00 2001 From: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:24:43 -0500 Subject: [PATCH 2/2] chore(headless): add a wider range of types for the ssr-commerce summaryState (#4643) https://coveord.atlassian.net/browse/KIT-3719 state.query was not available before in the current ssr-commerce summary implementation since query is in an extended type of the default state of the headless-commerce-summary controller. image image --------- Co-authored-by: ylakhdar --- .../core/summary/headless-core-summary.ssr.ts | 9 ++++++++- .../headless-ssr-commerce/components/summary.tsx | 11 +++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/headless/src/controllers/commerce/core/summary/headless-core-summary.ssr.ts b/packages/headless/src/controllers/commerce/core/summary/headless-core-summary.ssr.ts index 09c8652530a..d8f410d8d4c 100644 --- a/packages/headless/src/controllers/commerce/core/summary/headless-core-summary.ssr.ts +++ b/packages/headless/src/controllers/commerce/core/summary/headless-core-summary.ssr.ts @@ -37,5 +37,12 @@ export function defineSummary< solutionType === SolutionType.listing ? buildProductListing(engine).summary() : buildSearch(engine).summary(), - } as SubControllerDefinitionWithoutProps; + } as SubControllerDefinitionWithoutProps< + Summary< + | ProductListingSummaryState + | SearchSummaryState + | RecommendationsSummaryState + >, + TOptions + >; } diff --git a/packages/samples/headless-ssr-commerce/components/summary.tsx b/packages/samples/headless-ssr-commerce/components/summary.tsx index fc379cc5bca..7818c505fdb 100644 --- a/packages/samples/headless-ssr-commerce/components/summary.tsx +++ b/packages/samples/headless-ssr-commerce/components/summary.tsx @@ -20,12 +20,11 @@ export default function Summary() { return null; } - // TODO: KIT-3719 - add query to summary state - // return ( - // - // for {state.query} - // - // ); + return ( + + for {state.query} + + ); }; const renderSummary = () => {