@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/{webpack.config.cjs → webpack.config.js}

@@ -1,28 +1,46 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable @typescript-eslint/no-var-requires */
+/** eslint-env node */
 
-const fs = require('fs');
-const path = require('path');
+import { readdirSync, statSync } from 'node:fs';
+import { join as joinPath, dirname as parseDirname, resolve as resolvePath } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-const eta = require('eta');
-const sass = require('sass');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-const isProduction = (process.env.NODE_ENV === 'production');
+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',
@@ -32,7 +50,7 @@ function getComponentsConfig(env) {
     },
     output: {
       filename: 'materialdesignweb.min.js',
-      path: path.resolve(__dirname, DEST),
+      path: resolvePath(__dirname, DEST),
     },
     plugins: [
       new BundleAnalyzerPlugin({
@@ -78,7 +96,9 @@ function getComponentsConfig(env) {
  * @param {Object<string,string>} env
  * @return {WebpackConfiguration}
  */
-function getDocsConfig(env) {
+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',
@@ -88,40 +108,64 @@ function getDocsConfig(env) {
       logLevel: 'error',
     }),
   ];
-  /** @type {Object.<string, string[]>} */
+  /** @type {Record<string, string[]>} */
   const entries = {};
-  ['.', 'pwa', 'pages', 'themes'].map((folder) => path.join('./docs', folder))
-    .forEach((folderPath) => fs.readdirSync(folderPath).forEach((filename) => {
+  for (const folder of ['.', 'pwa', 'pages', 'themes']) {
+    const folderPath = joinPath('./docs', folder);
+    for (const filename of readdirSync(folderPath)) {
       if (filename[0] === '_') {
-        return;
+        continue;
       }
-      if (filename.endsWith('.pug')) return;
-      if (fs.statSync(path.join(folderPath, filename)).isDirectory()) {
-        return;
+      if (filename.endsWith('.pug')) continue;
+      if (statSync(joinPath(folderPath, filename)).isDirectory()) {
+        continue;
       }
-      const noExt = filename.substring(0, filename.lastIndexOf('.'));
-      if (!entries[`${noExt}`]) {
-        entries[`${noExt}`] = [];
-      }
-      entries[`${noExt}`].push(path.resolve(`${folderPath}/${filename}`));
-    }));
-  const DEST = (isProduction ? 'dist/docs' : 'test/docs');
+      const noExt = filename.slice(0, filename.lastIndexOf('.'));
+      const fullPath = resolvePath(folderPath, filename);
+      addEntry(entries, `${noExt}`, fullPath);
+    }
+  }
+
+  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;
+            },
+          }],
+        });
+      },
+    },
+  };
 
-  let port = parseInt(env.port ?? process.env.port, 10);
+  let port = Number.parseInt(env.port ?? process.env.port, 10);
   if (Number.isNaN(port)) {
     port = 8080;
   }
 
-  /** @type {WebpackConfiguration} */
+  /** @type {WebpackConfiguration & {devServer: DevServerConfiguration}} */
   const webpackConfig = {
     entry: entries,
-    context: path.resolve(__dirname, 'docs'),
+    context: resolvePath(__dirname, 'docs'),
     devtool: isProduction ? 'source-map' : 'nosources-source-map',
-    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+    mode: isProduction ? 'production' : 'development',
     devServer: {
       host: '0.0.0.0',
       port,
-      // static: path.resolve(__dirname, DEST),
+      // static: resolvePath(__dirname, DEST),
       compress: true,
       hot: false,
       liveReload: false,
@@ -130,16 +174,21 @@ function getDocsConfig(env) {
     output: {
       filename: '[name].min.js',
       chunkFilename: '[name].min.js',
-      path: path.resolve(__dirname, DEST),
+      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 && module.resource.match(/prerender/)) {
+              if (module && module.resource && /prerender/.test(module.resource)) {
                 return false;
               }
               /** @type {import('webpack').ChunkGraph} */
@@ -148,10 +197,10 @@ function getDocsConfig(env) {
               if (chunkGraph && [...chunkGraph.getModuleChunksIterable(module)]?.some((chunk) => chunk.name.match(/prerender/))) {
                 return false;
               }
-              if (module && module.resource && module.resource.match(/[\\/]docs[\\/]/)) {
+              if (module && module.resource && /[/\\]docs[/\\]/.test(module.resource)) {
                 return false;
               }
-              if (module && module.resource && module.resource.match(/[\\/](components|core|adapters)[\\/]/)) {
+              if (module && module.resource && /[/\\](components|core|adapters)[/\\]/.test(module.resource)) {
                 return true;
               }
               return false;
@@ -165,7 +214,7 @@ function getDocsConfig(env) {
           },
           default: {
             test(module, chunks) {
-              if (module && module.resource && module.resource.match(/prerender/)) {
+              if (module && module.resource && /prerender/.test(module.resource)) {
                 return false;
               }
               /** @type {import('webpack').ChunkGraph} */
@@ -173,7 +222,7 @@ function getDocsConfig(env) {
               if (chunkGraph && [...chunkGraph.getModuleChunksIterable(module)]?.some((chunk) => chunk.name.match(/prerender/))) {
                 return false;
               }
-              if (module && module.resource && module.resource.match(/[\\/]docs[\\/]/)) {
+              if (module && module.resource && /[/\\]docs[/\\]/.test(module.resource)) {
                 return true;
               }
               return false;
@@ -191,19 +240,30 @@ function getDocsConfig(env) {
     module: {
       rules: [{
         test: /\.js$/,
+        resolve: { fullySpecified: false },
         exclude: /(node_modules|bower_components)/,
-        use: [
-          'babel-loader?{"presets":["@babel/preset-env"]}',
-        ],
+        use: [{
+          loader: 'babel-loader',
+          options: {
+            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',
+          { loader: 'css-loader', options: { sourceMap: false } },
           {
             loader: 'postcss-loader',
             options: {
+              sourceMap: false,
               postcssOptions: {
                 plugins: ['cssnano'],
               },
@@ -212,6 +272,7 @@ function getDocsConfig(env) {
           {
             loader: 'sass-loader',
             options: {
+              sourceMap: false,
               implementation: sass,
             },
           },
@@ -221,19 +282,7 @@ function getDocsConfig(env) {
         use: [
           'file-loader?&name=[name].html',
           'extract-loader',
-          {
-            loader: 'html-loader',
-            options: {
-              minimize: {
-                collapseBooleanAttributes: true,
-                minifyCSS: true,
-              },
-              attributes: false,
-              preprocessor(content, loaderContext) {
-                return eta.render(content, {}, { filename: loaderContext.resourcePath });
-              },
-            },
-          },
+          etaLoader,
         ],
       }],
     },
@@ -246,12 +295,10 @@ function getDocsConfig(env) {
  * @param {Object<string,string>} env
  * @return {WebpackConfiguration}
  */
-function makeWebPackConfig(env = {}) {
+export function makeWebPackConfig(env = {}) {
   const target = env.target || process.env.target;
   if (target === 'docs') {
     return getDocsConfig(env);
   }
   return getComponentsConfig(env);
 }
-
-module.exports = makeWebPackConfig;

package/components/template/_theme.scss

@@ -1,27 +0,0 @@
-@use '../../core/theme/_mixins.scss' as theme;
-
-$themeValues: (
-  text-color:    (('foreground-light', 0.87), ('foreground-dark', 1.00)),
-  border-color:  (('primary', '700', 0.87), ('primary', '200', 1.0)),
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('template', $themeValues, $key, $type);
-}
-
-@mixin addThemeRules($theme: null) {
-  .mdw-template[mdw-surface] {
-    border-color: templateThemeValue('border-color', null);
-  }
-}
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('template', $themeValues) {
-  @include addThemeRules();
-}

package/components/textfield/_mixins.scss

@@ -1,52 +0,0 @@
-@use '../../core/_type.scss' as type;
-
-@mixin centerLabel {
-  .mdw-textfield__label {
-    @include type.addRules('subtitle');
-
-    top: 50%;
-
-    transform: translateY(-50%);
-  }
-
-  .mdw-textfield__outline-gap {
-    &::before,
-    :root[dir="rtl"] &::after {
-      right: 50%;
-      left: 0;
-    }
-
-    &::after,
-    :root[dir="rtl"] &::before {
-      right: 0;
-      left: 50%;
-    }
-  }
-}
-
-@mixin floatLabel {
-  .mdw-textfield__label {
-    @include type.addRules('caption');
-    top: 0;
-    
-    transform: translateY(0);
-    
-    .mdw-textfield[mdw-outlined] & {
-      transform: translateY(-50%);
-    }
-  }
-  
-  .mdw-textfield__outline-gap {
-    &::before,
-    :root[dir="rtl"] &::after {
-      right: 100%;
-      left: 0;
-    }
-
-    &::after,
-    :root[dir="rtl"] &::before {
-      right: 0;
-      left: 100%;
-    }
-  }
-}