refactor webpack config

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts

@@ -13,7 +13,6 @@ import { FilterType } from '../../../../search-service/filter-type.model';
 @Component({
   selector: 'ds-search-facet-option',
   styleUrls: ['./search-facet-option.component.scss'],
-  // templateUrl: './search-facet-option.component.html',
   templateUrl: './search-facet-option.component.html',
 })
 

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="outer-wrapper mantis">
+<div class="outer-wrapper">
     <ds-admin-sidebar></ds-admin-sidebar>
     <div class="inner-wrapper"  [@slideSidebarPadding]="{
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),

webpack/helpers.js

@@ -1,40 +1,72 @@
-const {
+const path = require('path');
-    join,
+const fs = require('fs');
-    resolve,
-    normalize,
-} = require('path');
 
 
-function root(path) {
+function root(relativePath) {
-    return resolve(__dirname, '..', path);
+  return path.resolve(__dirname, '..', relativePath);
 }
 
 // const theme = '';
 const theme = 'mantis';
 
-const themePath = normalize(join(__dirname, '..', 'themes', theme));
+const themePath = path.normalize(path.join(__dirname, '..', 'themes', theme));
 
 const globalCSSImports = [
-    resolve(__dirname, '..', 'src/styles/_variables.scss'),
+  path.resolve(__dirname, '..', 'src/styles/_variables.scss'),
-    resolve(__dirname, '..', 'src/styles/_mixins.scss'),
+  path.resolve(__dirname, '..', 'src/styles/_mixins.scss'),
 ];
 
 const themeReplaceOptions =
-        {
+  {
-            multiple: [
+    multiple: [
-                {
+      {
-                    search: '$themePath$/',
+        search: '$themePath$/',
-                    replace: (themePath.length ? themePath + '/' : ''),
+        replace: (themePath.length ? themePath + '/' : ''),
 
-                }
+      }
-            ]
+    ]
-        };
+  };
+
+const srcPath = root('src');
+
+const getThemedPath = (componentPath, ext) => {
+  const parsedPath = path.parse(componentPath);
+  const relativePath = path.relative(srcPath, parsedPath.dir);
+  return path.join(themePath, relativePath, `${parsedPath.name}.${ext}`);
+};
+
+const themedTest = (origPath, extension) => {
+  if (/\.component.ts$/.test(origPath)) { // only match components
+    const themedPath = getThemedPath(origPath, extension);
+    return fs.existsSync(themedPath);
+  } else {
+    return false;
+  }
+};
+
+const themedUse = (resource, extension) => {
+  const origPath = path.parse(resource);
+  const themedPath = getThemedPath(resource, extension);
+
+  return [
+    //'debug-loader',
+    {
+      loader: 'string-replace-loader',
+      options: {
+        search: `\.\/${origPath.name}\.${extension}`,
+        replace: themedPath,
+        flags: 'g'
+      }
+    }
+  ]
+};
 
 module.exports = {
-    root: root,
+  root: root,
-    join: join,
+  theme: theme,
-    theme: theme,
+  getThemedPath: getThemedPath,
-    themePath: themePath,
+  themedTest: themedTest,
-    globalCSSImports: globalCSSImports,
+  themedUse: themedUse,
-    themeReplaceOptions: themeReplaceOptions
+  globalCSSImports: globalCSSImports,
+  themeReplaceOptions: themeReplaceOptions
 };

webpack/webpack.common.js

@@ -1,23 +1,13 @@
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
-const fs = require('fs');
 const {
   root,
-  join,
   globalCSSImports,
   themeReplaceOptions,
-  theme,
+  themedTest,
-  themePath
+  themedUse
 } = require('./helpers');
 
-const srcPath = root('src');
-
-const getThemedPath = (componentPath, ext) => {
-  const parsedPath = path.parse(componentPath);
-  const relativePath = path.relative(srcPath, parsedPath.dir);
-  return path.join(themePath, relativePath, `${parsedPath.name}.${ext}`);
-};
-
 module.exports = {
   mode: 'development',
   devtool: 'source-map',
@@ -37,58 +27,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: (filePath) => {
+        test: (filePath) => themedTest(filePath, 'scss'),
-          if (/\.component.ts$/.test(filePath)) {
+        use: (info) => themedUse(info.resource, 'scss')
-            const themedStylePath = getThemedPath(filePath, 'scss');
-            return fs.existsSync(themedStylePath);
-          } else {
-            return false;
-          }
-        },
-        use: (info) => {
-          const parsedPath = path.parse(info.resource);
-          const themedStylePath = getThemedPath(info.resource, 'scss');
-          console.log('themedStylePath', themedStylePath);
-          return [
-            'debug-loader',
-            {
-              loader: 'string-replace-loader',
-              options: {
-                search: `\.\/${parsedPath.name}\.scss`,
-                replace: themedStylePath,
-                flags: 'g'
-              }
-
-            }
-          ]
-        }
       },
       {
-        test: (filePath) => {
+        test: (filePath) => themedTest(filePath, 'html'),
-          if (/\.component.ts$/.test(filePath)) {
+        use: (info) => themedUse(info.resource, 'html')
-            const themedTemplatePath = getThemedPath(filePath, 'html');
-            return fs.existsSync(themedTemplatePath);
-          } else {
-            return false;
-          }
-        },
-        use: (info) => {
-          const parsedPath = path.parse(info.resource);
-          const themedTemplatePath = getThemedPath(info.resource, 'html');
-
-          return [
-            'debug-loader',
-            {
-              loader: 'string-replace-loader',
-              options: {
-                search: `\.\/${parsedPath.name}\.html`,
-                replace: themedTemplatePath,
-                flags: 'g'
-              }
-
-            }
-          ]
-        }
       },
       {
         test: /\.ts$/,
@@ -182,14 +126,14 @@ module.exports = {
   },
   plugins: [
     new CopyWebpackPlugin([{
-      from: join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
+      from: path.join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
-      to: join('assets', 'fonts')
+      to: path.join('assets', 'fonts')
     }, {
-      from: join(__dirname, '..', 'resources', 'images'),
+      from: path.join(__dirname, '..', 'resources', 'images'),
-      to: join('assets', 'images')
+      to: path.join('assets', 'images')
     }, {
-      from: join(__dirname, '..', 'resources', 'i18n'),
+      from: path.join(__dirname, '..', 'resources', 'i18n'),
-      to: join('assets', 'i18n')
+      to: path.join('assets', 'i18n')
     }
     ])
   ]