@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/webpack.config.js

@@ -1,26 +1,66 @@
-const path = require('path');
-const fs = require('fs');
-const cssnano = require('cssnano');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+/** eslint-env node */
 
-const isProduction = (process.env.NODE_ENV === 'production');
+import { readdirSync, statSync } from 'node:fs';
+import { join as joinPath, dirname as parseDirname, resolve as resolvePath } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-/** @return {Object} */
-function getComponentsConfig() {
-  const DEST = (isProduction ? 'dist' : 'test/dist');
+import * as eta from 'eta';
+import sass from 'sass';
+import TerserPlugin from 'terser-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+
+/** @typedef {import('webpack').Configuration} WebpackConfiguration */
+/** @typedef {import('webpack-dev-server').Configuration} DevServerConfiguration */
+
+// eslint-disable-next-line no-underscore-dangle
+const __dirname = parseDirname(fileURLToPath(import.meta.url));
+
+/**
+ * @param {Record<string,string[]>} object
+ * @param {string} key
+ * @param {string} entry
+ * @return {void}
+ */
+function addEntry(object, key, entry) {
+  if (!object[key]) {
+    object[key] = [entry];
+  } else if (!object[key].includes(entry)) {
+    object[key].push(entry);
+  }
+}
+
+/**
+ * @param {Object<string,string>} env
+ * @return {Object}
+ */
+function getComponentsConfig(env) {
+  const isProduction = env.prod != null || (process.env.NODE_ENV === 'production');
+  const DEST = (isProduction ? 'dist/full' : 'test/full');
   return {
     entry: {
       materialdesignweb: [
-        path.resolve(__dirname, './index.js'),
-        path.resolve(__dirname, './_index.scss'),
+        resolvePath(__dirname, './index.js'),
+        resolvePath(__dirname, './index.scss'),
       ],
     },
     mode: process.env.NODE_ENV || 'development',
-    devtool: isProduction ? undefined : 'nosources-source-map',
+    devtool: 'nosources-source-map',
+    optimization: {
+      usedExports: false,
+    },
     output: {
-      filename: '[name].min.js',
-      path: path.resolve(__dirname, DEST),
+      filename: 'materialdesignweb.min.js',
+      path: resolvePath(__dirname, DEST),
     },
+    plugins: [
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        openAnalyzer: false,
+        generateStatsFile: false,
+        defaultSizes: 'gzip',
+        logLevel: 'error',
+      }),
+    ],
     module: {
       rules: [{
         test: /\.js$/,
@@ -36,113 +76,229 @@ function getComponentsConfig() {
       }, {
         test: /\.scss$/,
         use: [
-          'file-loader?name=[name].min.css',
+          'file-loader?name=materialdesignweb.min.css',
           'extract-loader',
           'css-loader?import=false',
+          'clean-css-loader?{"level":{2:{"restructureRules":true}}}',
           {
-            loader: 'postcss-loader',
+            loader: 'sass-loader',
             options: {
-              plugins: () => [
-                cssnano(),
-              ],
+              implementation: sass,
             },
           },
-          'sass-loader',
         ],
       }],
     },
-    plugins: [
-      new UglifyJSPlugin(),
-    ],
   };
 }
 
-/** @return {Object} */
-function getDocsConfig() {
-  const plugins = [];
-  if (isProduction) {
-    plugins.push(new UglifyJSPlugin({ sourceMap: true }));
+/**
+ * @param {Object<string,string>} env
+ * @return {WebpackConfiguration}
+ */
+export default function getDocsConfig(env) {
+  const isProduction = env.prod != null || (process.env.NODE_ENV === 'production');
+  const DEST = (isProduction ? 'dist/docs' : 'test/docs');
+  const plugins = [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      generateStatsFile: false,
+      defaultSizes: 'gzip',
+      logLevel: 'error',
+    }),
+  ];
+  /** @type {Record<string, string[]>} */
+  const entries = {};
+  for (const folder of ['.', 'pwa', 'pages', 'themes']) {
+    const folderPath = joinPath('./docs', folder);
+    for (const filename of readdirSync(folderPath)) {
+      if (filename[0] === '_') {
+        continue;
+      }
+      if (filename.endsWith('.pug')) continue;
+      if (statSync(joinPath(folderPath, filename)).isDirectory()) {
+        continue;
+      }
+      const noExt = filename.slice(0, filename.lastIndexOf('.'));
+      const fullPath = resolvePath(folderPath, filename);
+      addEntry(entries, `${noExt}`, fullPath);
+    }
   }
-  const entries = {
-    prerender: ['./docs/src/prerender.js'],
-    index: ['./docs/src/index.pug', './docs/src/index.js'],
-    docs: ['./docs/src/docs.scss'],
-    theming: ['./docs/src/theming.scss'],
-    components: ['./docs/src/components.scss'],
-    'theming.ie11': ['./docs/src/theming.ie11.scss'],
+
+  const etaLoader = {
+    loader: 'html-loader',
+    options: {
+      minimize: {
+        collapseBooleanAttributes: true,
+        minifyCSS: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+      },
+      sources: false,
+      preprocessor(content, loaderContext) {
+        return eta.render(content, {}, {
+          cache: false,
+          filename: loaderContext.resourcePath,
+          plugins: [{
+            processTemplate: (str, config) => {
+              loaderContext.addDependency(config.filename);
+              return str;
+            },
+          }],
+        });
+      },
+    },
   };
-  fs.readdirSync('./docs/src/components/')
-    .forEach((filename) => {
-      const noExt = filename.substring(0, filename.lastIndexOf('.'));
-      if (!entries[`${noExt}`]) {
-        entries[`${noExt}`] = [];
-      }
-      entries[`${noExt}`].push(`./docs/src/components/${filename}`);
-    });
 
-  const DEST = (isProduction ? 'docs' : 'test/docs');
-  return {
+  let port = Number.parseInt(env.port ?? process.env.port, 10);
+  if (Number.isNaN(port)) {
+    port = 8080;
+  }
+
+  /** @type {WebpackConfiguration & {devServer: DevServerConfiguration}} */
+  const webpackConfig = {
     entry: entries,
+    context: resolvePath(__dirname, 'docs'),
     devtool: isProduction ? 'source-map' : 'nosources-source-map',
-    mode: process.env.NODE_ENV || 'development',
+    mode: isProduction ? 'production' : 'development',
     devServer: {
-      contentBase: path.resolve(__dirname, DEST),
+      host: '0.0.0.0',
+      port,
+      // static: resolvePath(__dirname, DEST),
+      compress: true,
+      hot: false,
+      liveReload: false,
+      client: false,
     },
     output: {
       filename: '[name].min.js',
-      path: path.resolve(__dirname, DEST),
+      chunkFilename: '[name].min.js',
+      path: resolvePath(__dirname, DEST),
+      clean: true,
+    },
+    optimization: {
+      minimize: isProduction,
+      minimizer: [new TerserPlugin({
+        extractComments: false,
+      })],
+      usedExports: true,
+      splitChunks: {
+        chunks: 'all',
+        cacheGroups: {
+          framework: {
+            test(module, chunks) {
+              if (module && module.resource && /prerender/.test(module.resource)) {
+                return false;
+              }
+              /** @type {import('webpack').ChunkGraph} */
+              const { chunkGraph } = chunks;
+
+              if (chunkGraph && [...chunkGraph.getModuleChunksIterable(module)]?.some((chunk) => chunk.name.match(/prerender/))) {
+                return false;
+              }
+              if (module && module.resource && /[/\\]docs[/\\]/.test(module.resource)) {
+                return false;
+              }
+              if (module && module.resource && /[/\\](components|core|adapters)[/\\]/.test(module.resource)) {
+                return true;
+              }
+              return false;
+            },
+            name: 'entire-framework',
+            minSize: 0,
+            minChunks: 1,
+            priority: 20,
+            chunks: 'all',
+            reuseExistingChunk: true,
+          },
+          default: {
+            test(module, chunks) {
+              if (module && module.resource && /prerender/.test(module.resource)) {
+                return false;
+              }
+              /** @type {import('webpack').ChunkGraph} */
+              const { chunkGraph } = chunks;
+              if (chunkGraph && [...chunkGraph.getModuleChunksIterable(module)]?.some((chunk) => chunk.name.match(/prerender/))) {
+                return false;
+              }
+              if (module && module.resource && /[/\\]docs[/\\]/.test(module.resource)) {
+                return true;
+              }
+              return false;
+            },
+            name: 'docs.common',
+            minSize: 0,
+            minChunks: 2,
+            priority: 0,
+            chunks: 'all',
+            reuseExistingChunk: true,
+          },
+        },
+      },
     },
     module: {
       rules: [{
         test: /\.js$/,
+        resolve: { fullySpecified: false },
         exclude: /(node_modules|bower_components)/,
-        use: {
+        use: [{
           loader: 'babel-loader',
           options: {
-            presets: [
-              ['@babel/preset-env'],
+            presets: ['@babel/preset-env'],
+            plugins: [
+              '@babel/plugin-proposal-optional-chaining',
+              '@babel/plugin-proposal-class-properties',
+              '@babel/plugin-proposal-private-methods',
+              '@babel/plugin-proposal-private-property-in-object',
             ],
           },
-        },
+        }],
       }, {
         test: /\.scss$/,
         use: [
           'file-loader?name=[name].min.css',
           'extract-loader',
-          'css-loader?import=false',
+          { loader: 'css-loader', options: { sourceMap: false } },
           {
             loader: 'postcss-loader',
             options: {
-              plugins: () => [
-                cssnano(),
-              ],
+              sourceMap: false,
+              postcssOptions: {
+                plugins: ['cssnano'],
+              },
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: false,
+              implementation: sass,
             },
           },
-          'sass-loader',
         ],
       }, {
-        test: /\.pug$/,
+        test: /\.eta$/,
         use: [
-          'file-loader?name=[name].html',
+          'file-loader?&name=[name].html',
           'extract-loader',
-          'html-loader',
-          'pug-html-loader',
+          etaLoader,
         ],
       }],
     },
     plugins,
   };
+  return webpackConfig;
 }
 
 /**
- * @param {Object} env
- * @return {Object}
+ * @param {Object<string,string>} env
+ * @return {WebpackConfiguration}
  */
-function makeWebPackConfig(env = {}) {
-  if (env.target === 'docs') {
-    return getDocsConfig();
+export function makeWebPackConfig(env = {}) {
+  const target = env.target || process.env.target;
+  if (target === 'docs') {
+    return getDocsConfig(env);
   }
-  return getComponentsConfig();
+  return getComponentsConfig(env);
 }
-
-module.exports = makeWebPackConfig;

package/_index.scss

@@ -1,4 +0,0 @@
-@import './components/all-components.scss';
-@import './components/theming/theming.scss';
-
-@include buildMDWThemes();

package/components/all-components.scss

@@ -1,21 +0,0 @@
-@import './bottomnav/style.scss';
-@import './button/style.scss';
-@import './card/style.scss';
-@import './datatable/style.scss';
-@import './dialog/style.scss';
-@import './divider/style.scss';
-@import './elevation/style.scss';
-@import './fab/style.scss';
-@import './menu/style.scss';
-@import './navdrawer/style.scss';
-@import './layout/style.scss';
-@import './list/style.scss';
-@import './progress/style.scss';
-@import './selection/style.scss';
-@import './slider/style.scss';
-@import './snackbar/style.scss';
-@import './tab/style.scss';
-@import './textfield/style.scss';
-@import './toolbar/style.scss';
-@import './tooltip/style.scss';
-@import './type/style.scss';

package/components/bottomnav/style.scss

@@ -1,190 +0,0 @@
-// https://material.io/design/components/bottom-navigation.html#specs
-
-@import '../ripple/ripple.scss';
-@import '../common/functions.scss';
-@import '../common/motion.scss';
-@import '../common/variables.scss';
-@import '../common//type.scss';
-
-.mdw-bottomnav {
-  position: relative;
-  width: 100%;
-  min-height: dp(56);
-  
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  box-shadow: elevation(8);
-  overflow: hidden;
-}
-
-.mdw-bottomnav__item {
-  position: relative;
-  min-width: dp(80);
-  max-width: dp(168);
-  margin: 0;
-  padding: 0;
-
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  align-items: center;
-  justify-content: flex-start;
-  
-  border-radius: 0;
-  box-shadow: none;
-  cursor: pointer;
-  overflow: visible;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  z-index: 0;
-
-  
-  > .mdw-ripple {
-    @include mdw-ripple__container;
-  }
-
-  & > .mdw-ripple > .mdw-ripple__inner,
-  &::after {
-    @include mdw-ripple__inner;
-  }
-
-  & > .mdw-ripple:active > .mdw-ripple__inner,
-  &:active::after {
-    @include mdw-ripple__active;
-  }
-
-  &[mdw-ripple] {
-    overflow: visible;
-    &::after {
-      // If using custom ripple, destroy ::after object
-      content: none;
-    }
-  }
-}
-
-.mdw-bottomnav__icon {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  margin: 0;
-  margin-left: dp(-12);
-  padding: 0;
-
-  pointer-events: none;
-  transform: translateY(dp(8));
-  transition-property: transform, color;
-  transition-duration: 200ms;
-  transition-timing-function: $motion-easing-standard;
-
-  &:last-child {
-    // No label
-    transform: translateY(dp(16));
-  }
-}
-
-.mdw-bottomnav__item[mdw-badge]::before {
-  content: attr(mdw-badge);
-  position: absolute;
-  top: 0;
-  left: 50%;
-  margin-left: dp(4);
-  padding: dp(2);
-  min-width: dp(8);
-  min-height: dp(8);
-  border-radius: dp(8);
-  box-sizing: border-box;
-
-  font-size: dp(10);
-  font-weight: $font-weight-regular;
-  letter-spacing: normal;
-  line-height: dp(12);
-
-  transition-property: transform;
-  transition-duration: 200ms;
-  transition-timing-function: $motion-easing-standard;
-  transform: translateY(dp(8));
-
-  z-index: 1;
-}
-
-.mdw-bottomnav__item[data-mdw-badge]::before {
-  content: attr(data-mdw-badge);
-}
-
-.mdw-bottomnav__label {
-  @include type-rules('caption');
-  @include baseline-top(56-12);
-  @include baseline-bottom(8);
-
-  // Overriding 12dp for baseline bottom with 8dp for oversized and textwrapped
-  // Baseline top will ensure baseline-bottom is 12dp for standard layouts
-
-  max-width: 100%;
-  box-sizing: border-box;
-  padding: 0 dp(12);
-  pointer-events: none;
-  transition-property: transform, opacity, color;
-  transition-duration: 200ms;
-  transition-timing-function: $motion-easing-standard;
-  text-align: center;
-
-  word-break: break-all;
-  word-break: break-word;
-}
-
-.mdw-bottomnav__input {
-  display: inline-block;
-  height: 0;
-  width: 0;
-  margin: 0;
-  padding: 0;
-
-  outline: none;
-  pointer-events: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-.mdw-bottomnav[mdw-shifting] {
-  .mdw-bottomnav__icon,
-  .mdw-bottomnav__item::before {
-    transform: translateY(dp(16));
-  }
-
-  .mdw-bottomnav__label {
-    opacity: 0;
-    transform: translateY(dp(8));
-  }
-  .mdw-bottomnav__input:checked ~ .mdw-bottomnav__label,
-  .mdw-bottomnav__item[mdw-selected] > .mdw-bottomnav__label,
-  .mdw-bottomnav__input:checked + .mdw-bottomnav__item > .mdw-bottomnav__label {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  .mdw-bottomnav__input:checked ~ .mdw-bottomnav__icon,
-  .mdw-bottomnav__item[mdw-selected] > .mdw-bottomnav__icon,
-  .mdw-bottomnav__input:checked + .mdw-bottomnav__item > .mdw-bottomnav__icon {
-    transform: translateY(dp(8));
-  }
-
-  .mdw-bottomnav__item[mdw-selected]::before,
-  .mdw-bottomnav__input:checked + .mdw-bottomnav__item::before {
-    transform: translateY(dp(8));
-  }
-}
-
-.mdw-bottomnav[mdw-theme-color] {
-  .mdw-bottomnav__item {
-    color: inherit;
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &:after {
-      color: inherit;
-    }
-  }
-}

package/components/bottomnav/theming.scss

@@ -1,76 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$bottomnavColors: (
-  active-color:         (inherit, inherit),
-  filled-active-color:  (inherit, (#fff, 1.0)),
-  inactive-color:       ((#000, 0.54), (#fff, 0.50)),
-  ripple-color:         ( #000, #fff),
-  ripple-opacity:       (0.12, 0.30, 0.20),
-  badge-background:     (('warn', '500', 1.00), ('warn', '500', 1.00)),
-  badge-foreground:     (#fff, #fff),
-);
-
-@function bottomnavThemeValue($key, $type, $theme) {
-  @return themeValue('bottomnav', $bottomnavColors, $key, $type, $theme);
-}
-
-@mixin bottomnavThemeVariables($color, $lightness) {
-  @include themeVariables('bottomnav', $bottomnavColors, $color, $lightness);
-}
-
-@mixin internalBottomnavContrastRules($type, $theme: null) {
-  @at-root {
-    #{&}.mdw-bottomnav[mdw-theme-fill]:not([mdw-theme-color]) {
-      input:checked ~ .mdw-bottomnav__icon,
-      input:checked ~ .mdw-bottomnav__label,
-      .mdw-bottomnav__item[mdw-selected] > .mdw-bottomnav__icon,
-      .mdw-bottomnav__item[mdw-selected] > .mdw-bottomnav__label,
-      input:checked + .mdw-bottomnav__item > .mdw-bottomnav__icon,
-      input:checked + .mdw-bottomnav__item > .mdw-bottomnav__label {
-        color: bottomnavThemeValue("filled-active-color", $type, $theme);
-      }
-    }
-  }
-}
-
-// Vary by contrast
-@mixin bottomnavContrastRules($type: 'var', $theme: null) {
-  @include internalBottomnavContrastRules($type, $theme);
-  @if ($type != 'var') {
-    :not([mdw-theme-fill]) {
-      @include internalBottomnavContrastRules($type, $theme);
-    }
-  }
-  .mdw-bottomnav__icon,
-  .mdw-bottomnav__label {
-    color: bottomnavThemeValue("inactive-color", $type, $theme);
-  }
-
-  input:checked ~ .mdw-bottomnav__icon,
-  input:checked ~ .mdw-bottomnav__label,
-  .mdw-bottomnav__item[mdw-selected] > .mdw-bottomnav__icon,
-  .mdw-bottomnav__item[mdw-selected] > .mdw-bottomnav__label,
-  input:checked + .mdw-bottomnav__item > .mdw-bottomnav__icon,
-  input:checked + .mdw-bottomnav__item > .mdw-bottomnav__label {
-    color: bottomnavThemeValue("active-color", $type, $theme);
-  }
-
-  .mdw-bottomnav__item {
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &::after {
-      opacity: bottomnavThemeValue("ripple-opacity", $type, $theme);
-      color: bottomnavThemeValue("ripple-color", $type, $theme);
-    }
-  }
-}
-
-// Varies by theme
-@mixin bottomnavThemeRules($theme: null) {
-  .mdw-bottomnav__item {
-    &::before {
-      background-color: bottomnavThemeValue("badge-background", null, $theme);
-      color: bottomnavThemeValue("badge-foreground", null, $theme);
-    }
-  }
-}