@nitro-web/webpack 0.0.23

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@nitro-web/webpack",
+  "version": "0.0.23",
+  "repository": "github:boycce/nitro-web",
+  "homepage": "https://boycce.github.io/nitro-web/",
+  "main": "./webpack.config.js",
+  "type": "module",
+  "dependencies": {
+    "@babel/core": "^7.8.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.8.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.24.7",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/eslint-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@svgr/webpack": "^8.1.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "@uiw/color-convert": "^2.3.0",
+    "@uiw/react-color-hue": "^2.3.0",
+    "@uiw/react-color-saturation": "^2.3.0",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-react-html-attrs": "^2.1.0",
+    "clean-terminal-webpack-plugin": "https://github.com/boycce/clean-terminal-webpack-plugin.git",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "core-js": "^3.12.1",
+    "css-loader": "^3.6.0",
+    "csv-loader": "^3.0.5",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-webpack-plugin": "^2.7.0",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.9.0",
+    "nodemon": "^2.0.1",
+    "postcss": "^8.4.49",
+    "postcss-for": "^2.1.1",
+    "postcss-import": "^16.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-nested": "^7.0.2",
+    "react-currency-input-field": "^3.8.0",
+    "react-day-picker": "^9.6.4",
+    "react-number-format": "^5.4.0",
+    "react-refresh": "^0.14.2",
+    "react-router-dom": "6.24.1",
+    "react-select": "^5.9.0",
+    "react-tracked": "^1.3.0",
+    "sort-route-addresses-nodeps": "0.0.4",
+    "string-replace-loader": "^3.1.0",
+    "tailwind-merge": "^2.6.0",
+    "typescript": "^5.5.2",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "peerDependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "color": "^4.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.17",
+    "twin.macro": "^3.4.1"
+  },
+  "eslintConfig": {
+    "extends": "../core/.eslintrc.json"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/webpack.config.js

@@ -0,0 +1,356 @@
+// import axios from '@hokify/axios'
+// import axiosRetry from 'axios-retry'
+import autoprefixer from 'autoprefixer'
+import CleanTerminalPlugin from 'clean-terminal-webpack-plugin'
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import webpackNodeExternals from 'webpack-node-externals'
+import path from 'path'
+// import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import tailwindcss from 'tailwindcss'
+import webpack from 'webpack'
+import ESLintPlugin from 'eslint-webpack-plugin'
+import postcssImport from 'postcss-import'
+import postcssNested from 'postcss-nested'
+import postcssFor from 'postcss-for'
+import { createRequire } from 'module'
+import { getDirectories } from 'nitro-web/util'
+
+const _require = createRequire(import.meta.url)
+const pick = (object, list) => list.reduce((o, e) => ((o[e] = object[e]), o), {})
+const isBuild = process.env.NODE_ENV == 'production'
+
+// axiosRetry(axios, {
+//   retries: 10,
+//   retryDelay: () => 150,
+//   retryCondition: (e) =>  e.code == 'ECONNREFUSED',
+// })
+
+// process.traceDeprecation = true
+export const getConfig = (config) => {
+  const { clientDir, componentsDir, distDir, imgsDir } = getDirectories(path, config.pwd)
+  const publicPath = getPublicPath(config.env, config.homepage, config.publicPath)
+
+  return (env, argv) => [{
+    devtool: isBuild ? false : 'source-map',
+    entry: clientDir + 'index.ts',
+    // entry: isBuild ? './client/index.tsx' : ['webpack-plugin-serve/client', './client/index.tsx'], // check this
+    mode: isBuild ? 'production' : 'development',
+    // target=node ignores node_modules
+    externals: argv.target?.[0] == 'node' ? [webpackNodeExternals()] : [],
+    // target=node  ignores builtin modules
+    target: argv.target?.[0] || 'web', 
+    devServer: {
+      // needed when connecting to the devserver through a domain
+      allowedHosts: 'all', 
+      client: {
+        logging: 'warn', // 'info'
+        overlay: true,
+      },
+      compress: false,
+      devMiddleware: {
+        writeToDisk: false,
+      },
+      historyApiFallback: true,
+      host: '0.0.0.0',
+      hot: true,
+      port: 3000,
+      proxy: {
+        '/api': {
+          logLevel: 'silent',
+          target: 'http://0.0.0.0:3001',
+          // bypass: async function (req, res, proxyOptions) {
+          //   // // wait for pong, indicating express has restarted
+          //   // // all non-asset routes are triggered (even the main page)
+          //   // // another method: https://codeburst.io/dont-use-nodemon-there-are-better-ways-fc016b50b45e
+          //   // if (!req.url.match(/^\/api\//)) return
+          //   // await axios.get('http://0.0.0.0:3001/ping')
+          // },
+        },
+        '/server/email/templates': {
+          logLevel: 'silent',
+          target: 'http://0.0.0.0:3001',
+        },
+      },
+    },
+    infrastructureLogging: {
+      level: 'info',
+      // debug: [(name) => !name.match(/webpack-dev-server/)],
+      // console: (a, b, c) => { // webpack v5.3.1
+      //   console.log(1, a, b, c)
+      // },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            { loader: MiniCssExtractPlugin.loader },
+            { loader: 'css-loader', options: { sourceMap: true } },
+            { loader: 'postcss-loader', options: {
+              postcssOptions: {
+                plugins: [
+                  postcssImport,
+                  // postcssImport({ 
+                  //   resolve: postcssImportResolver({
+                  //     alias: { 
+                  //       'nitro-web/client/css/components.css': path.resolve(nitroDir, 'client/css/components.css'),
+                  //       'nitro-web/client/css/fonts.css': path.resolve(nitroDir, 'client/css/fonts.css'),
+                  //     },
+                  //   }),
+                  // }),
+                  postcssNested,
+                  postcssFor,
+                  tailwindcss({ config: path.resolve(config.pwd, 'tailwind.config.js') }), 
+                  autoprefixer,
+                ],
+              },
+              sourceMap: true,
+            }},
+          ],
+        },
+        {
+          test: /\.(m?js|jsx|ts|tsx)$/,
+          exclude: (
+            (path) => {
+              // Dont transpile node modules except for date-fns, which uses ES6
+              return path.includes('node_modules') 
+                && !path.includes('node_modules/date-fns')
+                && !path.includes('node_modules/nitro-web')
+            }
+          ),
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  ['@babel/preset-env', { debug: false }],
+                  ['@babel/preset-typescript', { allowNamespaces: true }],
+                  ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react', development: !isBuild }],
+                ],
+                plugins: [
+                  'react-html-attrs',
+                  '@babel/plugin-syntax-dynamic-import',
+                  '@babel/plugin-transform-runtime',
+                  '@emotion/babel-plugin',
+                  // Below allows us to reference tailwindcss theme variables in emotion blocks
+                  // https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md
+                  // https://medium.com/fredwong-it/emotion-tailwind-twin-macro-7fdc5f2ae5f9
+                  // https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion-typescript#complete-the-typescript-setup
+                  ['babel-plugin-macros', {
+                    'twin': {
+                      preset: 'emotion',
+                      config: path.resolve(config.pwd, 'tailwind.config.js'),
+                    },
+                  }],
+                  // 'react-refresh/babel', // !isBuild && _require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
+              },
+            },
+          ],
+        },
+        {
+          // Workaround to hide emotion's pseudo console noise (bug)
+          // https://github.com/emotion-js/emotion/issues/1105#issuecomment-547247291
+          test: /node_modules\/@emotion\/cache\/(src|dist)/,
+          loader: 'string-replace-loader',
+          options: {
+            search: 'if (unsafePseudoClasses',
+            replace: 'if (false && unsafePseudoClasses',
+          },
+        },
+        {
+          test: /\.csv$/,
+          use: [
+            {
+              loader: 'csv-loader',
+              options: {
+                delimiter: ',',
+                header: true,
+                skipEmptyLines: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/images/[name].[ext][query]',//[hash][ext][query]
+          },
+        },
+        {
+          test: /\.svg$/,
+          use: [
+            {
+              loader: '@svgr/webpack',
+              options: {
+                svgoConfig: {
+                  plugins: [
+                    {
+                      name: 'preset-default',
+                      params: {
+                        overrides: {
+                          removeViewBox: false,
+                          convertPathData: false,
+                          cleanupNumericValues: false,
+                          convertShapeToPath: false,
+                        },
+                      },
+                    },
+                    // 'removeDimensions', (dont need this, just use width/height={undefined} if required)
+                    // {
+                    //   name: 'addClassesToSVGElement',
+                    //   params: {
+                    //     className: (node, info) => { 
+                    //       console.log(info)
+                    //       return `svg-${info?.path?.split('.')[0]}`
+                    //     },
+                    //   },
+                    // },
+                    {
+                      // until svgr updated to svgo@4 for addClassesToSVGElement fns support
+                      name: 'add-data-id-to-svg-icons',
+                      fn: (root, _params, info) => {
+                        const { basename } = info.path.match(/.*\/(?<basename>.*)\.svg$/).groups
+                        if (root.children[0].name === 'svg') {
+                          root.children[0].attributes.className = `svg-${basename}`
+                        }
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    node: {
+      __filename: true,
+    },
+    output: {
+      // devtoolModuleFilenameTemplate: (info) => {
+      //   // DevTools doesn't link webpack:// sourcemap filepaths, force file://.
+      //   let path = 'file://' + encodeURI(info.absoluteResourcePath)
+      //   // React only: append ?2 to all paths so devtools can link to the CSS-in-JS
+      //   if (path.match(/\.jsx$/)) return path + '?2' 
+      //   // Vue only: fix Vue:CSS paths
+      //   else return path.replace(/(\/components\/).*?components\//, '$1')
+      // },
+      // We are outputing assets into a handy subdir to allow for easier asset cache control. We can't
+      // simply use `path` because webpack-dev-server won't work when writeFiles=false (in memory).
+      // Because of this we manually need to prefix all output filenames with `assets/`.
+      filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.js`,
+      path: distDir,
+      publicPath: publicPath,
+    },
+    performance: {
+      hints: false,
+    },
+    optimization: {
+      // Split chunks into seperate emitted assets
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/].*\.js/,
+            name: 'vendor',
+            chunks: 'all',
+          },
+        },
+      },
+      minimize: isBuild,
+    },
+    plugins: [
+      // new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)(),
+      new CleanWebpackPlugin(),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: imgsDir + 'favicon.png', to: './favicon.png' },
+          { from: imgsDir, to: './assets/imgs' },
+        ],
+      }),
+      new webpack.DefinePlugin({
+        ISDEMO: !!process.env.isDemo,
+        INJECTED: JSON.stringify({
+          ...pick(config, config.inject ? config.inject.split(' ') : []),
+        }),
+      }),
+      new ESLintPlugin({
+        extensions: ['js', 'mjs', 'jsx'],
+        exclude: ['node_modules'],
+      }),
+      new MiniCssExtractPlugin({ filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.css` }),
+      new HtmlWebpackPlugin({ template: clientDir + 'index.html', filename: distDir + 'index.html' }),
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, { PUBLIC_PATH: publicPath, NAME: config.name }),
+      new CleanTerminalPlugin({ skipFirstRun: true }),
+      // !isBuild && new ReactRefreshWebpackPlugin({ overlay: false }),
+    ].filter(Boolean),
+    resolve: {
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      // fallback: { fs: false },
+      alias: {
+        // required for auto-importing page components into nitro app.js router
+        'componentsDir': componentsDir,
+      },
+    },
+    stats: {
+      all: false,
+      assets: !process.env.WEBPACK_SERVE,
+      errors: true,
+      errorDetails: true,
+      timings: !process.env.WEBPACK_SERVE,
+      warnings: true,
+    },
+    watchOptions: {
+      aggregateTimeout: 50,
+      ignored: new RegExp(`(${componentsDir}.*\\.api\\.js$|node_modules/(?!cherry))`),
+    },
+  }]
+}
+
+class InterpolateHtmlPlugin {
+  constructor(htmlWebpackPlugin, replacements) {
+    this.htmlWebpackPlugin = htmlWebpackPlugin
+    this.replacements = replacements
+  }
+  apply(compiler) {
+    compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
+      this.htmlWebpackPlugin
+        .getHooks(compilation)
+        .afterTemplateExecution.tap('InterpolateHtmlPlugin', data => {
+          // Run HTML through a series of user-specified string replacements.
+          for (const key in this.replacements) {
+            const value = this.replacements[key]
+            data.html = data.html.replace(
+              new RegExp('{' + key + '}', 'g'),
+              value
+            )
+          }
+        })
+    })
+  }
+}
+
+function getPublicPath(env, homepage, publicPath) {
+  /**
+   * Returns public path used for webapck (we can't use relative paths)
+   * @param {string} env - 'development', 'staging', 'production'
+   * @param {string} publicPath - proces.env.publicPath
+   * @param {string} homepage - package.json homepage
+   */
+  if (publicPath) {
+    const publicPathObj = new URL(publicPath, 'https://domain.com')
+    return publicPathObj.pathname
+
+  } else if (homepage) {
+    const homepageObj = new URL(homepage, 'https://domain.com')
+    if (env === 'development') return '/'
+    else return homepageObj.pathname
+
+  } else {
+    return '/'
+  }
+}