@epic-effx/create-application-template-rs 0.1.0

package/jest/setupTests.js

@@ -0,0 +1,15 @@
+require('dotenv-flow').config()
+
+// additional jest matchers
+// https://jest-extended.jestcommunity.dev/docs/matchers
+const matchers = require('jest-extended')
+expect.extend(matchers)
+
+// custom jest matchers for asserting on DOM nodes
+// https://www.npmjs.com/package/@testing-library/jest-dom
+require('@testing-library/jest-dom')
+// require('@testing-library/jest-dom/jest-globals')
+
+afterEach(() => {
+  jest.useRealTimers()
+})

package/jest/svgTransform.js

@@ -0,0 +1,12 @@
+// turning svg imports into empty objects
+
+module.exports = {
+  process() {
+    return {
+      code: 'module.exports = {}',
+    }
+  },
+  getCacheKey() {
+    return 'svgTransform'
+  },
+}

package/jest.config.js

@@ -0,0 +1,58 @@
+/** @returns {Promise<import('jest').Config>} */
+module.exports = async () => {
+  return {
+    rootDir: __dirname,
+    roots: [
+      '<rootDir>/src',
+    ],
+    automock: false,
+    collectCoverage: true,
+    collectCoverageFrom: [
+      'src/**/*.{js,jsx,ts,tsx}',
+      '!**/node_modules/**',
+      'src/**/*.d.ts',
+    ],
+    coverageDirectory: '<rootDir>/jest/coverage',
+    coverageThreshold: undefined,
+    displayName: 'UI',
+    globals: {},
+    maxConcurrency: 5, // 5 is default (see test.concurrent)
+    moduleNameMapper: {
+      '^.+\\.module\\.(css)$': 'identity-obj-proxy',
+    },
+    resetMocks: true,
+    setupFiles: [
+      '<rootDir>/jest/setup.js',
+    ],
+    setupFilesAfterEnv: [
+      '<rootDir>/jest/setupTests.js',
+    ],
+    testMatch: [
+      '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+    ],
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.(t|j)sx?$': ['@swc/jest', {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      }],
+      '^.+\\.css$': '<rootDir>/jest/cssTransform.js',
+      '^.+\\.svg$': '<rootDir>/jest/svgTransform.js',
+      '^.+\\.woff2$': '<rootDir>/jest/fontTransform.js',
+    },
+    // transformIgnorePatterns: [
+    //   '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    //   '^.+\\.module\\.(css|sass|scss)$',
+    // ],
+    verbose: true,
+    watchPlugins: [
+      'jest-watch-typeahead/filename',
+      'jest-watch-typeahead/testname',
+    ],
+  }
+}

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@epic-effx/create-application-template-rs",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "bin": {
+    "create-application-template-rs": "bin/create-application-template-rs.js"
+  },
+  "scripts": {
+    "start": "cross-env NODE_ENV=development SWC_ENV=development BABEL_ENV=development rspack serve --config rspack/rspack.config.js --env BUNDLER_ENV=dev",
+    "build": "cross-env NODE_ENV=production SWC_ENV=production BABEL_ENV=production rspack --config rspack/rspack.config.js --env BUNDLER_ENV=prod BUNDLER_WITH_PROFILING=false",
+    "build:profile": "cross-env NODE_ENV=production SWC_ENV=production BABEL_ENV=production rspack --config rspack/rspack.config.js --env BUNDLER_ENV=prod BUNDLER_WITH_PROFILING=true",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:updateSnapshot": "jest --updateSnapshot",
+    "dev": "concurrently \"npm run test:watch\" \"npm run start\"",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx,json}\"",
+    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx,json}\"",
+    "stylelint": "npx stylelint \"src/styles/**/*.{js,ts}\"",
+    "stylelint:fix": "npx stylelint --fix \"src/styles/**/*.{js,ts}\"",
+    "stylelint:css": "npx stylelint \"src/**/*.css\"",
+    "stylelint:css:fix": "npx stylelint --fix \"src/**/*.css\""
+  },
+  "keywords": [
+    "template",
+    "react",
+    "typescript",
+    "styled-components",
+    "rspack",
+    "swc",
+    "jest",
+    "eslint",
+    "stylelint",
+    "javascript"
+  ],
+  "url": "https://www.createapplicationtemplaters.com/",
+  "author": "",
+  "license": "MIT",
+  "proxy": "http://localhost:3000",
+  "engines": {
+    "node": ">=20",
+    "npm": ">=10"
+  },
+  "overrides": {
+    "serialize-javascript": "7.0.3"
+  },
+  "templateMeta": {
+    "overridesNote": "overrides patch known transitive vulnerabilities in tooling; safe within same major; remove once upstream ranges are updated."
+  },
+  "dependencies": {
+    "browserslist": "4.24.4",
+    "concurrently": "9.1.2",
+    "cross-env": "10.1.0",
+    "dotenv-flow": "4.1.0",
+    "husky": "9.1.7",
+    "polished": "4.3.1",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "styled-components": "6.1.15"
+  },
+  "devDependencies": {
+    "@babel/core": "7.26.9",
+    "@babel/preset-react": "7.26.3",
+    "@babel/preset-typescript": "7.26.0",
+    "@rspack/cli": "1.7.9",
+    "@rspack/core": "1.7.9",
+    "@rspack/plugin-react-refresh": "1.6.1",
+    "@swc/helpers": "0.5.20",
+    "@swc/jest": "0.2.39",
+    "@swc/plugin-styled-components": "12.7.0",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/jest": "30.0.0",
+    "@types/node": "20.12.12",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
+    "@types/styled-components": "5.1.34",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
+    "babel-loader": "10.0.0",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "confusing-browser-globals": "1.0.11",
+    "css-loader": "7.1.2",
+    "css-minimizer-webpack-plugin": "7.0.4",
+    "dotenv-webpack": "8.1.0",
+    "eslint": "8.57.1",
+    "eslint-plugin-compat": "6.0.2",
+    "eslint-plugin-eslint-comments": "3.2.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "6.0.0-rc.2",
+    "html-webpack-plugin": "5.6.3",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "jest-extended": "7.0.0",
+    "jest-styled-components": "7.2.0",
+    "jest-watch-typeahead": "3.0.1",
+    "postcss-styled-components": "0.2.1",
+    "react-refresh": "0.16.0",
+    "rspack-manifest-plugin": "5.2.1",
+    "style-loader": "4.0.0",
+    "stylelint": "16.15.0",
+    "stylelint-config-recess-order": "6.0.0",
+    "stylelint-config-standard": "36.0.0",
+    "stylelint-no-unsupported-browser-features": "8.0.4",
+    "terser-webpack-plugin": "5.3.16",
+    "ts-node": "10.9.2",
+    "typescript": "5.8.2",
+    "webpack-merge": "6.0.1",
+    "webpack-shell-plugin-next": "2.3.2",
+    "whatwg-fetch": "3.6.20"
+  }
+}

package/rspack/rspack.common.js

@@ -0,0 +1,212 @@
+const fs = require('fs')
+const { rspack } = require('@rspack/core')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const Dotenv = require('dotenv-webpack')
+const { RspackManifestPlugin } = require('rspack-manifest-plugin')
+const env = require('./utilities/env')
+const getPaths = require('./utilities/getPaths')
+const createEnvironmentHash = require('./utilities/createEnvironmentHash')
+const generateAssetManifest = require('./utilities/generateAssetManifest')
+
+// styles regexps
+const reCss = /\.css$/
+const reCssModule = /\.module\.css$/
+
+module.exports = (rspackEnv) => {
+  const { BUNDLER_ENV } = rspackEnv
+  const { INLINE_SIZE_LIMIT } = process.env
+
+  const paths = getPaths({ BUNDLER_ENV })
+
+  // NOTE it's preferable to isolate settings in appropriate 
+  // files, but it's not always practical, hence "isProduction"
+  const isProduction = (BUNDLER_ENV === env.BUNDLER_ENV.prod)
+  const isDevelopment = (BUNDLER_ENV === env.BUNDLER_ENV.dev)
+
+  const styleLoaders = [
+    ...(isProduction
+      ? [{
+        loader: rspack.CssExtractRspackPlugin.loader,  // MiniCssExtractPlugin.loader,
+        options: {
+          // css is located in 'static/css', use publicPath
+          // to locate index.html directory relative to css
+          publicPath: '../../',
+        },
+      }]
+      : ['style-loader']
+    ),
+  ]
+
+  return {
+    entry: paths.src.indexTsx,
+    resolve: {
+      // can now leave off extensions when importing
+      extensions: ['.tsx', '.jsx', '.ts', '.js'],
+      tsConfig: paths.tsconfigJson,
+    },
+    watchOptions: {
+      ignored: ['**/node_modules'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(j|t)s$/,
+          exclude: [/[\\/]node_modules[\\/]/],
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+              },
+              externalHelpers: true,
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                  development: isDevelopment,
+                  refresh: isDevelopment,
+                },
+              },
+            },
+            env: {
+              targets: 'Chrome >= 48',  // browser compatibility
+            },
+          },
+        },
+        {
+          test: /\.(j|t)sx$/,
+          exclude: [/[\\/]node_modules[\\/]/],
+          use: [
+            {
+              loader: 'builtin:swc-loader',
+              options: {
+                jsc: {
+                  parser: {
+                    syntax: 'typescript',
+                    tsx: true,
+                  },
+                  transform: {
+                    react: {
+                      runtime: 'automatic',
+                      development: isDevelopment,
+                      refresh: isDevelopment,
+                    },
+                  },
+                  externalHelpers: true,
+                  experimental: {
+                    plugins: [
+                      ['@swc/plugin-styled-components', {
+                        displayName: true,
+                        ssr: true,
+                        fileName: true,
+                      }],
+                    ],
+                  },
+                },
+                env: {
+                  targets: 'Chrome >= 48',
+                },
+              },
+            },
+            // NOTE see docs for usage of React Compiler via babel
+            // https://rspack.rs/guide/tech/react#react-compiler
+            {
+              loader: 'babel-loader',
+              options: {
+                cacheDirectory: true,
+                cacheCompression: false,
+                compact: isProduction,
+              },
+            },
+          ],
+        },
+        {
+          test: reCss,
+          use: [...styleLoaders, 'css-loader'],
+          exclude: reCssModule,
+        },
+        {
+          test: reCssModule,
+          use: [
+            ...styleLoaders,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                modules: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+          type: 'asset/resource',
+        },
+        {
+          test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: parseInt(INLINE_SIZE_LIMIT || 10000),
+            },
+          },
+        },
+      ],
+    },
+    output: {
+      path: paths.build,
+      pathinfo: isProduction ? false : true,
+      filename: paths.static.js.filenameJs,
+      chunkFilename: paths.static.js.chunkFilenameJs,
+      asyncChunks: true,
+      clean: true,
+      assetModuleFilename: paths.static.media.filenameExt,
+      publicPath: '',  // public url of build, use in build/index.html
+    },
+    cache: {  // used in development mode
+      type: 'filesystem',
+      version: createEnvironmentHash({ processEnv: process.env }),
+      cacheDirectory: paths.appWebpackCache,
+      store: 'pack',
+      buildDependencies: {
+        defaultWebpack: ['webpack/lib/'],
+        config: [__filename],
+        tsconfig: [paths.tsconfigJson, paths.jsconfigJson].filter(file =>
+          fs.existsSync(file)
+        ),
+      },
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: paths.src.indexHtml,
+        favicon: paths.src.assets.faviconIco,
+        title: 'Create Application Template RS',
+        ...(isProduction && {
+          minify: {
+            removeComments: true,
+            collapseWhitespace: true,
+            removeRedundantAttributes: true,
+            useShortDoctype: true,
+            removeEmptyAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+            keepClosingSlash: true,
+            minifyJS: true,
+            minifyCSS: true,
+            minifyURLs: true,
+          },
+        }),
+      }),
+      new RspackManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: '/',
+        generate: generateAssetManifest,
+      }),
+      new rspack.CopyRspackPlugin({
+        patterns: [{
+          from: paths.src.public,
+          to: paths.build,
+        }],
+      }),
+      new Dotenv(),
+    ],
+  }
+}

package/rspack/rspack.config.js

@@ -0,0 +1,14 @@
+const { merge } = require('webpack-merge')
+const commonConfig = require('./rspack.common.js')
+
+require('dotenv-flow').config()
+
+module.exports = (rspackEnv) => {
+  const { BUNDLER_ENV } = rspackEnv
+
+  const envConfig = require(`./rspack.${BUNDLER_ENV}.js`)
+
+  const config = merge(commonConfig(rspackEnv), envConfig(rspackEnv))
+
+  return config
+}

package/rspack/rspack.dev.js

@@ -0,0 +1,36 @@
+const { rspack } = require('@rspack/core')
+const ReactRefreshPlugin = require('@rspack/plugin-react-refresh')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const packageJson = require('../package.json')
+
+module.exports = () => {
+  const { PORT } = process.env
+
+  return {
+    mode: 'development',  // NODE_ENV
+    devtool: 'cheap-module-source-map',
+    devServer: {
+      // static: {
+      //   directory: paths.build,
+      // },
+      hot: true,
+      open: true,
+      port: PORT || 3333,
+      proxy: [
+        {
+          context: ['/'],
+          target: packageJson.proxy,
+        },
+      ],
+      historyApiFallback: true,
+    },
+    plugins: [
+      new rspack.DefinePlugin({
+        'process.env.EXAMPLE': JSON.stringify('devconfig'),
+      }),
+      new ReactRefreshPlugin(),
+      new rspack.HotModuleReplacementPlugin(),
+      new CaseSensitivePathsPlugin(),
+    ],
+  }
+}

package/rspack/rspack.prod.js

@@ -0,0 +1,43 @@
+const { rspack } = require('@rspack/core')
+const TerserPlugin = require('terser-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const WebpackShellPluginNext =require('webpack-shell-plugin-next')
+const getPaths = require('./utilities/getPaths')
+const getTerserOptions = require('./utilities/getTerserOptions')
+
+module.exports = (rspackEnv) => {
+  const { BUNDLER_ENV, BUNDLER_WITH_PROFILING } = rspackEnv
+
+  const paths = getPaths({ BUNDLER_ENV })
+  const terserOptions = getTerserOptions({ BUNDLER_WITH_PROFILING })
+
+  return {
+    mode: 'production',  // NODE_ENV
+    devtool: 'source-map',
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({ terserOptions }),  // TODO investigate SwcJsMinimizerRspackPlugin
+        new CssMinimizerPlugin(),  // TODO investigate LightningCssMinimizerRspackPlugin
+      ],
+    },
+    plugins: [
+      new rspack.DefinePlugin({
+        'process.env.EXAMPLE': JSON.stringify('prodconfig'),
+      }),
+      new rspack.CssExtractRspackPlugin({  // new MiniCssExtractPlugin({
+        filename: paths.static.css.filenameCss,
+        chunkFilename: paths.static.css.chunkFilenameCss,
+      }),
+      // TODO watch list to see if WebpackShellPluginNext gets added:
+      // https://rspack.rs/guide/compatibility/plugin#plugin-compatibility
+      new WebpackShellPluginNext({
+        onBuildStart: {
+          scripts: ['ts-node scripts/generate-sitemap.ts'],
+          blocking: true,
+          parallel: false,
+        },
+      }),
+    ],
+  }
+}

package/rspack/utilities/createEnvironmentHash.js

@@ -0,0 +1,8 @@
+const { createHash } = require('crypto')
+
+module.exports = ({ processEnv }) => {
+  const hash = createHash('md5')
+  hash.update(JSON.stringify(processEnv))
+
+  return hash.digest('hex')
+}

package/rspack/utilities/env.js

@@ -0,0 +1,8 @@
+// NOTE passed in via webpack --env
+
+module.exports = Object.freeze({
+  BUNDLER_ENV: {
+    prod: 'prod',
+    dev: 'dev',
+  },
+})

package/rspack/utilities/generateAssetManifest.js

@@ -0,0 +1,16 @@
+module.exports = (seed, files, entrypoints) => {
+  const manifestFiles = files.reduce((manifest, file) => {
+    manifest[file.name] = file.path
+
+    return manifest
+  }, seed)
+
+  const entrypointFiles = entrypoints.main.filter(
+    fileName => !fileName.endsWith('.map')
+  )
+
+  return {
+    files: manifestFiles,
+    entrypoints: entrypointFiles,
+  }
+}

package/rspack/utilities/getPaths.js

@@ -0,0 +1,57 @@
+const path = require('path')
+const env = require('./env')
+
+// NOTE root path assumes execution from react app root
+
+const getPaths = ({ BUNDLER_ENV }) => {
+  const isProduction = (BUNDLER_ENV === env.BUNDLER_ENV.prod)
+
+  return {
+    root: process.cwd(),
+    get jsconfigJson() { return path.join(this.root, 'jsconfig.json') },
+    get tsconfigJson() { return path.join(this.root, 'tsconfig.json') },
+    get build() { return path.join(this.root, 'build') },
+    static: {
+      static: 'static',
+      get css() {
+        return {
+          css: path.join(this.static, 'css'),
+          get filenameCss() { return path.join(this.css, '[name].[contenthash].css') },
+          get chunkFilenameCss() { return path.join(this.css, '[name].[contenthash].chunk.css') },
+        }
+      },
+      get js() {
+        const filenameJs = isProduction ? '[name].[contenthash].js' : '[name].js'
+        const chunkFilenameJs = isProduction ? '[name].[contenthash].chunk.js' : '[name].chunk.js'
+
+        return {
+          js: path.join(this.static, 'js'),
+          get filenameJs() { return path.join(this.js, filenameJs) },
+          get chunkFilenameJs() { return path.join(this.js, chunkFilenameJs) },
+        }
+      },
+      get media() {
+        return {
+          media: path.join(this.static, 'media'),
+          get filenameExt() { return path.join(this.media, '[name].[hash][ext]') },
+        }
+      },
+    },
+    get src() {
+      return {
+        src: path.join(this.root, 'src'),
+        get indexTsx() { return path.join(this.src, 'index.tsx') },
+        get indexHtml() { return path.join(this.src, 'index.html') },
+        get public() { return path.join(this.src, 'public') },
+        get assets() {
+          return {
+            assets: path.join(this.src, 'assets'),
+            get faviconIco() { return path.join(this.assets, 'favicon.ico') },
+          }
+        },
+      }
+    },
+  }
+}
+
+module.exports = getPaths

package/rspack/utilities/getTerserOptions.js

@@ -0,0 +1,47 @@
+// NOTE npm module react-scripts' options where the starting point,
+// comments marked with :rs: are paraphrased from react-scripts
+
+module.exports = ({ BUNDLER_WITH_PROFILING }) => {
+  const withProfiling = (BUNDLER_WITH_PROFILING)
+
+  return {
+    parse: {
+      // :rs: want terser to parse ecma 8 code however, don't want it
+      // to apply minification steps that turns valid ecma 5 code
+      // into invalid ecma 5 code... this is also why compress and 
+      // output only apply transformations that are ecma 5 safe
+      // https://github.com/facebook/create-react-app/pull/4234
+      ecma: 8,
+    },
+    compress: {
+      ecma: 5,
+      warnings: false,
+      // :rs: disabled b/c of an issue with Uglify breaking seemingly valid code:
+      // https://github.com/facebook/create-react-app/issues/2376
+      // pending further investigation:
+      // https://github.com/mishoo/UglifyJS2/issues/2011
+      comparisons: false,
+      // :rs: disabled because of an issue with Terser breaking valid code:
+      // https://github.com/facebook/create-react-app/issues/5250
+      // pending further investigation:
+      // https://github.com/terser-js/terser/issues/120
+      inline: 2,
+    },
+    mangle: {
+      // to work around the Safari 10 loop iterator 
+      // warning "Cannot declare a let variable twice"
+      // (although, i think safari is kind of right)
+      safari10: true,
+    },
+    // :rs: for profiling in devtools
+    keep_classnames: withProfiling,
+    keep_fnames: withProfiling,
+    output: {
+      ecma: 5,
+      comments: false,
+      // :rs: emoji and regex not minified properly using default
+      // https://github.com/facebook/create-react-app/issues/2488
+      ascii_only: true,
+    },
+  }
+}

package/scripts/generate-sitemap.ts

@@ -0,0 +1,25 @@
+const { existsSync, writeFileSync } = require('fs')
+const path = require('path')
+const packageJson = require('../package.json')
+
+const now = new Date().toISOString()
+const sitemapPath = path.resolve(__dirname, '../src/public/sitemap.xml')
+const baseUrl = packageJson.url || 'https://www.createapplicationtemplate.com/'
+
+if (existsSync(sitemapPath)) {
+  console.info('📝 overwriting existing sitemap.xml')
+}
+
+const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+      <loc>${baseUrl}</loc>
+      <lastmod>${now}</lastmod>
+      <changefreq>weekly</changefreq>
+      <priority>1.0</priority>
+    </url>
+  </urlset>`
+
+writeFileSync(sitemapPath, sitemap.trim())
+
+console.info('✅ sitemap.xml updated with lastmod:', now)