@nimbus-ds/webpack 1.1.0 → 1.2.0

package/dist/config/alias.ts

@@ -0,0 +1,25 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ * @see https://webpack.js.org/configuration/dev-server/
+ */
+import dashify from "dashify";
+import glob from "glob";
+import { join } from "path";
+import { rootDir } from "../utils/constants";
+
+const paths = glob.sync(`${join(rootDir, "./packages/react/src/*/*/src")}`);
+
+const packages = paths.reduce((prev: { [key: string]: string }, curr) => {
+  const key = `@nimbus-ds/${dashify(curr.split("/")[10])}`;
+  prev[key] = curr;
+  return prev;
+}, {});
+
+export const aliasItems = {
+  "@nimbus-ds/icons": join(rootDir, "./packages/icons"),
+  "@nimbus-ds/tokens": join(rootDir, "./packages/core/tokens"),
+  "@nimbus-ds/typings": join(rootDir, "./packages/core/typings/src"),
+  "@nimbus-ds/styles": join(rootDir, "./packages/core/styles/src"),
+  "@nimbus-ds/webpack": join(rootDir, "./packages/core/webpack/src"),
+  ...packages,
+};

package/dist/config/base.ts

@@ -0,0 +1,42 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import merge from "webpack-merge";
+import { Configuration } from "webpack";
+
+import { arrayFilterEmpty, isProduction } from "../utils";
+import { typescriptRule, svgRule } from "../rules";
+import { dtsBundleGeneratorPlugin } from "../plugins";
+import { aliasItems } from "./alias";
+import { externalItems } from "./external";
+
+import production from "./production";
+import development from "./development";
+
+const webpack: Configuration = {
+  target: "node",
+  mode: isProduction ? "production" : "development",
+  entry: {
+    "./index": "./src/index.ts",
+  },
+  output: {
+    filename: "[name].js",
+    libraryTarget: "umd",
+  },
+  module: {
+    rules: arrayFilterEmpty([typescriptRule, svgRule]),
+  },
+  plugins: [dtsBundleGeneratorPlugin()],
+  resolve: {
+    alias: aliasItems,
+    extensions: [".tsx", ".ts", ".js"],
+  },
+  externals: externalItems,
+};
+
+export const getConfiguration = (config?: Configuration) =>
+  isProduction
+    ? merge(webpack, production, config || {})
+    : merge(webpack, development, config || {});
+
+export default getConfiguration();

package/dist/config/development.ts

@@ -0,0 +1,15 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import { Configuration } from "webpack";
+import { terserJSPlugin } from "../plugins";
+
+const webpack: Configuration = {
+  devtool: "source-map",
+  optimization: {
+    minimize: true,
+    minimizer: [terserJSPlugin],
+  },
+};
+
+export default webpack;

package/dist/config/external.ts

@@ -0,0 +1,22 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ * @see https://webpack.js.org/configuration/externals/
+ */
+export const externalLibs = {
+  "@floating-ui/react-dom-interactions": "@floating-ui/react-dom-interactions",
+  "@nimbus-ds/styles": "@nimbus-ds/styles",
+  react: "react",
+  "react-dom": "react-dom",
+};
+
+export const externalPackages = {
+  "@nimbus-ds/icon": "@nimbus-ds/icon",
+  "@nimbus-ds/icons": "@nimbus-ds/icons",
+  "@nimbus-ds/skeleton": "@nimbus-ds/skeleton",
+  "@nimbus-ds/spinner": "@nimbus-ds/spinner",
+  "@nimbus-ds/text": "@nimbus-ds/text",
+  "@nimbus-ds/title": "@nimbus-ds/title",
+  "@nimbus-ds/tokens": "@nimbus-ds/tokens",
+};
+
+export const externalItems = { ...externalLibs, ...externalPackages };

package/dist/config/index.ts

@@ -0,0 +1,6 @@
+export { getConfiguration, default as base } from "./base";
+export { default as development } from "./development";
+export { default as production } from "./production";
+
+export { aliasItems } from "./alias";
+export { externalItems, externalLibs, externalPackages } from "./external";

package/dist/config/production.ts

@@ -0,0 +1,19 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import { Configuration } from "webpack";
+import { cssMinimizerPlugin, terserJSPlugin } from "../plugins";
+
+const webpack: Configuration = {
+  optimization: {
+    minimize: true,
+    minimizer: [terserJSPlugin, cssMinimizerPlugin],
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+};
+
+export default webpack;

package/dist/index.ts

@@ -0,0 +1,43 @@
+import {
+  getConfiguration,
+  development,
+  production,
+  base,
+  externalLibs,
+} from "./config";
+import {
+  vanillaExtractPlugin,
+  miniCssExtractPlugin,
+  dtsBundleGeneratorPlugin,
+  cssHashRemoverPlugin,
+  cssMinimizerPlugin,
+} from "./plugins";
+import { cssLoaderExtractRule, styleLoaderCssRule } from "./rules";
+import { rootDir } from "./utils";
+
+export const rules = { cssLoaderExtractRule, styleLoaderCssRule };
+export const plugins = {
+  vanillaExtractPlugin,
+  miniCssExtractPlugin,
+  cssHashRemoverPlugin,
+  cssMinimizerPlugin,
+  dtsBundleGeneratorPlugin,
+};
+export const configuration = {
+  externalLibs,
+  development,
+  production,
+  base,
+  getConfiguration,
+};
+
+export const utils = { rootDir };
+
+const webpack = {
+  rules,
+  plugins,
+  configuration,
+  utils,
+};
+
+export default webpack;

package/dist/plugins/cssHashRemoverPlugin.ts

@@ -0,0 +1,81 @@
+type Compiler = import("webpack").Compiler;
+
+class CssHashRemoverPlugin {
+  options;
+
+  content = "";
+
+  static defaultOptions = {
+    outputFile: "styles.css",
+  };
+
+  // Any options should be passed in the constructor of your plugin,
+  // (this is a public API of your plugin).
+  constructor(options = {}) {
+    // Applying user-specified options over the default options
+    // and making merged options further available to the plugin methods.
+    // You should probably validate all the options here as well.
+    this.options = { ...CssHashRemoverPlugin.defaultOptions, ...options };
+  }
+
+  apply(compiler: Compiler) {
+    const pluginName = CssHashRemoverPlugin.name;
+
+    // webpack module instance can be accessed from the compiler object,
+    // this ensures that correct version of the module is used
+    // (do not require/import the webpack or any symbols from it directly).
+    const { webpack } = compiler;
+
+    // Compilation object gives us reference to some useful constants.
+    const { Compilation } = webpack;
+
+    // RawSource is one of the "sources" classes that should be used
+    // to represent asset sources in compilation.
+    const { RawSource } = webpack.sources;
+
+    // Tapping to the "thisCompilation" hook in order to further tap
+    // to the compilation process on an earlier stage.
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      // Tapping to the assets processing pipeline on a specific stage.
+      compilation.hooks.processAssets.tap(
+        {
+          name: pluginName,
+          // Using one of the later asset processing stages to ensure
+          // that all assets were already added to the compilation by other plugins.
+          stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
+        },
+        (assets) => {
+          const source = assets?.["./index.css"]?.source()?.toString() ?? "";
+          const matches = Array.from(
+            source?.matchAll(
+              /(?:\.nimbus-[\w|-]+)(?:(__\w{7,}))(?::{0,2}(?:disabled|focus|active|hover|placeholder|focus-visible|after)?) ?{/gm
+            ),
+            (m) => m[1]
+          );
+
+          const uniqueMatches = [...new Set(matches)];
+
+          this.content = source;
+          uniqueMatches?.forEach((hash) => {
+            const regex = new RegExp(`${hash}\\b`, "gm");
+            this.content = this.content.replace(regex, "");
+          });
+          // "assets" is an object that contains all assets
+          // in the compilation, the keys of the object are pathnames of the assets
+          // and the values are file sources.
+
+          // Iterating over all the assets and
+          // generating content for our Markdown file.
+          // Adding new asset to the compilation, so it would be automatically
+          // generated by the webpack in the output directory.
+          compilation.emitAsset(
+            this.options.outputFile,
+            new RawSource(this.content)
+          );
+        }
+      );
+    });
+  }
+}
+
+export const cssHashRemoverPlugin = new CssHashRemoverPlugin();

package/dist/plugins/cssMinimizerPlugin.ts

@@ -0,0 +1,6 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
+
+export const cssMinimizerPlugin = new CssMinimizerPlugin();

package/dist/plugins/dtsBundleGeneratorPlugin.ts

@@ -0,0 +1,24 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+
+import WebpackShellPluginNextPlugin from "webpack-shell-plugin-next";
+import { rootDir } from "../utils";
+
+const entry = [
+  `node ${rootDir}/node_modules/.bin/dts-bundle-generator -o ./dist/index.d.ts ./src/index.ts`,
+];
+
+export const dtsBundleGeneratorPlugin = (
+  configuration: { entries: string[] } = { entries: entry }
+) => {
+  const config = {
+    onBuildEnd: {
+      scripts: [...configuration.entries],
+      blocking: false,
+      parallel: true,
+    },
+  };
+
+  return new WebpackShellPluginNextPlugin(config);
+};

package/dist/plugins/index.ts

@@ -0,0 +1,6 @@
+export { miniCssExtractPlugin } from "./miniCssExtract";
+export { vanillaExtractPlugin } from "./vanillaExtractPlugin";
+export { cssHashRemoverPlugin } from "./cssHashRemoverPlugin";
+export { cssMinimizerPlugin } from "./cssMinimizerPlugin";
+export { terserJSPlugin } from "./terserJSPlugin";
+export { dtsBundleGeneratorPlugin } from "./dtsBundleGeneratorPlugin";

package/dist/plugins/miniCssExtract.ts

@@ -0,0 +1,13 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+
+const config = {
+  // Options similar to the same options in webpackOptions.output
+  // both options are optional
+  filename: "[name].css",
+  chunkFilename: "[id].css",
+};
+
+export const miniCssExtractPlugin = new MiniCssExtractPlugin(config);

package/dist/plugins/terserJSPlugin.ts

@@ -0,0 +1,11 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import TerserJSPlugin from "terser-webpack-plugin";
+
+const config = {
+  // Options similar to the same options in webpackOptions.output
+  // both options are optional
+};
+
+export const terserJSPlugin = new TerserJSPlugin(config);

package/dist/plugins/vanillaExtractPlugin.ts

@@ -0,0 +1,8 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";
+
+export const vanillaExtractPlugin = new VanillaExtractPlugin({
+  identifiers: "debug",
+});

package/dist/rules/common.ts

@@ -0,0 +1,12 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+
+/**
+ * @see https://webpack.js.org/guides/typescript/#loader
+ */
+export const typescriptRule = {
+  test: /\.tsx?$/,
+  loader: "ts-loader",
+  exclude: /node_modules/,
+};

package/dist/rules/index.ts

@@ -0,0 +1,3 @@
+export * from "./common";
+export * from "./styles";
+export * from "./svg";

package/dist/rules/styles.ts

@@ -0,0 +1,20 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+
+export const miniCssExtractRule = {
+  test: /\.css$/,
+  loader: MiniCssExtractPlugin.loader,
+};
+
+export const cssLoaderExtractRule = {
+  test: /\.css$/i,
+  use: [MiniCssExtractPlugin.loader, "css-loader"],
+};
+
+export const styleLoaderCssRule = {
+  test: /\.css$/i,
+  use: ["style-loader", "css-loader"],
+};

package/dist/rules/svg.ts

@@ -0,0 +1,8 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+
+export const svgRule = {
+  test: /\.svg$/i,
+  use: ["@svgr/webpack"],
+};

package/dist/utils/constants.ts

@@ -0,0 +1,15 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+import { join } from "path";
+import * as dotenv from "dotenv"; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
+
+dotenv.config({
+  path: join(__dirname, "../../../../../.env"),
+});
+
+export const mode = process.env.NODE_ENV ?? "production";
+export const isProduction = mode === "production";
+export const isDevelopment = !isProduction;
+export const rootDir = join(__dirname, "../../../../../");
+export const webpackDir = join(__dirname, "../../");

package/dist/utils/helpers.ts

@@ -0,0 +1,12 @@
+/**
+ * Created by: Júnior Conquista (junior.conquista@nuvemshop.com.br)
+ */
+
+interface Rule {
+  test: RegExp;
+  loader?: string;
+  use?: any;
+  exclude?: RegExp;
+}
+
+export const arrayFilterEmpty = (array: Rule[]) => array.filter((x) => !!x);

package/dist/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./constants";
+export * from "./helpers";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/webpack",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -8,6 +8,11 @@
     "README.md"
   ],
   "sideEffects": false,
+  "scripts": {
+    "build": "yarn clean && mkdir dist && cp -R src/* dist",
+    "clean": "rm -rf dist",
+    "g:webpack": "cd $INIT_CWD && webpack"
+  },
   "homepage": "https://nimbus.nuvemshop.com.br/documentation",
   "repository": {
     "type": "git",
@@ -26,7 +31,7 @@
     "mini-css-extract-plugin": "^2.7.2",
     "terser-webpack-plugin": "^5.3.6",
     "typescript": "^4.9.3",
-    "webpack": "^5.75.0",
+    "webpack": "^5.76.0",
     "webpack-merge": "^5.8.0",
     "webpack-shell-plugin-next": "^2.3.1"
   }