Skip to content

feat(ARCH-349/forms): lazyload react ace #3258

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

Closed
wants to merge 27 commits into from

Conversation

jmfrancois
Copy link
Collaborator

What is the problem this PR is trying to solve?

react-ace is downloaded (part of dependencies.json manifest) while it will may be never used.

What is the chosen solution to this problem?

POC a way to lazy load UMD.

Please check if the PR fulfills these requirements

  • The PR commit message follows our guidelines
  • Tests for the changes have been added (for bug fixes / features) And non reg done before need review
  • Docs have been added / updated (for bug fixes / features)
  • Related design / discussions / pages (not in jira), if any, are all linked or available in the PR

[ ] This PR introduces a breaking change

@github-actions
Copy link
Contributor

github-actions bot commented Mar 30, 2021

Size Change: -24.4 kB (-1%)

Total Size: 2.25 MB

Filename Size Change
./packages/cmf/dist/TalendReactCmf.js 93.6 kB +90 B (0%)
./packages/cmf/dist/TalendReactCmf.min.js 31.5 kB +48 B (0%)
./packages/components/dist/TalendReactComponents.js 487 kB +855 B (0%)
./packages/components/dist/TalendReactComponents.min.js 233 kB +431 B (0%)
./packages/forms/dist/TalendReactForms.js 282 kB -15 kB (-5%)
./packages/forms/dist/TalendReactForms.js.dependencies.json 450 B -38 B (-8%)
./packages/forms/dist/TalendReactForms.min.js 98.1 kB -10.7 kB (-10%) 👏
./packages/forms/dist/TalendReactForms.min.js.dependencies.json 451 B -36 B (-7%)
./packages/stepper/dist/TalendReactStepper.js.dependencies.json 344 B +1 B (0%)
ℹ️ View Unchanged
Filename Size Change
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js 6.37 kB 0 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js.dependencies.json 225 B 0 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js 2.56 kB 0 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js.dependencies.json 224 B 0 B
./packages/cmf/dist/TalendReactCmf.js.dependencies.json 421 B 0 B
./packages/cmf/dist/TalendReactCmf.min.js.dependencies.json 419 B 0 B
./packages/components/dist/TalendReactComponents.css 33.5 kB 0 B
./packages/components/dist/TalendReactComponents.js.dependencies.json 815 B 0 B
./packages/components/dist/TalendReactComponents.min.js.dependencies.json 815 B 0 B
./packages/containers/dist/TalendReactContainers.css 533 B 0 B
./packages/containers/dist/TalendReactContainers.js 59.4 kB 0 B
./packages/containers/dist/TalendReactContainers.js.dependencies.json 414 B 0 B
./packages/containers/dist/TalendReactContainers.min.js 25.4 kB 0 B
./packages/containers/dist/TalendReactContainers.min.js.dependencies.json 416 B 0 B
./packages/datagrid/dist/TalendReactDatagrid.css 8.94 kB 0 B
./packages/datagrid/dist/TalendReactDatagrid.js 60 kB 0 B
./packages/datagrid/dist/TalendReactDatagrid.js.dependencies.json 369 B 0 B
./packages/datagrid/dist/TalendReactDatagrid.min.js 18.8 kB 0 B
./packages/datagrid/dist/TalendReactDatagrid.min.js.dependencies.json 373 B 0 B
./packages/forms/dist/TalendReactForms.css 4.71 kB 0 B
./packages/icons/dist/bundle.js 2.4 kB 0 B
./packages/icons/dist/info.js 1.96 kB 0 B
./packages/icons/dist/react.esm.js 185 kB 0 B
./packages/icons/dist/react.js 186 kB 0 B
./packages/icons/dist/talend-icons-webfont.css 2.86 kB 0 B
./packages/icons/dist/talendicons.css 199 B 0 B
./packages/icons/dist/TalendIcons.js 191 kB 0 B
./packages/icons/dist/TalendIcons.js.dependencies.json 107 B 0 B
./packages/icons/dist/TalendIcons.min.js 188 kB 0 B
./packages/icons/dist/TalendIcons.min.js.dependencies.json 107 B 0 B
./packages/sagas/dist/TalendReactSagas.js 2.5 kB 0 B
./packages/sagas/dist/TalendReactSagas.js.dependencies.json 168 B 0 B
./packages/sagas/dist/TalendReactSagas.min.js 924 B 0 B
./packages/sagas/dist/TalendReactSagas.min.js.dependencies.json 170 B 0 B
./packages/stepper/dist/TalendReactStepper.js 4.83 kB 0 B
./packages/stepper/dist/TalendReactStepper.min.js 1.83 kB 0 B
./packages/stepper/dist/TalendReactStepper.min.js.dependencies.json 342 B 0 B
./packages/theme/dist/bootstrap.css 27.6 kB 0 B
./packages/theme/dist/bootstrap.js 358 B 0 B

compressed-size-action

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

1 similar comment
@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

1 similar comment
@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

clearInterval(intervalId);
resolve(window[varName]);
}
}, 200);
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not confident there is no error management at this point

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes but I have no way to track status of the loading
The only option is to put some console.log at some pace may be ?

Copy link
Contributor

Choose a reason for hiding this comment

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

It could be neat, with a timeout?

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

"enableLiveAutocompletion": true,
"enableSnippets": true,
<AceCodeWidget>
<UNDEFINED
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we add a displayName?

name: 'react-ace',
varName: 'ReactAce',
version: '6.2.0',
path: '/dist/react-ace.min.js',
Copy link
Contributor

Choose a reason for hiding this comment

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

Could be neat to use the mapping from DynamicWebpackPlugin instead?

"enableLiveAutocompletion": true,
"enableSnippets": true,
>
<UNDEFINED
Copy link
Contributor

Choose a reason for hiding this comment

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

😬

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

May be just inject the global var before the tests are runned should fix that

@@ -22,6 +22,7 @@ import CollapsiblePanel from './CollapsiblePanel';
import ConfirmDialog from './ConfirmDialog';
import Datalist from './Datalist';
import { ModelViewer, RecordsViewer } from './DataViewer';
import { importFromCDN } from './importFromCDN';
Copy link
Contributor

Choose a reason for hiding this comment

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

What do you think about a babel macro instead? Defined in TUI Scripts?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

AFAIK macro are good when you have few lines of code here I am not sure of the qtt

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

1 similar comment
@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

1 similar comment
@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@jmfrancois jmfrancois changed the title feat(forms): lazyload react ace feat(ARCH-349/forms): lazyload react ace Jun 1, 2021
@github-actions
Copy link
Contributor

3258

:octocat: Demo is available here

@jmfrancois
Copy link
Collaborator Author

super seed by #3692

@jmfrancois jmfrancois closed this Feb 28, 2022
@jmfrancois jmfrancois deleted the jmfrancois/feat/forms-lazyload-react-ace branch February 28, 2022 09:30
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.

3 participants