feat(ARCH-349): add assets api

[jmfrancois]

What is the problem this PR is trying to solve?

We have a CDN and wants to use it to get assets in async.
dynamic import syntax is great but buggy in webpack and not enough flexible: We want also to manage icons, json, etc .. not only code and we want to manage version at runtime.

What is the chosen solution to this problem?

Provide a package which expose a simple API which cover the following requirements:

• dev do not have to write the version: inject it at build time (babel plugin)
• the assets version is implicitly specified by the webapp (ui-scripts add global data read by the api)
• the inject.js script will be able to control this version (it should update meta value)
• the sessionStorage is used to let anyone try a new version
• the API is friend is compatible with suspense / lazy react api
• for UMD, the path is computed form module-to-cdn and injected at build time (babel plugin)
• for relative path in current package, the name of the package is optional

The following use cases are covered

• use it in dataviz to load topology (JSON)
• use it in design-system to manage icons bundle
• use it in forms to display the Code widget
• use it for json used to manage localisation
• use if for data-grid (lazy load css of ag-grid + dependencies ag-grid-react)
• use it for translations
• Error are handled or can be using ErrorBoundary (input UX needed)
• lazy load a complete screen (via router, check if it is possible with this API)

Demo: http://3692.talend.surge.sh/

Questions

Why we can't use import()
It doesn't let us manage version of the package, this is only at build time. And even there, there is a bug with UMD format (fetch are done using the public path instead of the current script url. Rewrite it using a different API is quite dangerous and hard to maintain.

What happens if the code I want to load is not supported by module-to-cdn ?
At the moment we only support UMD distribution for javascript assets. If your package do not have JS but only svg or json you have to add it without var attribute in modules.json file.

We need at runtime to have name, version, path to have a CDN URL http://${mycdndomain}/${pkg}/${version}${path}

DEMO

http://3692.talend-playground.surge.sh/playground

APIs

import assetsAPI from '@talend/assets-api';

// First the most low level API is to get URL of anything like a css here
const href = assetsApi.getURL('/dist/styles/ag-grid.css', 'ag-grid-community');
// babel will add all missing arguments and at runtime you will have
href === 'https://unpkg.com/ag-grid-community@25.0.0/dist/styles/ag-grid.css';


// Then we have higher level API to get a JSON file for locales, timezones, etc...
async function getTopology(file) {
	const locales = await assetsAPI.getJSON(
		`/dist/assets/maps/${file}.topo.json`,
	);
}


// Then we have lazy load of a component from UMD
// this one is a bit more complex. You have to know React.lazy want a default esModule from a Promise. This is what getUMD + toDefaultModule give you.
const AgGridReact = React.lazy(() =>
	assetsApi
		.getUMD('ag-grid-community')
		.then(() =>
			assetsApi.getUMD('ag-grid-react').then(mod => assetsApi.toDefaultModule(mod.AgGridReact)),
		),
);


// Last example is on how to load styles from a lazy loaded component
// you can use
export default function DataGrid(props) {
	//...
	useEffect(() => {
		const href = assetsApi.getURL('/dist/styles/ag-grid.css', 'ag-grid-community');
		assetsApi.addStyle({ href });
	}, []);
	//...
	return <React.Suspense fallback={}>AgGridReact</React.Suspense>
}

Please check if the PR fulfills these requirements

• The PR have used yarn changeset to a request a release from the CI if wanted.
• 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]

3692

Demo is available here

[github-actions]

Size Change: -1.18 MB (-8%) ✅

Total Size: 13.7 MB

Filename	Size	Change
./packages/components/dist/TalendReactComponents.js.dependencies.json	3.56 kB	+649 B (+22%)	🚨
./packages/components/dist/TalendReactComponents.min.js.dependencies.json	3.64 kB	+657 B (+22%)	🚨
./packages/containers/dist/TalendReactContainers.js.dependencies.json	2.37 kB	+959 B (+68%)	🆘
./packages/containers/dist/TalendReactContainers.min.js.dependencies.json	2.43 kB	+977 B (+67%)	🆘
./packages/datagrid/dist/TalendReactDatagrid.css	4.52 kB	-61.7 kB (-93%)	🏆
./packages/datagrid/dist/TalendReactDatagrid.js	115 kB	+5.52 kB (+5%)	🔍
./packages/datagrid/dist/TalendReactDatagrid.js.dependencies.json	1.29 kB	-238 B (-16%)	👏
./packages/datagrid/dist/TalendReactDatagrid.min.js	23.4 kB	+3.2 kB (+16%)	⚠️
./packages/datagrid/dist/TalendReactDatagrid.min.js.dependencies.json	1.32 kB	-242 B (-15%)	👏
./packages/dataviz/dist/TalendReactDataviz.js	325 kB	-531 kB (-62%)	🏆
./packages/dataviz/dist/TalendReactDataviz.min.js	63.5 kB	-515 kB (-89%)	🏆
./packages/design-system/dist/TalendDesignSystem.js	1.18 MB	+5.87 kB (0%)
./packages/design-system/dist/TalendDesignSystem.min.js	190 kB	+2.86 kB (+2%)
./packages/forms/dist/TalendReactForms.js	1.28 MB	-61.2 kB (-5%)	✅
./packages/forms/dist/TalendReactForms.js.dependencies.json	1.61 kB	-205 B (-11%)	👏
./packages/forms/dist/TalendReactForms.min.js	386 kB	-30.8 kB (-7%)	✅
./packages/forms/dist/TalendReactForms.min.js.dependencies.json	1.65 kB	-212 B (-11%)	👏

ℹ️ View Unchanged

Filename	Size
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js	41.5 kB
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js.dependencies.json	643 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js	8.04 kB
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js.dependencies.json	665 B
./packages/cmf-router/dist/TalendReactCmfRouter.js	52.6 kB
./packages/cmf-router/dist/TalendReactCmfRouter.js.dependencies.json	1.07 kB
./packages/cmf-router/dist/TalendReactCmfRouter.min.js	11.5 kB
./packages/cmf-router/dist/TalendReactCmfRouter.min.js.dependencies.json	1.11 kB
./packages/cmf/dist/TalendReactCmf.js	548 kB
./packages/cmf/dist/TalendReactCmf.js.dependencies.json	1.25 kB
./packages/cmf/dist/TalendReactCmf.min.js	112 kB
./packages/cmf/dist/TalendReactCmf.min.js.dependencies.json	1.29 kB
./packages/components/dist/TalendReactComponents.css	181 kB
./packages/components/dist/TalendReactComponents.js	3.18 MB
./packages/components/dist/TalendReactComponents.min.js	711 kB
./packages/containers/dist/TalendReactContainers.css	1.73 kB
./packages/containers/dist/TalendReactContainers.js	442 kB
./packages/containers/dist/TalendReactContainers.min.js	95.3 kB
./packages/dataviz/dist/TalendReactDataviz.css	8.72 kB
./packages/dataviz/dist/TalendReactDataviz.js.dependencies.json	1.03 kB
./packages/dataviz/dist/TalendReactDataviz.min.js.dependencies.json	1.06 kB
./packages/design-system/dist/TalendDesignSystem.css	1.18 MB
./packages/design-system/dist/TalendDesignSystem.js.dependencies.json	1.36 kB
./packages/design-system/dist/TalendDesignSystem.min.js.dependencies.json	1.39 kB
./packages/design-tokens/dist/TalendDesignTokens.css	35.2 kB
./packages/design-tokens/dist/TalendDesignTokens.js	33.3 kB
./packages/design-tokens/dist/TalendDesignTokens.js.dependencies.json	2 B
./packages/design-tokens/dist/TalendDesignTokens.min.js	27.5 kB
./packages/design-tokens/dist/TalendDesignTokens.min.js.dependencies.json	2 B
./packages/faceted-search/dist/TalendReactFacetedSearch.css	15 kB
./packages/faceted-search/dist/TalendReactFacetedSearch.js	371 kB
./packages/faceted-search/dist/TalendReactFacetedSearch.js.dependencies.json	1.29 kB
./packages/faceted-search/dist/TalendReactFacetedSearch.min.js	94.7 kB
./packages/faceted-search/dist/TalendReactFacetedSearch.min.js.dependencies.json	1.32 kB
./packages/flow-designer/dist/TalendReactFlowDesigner.min.js	56.7 kB
./packages/flow-designer/dist/TalendReactFlowDesigner.min.js.dependencies.json	935 B
./packages/forms/dist/TalendReactForms.css	20.7 kB
./packages/http/dist/TalendHttp.js	26.4 kB
./packages/http/dist/TalendHttp.js.dependencies.json	2 B
./packages/http/dist/TalendHttp.min.js	4.82 kB
./packages/http/dist/TalendHttp.min.js.dependencies.json	2 B
./packages/icons/dist/bundle.js	6.31 kB
./packages/icons/dist/info.js	10.8 kB
./packages/icons/dist/react.esm.js	530 kB
./packages/icons/dist/react.js	570 kB
./packages/icons/dist/talend-icons-webfont.css	16.7 kB
./packages/icons/dist/talendicons.css	334 B
./packages/icons/dist/TalendIcons.js	626 kB
./packages/icons/dist/TalendIcons.js.dependencies.json	128 B
./packages/icons/dist/TalendIcons.min.js	554 kB
./packages/icons/dist/TalendIcons.min.js.dependencies.json	131 B
./packages/jsfc/dist/index.js	92.6 kB
./packages/jsfc/dist/index.js.dependencies.json	2 B
./packages/router-bridge/dist/TalendRouterBridge.js	160 kB
./packages/router-bridge/dist/TalendRouterBridge.js.dependencies.json	981 B
./packages/router-bridge/dist/TalendRouterBridge.min.js	24.5 kB
./packages/router-bridge/dist/TalendRouterBridge.min.js.dependencies.json	1.01 kB
./packages/sagas/dist/TalendReactSagas.js	12.1 kB
./packages/sagas/dist/TalendReactSagas.js.dependencies.json	348 B
./packages/sagas/dist/TalendReactSagas.min.js	2.13 kB
./packages/sagas/dist/TalendReactSagas.min.js.dependencies.json	360 B
./packages/stepper/dist/TalendReactStepper.js	26.3 kB
./packages/stepper/dist/TalendReactStepper.js.dependencies.json	833 B
./packages/stepper/dist/TalendReactStepper.min.js	4.86 kB
./packages/stepper/dist/TalendReactStepper.min.js.dependencies.json	855 B
./packages/theme/dist/bootstrap.css	149 kB
./packages/theme/dist/bootstrap.js	4.33 kB
./packages/theme/dist/bootstrap.js.dependencies.json	3 B

_{compressed-size-action}