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

fix(v2): allow async/await in live code editor #3954

Merged
merged 1 commit into from
Dec 28, 2020

Conversation

9oelM
Copy link
Contributor

@9oelM 9oelM commented Dec 26, 2020

Motivation

So.. as proposed by #3053, we are using a live code editor using react-live, and since transpiling javascript on the fly could easily turned into a heavy job, this library uses https://github.com/bublejs/buble for it, which relatively has a bundle size as mentioned in https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect.

However, to further reduce the bundle size, @endiliey decided to use @philpl/buble which discards some codes on ESNext transpilation, resulting in a notably smaller bundle size.

However this introduced some problem, which I encountered while using docusaurus@v2 and is well-explained by #3053: the live code editor cannot run the code that contains async or await keywords.

Therefore, the simplest fix would be still using @philpl/buble, but applying a custom option to bypass transpiling async and await keywords, which would still work in most up-to-date modern browsers.

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

Launched Docusaurus locally and tested it.

Kapture 2020-12-26 at 13 48 58

closes #3053 if merged

* transforming async functions is not implemented by buble, so just bypassing it would relieve the pain for now
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 26, 2020
@github-actions
Copy link

Size Change: +9 B (0%)

Total Size: 155 kB

ℹ️ View Unchanged
Filename Size Change
website/build/blog/2017/12/14/introducing-docusaurus/index.html 20.7 kB -2 B (0%)
website/build/docs/introduction/index.html 180 B 0 B
website/build/index.html 5.82 kB 0 B
website/build/main.********.js 111 kB +11 B (0%)
website/build/styles.********.css 17.6 kB 0 B

compressed-size-action

@netlify
Copy link

netlify bot commented Dec 26, 2020

✔️ Deploy preview for docusaurus-2 ready!
Built without sensitive environment variables

🔨 Explore the source changes: 8cbb0e4

🔍 Inspect the deploy logs: https://app.netlify.com/sites/docusaurus-2/deploys/5fe6c73c4dd6150008afb07b

😎 Browse the preview: https://deploy-preview-3954--docusaurus-2.netlify.app

@github-actions
Copy link

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 78
🟢 Accessibility 99
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-3954--docusaurus-2.netlify.app/classic/

@slorber slorber changed the title fix(v2): disable transforms on async (#3053) fix(v2): allow async/await in live code editor (#3053) Dec 28, 2020
@slorber
Copy link
Collaborator

slorber commented Dec 28, 2020

That looks like a nice solution, thanks for working on this 👍

@slorber slorber changed the title fix(v2): allow async/await in live code editor (#3053) fix(v2): allow async/await in live code editor Dec 28, 2020
@slorber slorber added the pr: bug fix This PR fixes a bug in a past release. label Dec 28, 2020
@slorber slorber merged commit 41ac446 into facebook:master Dec 28, 2020
@9oelM
Copy link
Contributor Author

9oelM commented Dec 28, 2020

Thanks for merging it!

@slorber
Copy link
Collaborator

slorber commented Dec 28, 2020

thanks for working on it ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

async/await in examples with live editor doesn't work
4 participants