Skip to content
This repository was archived by the owner on Jul 10, 2024. It is now read-only.

chore: update webpack templates for all components #24

Merged
merged 4 commits into from
Mar 26, 2024
Merged

chore: update webpack templates for all components #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ca2fa3
chore: update webpack templates for all components
jimmyhchen Mar 25, 2024
4d5038a
Merge branch 'main' into jchen/update-webpack-script
jimmyhchen Mar 25, 2024
2c48d9e
chore: update yarn lock
omarkawach Mar 25, 2024
7a37d33
chore: addressed feedback
jimmyhchen Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 16 additions & 49 deletions packages/charts-components/templates/webpack/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Charts components ESM Webpack template
# Charts components Webpack template

📁 **[Click here to download this directory as a ZIP file](https://download-directory.github.io?url=https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/charts-components/templates/webpack)** 📁

Expand Down Expand Up @@ -50,77 +50,42 @@ npm run build
yarn build
```

## Bundling details

#### JS

We imported the components we need for the coding components by following [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript).
Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript).

```js
import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader";

defineChartsElements(window, {
resourcesUrl: "../arcgis-charts/"
});
// define custom elements in the browser, and load the assets from the CDN
defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.29/t9n" });
```

We use [`src/index.js`](./src/index.js) to load our data, define our custom elements, and utilize various kinds of properties in the editor. It is a must to define both the Charts elements.
Use [`src/index.js`](./src/index.js) to load the data, define custom elements, and utilize various kinds of properties in the editor. Both the Calcite and Charts elements must be defined.

#### CSS

You can find all the necessary styling in [`src/index.css`](./src/index.css).

#### HTML

The generation of our `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.
Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.

```js
// webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
plugins: [
new HtmlWebPackPlugin({
title: "Charts components",
new HtmlWebPackPlugin({
title: "Charts components Webpack template",
template: "./public/index.html",
filename: "./index.html",
chunksSortMode: "none",
meta: {
viewport:
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no",
},
templateContent: `
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="flex-container">
<div class="chart-container">
<arcgis-charts-bar-chart class="half-screen-chart"></arcgis-charts-bar-chart>
</div>
<div class="chart-container">
<arcgis-charts-bar-line-chart class="half-screen-chart"></arcgis-charts-bar-line-chart>
</div>
<div class="chart-container">
<arcgis-charts-box-plot class="half-screen-chart"></arcgis-charts-box-plot>
</div>
<div class="chart-container">
<arcgis-charts-histogram class="half-screen-chart"></arcgis-charts-histogram>
</div>
<div class="chart-container">
<arcgis-charts-line-chart class="half-screen-chart"></arcgis-charts-line-chart>
</div>
<div class="chart-container">
<arcgis-charts-pie-chart class="half-screen-chart"></arcgis-charts-pie-chart>
</div>
<div class="chart-container">
<arcgis-charts-scatter-plot class="half-screen-chart"></arcgis-charts-scatter-plot>
</div>
</div>
</body>
</html>`,
inlineSource: ".(css)$"
}),
],
...
]
};
```

Expand All @@ -136,4 +101,6 @@ For the webpack configuration file ([`webpack.config.js`](webpack.config.js))

[html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/)

[copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/)
[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/)

[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/)
6 changes: 4 additions & 2 deletions packages/charts-components/templates/webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"private": true,
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
"start": "webpack serve --mode development"
},
"dependencies": {
"@arcgis/charts-components": "~4.29.6",
Expand All @@ -13,9 +13,11 @@
},
"devDependencies": {
"css-loader": "^6.10.0",
"html-loader": "^5.0.0",
"html-webpack-plugin": "^5.6.0",
"mini-css-extract-plugin": "^2.7.6",
"source-map-loader": "5.0.0",
"style-loader": "3.3.4",
"terser-webpack-plugin": "^5.3.9",
"webpack": "^5.90.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.1"
Expand Down
15 changes: 15 additions & 0 deletions packages/charts-components/templates/webpack/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="icon" href="data:;base64,=" />
<title>Charts components webpack template</title>
</head>

<body>
<arcgis-charts-scatter-plot class="chart-container"></arcgis-charts-scatter-plot>
</body>

</html>
49 changes: 26 additions & 23 deletions packages/charts-components/templates/webpack/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,54 +12,57 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
entry: ["./src/index.css", "./src/index.js"],

entry: {
index: ["./src/index.css", "./src/index.js"]
},
node: false,
optimization: {
minimizer: [new TerserPlugin({ extractComments: false })]
},
output: {
filename: "[id][name].js",
chunkFilename: "[id][name].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "chunks/[id].js",
publicPath: "",
clean: true
},

devtool: "source-map",

devServer: {
static: {
directory: path.join(__dirname, "dist")
},
compress: true,
port: 9000
port: 8080
},
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"] // Collect CSS and insert them into the page
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: "Charts components Webpack template",
template: "./public/index.html",
filename: "./index.html",
chunksSortMode: "none",
meta: {
viewport: "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no"
},
templateContent: `
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<arcgis-charts-scatter-plot class="chart-container"></arcgis-charts-scatter-plot>
</body>
</html>`
inlineSource: ".(css)$"
}),
new MiniCssExtractPlugin({
filename: "[name].[chunkhash].css",
chunkFilename: "[id].css"
})
]
};
5 changes: 4 additions & 1 deletion packages/coding-components/templates/webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"private": true,
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
"start": "webpack serve --mode development"
},
"dependencies": {
"@arcgis/coding-components": "~4.29.6",
Expand All @@ -13,7 +13,10 @@
"devDependencies": {
"css-loader": "^6.10.0",
"html-webpack-plugin": "^5.6.0",
"mini-css-extract-plugin": "^2.7.6",
"source-map-loader": "5.0.0",
"style-loader": "3.3.4",
"terser-webpack-plugin": "^5.3.9",
"webpack": "^5.90.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.1"
Expand Down
18 changes: 18 additions & 0 deletions packages/coding-components/templates/webpack/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="icon" href="data:;base64,=" />
<title>Coding components webpack template</title>
</head>

<body>
<div class="editor-wrapper">
<arcgis-arcade-editor />
</div>
<calcite-scrim id="scrim" loading />
</body>

</html>
40 changes: 14 additions & 26 deletions packages/coding-components/templates/webpack/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Coding components ESM Webpack template
# Coding components Webpack template

📁 **[Click here to download this directory as a ZIP file](https://download-directory.github.io?url=https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/coding-components/templates/webpack)** 📁

Expand Down Expand Up @@ -54,7 +54,7 @@ yarn build

Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript).

```
```js
import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";

Expand All @@ -76,37 +76,23 @@ You can find all the necessary styling in [`src/index.css`](./src/index.css). Im

#### HTML

The generation of our `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.
Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.

```
```js
// webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
plugins: [
new HtmlWebPackPlugin({
title: "Coding components",
favicon: "./src/icons/favicon.png",
new HtmlWebPackPlugin({
title: "Coding components Webpack template",
template: "./public/index.html",
filename: "./index.html",
chunksSortMode: "none",
meta: {
viewport:
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no",
},
templateContent: `
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="editor-wrapper">
<arcgis-arcade-editor />
</div>
<calcite-scrim id="scrim" loading></calcite-scrim>
</body>
</html>`,
inlineSource: ".(css)$"
}),
],
...
]
};
```

Expand All @@ -124,4 +110,6 @@ For the webpack configuration file ([`webpack.config.js`](webpack.config.js))

[html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/)

[copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/)
[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/)

[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/)
Loading