Skip to content

Commit

Permalink
fix(webpack): config for assets (#4185)
Browse files Browse the repository at this point in the history
* fix: update config for app and lib to manage static assets (img, svg, fonts)
* fix: remove copy of icons bundle inside app root folder
  • Loading branch information
jmfrancois authored Jul 5, 2022
1 parent c47d272 commit 2a8de8a
Show file tree
Hide file tree
Showing 11 changed files with 121 additions and 86 deletions.
40 changes: 40 additions & 0 deletions .changeset/large-rules-laugh.md
Original file line number Diff line number Diff line change
@@ -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
```
5 changes: 5 additions & 0 deletions .changeset/wild-forks-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/design-system': patch
---

fix: trigger a new release to get ride of hashed assets in the package.
7 changes: 1 addition & 6 deletions packages/design-system/talend-scripts.json
Original file line number Diff line number Diff line change
@@ -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": {}
}
13 changes: 0 additions & 13 deletions packages/design-system/webpack.config.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
24 changes: 24 additions & 0 deletions packages/playground/src/app/components/Icons.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
2 changes: 2 additions & 0 deletions packages/playground/src/app/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -46,6 +47,7 @@ const app = {
LeaguesList,
IconsProvider,
Dataviz,
Icons,
},
settingsURL: `${basename || ''}/settings.json`,
actionCreators: actions,
Expand Down
17 changes: 16 additions & 1 deletion packages/playground/src/assets/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,16 @@
"routerPush": "/DataGrid"
}
}
},
"menu:Icons": {
"icon": "talend-datagrid",
"label": "Icons",
"onClickDispatch": {
"type": "MENU_LIST_CLICKED",
"cmf": {
"routerPush": "/Icons"
}
}
}
},
"props": {
Expand Down Expand Up @@ -98,7 +108,8 @@
"menu:List",
"menu:Dataviz",
"menu:DataGrid",
"menu:FacetedSearch"
"menu:FacetedSearch",
"menu:Icons"
]
},
"Layout#default": {
Expand Down Expand Up @@ -140,6 +151,10 @@
{
"path": "DataGrid",
"component": "DataGrid"
},
{
"path": "Icons",
"component": "Icons"
}
]
}
Expand Down
28 changes: 28 additions & 0 deletions tools/scripts-config-react-webpack/config/webpack.config.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
45 changes: 2 additions & 43 deletions tools/scripts-config-react-webpack/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const {
getSassLoaders,
getJSAndTSLoader,
getSassData,
getAssetsRules,
} = require('./webpack.config.common');

const INITIATOR_URL = process.env.INITIATOR_URL || '@@INITIATOR_URL@@';
Expand Down Expand Up @@ -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));
}
Expand Down Expand Up @@ -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: [
Expand Down
25 changes: 2 additions & 23 deletions tools/scripts-config-react-webpack/config/webpack.config.umd.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const {
getSassLoaders,
getJSAndTSLoader,
getSassData,
getAssetsRules,
} = require('./webpack.config.common');

cdn.configureTalendModules();
Expand Down Expand Up @@ -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 ...
Expand Down

0 comments on commit 2a8de8a

Please sign in to comment.