Merge pull request #175 from 10up/feature/target-option

Feature/target option

packages/toolkit/README.md

@@ -552,6 +552,19 @@ Then you can instruct 10up-toolkit to use your app.js file and spin up a dev ser
 "start": "10up-toolkit start -i=src/app.js --dev-server",
 ```
 
+### Target
+> Released in 3.1.0
+
+The `--target` option can be used to override the default webpack target option.
+
+For instance:
+
+```
+10up-toolkit build --target=node
+```
+
+will target node.js instead of browsers. See [Webpack Target](https://webpack.js.org/configuration/target/) for possible values.
+
 ### Dev Server
 
 <blockquote>This option was added in 10up-toolkit 1.0.8</blockquote>

packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap

@@ -2274,3 +2274,219 @@ Object {
   "target": "browserslist:> 1%, Firefox ESR, last 2 versions, not ie <= 11, not ie_mob <=11",
 }
 `;
+
+exports[`webpack.config.js takes the --target option into account 1`] = `
+Object {
+  "devServer": Object {
+    "compress": true,
+    "contentBase": "public",
+    "port": 3000,
+  },
+  "devtool": "source-map",
+  "entry": Object {
+    "config-fake-module": Object {
+      "filename": "config-fake-module-dist.js",
+      "import": "./config-fake-module.js",
+      "library": Object {
+        "type": "commonjs2",
+      },
+    },
+    "main": Object {
+      "filename": "index.js",
+      "import": "./src/index.js",
+      "library": Object {
+        "type": "commonjs2",
+      },
+    },
+    "utils-fake-module": Object {
+      "filename": "utils-fake-module-dist.js",
+      "import": "./utils-fake-module.js",
+      "library": Object {
+        "type": "commonjs2",
+      },
+    },
+  },
+  "externals": Object {
+    "read-pkg": "commonjs2 read-pkg",
+    "read-pkg-up": "commonjs2 read-pkg-up",
+    "resolve-bin": "commonjs2 resolve-bin",
+  },
+  "mode": "development",
+  "module": Object {
+    "rules": Array [
+      Object {
+        "exclude": /node_modules\\\\/\\(\\?!\\(@10up\\\\/block-components\\)\\\\/\\)\\.\\*/,
+        "test": /\\^\\(\\?!\\.\\*\\\\\\.d\\\\\\.tsx\\?\\$\\)\\.\\*\\\\\\.\\[tj\\]sx\\?\\$/,
+        "use": Array [
+          "/node_modules/thread-loader/dist/cjs.js",
+          Object {
+            "loader": "/node_modules/babel-loader/lib/index.js",
+            "options": Object {
+              "babelrc": false,
+              "cacheDirectory": true,
+              "configFile": false,
+              "plugins": Array [
+                "/node_modules/react-refresh/babel.js",
+              ],
+              "presets": Array [
+                Array [
+                  "/packages/babel-preset-default/index.js",
+                  Object {
+                    "targets": Array [
+                      "> 1%",
+                      "Firefox ESR",
+                      "last 2 versions",
+                      "not ie <= 11",
+                      "not ie_mob <=11",
+                    ],
+                    "useBuiltIns": false,
+                    "wordpress": true,
+                  },
+                ],
+              ],
+              "sourceType": "unambiguous",
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.svg\\$/,
+        "use": Array [
+          "@svgr/webpack",
+          "url-loader",
+        ],
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "test": /\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/postcss-loader/dist/cjs.js",
+            "options": Object {
+              "postcssOptions": Object {
+                "config": "/config/postcss.config.js",
+              },
+            },
+          },
+        ],
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/postcss-loader/dist/cjs.js",
+            "options": Object {
+              "postcssOptions": Object {
+                "config": "/config/postcss.config.js",
+              },
+            },
+          },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\|svg\\|jpg\\|jpeg\\|png\\|giff\\|webp\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+        "type": "asset/resource",
+      },
+    ],
+  },
+  "optimization": Object {
+    "concatenateModules": false,
+    "minimizer": Array [
+      TerserPlugin: {"test":{},"extractComments":true,"parallel":true,"minimizer":{"options":{"parse":{"ecma":8},"compress":{"ecma":5,"warnings":false,"comparisons":false,"inline":2}}}},
+      ImageMinimizerPlugin: {"minimizer":[{"options":{"encodeOptions":{"mozjpeg":{"quality":100},"webp":{"lossless":1},"avif":{"cqLevel":0}}}}],"loader":true,"test":{},"deleteOriginalAssets":true},
+      ImageMinimizerPlugin: {"minimizer":{},"loader":true,"test":{},"deleteOriginalAssets":true},
+    ],
+    "runtimeChunk": "single",
+  },
+  "output": Object {
+    "path": "/dist",
+  },
+  "performance": Object {
+    "hints": "warning",
+    "maxAssetSize": 10240000,
+    "maxEntrypointSize": 40960000,
+  },
+  "plugins": Array [
+    HtmlWebpackPlugin: {},
+    ESLintWebpackPlugin: {"extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"fix":false,"lintDirtyModulesOnly":true},
+    MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"},
+    StylelintWebpackPlugin: {"extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":true,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"},
+    CleanExtractedDeps: {},
+    WebpackRemoveEmptyScriptsPlugin: {"enabled":true,"verbose":false,"extensions":{},"scriptExtensionsTest":{},"ignore":[]},
+    TenUpToolkitTscPlugin: {},
+    ReactRefreshPlugin: {"overlay":{"sockHost":"127.0.0.1","sockProtocol":"ws","sockPort":3000,"entry":"/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js","module":"/node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/index.js","sockIntegration":"wds"},"exclude":{},"include":{}},
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "lodash-es": "lodash",
+    },
+    "extensions": Array [
+      ".tsx",
+      ".ts",
+      ".js",
+    ],
+  },
+  "stats": Object {
+    "all": false,
+    "assets": true,
+    "errorDetails": true,
+    "errors": true,
+    "excludeAssets": /\\\\\\.\\(jpe\\?g\\|png\\|gif\\|svg\\|woff\\|woff2\\)\\$/i,
+    "moduleTrace": true,
+    "modules": true,
+    "performance": true,
+    "warnings": true,
+  },
+  "target": "node",
+}
+`;

packages/toolkit/config/__tests__/webpack.config.js

@@ -322,6 +322,34 @@ describe('webpack.config.js', () => {
 			webpackConfig = require('../webpack.config');
 		});
 
+		expect(webpackConfig).toMatchSnapshot();
+	});
+
+	it('takes the --target option into account', () => {
+		getBuildFilesMock.mockReturnValue({});
+		getPackageMock.mockReturnValue({
+			name: '@10up/component-library',
+			source: 'src/index.js',
+			main: 'dist/index.js',
+			exports: {
+				'.': './dist/index.js',
+				'./utils-fake-module': './dist/utils-fake-module-dist.js',
+				'./config-fake-module': './dist/config-fake-module-dist.js',
+			},
+			dependencies: {
+				'read-pkg': '^5.2.0',
+				'read-pkg-up': '^1.0.1',
+				'resolve-bin': '^0.4.0',
+			},
+		});
+
+		process.argv.push('--target=node');
+		let webpackConfig;
+		jest.isolateModules(() => {
+			// eslint-disable-next-line global-require
+			webpackConfig = require('../webpack.config');
+		});
+
 		expect(webpackConfig).toMatchSnapshot();
 		process.argv.pop();
 	});

packages/toolkit/config/webpack/target.js

@@ -1,3 +1,7 @@
-module.exports = ({ defaultTargets }) => {
+module.exports = ({ defaultTargets, packageConfig: { target } }) => {
+	if (target) {
+		return target;
+	}
+
 	return `browserslist:${defaultTargets.join(', ')}`;
 };

packages/toolkit/utils/__tests__/config.js

@@ -84,6 +84,7 @@ describe('getTenUpScriptsPackageBuildConfig', () => {
 			externals: ['read-pkg', 'read-pkg-up', 'resolve-bin'],
 			libraryName: 'componentLibrary',
 			packageType: 'all',
+			target: '',
 		});
 
 		getPackageMock.mockReset();
@@ -120,6 +121,7 @@ describe('getTenUpScriptsPackageBuildConfig', () => {
 			externals: ['read-pkg', 'read-pkg-up', 'resolve-bin'],
 			libraryName: 'myComponentLibrary',
 			packageType: 'all',
+			target: '',
 		});
 	});
 
@@ -150,6 +152,7 @@ describe('getTenUpScriptsPackageBuildConfig', () => {
 			externals: [],
 			libraryName: 'myComponentLibrary',
 			packageType: 'commonjs2',
+			target: '',
 		});
 
 		getPackageMock.mockReturnValue({
@@ -179,6 +182,7 @@ describe('getTenUpScriptsPackageBuildConfig', () => {
 			externals: [],
 			libraryName: 'myComponentLibrary',
 			packageType: 'commonjs2',
+			target: '',
 		});
 
 		process.argv.pop();
@@ -192,11 +196,13 @@ describe('getTenUpScriptsPackageBuildConfig', () => {
 			externals: [],
 			libraryName: 'myComponentLibrary',
 			packageType: 'commonjs2',
+			target: '',
 		});
 
 		process.argv.push('-i=src/index.umd.js');
 		process.argv.push('-o=dist/index.umd.js');
 		process.argv.push('--name=ComponentLibrary');
+		process.argv.push('--target=node');
 
 		expect(getTenUpScriptsPackageBuildConfig()).toEqual({
 			source: 'src/index.umd.js',
@@ -206,6 +212,7 @@ describe('getTenUpScriptsPackageBuildConfig', () => {
 			externals: [],
 			libraryName: 'ComponentLibrary',
 			packageType: 'commonjs2',
+			target: 'node',
 		});
 	});
 });

packages/toolkit/utils/config.js

@@ -196,6 +196,7 @@ const getTenUpScriptsPackageBuildConfig = () => {
 	const source = getArgFromCLI('-i') || getArgFromCLI('--input') || packageJson.source;
 	const main = getArgFromCLI('-o') || getArgFromCLI('--output') || packageJson.main;
 	const exports = packageJson.exports || {};
+	const target = getArgFromCLI('--target') || '';
 
 	let umd = false;
 	if (packageType === 'umd' || packageType === 'all') {
@@ -238,6 +239,7 @@ const getTenUpScriptsPackageBuildConfig = () => {
 		externals,
 		libraryName,
 		packageType,
+		target,
 	};
 };