From dd608be936391d1e375dec19fdc963bf30ec1c91 Mon Sep 17 00:00:00 2001
From: Kai Eichinger <k.eichinger@21torr.com>
Date: Fri, 24 May 2024 08:58:01 +0200
Subject: [PATCH 1/3] Add common Webpack Build Config for NextJS projects and
 Storybook for a shared SVGR integration.

---
 CHANGELOG.md                 |  6 +++++
 finalize-build.mjs           |  4 +++
 src/build-config/webpack.cjs | 48 ++++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 src/build-config/webpack.cjs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f582ec..6ecb343 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+2.3.0
+=====
+
+* (feature) Add common Webpack Build Config for NextJS projects and Storybook for a shared SVGR integration. 
+
+
 2.2.1
 =====
 
diff --git a/finalize-build.mjs b/finalize-build.mjs
index 085523b..c1a8413 100644
--- a/finalize-build.mjs
+++ b/finalize-build.mjs
@@ -6,7 +6,11 @@ console.log("");
 
 console.log("Copying additional files");
 
+
 await Promise.all(
+	[
+		copy("src/build-config/webpack.cjs", `dist/build-config/webpack.cjs`),
+	],
 	[
 		"CHANGELOG.md",
 		"README.md",
diff --git a/src/build-config/webpack.cjs b/src/build-config/webpack.cjs
new file mode 100644
index 0000000..1cdd6ab
--- /dev/null
+++ b/src/build-config/webpack.cjs
@@ -0,0 +1,48 @@
+exports.registerSvgWebpackLoader = (config) =>
+{
+	// Grab the existing rule that handles SVG imports
+	const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg") && rule.resourceQuery?.toString() !== "/raw/");
+	// Modify the file loader rule to ignore *.svg, since we have it handled now.
+	fileLoaderRule.exclude = /\.svg$/i;
+
+	// Convert all other *.svg imports to React components
+	config.module.rules.push({
+		test: /\.svg$/i,
+		issuer: { not: /\.(css|scss|sass)$/ },
+		resourceQuery: { not: /url/ }, // exclude if *.svg?url
+		use: [{
+			loader: "@svgr/webpack",
+			options: {
+				dimensions: true,
+				svgo: true,
+				svgoConfig: {
+					plugins: [
+						{
+							name: "preset-default",
+							params: {
+								overrides: {
+									// ensure unique IDs when embedding multiple times
+									cleanupIds: false,
+									// don't remove the viewbox, to avoid scaling issues
+									removeViewBox: false,
+								},
+							},
+						},
+						{
+							name: "removeAttrs",
+							params: {
+								attrs: "data-.*",
+							},
+						},
+						{
+							// ensure unique IDs when embedding multiple times
+							name: "prefixIds",
+						},
+					],
+				},
+			},
+		}],
+	});
+
+	return config;
+};

From 6a383480713191e1d07ca090748e3a7e1bdf9aa1 Mon Sep 17 00:00:00 2001
From: Kai Eichinger <k.eichinger@21torr.com>
Date: Fri, 24 May 2024 08:58:11 +0200
Subject: [PATCH 2/3] Upgrade dependencies + add SVGR as optional dependency

---
 package.json | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index b796765..1f3e69d 100644
--- a/package.json
+++ b/package.json
@@ -20,24 +20,25 @@
 		"xtend": "^4.0.2"
 	},
 	"optionalDependencies": {
-		"next": "^14.1",
-		"react": "^18.0",
-		"react-dom": "^18.0"
+		"@svgr/webpack": "^8.1.0",
+		"next": "^14.2.3",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
-		"@types/node": "^18.15.1",
-		"@types/qunit": "^2.19.4",
-		"@types/react": "^18.0.28",
-		"@types/react-dom": "^18.0.11",
-		"@types/xtend": "^4.0.4",
-		"fs-extra": "^11.1.0",
+		"@types/node": "^18.19.33",
+		"@types/qunit": "^2.19.10",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@types/xtend": "^4.0.6",
+		"fs-extra": "^11.2.0",
 		"next": "^14.1.3",
 		"prettier-package-json": "^2.8.0",
-		"publint": "^0.2.7",
-		"qunit": "^2.19.4",
+		"publint": "^0.2.8",
+		"qunit": "^2.20.1",
 		"react": "^18.0",
 		"react-dom": "^18.0",
-		"typescript": "^5.4.2"
+		"typescript": "^5.4.5"
 	},
 	"publishConfig": {
 		"access": "public"

From 228242a6e458adc83721627159052596fc1e4087 Mon Sep 17 00:00:00 2001
From: Kai Eichinger <k.eichinger@21torr.com>
Date: Fri, 24 May 2024 09:30:09 +0200
Subject: [PATCH 3/3] Use ESM instead of CJS

---
 .gitignore                                   | 1 +
 finalize-build.mjs                           | 2 +-
 src/build-config/{webpack.cjs => webpack.js} | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)
 rename src/build-config/{webpack.cjs => webpack.js} (95%)

diff --git a/.gitignore b/.gitignore
index 73d5936..aad5bc4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@
 *.d.ts
 *.js
 !/@types/*.d.ts
+!/src/build-config/*.js
 
 # don't ignore test files
 !/tests/**/*.js
diff --git a/finalize-build.mjs b/finalize-build.mjs
index c1a8413..d94e053 100644
--- a/finalize-build.mjs
+++ b/finalize-build.mjs
@@ -9,7 +9,7 @@ console.log("Copying additional files");
 
 await Promise.all(
 	[
-		copy("src/build-config/webpack.cjs", `dist/build-config/webpack.cjs`),
+		copy("src/build-config/webpack.js", `dist/build-config/webpack.js`),
 	],
 	[
 		"CHANGELOG.md",
diff --git a/src/build-config/webpack.cjs b/src/build-config/webpack.js
similarity index 95%
rename from src/build-config/webpack.cjs
rename to src/build-config/webpack.js
index 1cdd6ab..4dbcc93 100644
--- a/src/build-config/webpack.cjs
+++ b/src/build-config/webpack.js
@@ -1,4 +1,4 @@
-exports.registerSvgWebpackLoader = (config) =>
+export const registerSvgWebpackLoader = (config) =>
 {
 	// Grab the existing rule that handles SVG imports
 	const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg") && rule.resourceQuery?.toString() !== "/raw/");