@papillonarts/setup 0.7.0 → 0.9.0

package/webpack/loader/{sassLoader.js → sassLoader.ts}

@@ -1,25 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSassLoaderStandardSetup = getSassLoaderStandardSetup;
 // https://github.com/webpack-contrib/sass-loader
 
-function getSassLoaderStandardSetup(_ref) {
-  var includePaths = _ref.includePaths;
+export function getSassLoaderStandardSetup({ includePaths }) {
   return {
     loader: 'sass-loader',
     options: {
       sassOptions: {
         indentWidth: 4,
-        includePaths: includePaths,
+        includePaths,
         // https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
         // https://sass-lang.com/documentation/js-api/interfaces/options/#silenceDeprecations
         // https://sass-lang.com/documentation/js-api/interfaces/deprecations/
         quietDeps: true,
-        silenceDeprecations: ['import', 'global-builtin']
-      }
-    }
-  };
-}
+        silenceDeprecations: ['import', 'global-builtin'],
+      },
+    },
+  }
+}

package/webpack/loader/svgrLoader.ts

@@ -0,0 +1,17 @@
+// https://github.com/gregberge/svgr/tree/main/packages/webpack
+
+export function getSVGRLoaderStandardSetup() {
+  return {
+    test: /\.svg$/,
+    use: ['@svgr/webpack'],
+  }
+}
+
+export function getSVGRLoaderAdvancedSetup() {
+  return {
+    test: /\.svg$/i,
+    issuer: /\.[jt]sx?$/,
+    resourceQuery: { not: [/url/] },
+    use: ['@svgr/webpack'],
+  }
+}

package/webpack/plugin/bannerPlugin.ts

@@ -0,0 +1,18 @@
+// https://webpack.js.org/plugins/banner-plugin/
+
+import webpack from 'webpack'
+
+export function getBannerPluginStandardSetup(packageJSON) {
+  return new webpack.BannerPlugin({
+    banner: [
+      '/*!',
+      ` * @project        ${packageJSON.name}`,
+      ' * @name           [filebase]',
+      ` * @author         ${packageJSON.author.name}`,
+      ` * @copyright      Copyright (c) ${new Date().getFullYear()} ${packageJSON.author.name}`,
+      ' */',
+      '',
+    ].join('\n'),
+    raw: true,
+  })
+}

package/webpack/plugin/cleanWebpackPlugin.ts

@@ -0,0 +1,27 @@
+// https://github.com/johnagan/clean-webpack-plugin
+
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
+
+export function getCleanWebpackPluginStandardSetup() {
+  return new CleanWebpackPlugin()
+}
+
+export function getCleanWebpackPluginAdvancedSetup({
+  dry,
+  verbose,
+  cleanStaleWebpackAssets,
+  protectWebpackAssets,
+  cleanOnceBeforeBuildPatterns,
+  cleanAfterEveryBuildPatterns,
+  dangerouslyAllowCleanPatternsOutsideProject,
+}) {
+  return new CleanWebpackPlugin({
+    dry,
+    verbose,
+    cleanStaleWebpackAssets,
+    protectWebpackAssets,
+    cleanOnceBeforeBuildPatterns,
+    cleanAfterEveryBuildPatterns,
+    dangerouslyAllowCleanPatternsOutsideProject,
+  })
+}

package/webpack/plugin/copyWebpackPlugin.ts

@@ -0,0 +1,18 @@
+// https://github.com/webpack-contrib/copy-webpack-plugin
+
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+
+export function getCopyWebpackPluginStandardSetup({ from, to }) {
+  return new CopyWebpackPlugin({
+    patterns: [
+      {
+        from,
+        to,
+        globOptions: {
+          ignore: ['*.DS_Store'],
+        },
+        noErrorOnMissing: true,
+      },
+    ],
+  })
+}

package/webpack/plugin/cssMinimizerWebpackPlugin.ts

@@ -0,0 +1,7 @@
+// https://github.com/webpack-contrib/css-minimizer-webpack-plugin
+
+import CSSMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin'
+
+export function getCSSMinimizerWebpackPluginStandardSetup() {
+  return new CSSMinimizerWebpackPlugin()
+}

package/webpack/plugin/dotenvWebpack.ts

@@ -0,0 +1,19 @@
+// https://github.com/mrsteele/dotenv-webpack
+
+import DotenvWebpack from 'dotenv-webpack'
+
+export function getDotenvWebpackStandardSetup({ path }) {
+  return new DotenvWebpack({ path })
+}
+
+export function getDotenvWebpackAdvancedSetup({ path, safe, allowEmptyValues, systemvars, silent, defaults, prefix }) {
+  return new DotenvWebpack({
+    path,
+    safe,
+    allowEmptyValues,
+    systemvars,
+    silent,
+    defaults,
+    prefix,
+  })
+}

package/webpack/plugin/hotModuleReplacementPlugin.ts

@@ -0,0 +1,7 @@
+// https://webpack.js.org/plugins/hot-module-replacement-plugin/
+
+import webpack from 'webpack'
+
+export function getHotModuleReplacementPluginStandardSetup() {
+  return new webpack.HotModuleReplacementPlugin()
+}

package/webpack/plugin/htmlWebpackPlugin.ts

@@ -0,0 +1,25 @@
+// https://github.com/jantimon/html-webpack-plugin
+
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import { indexHTMLName } from '../constant'
+
+export function getHtmlWebpackPluginStandardSetup({ title, micrositeWebpackFolderPath }) {
+  return new HtmlWebpackPlugin({
+    title,
+    meta: { viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no' },
+    template: `${micrositeWebpackFolderPath}/${indexHTMLName}`,
+    filename: indexHTMLName,
+    inject: 'body',
+    scriptLoading: 'defer',
+  })
+}
+export function getHtmlWebpackPluginAdvancedSetup({ title, meta, template, filename, inject, scriptLoading }) {
+  return new HtmlWebpackPlugin({
+    title,
+    meta,
+    template,
+    filename,
+    inject,
+    scriptLoading,
+  })
+}

package/webpack/plugin/miniCSSExtractPlugin.ts

@@ -0,0 +1,16 @@
+// https://github.com/webpack-contrib/mini-css-extract-plugin
+
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+
+export const MiniCSSExtractPluginLoader = MiniCssExtractPlugin.loader
+
+export function getMiniCSSExtractPluginStandardSetup() {
+  return new MiniCssExtractPlugin()
+}
+
+export function getMiniCSSExtractPluginAdvancedSetup() {
+  return new MiniCssExtractPlugin({
+    filename: 'styles/[name].[contenthash].css',
+    chunkFilename: '[id].css',
+  })
+}

package/webpack/plugin/moduleConcatenationPlugin.ts

@@ -0,0 +1,7 @@
+// https://webpack.js.org/plugins/module-concatenation-plugin/
+
+import webpack from 'webpack'
+
+export function getModuleConcatenationPluginStandardSetup() {
+  return new webpack.optimize.ModuleConcatenationPlugin()
+}

package/webpack/plugin/webpackBundleAnalyzer.ts

@@ -0,0 +1,7 @@
+// https://github.com/webpack-contrib/webpack-bundle-analyzer
+
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+
+export function getWebpackBundleAnalyzerStandardSetup() {
+  return new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false })
+}

package/webpack/plugin/webpackManifestPlugin.ts

@@ -0,0 +1,15 @@
+// https://github.com/shellscape/webpack-manifest-plugin
+/* eslint-disable no-param-reassign  */
+import { WebpackManifestPlugin } from 'webpack-manifest-plugin'
+import { manifestFileName } from '../constant'
+
+export function getWebpackManifestPluginStandardSetup() {
+  return new WebpackManifestPlugin({
+    fileName: manifestFileName,
+    basePath: '',
+    map: (file) => {
+      file.name = file.name.replace(/(\.[a-f0-9]{32})(\..*)$/, '$2')
+      return file
+    },
+  })
+}

package/webpack/server/devServer.ts

@@ -0,0 +1,13 @@
+// https://webpack.js.org/configuration/dev-server/
+
+export function getDevServerStandardSetup() {
+  return {
+    historyApiFallback: true,
+    open: true,
+    compress: true,
+    hot: true,
+    port: 8080,
+    host: 'localhost',
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  }
+}

package/webpack/setup/commonSetup.ts

@@ -0,0 +1,36 @@
+import { getBabelLoaderAdvancedSetup } from '../loader/babelLoader'
+import { getFontLoaderStandardSetup } from '../loader/fontLoader'
+import { getImageLoaderStandardSetup } from '../loader/imageLoader'
+import { getSVGRLoaderAdvancedSetup } from '../loader/svgrLoader'
+import { getMarkdownLoaderStandardSetup } from '../loader/markdownLoader'
+import { getCleanWebpackPluginStandardSetup } from '../plugin/cleanWebpackPlugin'
+import { getCopyWebpackPluginStandardSetup } from '../plugin/copyWebpackPlugin'
+import { getHtmlWebpackPluginStandardSetup } from '../plugin/htmlWebpackPlugin'
+import { getWebpackManifestPluginStandardSetup } from '../plugin/webpackManifestPlugin'
+import { extensions } from '../constant'
+
+export function getWebpackCommonSetup({ micrositeFolderPaths, packageJSON }) {
+  return {
+    entry: [`${micrositeFolderPaths.src}/index.js`],
+    plugins: [
+      getCleanWebpackPluginStandardSetup(),
+      getCopyWebpackPluginStandardSetup({ from: micrositeFolderPaths.public, to: 'assets' }),
+      getHtmlWebpackPluginStandardSetup({ title: packageJSON.description, micrositeWebpackFolderPath: micrositeFolderPaths.webpack }),
+      getWebpackManifestPluginStandardSetup(),
+    ],
+    module: {
+      rules: [
+        getBabelLoaderAdvancedSetup(),
+        getFontLoaderStandardSetup(),
+        getImageLoaderStandardSetup(),
+        getMarkdownLoaderStandardSetup(),
+        getSVGRLoaderAdvancedSetup(),
+      ],
+    },
+
+    resolve: {
+      modules: [micrositeFolderPaths.src, micrositeFolderPaths.nodeModules],
+      extensions,
+    },
+  }
+}

package/webpack/setup/developmentSetup.ts

@@ -0,0 +1,52 @@
+import { merge } from 'webpack-merge'
+import { getCSSLoaderStandardSetup } from '../loader/cssLoader'
+import { getPostCSSLoaderStandardSetup } from '../loader/postCSSLoader'
+import { getSassLoaderStandardSetup } from '../loader/sassLoader'
+import { getDotenvWebpackStandardSetup } from '../plugin/dotenvWebpack'
+import { getHotModuleReplacementPluginStandardSetup } from '../plugin/hotModuleReplacementPlugin'
+import { getDevServerStandardSetup } from '../server/devServer'
+
+export function getWebpackDevelopmentSetup({
+  webpackCommonSetup,
+  environmentVariablesFilePath,
+  micrositeUrlPath,
+  micrositeFolderPaths,
+  includedSourceFilePaths,
+}) {
+  return merge([
+    webpackCommonSetup,
+    {
+      mode: 'development',
+      devtool: 'inline-source-map',
+      devServer: getDevServerStandardSetup(),
+      output: { path: micrositeFolderPaths.build, publicPath: micrositeUrlPath, filename: '[name].bundle.js' },
+      optimization: {
+        concatenateModules: true,
+      },
+      plugins: [getDotenvWebpackStandardSetup({ path: environmentVariablesFilePath }), getHotModuleReplacementPluginStandardSetup()],
+      module: {
+        rules: [
+          {
+            test: /\.s[ac]ss$/i,
+            include: includedSourceFilePaths,
+            use: [
+              'style-loader',
+              getCSSLoaderStandardSetup({
+                sourceMap: false,
+                modules: {
+                  localIdentName: '[name]_[local]_[hash:base64:5]',
+                  /* https://webpack.js.org/loaders/css-loader/#exportlocalsconvention */
+                  exportLocalsConvention: 'as-is',
+                },
+                /* https://stackoverflow.com/questions/78589664/style-loader-does-not-recoginize-default-imports-of-css-modules-in-storybooks */
+                esModule: false,
+              }),
+              getPostCSSLoaderStandardSetup(),
+              getSassLoaderStandardSetup({ includePaths: includedSourceFilePaths }),
+            ],
+          },
+        ],
+      },
+    },
+  ])
+}

package/webpack/setup/productionSetup.ts

@@ -0,0 +1,66 @@
+import { merge } from 'webpack-merge'
+import { getCSSLoaderStandardSetup } from '../loader/cssLoader'
+import { getBannerPluginStandardSetup } from '../plugin/bannerPlugin'
+import { getCSSMinimizerWebpackPluginStandardSetup } from '../plugin/cssMinimizerWebpackPlugin'
+import { getDotenvWebpackStandardSetup } from '../plugin/dotenvWebpack'
+import { MiniCSSExtractPluginLoader, getMiniCSSExtractPluginAdvancedSetup } from '../plugin/miniCSSExtractPlugin'
+import { getWebpackBundleAnalyzerStandardSetup } from '../plugin/webpackBundleAnalyzer'
+
+export function getWebpackProductionSetup({
+  webpackCommonSetup,
+  environmentVariablesFilePath,
+  micrositeUrlPath,
+  micrositeFolderPaths,
+  packageJSON,
+}) {
+  return merge([
+    webpackCommonSetup,
+    {
+      mode: 'production',
+      devtool: false,
+      output: {
+        path: micrositeFolderPaths.build,
+        publicPath: micrositeUrlPath,
+        filename: 'js/[name].[contenthash].bundle.js',
+      },
+      performance: {
+        hints: false,
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000,
+      },
+      optimization: {
+        minimize: true,
+        minimizer: [getCSSMinimizerWebpackPluginStandardSetup(), '...'],
+        runtimeChunk: { name: 'runtime' },
+      },
+      plugins: [
+        getBannerPluginStandardSetup(packageJSON),
+        getDotenvWebpackStandardSetup({ path: environmentVariablesFilePath }),
+        getMiniCSSExtractPluginAdvancedSetup(),
+        getWebpackBundleAnalyzerStandardSetup(),
+      ],
+      module: {
+        rules: [
+          {
+            test: /\.(sass|scss|css)$/,
+            use: [
+              MiniCSSExtractPluginLoader,
+              getCSSLoaderStandardSetup({
+                sourceMap: false,
+                modules: {
+                  localIdentName: '[name]_[local]_[hash:base64:5]',
+                  /* https://webpack.js.org/loaders/css-loader/#exportlocalsconvention */
+                  exportLocalsConvention: 'as-is',
+                },
+                /* https://stackoverflow.com/questions/78589664/style-loader-does-not-recoginize-default-imports-of-css-modules-in-storybooks */
+                esModule: false,
+              }),
+              'postcss-loader',
+              'sass-loader',
+            ],
+          },
+        ],
+      },
+    },
+  ])
+}

package/storybook/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "getStorybookMainSetup", {
-  enumerable: true,
-  get: function get() {
-    return _mainSetup.getStorybookMainSetup;
-  }
-});
-Object.defineProperty(exports, "getStorybookPreviewSetup", {
-  enumerable: true,
-  get: function get() {
-    return _previewSetup.getStorybookPreviewSetup;
-  }
-});
-Object.defineProperty(exports, "setStorybookManagerSetup", {
-  enumerable: true,
-  get: function get() {
-    return _managerSetup.setStorybookManagerSetup;
-  }
-});
-var _mainSetup = require("./mainSetup");
-var _managerSetup = require("./managerSetup");
-var _previewSetup = require("./previewSetup");