Skip to content

Commit 86b8238

Browse files
zoran995zoran995
committed
feat: use terriajs svg-sprite plugin
1 parent ad79b9f commit 86b8238

File tree

6 files changed

+1607
-1078
lines changed

6 files changed

+1607
-1078
lines changed

‎buildprocess/configureWebpackForPlugins.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const path = require("path");
22
const fs = require("fs");
3-
43
/**
54
* RegExp pattern used for matching plugin package names for applying various rules.
65
*
@@ -17,7 +16,7 @@ function configureWebpackForPlugins(config) {
1716
}
1817

1918
/**
20-
* Creates a webpack rule for processing svg icons from terriajs plugins using `svg-sprite-loader`.
19+
* Creates a webpack rule for processing svg icons from terriajs plugins using terriajs `svg-sprite-loader`.
2120
* We check two things to decide whether to include an icon:
2221
* 1. The icon belongs to assets/icons folder
2322
* 2. assets/icons/../../package.json has a name field with `terriajs-plugin-` prefix
@@ -46,10 +45,9 @@ function createPluginIconsRule() {
4645
packageNames[svgPath] = packageName;
4746
return isTerriaJsPlugin;
4847
},
49-
loader: require.resolve("svg-sprite-loader"),
48+
loader: require.resolve("terriajs/buildprocess/svgs/svg-sprite-loader.js"),
5049
options: {
51-
esModule: false,
52-
symbolId: (svgPath) => {
50+
namespace: (svgPath) => {
5351
// Generate a symbolId by concatenating the package name and the icon name
5452
const packageName = packageNames[svgPath] || "terriajs-plugin-";
5553
const iconName = path.basename(svgPath, ".svg");

‎buildprocess/webpack.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@ const configureWebpackForTerriaJS = require("terriajs/buildprocess/configureWebp
22
const configureWebpackForPlugins = require("./configureWebpackForPlugins");
33
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
44
const path = require("path");
5+
const HtmlPlugin = require("html-webpack-plugin");
6+
var minimist = require("minimist");
57

68
/**
79
* Webpack config for building terriamap
810
*/
911
module.exports = function (devMode) {
12+
var args = minimist(process.argv.slice(2), {
13+
string: ["baseHref"],
14+
default: { baseHref: "/" }
15+
});
16+
1017
// Base configuration
1118
const config = {
1219
mode: devMode ? "development" : "production",
@@ -130,6 +137,13 @@ module.exports = function (devMode) {
130137
new MiniCssExtractPlugin({
131138
filename: "TerriaMap.css",
132139
ignoreOrder: true
140+
}),
141+
new HtmlPlugin({
142+
filename: path.resolve(__dirname, "..", "wwwroot", "index.html"),
143+
template: path.resolve(__dirname, "..", "wwwroot", "index.ejs"),
144+
templateParameters: {
145+
baseHref: args.baseHref
146+
}
133147
})
134148
],
135149
resolve: {

‎gulpfile.js‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -68,26 +68,9 @@ gulp.task("write-version", function (done) {
6868
done();
6969
});
7070

71-
gulp.task("render-index", function renderIndex(done) {
72-
var ejs = require("ejs");
73-
var minimist = require("minimist");
74-
// Arguments written in skewer-case can cause problems (unsure why), so stick to camelCase
75-
var options = minimist(process.argv.slice(2), {
76-
string: ["baseHref"],
77-
default: { baseHref: "/" }
78-
});
79-
80-
var index = fs.readFileSync("wwwroot/index.ejs", "utf8");
81-
var indexResult = ejs.render(index, { baseHref: options.baseHref });
82-
83-
fs.writeFileSync(path.join("wwwroot", "index.html"), indexResult);
84-
done();
85-
});
86-
8771
gulp.task(
8872
"build-app",
8973
gulp.parallel(
90-
"render-index",
9174
gulp.series(
9275
"check-terriajs-dependencies",
9376
"write-version",
@@ -107,7 +90,6 @@ gulp.task(
10790
gulp.task(
10891
"release-app",
10992
gulp.parallel(
110-
"render-index",
11193
gulp.series(
11294
"check-terriajs-dependencies",
11395
"write-version",
@@ -130,17 +112,9 @@ gulp.task(
130112
)
131113
);
132114

133-
gulp.task(
134-
"watch-render-index",
135-
gulp.series("render-index", function watchRenderIndex() {
136-
gulp.watch(["wwwroot/index.ejs"], gulp.series("render-index"));
137-
})
138-
);
139-
140115
gulp.task(
141116
"watch-app",
142117
gulp.parallel(
143-
"watch-render-index",
144118
gulp.series("check-terriajs-dependencies", function watchApp(done) {
145119
var fs = require("fs");
146120
var watchWebpack = require("terriajs/buildprocess/watchWebpack");
@@ -287,10 +261,5 @@ gulp.task("terriajs-server", terriajsServerGulpTask(3001));
287261
gulp.task("build", gulp.series("copy-terriajs-assets", "build-app"));
288262
gulp.task("release", gulp.series("copy-terriajs-assets", "release-app"));
289263
gulp.task("watch", gulp.parallel("watch-terriajs-assets", "watch-app"));
290-
// Run render-index before starting terriajs-server because terriajs-server won't
291-
// start if index.html isn't present
292-
gulp.task(
293-
"dev",
294-
gulp.parallel(gulp.series("render-index", "terriajs-server"), "watch")
295-
);
264+
gulp.task("dev", gulp.parallel("watch", "terriajs-server"));
296265
gulp.task("default", gulp.series("lint", "build"));

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
"@typescript-eslint/parser": "^8.24.0",
4949
"babel-loader": "^9.2.1",
5050
"css-loader": "^7.1.2",
51-
"ejs": "^3.1.10",
5251
"eslint": "^8.57.1",
5352
"eslint-config-prettier": "^9.1.0",
5453
"eslint-plugin-react": "^7.37.4",
@@ -58,6 +57,7 @@
5857
"fork-ts-checker-webpack-plugin": "^9.0.2",
5958
"fs-extra": "^7.0.1",
6059
"gulp": "^5.0.0",
60+
"html-webpack-plugin": "^5.6.3",
6161
"husky": "^8.0.3",
6262
"is-subdir": "^1.2.0",
6363
"json5": "^2.1.0",
@@ -74,7 +74,7 @@
7474
"sass": "^1.81.0",
7575
"sass-loader": "^16.0.3",
7676
"style-loader": "^4.0.0",
77-
"svg-sprite-loader": "^6.0.11",
77+
"svg-sprite": "^2.0.4",
7878
"terriajs": "8.10.0",
7979
"terriajs-cesium": "8.0.2",
8080
"terriajs-plugin-api": "0.0.1-alpha.17",

‎wwwroot/index.ejs‎

Lines changed: 98 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,108 @@
11
<!DOCTYPE html>
22
<html lang="en" class="terria">
3-
<head>
4-
<base href="<%= baseHref %>">
5-
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
7-
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
8-
<meta name="description" content="A web map built on Terria Map">
9-
<meta name="apple-mobile-web-app-capable" content="yes">
3+
<head>
4+
<base href="<%= baseHref %>" />
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
7+
<!-- Use Chrome Frame in IE -->
8+
<meta
9+
name="viewport"
10+
content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
11+
/>
12+
<meta name="description" content="A web map built on Terria Map" />
13+
<meta name="apple-mobile-web-app-capable" content="yes" />
1014

11-
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
12-
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
13-
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
14-
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
15-
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
16-
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
17-
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
18-
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
19-
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
20-
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
21-
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
22-
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
23-
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
24-
<link rel="manifest" href="favicons/manifest.json">
25-
<meta name="msapplication-TileColor" content="#282D32">
26-
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
27-
<meta name="theme-color" content="#282D32">
15+
<link
16+
rel="apple-touch-icon"
17+
sizes="57x57"
18+
href="favicons/apple-icon-57x57.png"
19+
/>
20+
<link
21+
rel="apple-touch-icon"
22+
sizes="60x60"
23+
href="favicons/apple-icon-60x60.png"
24+
/>
25+
<link
26+
rel="apple-touch-icon"
27+
sizes="72x72"
28+
href="favicons/apple-icon-72x72.png"
29+
/>
30+
<link
31+
rel="apple-touch-icon"
32+
sizes="76x76"
33+
href="favicons/apple-icon-76x76.png"
34+
/>
35+
<link
36+
rel="apple-touch-icon"
37+
sizes="114x114"
38+
href="favicons/apple-icon-114x114.png"
39+
/>
40+
<link
41+
rel="apple-touch-icon"
42+
sizes="120x120"
43+
href="favicons/apple-icon-120x120.png"
44+
/>
45+
<link
46+
rel="apple-touch-icon"
47+
sizes="144x144"
48+
href="favicons/apple-icon-144x144.png"
49+
/>
50+
<link
51+
rel="apple-touch-icon"
52+
sizes="152x152"
53+
href="favicons/apple-icon-152x152.png"
54+
/>
55+
<link
56+
rel="apple-touch-icon"
57+
sizes="180x180"
58+
href="favicons/apple-icon-180x180.png"
59+
/>
60+
<link
61+
rel="icon"
62+
type="image/png"
63+
sizes="192x192"
64+
href="favicons/android-icon-192x192.png"
65+
/>
66+
<link
67+
rel="icon"
68+
type="image/png"
69+
sizes="32x32"
70+
href="favicons/favicon-32x32.png"
71+
/>
72+
<link
73+
rel="icon"
74+
type="image/png"
75+
sizes="96x96"
76+
href="favicons/favicon-96x96.png"
77+
/>
78+
<link
79+
rel="icon"
80+
type="image/png"
81+
sizes="16x16"
82+
href="favicons/favicon-16x16.png"
83+
/>
84+
<link rel="manifest" href="favicons/manifest.json" />
85+
<meta name="msapplication-TileColor" content="#282D32" />
86+
<meta
87+
name="msapplication-TileImage"
88+
content="favicons/ms-icon-144x144.png"
89+
/>
90+
<meta name="theme-color" content="#282D32" />
2891

2992
<title>Terria Map</title>
30-
<link rel="stylesheet" type="text/css" href="build/TerriaMap.css">
3193

3294
<!-- Leaflet -->
33-
<script>L_PREFER_CANVAS = true;</script>
34-
</head>
95+
<script>
96+
L_PREFER_CANVAS = true;
97+
</script>
98+
</head>
3599

36-
<body>
100+
<body>
101+
<% if (typeof htmlWebpackPlugin !== 'undefined' &&
102+
htmlWebpackPlugin.options.sprites) { %> <% for (var spriteName in
103+
htmlWebpackPlugin.options.sprites) { %> <%=
104+
htmlWebpackPlugin.options.sprites[spriteName] %> <% } %> <% } %>
37105

38-
<div id='ui'></div>
39-
<script src="build/TerriaMap.js"></script>
40-
</body>
106+
<div id="ui"></div>
107+
</body>
41108
</html>

0 commit comments

Comments
 (0)