angular-webpack-transformer - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

output/utils/rules.d.ts

@@ -1,4 +0,4 @@
-import * as webpack from 'webpack';
-import { PreloaderHandlerCallback, RuleTestType } from './types';
+import * as webpack from "webpack";
+import { PreloaderHandlerCallback, RuleTestType } from "./types";
 export declare const find: (ruleType: RuleTestType, config: webpack.Configuration) => Array<webpack.RuleSetRule>;
 export declare const modifyOrAddLoader: (ruleTypes: RuleTestType[] | undefined, loaderName: string, callback: PreloaderHandlerCallback, config: webpack.Configuration) => void;

output/utils/rules.js

@@ -14,4 +14,4 @@ "use strict";
     return rules.filter((rule) => {
-        return ('object' == typeof rule &&
-            rule?.test?.toString() == new RegExp(ruleType, 'i').toString());
+        return ("object" == typeof rule &&
+            rule?.test?.toString() == new RegExp(ruleType, "i").toString());
     });
@@ -27,12 +27,27 @@ };
     for (let ruleType of ruleTypes) {
-        rules.push(...(0, exports.find)(ruleType, config));
+        let found = (0, exports.find)(ruleType, config);
+        if (!found.length) {
+            let rule = {
+                test: RegExp(ruleType, "i"),
+                rules: [
+                    {
+                        use: [],
+                    },
+                ],
+            };
+            config.module?.rules?.push(rule);
+            rules.push(rule);
+        }
+        else {
+            rules.push(...found);
+        }
     }
-    if (!rules.length) {
-        return;
-    }
     for (let ruleTest of rules) {
+        if (!ruleTest.rules) {
+            ruleTest.rules = [];
+        }
         for (let rule of ruleTest.rules) {
-            if ('object' == typeof rule && Array.isArray(rule?.use)) {
+            if ("object" == typeof rule && Array.isArray(rule?.use)) {
                 const loaders = rule?.use?.filter((use) => {
-                    return (('string' == typeof use &&
+                    return (("string" == typeof use &&
                         use
@@ -42,3 +57,3 @@ .trim()
                             .includes(loaderName.trim().toLocaleLowerCase())) ||
-                        ('object' == typeof use &&
+                        ("object" == typeof use &&
                             use.loader
@@ -52,5 +67,5 @@ ?.trim()
                         let indexOf = rule?.use.indexOf(loader);
-                        let _loader = 'string' == loader
+                        let _loader = "string" == loader
                             ? {
-                                loader: 'loaderName',
+                                loader: "loaderName",
                                 options: {},
@@ -57,0 +72,0 @@ }

output/utils/types.d.ts

@@ -6,4 +6,4 @@ import * as webpack from 'webpack';
     Sass = "\\.(?:sass)$",
-    Svg = "\\.(?:svg)$",
-    Html = "\\.(?:html)$"
+    Svg = "\\.svg$",
+    Html = "\\.html$"
 }
@@ -10,0 +10,0 @@ export declare type RuleTestType = RuleTestTypes & RegExp;

output/utils/types.js

@@ -9,5 +9,5 @@ "use strict";
     RuleTestTypes["Sass"] = "\\.(?:sass)$";
-    RuleTestTypes["Svg"] = "\\.(?:svg)$";
-    RuleTestTypes["Html"] = "\\.(?:html)$";
+    RuleTestTypes["Svg"] = "\\.svg$";
+    RuleTestTypes["Html"] = "\\.html$";
 })(RuleTestTypes = exports.RuleTestTypes || (exports.RuleTestTypes = {}));
 //# sourceMappingURL=types.js.map

package.json

 {
   "name": "angular-webpack-transformer",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "This plugin allows you to asynchronously change the configuration of the angular webpack",
@@ -5,0 +5,0 @@ "main": "output/index.js",

readme.md

@@ -16,3 +16,3 @@ # angular-webpack-transformer
 
-The **example** file provided below adds a **postcss-loader** and configures the **sass-loader** by adding the `additionalData` option:
+The **example** file provided below adds a **postcss-loader** and configures the **sass-loader** by adding the `additionalData` option and also add two new preloaders **svg-sprite-loader** and **svgo-loader** for generating `svg sprites`
 
@@ -29,3 +29,3 @@ ```js
 module.exports = async function (config, use) {
-    use(async config => {
+ use(async config => {
         return rules.modifyOrAddLoader([types.RuleTestTypes.Sass, types.RuleTestTypes.Scss, types.RuleTestTypes.Css], 'postcss-loader', (loader, rule) => {
@@ -55,2 +55,15 @@ if (loader) {
     });
+    use(async config => {
+        return rules.modifyOrAddLoader([types.RuleTestTypes.Svg], 'svg-sprite-loader', (loader, rule) => {
+            if (!loader) {
+                rule.push({
+                    loader: 'svg-sprite-loader',
+                    options: {
+                        symbolId: filePath => "app-" + path.basename(filePath, path.extname(filePath))
+                    }
+                });
+                rule.push('svgo-loader');
+            }
+        }, config);
+    });
 }
@@ -70,4 +83,5 @@ ```
 
-Please **note** that simply adding the `postcss` and `postcss-loader` to your configuration file is not enough. You must also ensure that they are installed in your project by running the command `"npm i postcss postcss-loader"`.  Once that is done, you can use the file `postcss.config.js` to customize your postcss plugins. For example, you can use this file to add plugins such as `autoprefixer` or `cssnano` to your project.
+Please **note** that simply adding the `postcss` and `postcss-loader`, `svg-sprite-loader`, `svgo-loader` to your configuration file is not enough. You must also ensure that they are installed in your project by running the command `"npm i postcss postcss-loader"`.  Once that is done, you can use the file `postcss.config.js` to customize your postcss plugins. For example, you can use this file to add plugins such as `autoprefixer` or `cssnano` to your project
 
+
 ```js
@@ -97,2 +111,34 @@ // postcss.config.js
 
+ and for the svgo plugin, you can create the `svgo.config.js` file in the root of the project:
+
+ ```js
+module.exports = {
+    datauri: 'enc', // 'base64' (default), 'enc' or 'unenc'.
+    js2svg: {
+        indent: 1, // string with spaces or number of spaces. 4 by default
+        pretty: false, // boolean, false by default
+    },
+    plugins: [
+        // set of built-in plugins enabled by default
+        'preset-default',
+
+        // or by expanded notation which allows to configure plugin
+        "removeTitle",
+        "removeDesc",
+        "removeEmptyAttrs",
+        "removeEmptyText",
+        "removeEmptyContainers",
+        "removeStyleElement",
+        "removeRasterImages",
+        "removeScriptElement", 
+        {
+            "name": "removeAttrs",
+            "params": {
+                attrs: '(fill|stroke|class|style|filter)' 
+            }
+        }
+    ]
+}
+ ```
+
 ## API 
@@ -118,3 +164,3 @@
     use(async config => {
-        return rules.modifyOrAddLoader([types.RuleTestTypes.Sass, types.RuleTestTypes.Scss, types.RuleTestTypes.Css], 'postcss-loader', (loader, rule) => {
+        return rules.modifyOrAddLoader([types.RuleTestType.Sass, types.RuleTestType.Scss, types.RuleTestType.Css], 'postcss-loader', (loader, rule) => {
             if (loader) {
@@ -121,0 +167,0 @@ return "postcss-loader";

src/utils/rules.ts

@@ -1,3 +0,3 @@
-import * as webpack from 'webpack';
-import { PreloaderHandlerCallback, RuleTestType } from './types';
+import * as webpack from "webpack";
+import { PreloaderHandlerCallback, RuleTestType } from "./types";
 
@@ -21,4 +21,4 @@ export const find = (
     return (
-      'object' == typeof rule &&
-      rule?.test?.toString() == new RegExp(ruleType, 'i').toString()
+      "object" == typeof rule &&
+      rule?.test?.toString() == new RegExp(ruleType, "i").toString()
     );
@@ -41,15 +41,29 @@ });
   const rules: Array<webpack.RuleSetRule> = [];
-
   for (let ruleType of ruleTypes) {
-    rules.push(...find(ruleType, config));
+    let found = find(ruleType, config);
+    if (!found.length) {
+      let rule = {
+        test: RegExp(ruleType, "i"),
+        rules: [
+          {
+            use: [],
+          },
+        ],
+      };
+      config.module?.rules?.push(rule);
+      rules.push(rule);
+    } else {
+      rules.push(...found);
+    }
   }
-  if (!rules.length) {
-    return;
-  }
+
   for (let ruleTest of rules) {
+    if (!ruleTest.rules) {
+      ruleTest.rules = [];
+    }
     for (let rule of ruleTest.rules as Array<webpack.RuleSetRule>) {
-      if ('object' == typeof rule && Array.isArray(rule?.use)) {
+      if ("object" == typeof rule && Array.isArray(rule?.use)) {
         const loaders = rule?.use?.filter((use) => {
           return (
-            ('string' == typeof use &&
+            ("string" == typeof use &&
               use
@@ -59,3 +73,3 @@ .trim()
                 .includes(loaderName.trim().toLocaleLowerCase())) ||
-            ('object' == typeof use &&
+            ("object" == typeof use &&
               use.loader
@@ -71,5 +85,5 @@ ?.trim()
             let _loader: webpack.RuleSetUseItem =
-              'string' == loader
+              "string" == loader
                 ? {
-                    loader: 'loaderName',
+                    loader: "loaderName",
                     options: {},
@@ -76,0 +90,0 @@ }

src/utils/types.ts

@@ -7,4 +7,4 @@ import * as webpack from 'webpack';
   Sass = '\\.(?:sass)$',
-  Svg = '\\.(?:svg)$',
-  Html = '\\.(?:html)$'
+  Svg = '\\.svg$',
+  Html = '\\.html$'
 } 
@@ -11,0 +11,0 @@

test/webpack.transformer.js

@@ -35,2 +35,16 @@ const { types, rules } = require('angular-webpack-transformer');
     });
+
+    use(async config => {
+        return rules.modifyOrAddLoader([types.RuleTestTypes.Svg], 'svg-sprite-loader', (loader, rule) => {
+            if (!loader) {
+                rule.push({
+                    loader: 'svg-sprite-loader',
+                    options: {
+                        symbolId: filePath => "app-" + path.basename(filePath, path.extname(filePath))
+                    }
+                });
+                rule.push('svgo-loader');
+            }
+        }, config);
+    });
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28306

12.37%

Lines of code

445

10.42%

Number of low quality alerts

1

-50%

Number of lines in readme file

180

34.33%

No dependency changes