ddapac-react - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

boilerplate/.eslintrc.js

@@ -53,2 +53,2 @@ module.exports = {
 	},
-};
+};

boilerplate/.storybook/main.js

 module.exports = {
     stories: ['../src/**/*.stories.tsx'],
     webpackFinal: async config => {
-        config.module.rules.push({
-          test: /\.(ts|tsx)$/,
-          loader: require.resolve('babel-loader'),
-        });
-        config.resolve.extensions.push('.ts', '.tsx');
+        //Storybook needs a portion of the webpack, but this is a commonJS module
+        //The webpack config is a typescript file and also an ES Module
+        //So we have to do some work to let node handle it
+
+        //First we have to load ESM so we can require ES Modules
+        require = require('esm')(module); 
+        //Then we register ts-node to Node, so that it can handle .ts files
+        require('ts-node').register()
+        //Finally we can bring that bad boy in
+        const webpack = require('../webpack.config.ts');
+        //Oddly it comes through as an object with default being the function
+        const webpackConfig = webpack.default('storybook');
+        //Now that we've got the package config lets take the two parts we need
+        config.module = webpackConfig.module;
+        config.resolve = webpackConfig.resolve;
+
         return config;
     },
 };

boilerplate/package.json

@@ -28,3 +28,3 @@ {
 		"start": "webpack-dev-server --env development --hot --open --color --compress",
-		"storybook": "start-storybook  -p 6006",
+		"storybook": "start-storybook -p 6006",
 		"test": "jest"
@@ -69,2 +69,3 @@ },
 		"eslint-plugin-react-hooks": "^2.5.1",
+		"esm": "^3.2.25",
 		"fork-ts-checker-webpack-plugin": "^4.0.5",
@@ -71,0 +72,0 @@ "fs": "^0.0.1-security",

boilerplate/tsconfig.json

 {
   "compilerOptions": {
-    /* Basic Options */
-    "target": "ES2019",                          /* Specify ECMAScript target version: 'ES3";(default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019";or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "allowJs": true,                       /* Allow javascript files to be compiled. */
-    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    "sourceMap": true,                     /* Generates corresponding '.map";file. */
-    "outDir": "./dist/",                        /* Redirect output structure to the directory. */
-    "removeComments": true,                /* Do not emit comments to output. */
-    "noEmit": true,                        /* Do not emit outputs. */
-    "strict": true,                           /* Enable all strict type-checking options. */
-
-    /* Additional Checks */
-    "noUnusedLocals": true,                /* Report errors on unused locals. */
-    "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    "skipLibCheck": true,                  /* Do not type check node module libraries */
-    "moduleResolution": "node",            /* Specify module resolution strategy: 'node";(Node.js) or 'classic";(TypeScript pre-1.6). */
-    "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
-    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    //Helps typescript understand your aliases
+    "target": "ES2019",
+    "module": "commonjs",
+    "allowJs": true,
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "./dist/",
+    "removeComments": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "baseUrl": "./src",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "paths": {
@@ -34,4 +29,4 @@ "utils": ["utils"],
       "Theme": ["App.theme.ts"]
-    },
+    }
   }
 }

boilerplate/webpack.config.ts

@@ -11,39 +11,17 @@ import path from 'path';
 import pwaManifest from './public/manifest';
+import tsconfig from './tsconfig.json';
 
+
 const config = (env: 'production' | 'development'): webpack.Configuration => {
 	const production = env === 'production';
 
-	const plugins = [
-		new CleanWebpackPlugin(),
-		//Inject the public html template
-		new HtmlWebpackPlugin({
-			template: 'public/index.html',
-			favicon: 'public/favicon.ico',
-		}),
+	//To save duplication across 3 files, we are using TSCONFIG.json to track our aliases
+	//as it's the only one we can't programatically fille
+	const webpackAliases: {[key: string]: string} = {};
+	const paths: {[key: string]: string[]} = tsconfig.compilerOptions.paths;
+	//For each tsconfig path, we need to resolve the absolute path from here.
+	Object.keys(paths).forEach(
+		key => (webpackAliases[key] = path.resolve(__dirname, `src/${paths[key][0]}`)),
+	);
 
-		//Generate our progressive web app manifest
-		new WebpackPwaManifest(pwaManifest),
-		//This isn't always necessary, but no harm in having an asset manifest file
-		//when it comes to code splitting / chunking and tracking of files
-		new ManifestPlugin({
-			fileName: 'asset-manifest.json',
-		}),
-		//Use Googles Workbox to generate a precaching Service Worker
-		new WorkboxPlugin.GenerateSW({
-			clientsClaim: true,
-			skipWaiting: true,
-			//Development builds can be way bigger but we still want the service
-			//worker to behave normally
-			maximumFileSizeToCacheInBytes: (production ? 2 : 10) * 1024 * 1024,
-		}),
-	];
-
-	if (!production) {
-		plugins.push(
-			//Add a seperate type checking process, as babel doesn't include this built in
-			//This means you'll see type errors but it won't crash the hot reloading
-			new ForkTsCheckerWebpackPlugin(),
-		);
-	}
-
 	return {
@@ -67,10 +45,3 @@ mode: env,
 			//Set new aliases for any major folders, and also add it to the tsconfig.json
-			alias: {
-				utils: path.resolve(__dirname, 'src/utils'),
-				components: path.resolve(__dirname, 'src/components'),
-				layouts: path.resolve(__dirname, 'src/layouts'),
-				routes: path.resolve(__dirname, 'src/routes.ts'),
-				StateProvider: path.resolve(__dirname, 'src/utils/StateProvider.tsx'),
-				Theme: path.resolve(__dirname, 'src/App.theme.ts'),
-			},
+			alias: webpackAliases,
 		},
@@ -106,3 +77,27 @@ module: {
 		},
-		plugins: plugins,
+		plugins: [
+			new CleanWebpackPlugin(),
+			//Inject the public html template
+			new HtmlWebpackPlugin({
+				template: 'public/index.html',
+				favicon: 'public/favicon.ico',
+			}),
+	
+			//Generate our progressive web app manifest
+			new WebpackPwaManifest(pwaManifest),
+			//This isn't always necessary, but no harm in having an asset manifest file
+			//when it comes to code splitting / chunking and tracking of files
+			new ManifestPlugin({
+				fileName: 'asset-manifest.json',
+			}),
+			//Use Googles Workbox to generate a precaching Service Worker
+			new WorkboxPlugin.GenerateSW({
+				clientsClaim: true,
+				skipWaiting: true,
+				//Development builds can be way bigger but we still want the service
+				//worker to behave normally
+				maximumFileSizeToCacheInBytes: (production ? 2 : 10) * 1024 * 1024,
+			}),
+			... production ? [] : [new ForkTsCheckerWebpackPlugin()]
+		],
 	};
@@ -109,0 +104,0 @@ };

package.json

 {
     "name": "ddapac-react",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "An npm installer for Deloitte Digital's React Boilerplate",
@@ -5,0 +5,0 @@ "files": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

812

increased by0.25%

Worsened metrics

Total package byte prevSize

199706

decreased by-0.49%

No dependency changes