Skip to content

Commit

Permalink
fix web components webpack integration docs (microsoft#20429)
Browse files Browse the repository at this point in the history
  • Loading branch information
chrisdholt authored and Marion Le Pontois committed Jan 17, 2022
1 parent 7ef94e5 commit 4579e28
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 30 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix web components webpack integration docs and update the package dependencies",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
2 changes: 1 addition & 1 deletion packages/web-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
"dependencies": {
"@microsoft/fast-colors": "^5.1.0",
"@microsoft/fast-element": "^1.6.0",
"@microsoft/fast-foundation": "^2.23.0",
"@microsoft/fast-foundation": "^2.24.0",
"@microsoft/fast-web-utilities": "^5.0.0",
"tslib": "^1.13.0"
}
Expand Down
39 changes: 24 additions & 15 deletions packages/web-components/src/_docs/integrations/webpack.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -75,46 +75,55 @@ You can learn more about `tsconfig.json` options in [the official TypeScript doc
Next, create a `webpack.config.js` file in the root of your project folder with the following source:

```js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require('path');

module.exports = function (env, { mode }) {
module.exports = function(env, { mode }) {
const production = mode === 'production';
return {
mode: production ? 'production' : 'development',
devtool: production ? 'source-map' : 'inline-source-map',
entry: {
app: ['./src/main.ts'],
app: ['./src/main.ts']
},
output: {
filename: 'bundle.js'
filename: 'bundle.js',
publicPath:'/'
},
resolve: {
extensions: ['.ts', '.js'],
modules: ['src', 'node_modules'],
modules: ['src', 'node_modules']
},
devServer: {
port: 9000,
historyApiFallback: true,
writeToDisk: true,
open: !process.env.CI,
lazy: false,
devMiddleware: {
writeToDisk: true,
},
static: {
directory: path.join(__dirname, './')
}
},
plugins: [new CleanWebpackPlugin()],
plugins: [
new CleanWebpackPlugin()
],
module: {
rules: [
{
test: /\.ts$/i,
use: [
{
loader: 'ts-loader',
},
loader: 'ts-loader'
}
],
exclude: /node_modules/,
},
],
},
};
};
exclude: /node_modules/
}
]
}
}
}
```

This setup uses `ts-loader` to process TypeScript. It will also enable both a production mode and a development mode that watches your source, recompiling and refreshing your browser as things change. You can read more about Webpack configuration in [the official Webpack documentation](https://webpack.js.org/).
Expand Down
28 changes: 14 additions & 14 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2655,18 +2655,18 @@
resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.3.tgz#5c46147401a823835a3833e3e18dae7f06016966"
integrity sha512-XDEnRYxPO5P3Jsizm4TCxLu1osS/uV3Lym6SfRhq2PxfXPTgEcdvOYDUXyV2drqebs3U5VQnOcYcJiSp73xhng==

"@microsoft/fast-element@^1.6.0", "@microsoft/fast-element@^1.6.1":
version "1.6.1"
resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.6.1.tgz#53cf476fc4cf3ea5ac90a51c1032b782f4ee9611"
integrity sha512-6wCL1yj5SSfqEq/GAkWeKdcE50NTx3VLINpSYG9cpxckgNGXHErsjDwbqwX3399e/O04BVwyIjILip11DFJP9w==
"@microsoft/fast-element@^1.6.0", "@microsoft/fast-element@^1.6.2":
version "1.6.2"
resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.6.2.tgz#414abc9f49fde85e12002e01025c5cc3dddc16ac"
integrity sha512-TrFOpe9k9xIK2iLfIG5T2+bavUAWBvAC/KQ/3ecFsK65l9PAZ/j3zlkyLxNrpIksFtUBkfVdV03kwFurZjqzKQ==

"@microsoft/fast-foundation@^2.23.0":
version "2.23.0"
resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.23.0.tgz#8bbba33920ee3a0b6a8709b29ede470844faa3c1"
integrity sha512-71/oN+Mi6ZTgDcJ9EJlCLoUOUN+YyUSkek2VIR1uP5ezYlGutVj5M/t3/XAtENSg59x2pQV/Jk9Ix1uxY1iGfw==
"@microsoft/fast-foundation@^2.24.0":
version "2.24.0"
resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.24.0.tgz#ab78f99e91cf96d5d440172eaa9b5eff25e15d51"
integrity sha512-rwUS/QAIaOJ5Uceo42JrgzIUhIAh305g0UZgCc633g4/OOVYa/zjRAG5QBxdrrjYN+U3mJyOWrsY/FJkJpEcQg==
dependencies:
"@microsoft/fast-element" "^1.6.1"
"@microsoft/fast-web-utilities" "^5.0.1"
"@microsoft/fast-element" "^1.6.2"
"@microsoft/fast-web-utilities" "^5.0.2"
"@microsoft/tsdoc-config" "^0.13.4"
tabbable "^5.2.0"
tslib "^1.13.0"
Expand All @@ -2678,10 +2678,10 @@
dependencies:
exenv-es6 "^1.0.0"

"@microsoft/fast-web-utilities@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.0.1.tgz#091f5f9400e8a77b655a2b6d36c41f2807532942"
integrity sha512-WvQXkNzlwh3n7tD0xb6seSy5U2rAnPE/+AFkJis56F7PE52qcd8PDqnbR1KIyshZlpnAm88cGCTRN6hxoi9ZoA==
"@microsoft/fast-web-utilities@^5.0.2":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.0.2.tgz#666631e38108893e4ec63cd8f52025f5f35a34a1"
integrity sha512-J8Wy64V1NWF/UjFJ1mvmJNNPChbWobsNkJ8xNaV5/M+VKOQEOheojrOS+RmOUG7DKTBlCLIbUvyXsj1YiCfwkA==
dependencies:
exenv-es6 "^1.0.0"

Expand Down

0 comments on commit 4579e28

Please sign in to comment.