spfx-fast-serve - npm Package Compare versions

Comparing version 1.10.1 to 1.10.2

package.json

 {
   "name": "spfx-fast-serve",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "author": "Sergei Sergeev (https://github.com/s-KaiNet)",
@@ -5,0 +5,0 @@ "description": "Improve your SharePoint Framework development by speeding up 'serve' command",

README.md

@@ -49,2 +49,3 @@ # SPFx Fast Serve Tool
 - live reloading (for hosted workbench as well)
+- debugging from VSCode with Chrome Debugger extension
 - doesn't mess up your default SPFx build. If you have troubles, simply switch back to regular `gulp serve`
@@ -54,9 +55,35 @@
 
-## Known issues
+## FAQs / known issues
 
-- you may loose formatting in your `package.json` and `gulpfile.js` because the tool doesn't respect original file formatting (tabs vs whitespace, size, etc.). You have to fix it afterwards, if needed.
+### 1. When I run `npm run serve` I see 
+> `ERROR in <Component>.tsx Cannot find module './<Component>.module.scss'`:
+
+![Error](img/missing-module-error.png)
+
+*a*. Try to explicitly change and then save any of `.tsx` files in the solution in order to trigger the build. Maybe the error will disappear automatically. If not, go to `#b`  
+
+*b*. Check that you use `styles` variable in `.tsx` file. For example, if you have `import styles from './<Component>.module.scss';` and you don't have usages of `styles` in your `<Component>.tsx`, you will see the error. Simply delete unused import. If it's not the case, goto `#c`.  
+
+*c*. Maybe you don't have `<Component>.module.scss.d.ts` which is generated automatically. Request generation by going to `<Component>.module.scss` and explicitly saving the file using `Ctrl+S` combination or just by changing something and saving. This should generate `<Component>.module.scss.d.ts` and fix the issue. If not, please raise an [issue](https://github.com/s-KaiNet/spfx-fast-serve/issues).
+
+### 2. After I applied `sfpx-fast-serve` tool I have formatting broken in `package.json` and `gulpfile.js`
+
+- `sfpx-fast-serve` patches those files and doesn't respect original file formatting (tabs vs whitespace, size, etc.). You have to fix it afterwards, if needed.
+
+### 3. I added a new dependency in my solution (or started using new import from "@microsoft/*" modules) and now I see some strange errors
+
 - every time you introduce a new dependency for your solution, you should re-run `npm run serve` command, so that it picks up all new dependencies correctly.
-- when you modify localization .js files, live reload doesn't work. You should reload manually
+
+### 4. When I modify localization files, live reload doesn't work
+
+- this scenario isn't supported, thus in that case you have to reload page manually
+
+### 5. I use custom loaders and / or webpack modifications in my `gulpfile.js`
+
 - if you use custom webpack loaders or other webpack modifications via `build.configureWebpack.mergeConfig` feature, you should manually apply them to `webpack.js` file created by the cli to make everything work
+  
+### 6. Does it support React Hot Module Replacement (aka HMR)?
 
+- HMR is not supported. I tried different things, but was not able to make it work. If you have ideas, please welcome to issues or PRs :)
+
 ## Manual merge warning
@@ -63,0 +90,0 @@

src/index.js

@@ -72,3 +72,3 @@ #!/usr/bin/env node
     }
-    package.scripts["serve"] = "gulp bundle --custom-serve && webpack-dev-server --mode development --config ./webpack.js --env.env=dev";
+    package.scripts["serve"] = "cross-env NODE_OPTIONS=--max_old_space_size=4096 gulp bundle --custom-serve && cross-env NODE_OPTIONS=--max_old_space_size=4096 webpack-dev-server --mode development --config ./webpack.js --env.env=dev";
 
@@ -75,0 +75,0 @@ fs.writeFileSync(packagePath, JSON.stringify(package, null, 2));

src/templates/dependecies.json

@@ -12,3 +12,4 @@ {
     "webpack-dev-server": "3.10.3",
-    "del": "5.1.0"
+    "del": "5.1.0",
+    "cross-env": "7.0.2"
 }

src/templates/webpack.js

@@ -1,8 +0,8 @@
-const path = require('path');
+const path = require("path");
 const webpack = require("webpack");
 const resolve = require("path").resolve;
-const CertStore = require('@microsoft/gulp-core-build-serve/lib/CertificateStore');
+const CertStore = require("@microsoft/gulp-core-build-serve/lib/CertificateStore");
 const CertificateStore = CertStore.CertificateStore || CertStore.default;
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const del = require('del');
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const del = require("del");
 const host = "https://localhost:4321";
@@ -33,2 +33,25 @@
 
+///
+// Removes *.module.scss.ts on the first execution in order prevent conflicts with *.module.scss.d.ts
+// generated by css-modules-typescript-loader
+///
+class ClearCssModuleDefinitionsPlugin {
+  constructor(options) {
+    this.options = options || {};
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap("FixStylesPlugin", stats => {
+      if (!this.options.deleted) {
+
+        setTimeout(() => {
+          del.sync(["src/**/*.module.scss.ts"]);
+        }, 3000);
+
+        this.options.deleted = true;
+      }
+    });
+  }
+}
+
 let baseConfig = {
@@ -39,3 +62,3 @@ target: "web",
   resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
+    extensions: [".ts", ".tsx", ".js"],
     modules: ["node_modules"]
@@ -48,3 +71,3 @@ },
         test: /\.tsx?$/,
-        loader: 'ts-loader',
+        loader: "ts-loader",
         options: {
@@ -83,3 +106,3 @@ transpileOnly: true,
           {
-            loader: 'css-loader'
+            loader: "css-loader"
           }
@@ -89,3 +112,5 @@ ]
       {
-        test: /\.scss$/,
+        test: function (fileName) {
+          return fileName.endsWith(".module.scss");   // scss modules support
+        },
         use: [
@@ -98,7 +123,9 @@ {
           },
-          'css-modules-typescript-loader',
+          "css-modules-typescript-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
-              modules: true
+              modules: {
+                localIdentName: "[local]_[hash:base64:8]"
+              }
             }
@@ -108,2 +135,17 @@ }, // translates CSS into CommonJS
         ]
+      },
+      {
+        test: function (fileName) {
+          return !fileName.endsWith(".module.scss") && fileName.endsWith(".scss");  // just regular .scss
+        },
+        use: [
+          {
+            loader: "@microsoft/loader-load-themed-styles",
+            options: {
+              async: true
+            }
+          },
+          "css-loader", // translates CSS into CommonJS
+          "sass-loader" // compiles Sass to CSS, using Node Sass by default
+        ]
       }
@@ -116,6 +158,7 @@ ]
     }),
+    new ClearCssModuleDefinitionsPlugin(),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-      'process.env.DEBUG': JSON.stringify(true),
-      'DEBUG': JSON.stringify(true)
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+      "process.env.DEBUG": JSON.stringify(true),
+      "DEBUG": JSON.stringify(true)
     })],
@@ -140,3 +183,3 @@ devServer: {
         target: host,
-        pathRewrite: { '^/lib': '/src' },
+        pathRewrite: { "^/lib": "/src" },
         secure: false
@@ -146,3 +189,3 @@ }
     headers: {
-      'Access-Control-Allow-Origin': '*',
+      "Access-Control-Allow-Origin": "*",
     },
@@ -157,6 +200,6 @@ https: {
 const createConfig = function () {
-  // remove old css module TypeScript definitions:
-  del.sync(["src/**/*.module.scss.ts"]);
+  // remove old css module TypeScript definitions
+  del.sync(["dist/*.*"]);
 
-  // we need only 'externals', 'output' and 'entry' from the original webpack config
+  // we need only "externals", "output" and "entry" from the original webpack config
   let originalWebpackConfig = require("./temp/_webpack_config.json");
@@ -163,0 +206,0 @@ baseConfig.externals = originalWebpackConfig.externals;

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

Total package byte prevSize

33466

increased by74.11%

Number of package files

11

increased by22.22%

Lines of code

372

increased by12.05%

Number of lines in readme file

119

increased by29.35%

No dependency changes