From 4579e286d21d7b4aa4835783c9d24cf06353992d Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Mon, 1 Nov 2021 22:30:03 -0700 Subject: [PATCH] fix web components webpack integration docs (#20429) --- ...-9b0072b3-17e5-441c-bad4-32af33312546.json | 7 ++++ packages/web-components/package.json | 2 +- .../_docs/integrations/webpack.stories.mdx | 39 ++++++++++++------- yarn.lock | 28 ++++++------- 4 files changed, 46 insertions(+), 30 deletions(-) create mode 100644 change/@fluentui-web-components-9b0072b3-17e5-441c-bad4-32af33312546.json diff --git a/change/@fluentui-web-components-9b0072b3-17e5-441c-bad4-32af33312546.json b/change/@fluentui-web-components-9b0072b3-17e5-441c-bad4-32af33312546.json new file mode 100644 index 0000000000000..4ea8d71f5471d --- /dev/null +++ b/change/@fluentui-web-components-9b0072b3-17e5-441c-bad4-32af33312546.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix web components webpack integration docs and update the package dependencies", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 0dc0861a0a1c0..7ccf793df39c6 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -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" } diff --git a/packages/web-components/src/_docs/integrations/webpack.stories.mdx b/packages/web-components/src/_docs/integrations/webpack.stories.mdx index b67d8585da73c..d0a76df1b4740 100644 --- a/packages/web-components/src/_docs/integrations/webpack.stories.mdx +++ b/packages/web-components/src/_docs/integrations/webpack.stories.mdx @@ -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/). diff --git a/yarn.lock b/yarn.lock index 6183aaac42965..bd5023db157ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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"