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.

Sign up for GitHub

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

Jump to bottom

[Experimental] Code block/editor optimizations #132

Merged
merged 15 commits into from
Jun 14, 2022
Merged

[Experimental] Code block/editor optimizations #132

merged 15 commits into from
Jun 14, 2022

Conversation

sserrata
Copy link
Member

Description

This PR completely refactors both the body/payload editor component and the code samples components.

  • Replaces Monaco/VSCode with React-Live
  • Replaces the custom Highlight/Prism component with built-in Docusaurus CodeBlock

Motivation and Context

See issue #131 and #130 for details.

How Has This Been Tested?

Tested locally in dev

Screenshots (if appropriate)

See demo (if it builds 😅 )

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

@sserrata sserrata added the enhancement New feature or request label Jun 14, 2022
@sserrata sserrata requested review from blindaa121 and csestito June 14, 2022 14:52
@github-actions
Copy link

github-actions bot commented Jun 14, 2022 •
edited
Loading

Size Change: +185 kB (+6%) 🔍

Total Size: 3.36 MB

Filename Size Change
demo/build/assets/css/styles.********.css 93.8 kB +8.76 kB (+10%) ⚠️
demo/build/assets/js/4109.********.js 0 B -1.19 MB (removed) 🏆
demo/build/assets/js/4c5e977b.********.js 31.2 kB -294 B (-1%)
demo/build/assets/js/f8409a7e.********.js 32.5 kB +186 B (+1%)
demo/build/index.html 79.7 kB +1.01 kB (+1%)
demo/build/assets/js/5103.********.js 1.37 MB +1.37 MB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
demo/.docusaurus/globalData.json 20 kB 0 B
demo/build/assets/js/05f64ae1.********.js 2.97 kB 0 B
demo/build/assets/js/06b64fc1.********.js 583 B 0 B
demo/build/assets/js/06e5f0f0.********.js 29.7 kB 0 B
demo/build/assets/js/081bfb0d.********.js 9.9 kB +24 B (0%)
demo/build/assets/js/09e07b87.********.js 3.16 kB 0 B
demo/build/assets/js/112df51d.********.js 20.4 kB +24 B (0%)
demo/build/assets/js/14eb3368.********.js 9.5 kB 0 B
demo/build/assets/js/1639936b.********.js 4.35 kB 0 B
demo/build/assets/js/16577668.********.js 395 B 0 B
demo/build/assets/js/1676ff52.********.js 10.3 kB +24 B (0%)
demo/build/assets/js/16ed3e0d.********.js 19.9 kB +24 B (0%)
demo/build/assets/js/18c41134.********.js 14.5 kB 0 B
demo/build/assets/js/1be78505.********.js 11.4 kB 0 B
demo/build/assets/js/1e4232ab.********.js 3.27 kB 0 B
demo/build/assets/js/1e71f858.********.js 17.4 kB 0 B
demo/build/assets/js/1f3711ab.********.js 17.9 kB +24 B (0%)
demo/build/assets/js/1f818248.********.js 12 kB 0 B
demo/build/assets/js/21b83554.********.js 10.1 kB +24 B (0%)
demo/build/assets/js/25b7fcf3.********.js 16.1 kB +24 B (0%)
demo/build/assets/js/2610c6ee.********.js 18.1 kB +24 B (0%)
demo/build/assets/js/2a3d8b7d.********.js 11.7 kB +24 B (0%)
demo/build/assets/js/2b60538e.********.js 16 kB +24 B (0%)
demo/build/assets/js/2c860537.********.js 7.03 kB 0 B
demo/build/assets/js/2da0bfe8.********.js 17.9 kB 0 B
demo/build/assets/js/2ee3fbbb.********.js 11.2 kB +24 B (0%)
demo/build/assets/js/326c3861.********.js 9.89 kB 0 B
demo/build/assets/js/36675a4b.********.js 22.4 kB +24 B (0%)
demo/build/assets/js/374f9103.********.js 15.6 kB +24 B (0%)
demo/build/assets/js/39d00f16.********.js 9.75 kB 0 B
demo/build/assets/js/47abaca6.********.js 3.06 kB 0 B
demo/build/assets/js/4851c287.********.js 11.2 kB 0 B
demo/build/assets/js/4964e910.********.js 16.8 kB +24 B (0%)
demo/build/assets/js/49d625b5.********.js 17.4 kB +24 B (0%)
demo/build/assets/js/4bdd3fbe.********.js 15.4 kB +24 B (0%)
demo/build/assets/js/52efb675.********.js 10.2 kB 0 B
demo/build/assets/js/533a09ca.********.js 2.61 kB 0 B
demo/build/assets/js/55b55784.********.js 8.84 kB 0 B
demo/build/assets/js/56717cba.********.js 3.12 kB 0 B
demo/build/assets/js/58ff8b1e.********.js 20.8 kB +24 B (0%)
demo/build/assets/js/5c868d36.********.js 3.36 kB 0 B
demo/build/assets/js/5fb917be.********.js 2.61 kB 0 B
demo/build/assets/js/6102b0bc.********.js 22.5 kB 0 B
demo/build/assets/js/64ad353b.********.js 21 kB +24 B (0%)
demo/build/assets/js/6b63c616.********.js 20.8 kB +24 B (0%)
demo/build/assets/js/6dbe9da1.********.js 19.8 kB 0 B
demo/build/assets/js/6eec44b8.********.js 8.92 kB +24 B (0%)
demo/build/assets/js/71f1585f.********.js 11.3 kB +24 B (0%)
demo/build/assets/js/7633a546.********.js 10.1 kB +24 B (0%)
demo/build/assets/js/7933a256.********.js 20.3 kB 0 B
demo/build/assets/js/7a7d82e8.********.js 17.3 kB +24 B (0%)
demo/build/assets/js/822bd8ab.********.js 2.99 kB 0 B
demo/build/assets/js/8287.********.js 1.09 kB 0 B
demo/build/assets/js/835a9617.********.js 11.4 kB +24 B (0%)
demo/build/assets/js/840731c0.********.js 10.6 kB +24 B (0%)
demo/build/assets/js/8463bcfe.********.js 16.1 kB 0 B
demo/build/assets/js/85d3c400.********.js 3.06 kB 0 B
demo/build/assets/js/85ec4403.********.js 4.55 kB 0 B
demo/build/assets/js/86c346b0.********.js 546 B 0 B
demo/build/assets/js/881db345.********.js 402 B 0 B
demo/build/assets/js/892ce721.********.js 20.9 kB 0 B
demo/build/assets/js/8ab9b16e.********.js 9.72 kB +24 B (0%)
demo/build/assets/js/8d4e78cd.********.js 2.97 kB 0 B
demo/build/assets/js/8f441c78.********.js 9.85 kB 0 B
demo/build/assets/js/93304a97.********.js 4.47 kB 0 B
demo/build/assets/js/935b44fb.********.js 18.2 kB 0 B
demo/build/assets/js/935f2afb.********.js 34.8 kB 0 B
demo/build/assets/js/97810f3c.********.js 16.7 kB 0 B
demo/build/assets/js/9c58e5d3.********.js 16.6 kB +24 B (0%)
demo/build/assets/js/9e2a7edc.********.js 22.6 kB +24 B (0%)
demo/build/assets/js/a5491aaa.********.js 400 B 0 B
demo/build/assets/js/a6cd895f.********.js 20.6 kB +24 B (0%)
demo/build/assets/js/a6f84189.********.js 11.8 kB 0 B
demo/build/assets/js/a728d93a.********.js 9.81 kB 0 B
demo/build/assets/js/ab09fd5c.********.js 20.7 kB 0 B
demo/build/assets/js/b8b62e90.********.js 19.7 kB +24 B (0%)
demo/build/assets/js/bceea4ca.********.js 10.1 kB 0 B
demo/build/assets/js/bead4b8e.********.js 3.21 kB 0 B
demo/build/assets/js/bf271e74.********.js 401 B 0 B
demo/build/assets/js/bf9a5101.********.js 17.8 kB +24 B (0%)
demo/build/assets/js/c2838c41.********.js 17.3 kB +24 B (0%)
demo/build/assets/js/c2b8341d.********.js 17.4 kB +24 B (0%)
demo/build/assets/js/c5c41c27.********.js 17.3 kB 0 B
demo/build/assets/js/c7ded1cb.********.js 3.12 kB 0 B
demo/build/assets/js/common.********.js 125 kB 0 B
demo/build/assets/js/d63c7029.********.js 3.07 kB 0 B
demo/build/assets/js/d69e68dd.********.js 10.5 kB +24 B (0%)
demo/build/assets/js/d90c1c35.********.js 11.2 kB +24 B (0%)
demo/build/assets/js/dbf42779.********.js 18.3 kB +24 B (0%)
demo/build/assets/js/dd696920.********.js 16.6 kB +24 B (0%)
demo/build/assets/js/dff1c289.********.js 4 kB 0 B
demo/build/assets/js/e165a18a.********.js 11.3 kB 0 B
demo/build/assets/js/e2ce9793.********.js 434 B 0 B
demo/build/assets/js/e44a2883.********.js 5.33 kB 0 B
demo/build/assets/js/e53a20a4.********.js 11.9 kB +24 B (0%)
demo/build/assets/js/e5e5340c.********.js 2.54 kB 0 B
demo/build/assets/js/e65a1271.********.js 15.5 kB 0 B
demo/build/assets/js/e6f78ab2.********.js 8.82 kB +24 B (0%)
demo/build/assets/js/e8b309fb.********.js 585 B 0 B
demo/build/assets/js/ecc39b49.********.js 180 B 0 B
demo/build/assets/js/eff95040.********.js 20.2 kB +24 B (0%)
demo/build/assets/js/f30e634b.********.js 16.7 kB +24 B (0%)
demo/build/assets/js/f55d3e7a.********.js 2.83 kB 0 B
demo/build/assets/js/fcb807fc.********.js 10.5 kB 0 B
demo/build/assets/js/fdd24af5.********.js 9.96 kB +24 B (0%)
demo/build/assets/js/ffc99614.********.js 16.7 kB 0 B
demo/build/assets/js/main.********.js 408 kB 0 B
demo/build/assets/js/runtime~main.********.js 8.91 kB 0 B

compressed-size-action

@github-actions
Copy link

github-actions bot commented Jun 14, 2022 •
edited
Loading

Visit the preview URL for this PR (updated for commit 53e8b28):

https://docusaurus-openapi-36b86--pr132-ny9pu1g1.web.app

(expires Thu, 14 Jul 2022 17:34:00 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

blindaa121
blindaa121 approved these changes Jun 14, 2022
View reviewed changes
Copy link
Collaborator

@blindaa121 blindaa121 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really good! 🚀 Just a minor suggestion for centering the new CodeTabs:

Screen.Recording.2022-06-14.at.9.18.54.AM.mov

@sserrata
Copy link
Member Author

Thanks! I had hoped the bundle size would be smaller, sans Monaco and the custom Highlight/Prism components, but it seemed to even out. Will investigate to see if React-Live offers any bundling strategies we could try.

@sserrata sserrata removed the request for review from csestito June 14, 2022 17:34
@sserrata sserrata merged commit ffaf42b into main Jun 14, 2022
@sserrata sserrata deleted the code-optimizations branch June 14, 2022 17:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@blindaa121 blindaa121 blindaa121 approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@sserrata @blindaa121