fix(webpack): config for assets (#4185)

* fix: update config for app and lib to manage static assets (img, svg, fonts)
* fix: remove copy of icons bundle inside app root folder

.changeset/large-rules-laugh.md

@@ -0,0 +1,40 @@
+---
+'@talend/scripts-config-react-webpack': patch
+---
+
+* fix: do not generate both hashed and non hashed assets for fonts, images and svgs.
+* fix: do not copy icons into app root folder
+* chore: put assets config in common so app and umd configuration are aligned.
+
+Note: path has been changed this way:
+
+```diff
+# case of woff in lib
+- mylib/dist/[hash].woff
+- mylib/dist/fonts/[name].woff
++ mylib/dist/assets/fonts/[name].woff
+
+# case if woff in app
+- myapp/dist/[hash].woff
+- myapp/dist/fonts/[name].woff
++ myapp/dist/assets/fonts/[name]-[hash].woff
+
+# case of img in lib
+- not supported
++ mylib/dist/assets/img/[name].woff
+
+# case of img in app
+- myapp/dist/[hash].png
+- myapp/dist/assets/img/[name].png
++ myapp/dist/assets/img/[name]-[hash].png
+
+# case of svg in app
+- myapp/dist/[hash].svg
+- myapp/dist/assets/svg/[name].svg
++ myapp/dist/assets/svg/[name]-[hash].svg
+
+# case of svg in lib
+- mylib/dist/[hash].svg
+- mylib/dist/assets/svg/[name].svg
++ mylib/dist/assets/svg/[name]-[hash].svg
+```

.changeset/wild-forks-jump.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: trigger a new release to get ride of hashed assets in the package.

packages/design-system/talend-scripts.json

@@ -1,10 +1,5 @@
 {
   "preset": "@talend/scripts-preset-react-lib",
   "copy": [{ "from": "src/images", "to": "images" }],
-  "webpack": {
-    "config": {
-      "development": "./webpack.config.js",
-      "production": "./webpack.config.js"
-    }
-  }
+  "webpack": {}
 }

packages/playground/src/app/components/ComponentFormSandbox.js

@@ -8,6 +8,7 @@ import ComponentForm from '@talend/react-containers/lib/ComponentForm';
 import SidePanel from '@talend/react-containers/lib/SidePanel';
 import HeaderBar from '@talend/react-containers/lib/HeaderBar';
 import { Alert } from '@talend/react-bootstrap';
+// eslint-disable-next-line @talend/import-depth
 import theme from '../example.scss';
 
 const example = require('../../../mockBackend/mock/kit/example.json');

packages/playground/src/app/components/Icons.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Layout from '@talend/react-components/lib/Layout';
+import SidePanel from '@talend/react-containers/lib/SidePanel';
+import HeaderBar from '@talend/react-containers/lib/HeaderBar';
+// eslint-disable-next-line @talend/import-depth
+import logo from '@talend/icons/src/svg/products/logo.svg';
+
+export function Icons() {
+	return (
+		<Layout mode="TwoColumns" one={<SidePanel />} header={<HeaderBar />}>
+			<article>
+				<h1>Use SVG Icons in our apps</h1>
+				<p>
+					I can import svg in my app code using the following snippet. You will have the url as
+					string
+				</p>
+				<pre>import logo from '@talend/icons/src/svg/products/logo.svg';</pre>
+				<p>Current url generated is {logo}</p>
+				Let's use an image to display it:
+				<img src={logo} alt="logo" style={{ width: 400 }} />
+			</article>
+		</Layout>
+	);
+}

packages/playground/src/app/index.js

@@ -14,6 +14,7 @@ import { initI18n } from './i18n';
 import ComponentFormSandbox from './components/ComponentFormSandbox';
 import { FacetedSearchPlayground } from './components/FacetedSearch';
 import { DataGridPlayground } from './components/DataGrid';
+import { Icons } from './components/Icons';
 
 import { LeaguesList } from './components/List';
 import { Dataviz } from './components/Dataviz';
@@ -46,6 +47,7 @@ const app = {
 		LeaguesList,
 		IconsProvider,
 		Dataviz,
+		Icons,
 	},
 	settingsURL: `${basename || ''}/settings.json`,
 	actionCreators: actions,

packages/playground/src/assets/settings.json

@@ -49,6 +49,16 @@
           "routerPush": "/DataGrid"
         }
       }
+    },
+    "menu:Icons": {
+      "icon": "talend-datagrid",
+      "label": "Icons",
+      "onClickDispatch": {
+        "type": "MENU_LIST_CLICKED",
+        "cmf": {
+          "routerPush": "/Icons"
+        }
+      }
     }
   },
   "props": {
@@ -98,7 +108,8 @@
         "menu:List",
         "menu:Dataviz",
         "menu:DataGrid",
-        "menu:FacetedSearch"
+        "menu:FacetedSearch",
+        "menu:Icons"
       ]
     },
     "Layout#default": {
@@ -140,6 +151,10 @@
       {
         "path": "DataGrid",
         "component": "DataGrid"
+      },
+      {
+        "path": "Icons",
+        "component": "Icons"
       }
     ]
   }

tools/scripts-config-react-webpack/config/webpack.config.common.js

@@ -74,9 +74,37 @@ function getSassLoaders(enableModules, sassData, mode) {
 	);
 }
 
+function getAssetsRules(hashed = true) {
+	const name = `[name]${hashed ? '-[hash]' : ''}[ext]`;
+	return [
+		{
+			test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
+			type: 'asset/resource',
+			generator: {
+				filename: `assets/fonts/${name}`,
+			},
+		},
+		{
+			test: /\.svg$/,
+			type: 'asset/resource',
+			generator: {
+				filename: `assets/svg/${name}`,
+			},
+		},
+		{
+			test: /\.(png|jpg|jpeg|gif)$/,
+			type: 'asset/resource',
+			generator: {
+				filename: `assets/img/${name}`,
+			},
+		},
+	];
+}
+
 module.exports = {
 	getSassData,
 	getCommonStyleLoaders,
 	getSassLoaders,
 	getJSAndTSLoader,
+	getAssetsRules,
 };

tools/scripts-config-react-webpack/config/webpack.config.js

@@ -27,6 +27,7 @@ const {
 	getSassLoaders,
 	getJSAndTSLoader,
 	getSassData,
+	getAssetsRules,
 } = require('./webpack.config.common');
 
 const INITIATOR_URL = process.env.INITIATOR_URL || '@@INITIATOR_URL@@';
@@ -155,7 +156,6 @@ function getCopyConfig(env, userCopyConfig = []) {
 	if (!assetsOverridden && fs.existsSync(path.join(process.cwd(), 'src/assets'))) {
 		config.push({ from: 'src/assets' });
 	}
-	config.push({ from: path.join(ICON_DIST, 'svg-bundle') });
 	if (!cdnMode) {
 		cdn.getCopyConfig().forEach(c => config.push(c));
 	}
@@ -315,48 +315,7 @@ module.exports = ({ getUserConfig, mode }) => {
 						use: getSassLoaders(cssModulesEnabled, sassData, mode),
 						exclude: /@talend/,
 					},
-					{
-						test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
-						type: 'asset/resource',
-						use: [
-							{
-								loader: 'url-loader',
-								options: {
-									name: './fonts/[name].[ext]',
-									limit: 10000,
-									mimetype: 'application/font-woff',
-								},
-							},
-						],
-					},
-					{
-						test: /\.svg$/,
-						type: 'asset/resource',
-						use: [
-							{
-								loader: 'url-loader',
-								options: {
-									name: 'assets/svg/[name].[ext]',
-									limit: 10000,
-									mimetype: 'image/svg+xml',
-								},
-							},
-						],
-					},
-					{
-						test: /\.(png|jpg|jpeg|gif)$/,
-						type: 'asset/resource',
-						use: [
-							{
-								loader: 'url-loader',
-								options: {
-									name: 'assets/img/[name].[ext]',
-									limit: 10000,
-									mimetype: 'image/png',
-								},
-							},
-						],
-					},
+					...getAssetsRules(true),
 				].filter(Boolean),
 			},
 			plugins: [

tools/scripts-config-react-webpack/config/webpack.config.umd.js

@@ -12,6 +12,7 @@ const {
 	getSassLoaders,
 	getJSAndTSLoader,
 	getSassData,
+	getAssetsRules,
 } = require('./webpack.config.common');
 
 cdn.configureTalendModules();
@@ -61,29 +62,7 @@ module.exports = options => {
 						test: /\.css$/,
 						use: getCommonStyleLoaders(false, options.mode),
 					},
-					{
-						test: /\.svg$/,
-						loader: 'url-loader',
-						options: {
-							esModule: false,
-							name: 'assets/svg/[name].[ext]',
-							mimetype: 'image/svg+xml',
-						},
-					},
-					{
-						test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
-						type: 'asset/resource',
-						use: [
-							{
-								loader: 'url-loader',
-								options: {
-									name: './fonts/[name].[ext]',
-									limit: 10000,
-									mimetype: 'application/font-woff',
-								},
-							},
-						],
-					},
+					...getAssetsRules(false),
 				],
 			},
 			stats: { children: false }, // remove warnings of all plugins ...