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

Dynamic import syntax highlighter from source to save on bundle size #874

Merged
merged 2 commits into from
Mar 9, 2022
Merged

Dynamic import syntax highlighter from source to save on bundle size #874

merged 2 commits into from
Mar 9, 2022

Conversation

plesiecki
Copy link
Collaborator

@plesiecki plesiecki commented Mar 9, 2022 •
edited
Loading

@github-actions
Copy link

github-actions bot commented Mar 9, 2022 •
edited
Loading

size-limit report 📦

Path Size
build/public/main.js 1.87 MB (-1.72% 🔽)
build/public/polyfills.es5.js 42.54 KB (+0.07% 🔺)
build/public/dnd.es5.js 4.6 KB (+0.95% 🔺)

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646827061747-91834.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki marked this pull request as ready for review March 9, 2022 12:15
adrianmroz-allegro
adrianmroz-allegro approved these changes Mar 9, 2022
View reviewed changes
Copy link
Contributor

@adrianmroz-allegro adrianmroz-allegro left a comment

Choose a reason for hiding this comment

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

I need to keep reference to this PR so I will remember why we have this exclude clauses and where we need to modify them in the future

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 0b51ea5 to aaa7f8a Compare March 9, 2022 12:37
@plesiecki plesiecki changed the title Import syntax highlighter from source to save on bundle size Dynamic import syntax highlighter from source to save on bundle size Mar 9, 2022
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646829735836-60300.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from aaa7f8a to 9a6f635 Compare March 9, 2022 12:52
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646830656037-74212.report.html

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 9a6f635 to b25d769 Compare March 9, 2022 12:57
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646830914661-56581.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from b25d769 to eb8dcec Compare March 9, 2022 13:07
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646831505742-64269.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from eb8dcec to 865b35e Compare March 9, 2022 13:13
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646831857326-47009.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 865b35e to ee35089 Compare March 9, 2022 13:24
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646832541741-26484.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 0886334 to a2ee828 Compare March 9, 2022 13:55
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646834243657-58581.report.html

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from a2ee828 to fe9fe14 Compare March 9, 2022 13:58
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646834371339-84568.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646834525260-50116.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

adrianmroz-allegro
adrianmroz-allegro reviewed Mar 9, 2022
View reviewed changes
src/client/modals/source-modal/highlighter.tsx Outdated
Comment on lines 27 to 35
export default class Highlighter extends React.Component<Props> {
render() {
const { children: source } = this.props;

return <SyntaxHighlighter className="source-modal__source" language="json" style={githubGist}>
{source}
</SyntaxHighlighter>;
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
export default class Highlighter extends React.Component<Props> {
render() {
const { children: source } = this.props;
return <SyntaxHighlighter className="source-modal__source" language="json" style={githubGist}>
{source}
</SyntaxHighlighter>;
}
}
export const Highlighter: SFC = ({ children: source }) =>
<SyntaxHighlighter className="source-modal__source" language="json" style={githubGist}>
{source}
</SyntaxHighlighter>;

Copy link
Contributor

Choose a reason for hiding this comment

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

Of course, need to import SFC from React.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

TS told me SFC is deprecated and I should use FunctionComponent.
Also it has to export default to work as lazy component.

adrianmroz-allegro
adrianmroz-allegro reviewed Mar 9, 2022
View reviewed changes
src/client/modals/source-modal/source-modal.tsx
<SyntaxHighlighter className="source-modal__source" language="json" style={githubGist}>
{source}
</SyntaxHighlighter>
<React.Suspense fallback={Loader}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Perfect case for lazy component!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yeah, it is! Wonder if SourceModal wouldn't be a better candidate though.

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch 2 times, most recently from 3fabd8b to 651431c Compare March 9, 2022 15:27
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646839650670-85070.report.html

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 651431c to 5cc85d4 Compare March 9, 2022 15:29
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646839881431-6509.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646839995475-67678.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

1 similar comment
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 5cc85d4 to 03fc616 Compare March 9, 2022 15:36
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646840441400-91831.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 03fc616 to 70695c1 Compare March 9, 2022 15:47
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646841083177-6271.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki force-pushed the syntax-highlighter-src branch from 70695c1 to aa12c0a Compare March 9, 2022 17:13
@github-actions
Copy link

github-actions bot commented Mar 9, 2022

⏱️ Lighthouse report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1646846289916-69308.report.html

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

✅ Deployed successfully to: https://turnilo-syntax-highlighter-src-gmbbyye42a-ew.a.run.app

@plesiecki plesiecki merged commit dc4714e into master Mar 9, 2022
@plesiecki plesiecki deleted the syntax-highlighter-src branch March 9, 2022 17:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adrianmroz-allegro adrianmroz-allegro adrianmroz-allegro approved these changes

Assignees
No one assigned
Labels
technical debt
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@plesiecki @adrianmroz-allegro