Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draft #4363

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

draft #4363

wants to merge 4 commits into from

Conversation

erocheleau
Copy link
Collaborator

@erocheleau erocheleau commented Aug 29, 2024

Salesforce LWS has a problem with static resources files using async/await on Firefox.

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.

If I correctly understands Babel's documentation.

  • If I don't set a preset in babel configuration, it won't do anything.
  • So it should only apply the transformation included by the @babel/plugin-transform-async-to-generator included in the list of plugins: [] in the babel.config.json
  • I checked all other static resources we include in the package, and headless.js is the only one using async/await natively. (markedjs, dompurify, and Bueno don't use those)

Comparison of bundle sizes

Before Babel transformation

image

After Babel transformation

image

Salesforce LWS has a problem with static resources files using async/await on Firefox.

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.
Copy link

github-actions bot commented Aug 29, 2024

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

Bundle Size

File Old (kb) New (kb) Change (%)
case-assist 244.3 244.3 0
commerce 344.3 344.3 0
search 418.1 418.1 0
insight 398.4 398.4 0
product-listing 308.6 308.6 0
product-recommendation 215.2 215.2 0
recommendation 258.1 258.1 0
ssr 408 408 0
ssr-commerce 354.9 354.9 0

SSR Progress

Use case SSR (#) CSR (#) Progress (%)
search 39 44 89
recommendation 0 4 0
product-recommendation 0 10 0
product-listing 0 13 0
case-assist 0 6 0
insight 0 27 0
commerce 0 15 0
Detailed logs search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
product-recommendation : missing SSR support
product-listing : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

github-merge-queue bot pushed a commit that referenced this pull request Nov 11, 2024
…ue with firefox (#4620)

## [SFINT-5784](https://coveord.atlassian.net/browse/SFINT-5784)

continuation of @erocheleau 's work:
#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:
<img width="500" alt="Screenshot 2024-11-05 at 3 29 43 PM"
src="https://github.com/user-attachments/assets/371ecfa6-898c-4486-a97d-68dbc4b42f1f">

### Headless Size After:
<img width="500" alt="Screenshot 2024-11-05 at 3 29 59 PM"
src="https://github.com/user-attachments/assets/a71c0ba9-163c-48b3-a2c7-7a231ad6122a">





[SFINT-5784]:
https://coveord.atlassian.net/browse/SFINT-5784?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants