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

package/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "babel-plugin-react-compiler"
+  ]
+}

package/.browserslistrc

@@ -0,0 +1,3 @@
+# supported browsers
+
+defaults and fully supports es6-module

package/.eslintrc.js

@@ -0,0 +1,309 @@
+const restrictedGlobals = require('confusing-browser-globals')
+
+// NOTE use following to address: 'Parsing error: __classPrivateFieldGet(...).at is not a function error'
+// '@typescript-eslint/eslint-plugin': '6.5.0',
+// '@typescript-eslint/parser': '6.5.0',
+
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:jsx-a11y/recommended',
+    'plugin:eslint-comments/recommended',
+    'plugin:eslint-plugin-compat/recommended',
+  ],
+  rules: {
+    // 📜 @typescript-eslint
+    'quotes': 'off',
+    '@typescript-eslint/quotes': ['error', 'single'],
+    'no-dupe-class-members': 'off',  // handled by .ts
+    'no-undef': 'off',  // handled by .ts
+    '@typescript-eslint/consistent-type-assertions': 'error',
+    'no-array-constructor': 'off',
+    '@typescript-eslint/no-array-constructor': 'error',
+    'no-var': 'error',  // makes 'no-redeclare' irrelevant
+    // 'no-redeclare': 'off',  // see above
+    // '@typescript-eslint/no-redeclare': 'error',  // see above
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      {
+        'functions': true,
+        'classes': true,
+        'variables': true,
+        'allowNamedExports': true,
+        'enums': true,
+        'typedefs': true,
+        'ignoreTypeReferences': true,
+      },
+    ],
+    'no-unused-expressions': 'off',
+    '@typescript-eslint/no-unused-expressions': [
+      'error',
+      {
+        'allowShortCircuit': true,
+        'allowTernary': true,
+        'allowTaggedTemplates': true,
+      },
+    ],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        'ignoreRestSiblings': true,
+      },
+    ],
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': 'error',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+    // 📜 eslint
+    'array-callback-return': 'error',
+    'default-case': 'error',
+    'dot-location': ['error', 'property'],
+    'eqeqeq': ['error', 'always'],
+    'new-parens': 'error',
+    'no-caller': 'error',
+    'no-cond-assign': ['error', 'except-parens'],
+    'no-const-assign': 'error',
+    'no-control-regex': 'error',
+    'no-delete-var': 'error',
+    'no-dupe-args': 'error',
+    'no-dupe-keys': 'error',
+    'no-duplicate-case': 'error',
+    'no-empty-character-class': 'error',
+    'no-empty-pattern': 'error',
+    'no-eval': 'error',
+    'no-ex-assign': 'error',
+    'no-extend-native': 'error',
+    'no-extra-bind': 'error',
+    'no-extra-label': 'error',
+    'no-fallthrough': 'error',
+    'no-func-assign': 'error',
+    'no-implied-eval': 'error',
+    'no-invalid-regexp': 'error',
+    'no-iterator': 'error',
+    'no-label-var': 'error',
+    'no-labels': [
+      'error',
+      {
+        'allowLoop': true,
+        'allowSwitch': false,
+      },
+    ],
+    'no-lone-blocks': 'error',
+    'no-loop-func': 'error',
+    'no-mixed-operators': [
+      'error',
+      {
+        'groups': [
+          ['&', '|', '^', '~', '<<', '>>', '>>>'],
+          ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+          ['&&', '||'],
+          ['in', 'instanceof'],
+        ],
+        'allowSamePrecedence': false,
+      },
+    ],
+    'no-multi-str': 'error',
+    'no-native-reassign': 'error',
+    'no-negated-in-lhs': 'error',
+    'no-new-func': 'error',
+    'no-new-object': 'error',
+    'no-new-symbol': 'error',
+    'no-new-wrappers': 'error',
+    'no-obj-calls': 'error',
+    'no-octal': 'error',
+    'no-octal-escape': 'error',
+    'no-redeclare': 'error',
+    'no-regex-spaces': 'error',
+    'no-restricted-syntax': ['error', 'WithStatement'],
+    'no-script-url': 'error',
+    'no-self-assign': 'error',
+    'no-self-compare': 'error',
+    'no-sequences': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-sparse-arrays': 'error',
+    'no-template-curly-in-string': 'error',
+    'no-this-before-super': 'error',
+    'no-throw-literal': 'error',
+    'no-restricted-globals': ['error'].concat(restrictedGlobals),
+    'no-unreachable': 'error',
+    'no-unused-labels': 'error',
+    'no-useless-computed-key': 'error',
+    'no-useless-concat': 'error',
+    'no-useless-escape': 'error',
+    'no-useless-rename': [
+      'error',
+      {
+        'ignoreDestructuring': false,
+        'ignoreImport': false,
+        'ignoreExport': false,
+      },
+    ],
+    'no-with': 'error',
+    'no-whitespace-before-property': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    'require-yield': 'error',
+    'rest-spread-spacing': ['error', 'never'],
+    'strict': ['error', 'never'],
+    'unicode-bom': ['error', 'never'],
+    'use-isnan': 'error',
+    'valid-typeof': 'error',
+    'no-restricted-properties': [
+      'error',
+      {
+        'object': 'require',
+        'property': 'ensure',
+        'message': 'use import() instead',
+      },
+      {
+        'object': 'System',
+        'property': 'import',
+        'message': 'use import() instead',
+      },
+    ],
+    'getter-return': 'error',
+
+    // 📜 eslint, some additional styles
+    'array-element-newline': ['error', 'consistent'],
+    'comma-dangle': ['error', {
+      'arrays': 'always-multiline',
+      'objects': 'always-multiline',
+      'imports': 'always-multiline',
+      'exports': 'always-multiline',
+      // 'functions': 'never'
+    }],
+    'semi': ['error', 'never'],
+    'curly': ['error', 'multi-line'],
+    'indent': [
+      'error',
+      2,
+      {
+        'SwitchCase': 1,
+      },
+    ],
+    'arrow-spacing': ['error'],
+    'object-curly-spacing': ['error', 'always'],
+    'array-bracket-spacing': ['error', 'never'],
+    'no-irregular-whitespace': ['error'],
+    'eol-last': ['error', 'always'],
+    'no-trailing-spaces': [
+      'error',
+      {
+        'skipBlankLines': false,
+        'ignoreComments': true,
+      },
+    ],
+    'jsx-quotes': ['error', 'prefer-single'],
+    'comma-spacing': ['error', {
+      before: false,
+      after: true,
+    }],
+
+    // 📜 import
+    'import/first': 'error',
+    'import/no-amd': 'error',
+    'import/no-anonymous-default-export': 'error',
+    'import/no-webpack-loader-syntax': 'error',
+
+    // 📜 react
+    'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/forbid-foreign-prop-types': [
+      'error',
+      {
+        'allowInPropTypes': true,
+      },
+    ],
+    'react/jsx-no-comment-textnodes': 'error',
+    'react/jsx-no-duplicate-props': 'error',
+    'react/jsx-no-target-blank': 'error',
+    'react/jsx-no-undef': 'error',
+    'react/jsx-pascal-case': [
+      'error',
+      {
+        'allowAllCaps': true,
+        'ignore': [],
+      },
+    ],
+    'react/no-danger-with-children': 'error',
+    // Disabled because of undesirable warnings
+    // 'react/no-deprecated': 'error',
+    'react/no-direct-mutation-state': 'error',
+    'react/no-is-mounted': 'error',
+    'react/no-typos': 'error',
+    'react/require-render-return': 'error',
+    'react/style-prop-object': 'error',
+
+    // 📜 react, some additional styles
+    'react/jsx-child-element-spacing': 'error',
+    'react/jsx-closing-bracket-location': 'error',
+    'react/jsx-closing-tag-location': 'error',
+    'react/jsx-curly-newline': [
+      'error',
+      {
+        'multiline': 'consistent',
+        'singleline': 'consistent',
+      },
+    ],
+    'react/jsx-equals-spacing': ['error', 'never'],
+    'react/jsx-indent': ['error', 2],
+    'react/jsx-indent-props': ['error', 2],
+    'react/jsx-props-no-multi-spaces': 'error',
+
+    // 📜 jsx-a11y
+    'jsx-a11y/click-events-have-key-events': 'off',  // could cause accidental clicks
+    'jsx-a11y/alt-text': 'error',
+    'jsx-a11y/anchor-has-content': 'error',
+    'jsx-a11y/anchor-is-valid': [
+      'error',
+      {
+        'aspects': ['noHref', 'invalidHref'],
+      },
+    ],
+    'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
+    'jsx-a11y/aria-props': 'error',
+    'jsx-a11y/aria-proptypes': 'error',
+    'jsx-a11y/aria-role': [
+      'error',
+      {
+        'ignoreNonDOM': true,
+      },
+    ],
+    'jsx-a11y/aria-unsupported-elements': 'error',
+    'jsx-a11y/heading-has-content': 'error',
+    'jsx-a11y/iframe-has-title': 'error',
+    'jsx-a11y/img-redundant-alt': 'error',
+    'jsx-a11y/no-access-key': 'error',
+    'jsx-a11y/no-distracting-elements': 'error',
+    'jsx-a11y/no-redundant-roles': 'error',
+    'jsx-a11y/role-has-required-aria-props': 'error',
+    'jsx-a11y/role-supports-aria-props': 'error',
+    'jsx-a11y/scope': 'error',
+
+    // 📜 react-hooks
+    'react-hooks/rules-of-hooks': 'error',
+
+    // 'flowtype/define-flow-type': 'error',
+    // 'flowtype/require-valid-file-annotation': 'error',
+    // 'flowtype/use-flow-type': 'error',
+  },
+}

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+npm run lint
+npm run stylelint
+# use below if you wish to use .css (see README.md "styles")
+# npm run stylelint:css
+npm run test

package/.stylelintrc.js

@@ -0,0 +1,29 @@
+// NOTE if you wish to use .css (see README.md "styles")
+// - remove customSyntax and use "npm stylelint:css"
+// - remove 'value-keyword-case', particularly 'ignoreKeywords'
+
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-recess-order',
+    'stylelint-no-unsupported-browser-features',
+  ],
+
+  customSyntax: 'postcss-styled-components',
+  ignoreFiles: [],
+  rules: {
+    'selector-class-pattern': null,
+    'keyframes-name-pattern': null,
+    'comment-empty-line-before': 'never',
+    'declaration-empty-line-before': 'never',
+    'media-feature-range-notation': 'prefix',
+    'value-keyword-case': [
+      'lower',
+      {
+        'ignoreKeywords': [
+          '/^POSTCSS_styled-components_\\d+$/',
+        ],
+      },
+    ],
+  },
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 daveKontro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FdaveKontro%2Fcreate-application-template-rs%2Fmain%2Fpackage.json&query=%24.version&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEnRFWHRfcV9pY29PcmlnRGVwdGgAMzLV4rjsAAABRUlEQVQ4jcWSP0tCYRyFz++9gV3KCEoroxZxSiLEoCT7MwUGrQ1tfoD28AMEFTQ1F40OOWVLcPMSDqENrU0SBHUpQrA/cr2nQTEwSm8QnfGF5znnhR/w35HWh0LuYUsoYZara9HV0RcAMAyjy6uFjwi+Tc/7k98Krs4fZym1CxFRNfJYHJUCAApTSrgOAEKsRBb9p18E+fyt7rH1MwFjP24mrquV5/hMIlQGAAUA6XRa67b1TFu4Xjnp6e0/yWZvPE1BcHhpA+ByW7g5AnNDPX2bjS9QiqZVEshYpwIAoEOrTF9ACqY1ooA7N/Bn1IT6HViPbVdFAKCYuy+JqHFXNPHkrQwG6gtE23HbLsLdUELeFQBE4gP74mCPJDuBa5CDqbhvG2i9RMOKQkOSDmJQCILUG3WvdFDSlFySzmFkwW+6Xfx3+QCAd27zrNWLdgAAAABJRU5ErkJggg==&label=version&labelColor=%23081e28&color=%23fd05a0)
+![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FdaveKontro%2Fcreate-application-template-rs%2Fmain%2Fpackage.json&query=%24.engines.node&logo=nodedotjs&label=node&labelColor=%23081e28&color=%23fd05a0)
+![Static Badge](https://img.shields.io/badge/npm->=v10-%23fd05a0?logo=npm&labelColor=%23081e28)
+
+# Create Application Template RS
+This project aims to provide a configured application template for you to build upon.  
+
+All configuration is fully visible and under your control to augment as you see fit.  
+
+The template is a typescript enabled React application with a test suite and code linting.  
+
+Rust-based 🦀 web bundler [Rspack](https://rspack.rs/) and compiler [SWC](https://swc.rs/) are utilized for fast bundling and transpiling 
+
+See the template running live [here](https://www.createapplicationtemplaters.com/).  
+
+## installation
+first install globally  
+```
+npm install -g @epic-effx/create-application-template-rs@latest
+```
+
+then create your project  
+```
+npx @epic-effx/create-application-template-rs --name={my-project}
+```
+
+## usage
+webpack is used for code bundling and the development server  
+
+run development server and test suite (on http://localhost:3333 by default)  
+```
+npm run dev
+```
+
+build static bundle  
+```
+npm run build
+```
+
+## compiler 🚀
+this project uses React 19 with [React Compiler](https://react.dev/learn/react-compiler/introduction) opt-in
+
+it takes advantage of the React Compiler's automatic optimization
+
+React Compiler's ESLint integration is also included via `eslint-plugin-react-hooks`
+
+`babel-loader` is used for compilation; see Rspack [docs](https://rspack.rs/guide/tech/react#react-compiler)
+
+## tsconfig
+focused on type checking; SWC is used for transpiling  
+
+## pre-commit
+scripts in `.husky/pre-commit` are run on commits for quality control  
+
+add or remove scripts you'd like run before code is committed  
+
+## test suite
+to create a test follow this file naming format: `*.{spec,test}.{ts,tsx}`  
+
+run the test suite stand alone like so  
+```
+npm run test
+```
+
+## code linting
+linting rules are in `.eslintrc.js`; install the ESLint plugin if using vscode  
+```
+npm run lint
+```
+
+css linting rules are in `.stylelintrc.js`; install the Stylelint plugin if using vscode  
+```
+npm run stylelint
+```
+
+## styles
+styling is done using the style-components module, but straight CSS is supported
+
+after instillation it is recommended to proceed using styled-components or CSS, but not both
+
+if you proceed with styled-components: 
+  - remove the single `.css` example in `/src/styles/`
+  - that's it!
+
+if you prefer CSS: 
+  - alter `.stylelintrc.js` and `.husky/pre-commit` per the files' notes
+  - remove `.ts` files from `/src/styles/` or "recreate" them in `.css`
+
+## environmental settings
+
+access environmental variables in code like so  
+```js
+console.log(process.env.PORT)
+```
+
+### build settings
+
+some environmental setting are explicitly set in the npm scripts using `cross-env`
+
+- `development` when running the dev server  
+- `production` when running the build  
+
+these variables set the OS env as early as possible and control build tool behavior
+
+they are set in the scripts to guarantee consistent, production-safe builds across local, CI, and hosting environments
+
+### `.env` variables
+
+add new or alter existing environmental variables via the `.env` file  
+
+`.env` is intended for application runtime configuration - not build tool configuration
+
+the following variables exist in the default configuration and can be altered  
+
+#### develop (dev server)
+```
+# optional
+PORT={port number}
+INLINE_SIZE_LIMIT={default is 10000}
+```
+
+#### production (build)
+```
+# optional
+INLINE_SIZE_LIMIT={default is 10000}
+```
+
+## dependency overrides
+
+this version includes minimal npm `overrides` to patch known transitive vulnerabilities in tooling
+
+they are intentionally limited to patch-level upgrades within the same major
+
+you can remove them in the future by:
+
+  1. running `npm update`
+  2. removing the `overrides` section
+  3. reinstalling dependencies
+  4. running `npm audit`
+
+

package/bin/create-application-template-rs.js

@@ -0,0 +1,116 @@
+#! /usr/bin/env node
+const { writeFile } = require('fs/promises')
+const { execSync } = require('child_process')
+const path = require('path')
+const yargs = require('yargs/yargs')
+const { hideBin } = require('yargs/helpers')
+const packageJson = require('../package.json')
+
+const run = async () => {
+  const repo = 'https://github.com/daveKontro/create-application-template-rs/tarball/main'
+
+  const execCommand = (command) => {
+    try {
+      execSync(command, { stdio: 'inherit' })
+    } catch (error) {
+      console.error(`${command} failed`, error)
+      process.exit(1)
+    }
+
+    return true
+  }
+
+  // consume arguments
+  const argv = yargs(hideBin(process.argv)).argv
+
+  if (!argv.name) {
+    console.error('WARNING add a project name like so: npx create-application-template-rs --name={my-project}')
+    process.exit(1)
+  }
+
+  const projectPaths = {
+    root: path.resolve('.', argv.name),
+    get bin() { return path.resolve(this.root, 'bin') },
+    get src() { return path.resolve(this.root, 'src') },
+    get env() { return path.resolve(this.root, '.env') },
+    get packageJson() { return path.resolve(this.root, 'package.json') },
+    get subDirFiles() {
+      const src = path.resolve(this.root, 'src')
+      const assets = path.resolve(src, 'assets')
+      const styles = path.resolve(src, 'styles')
+      const components = path.resolve(src, 'components')
+
+      const srcDirs = {
+        assets: {
+          faviconIco: path.resolve(assets, 'favicon.ico'),
+          logoSvg: path.resolve(assets, 'logo.svg'),
+        },
+        components: {
+          appSpecTsx: path.resolve(components, 'App.spec.tsx'),
+          appTsx: path.resolve(components, 'App.tsx'),
+        },
+        styles: {
+          logoStyledTs: path.resolve(styles, 'Logo.styled.ts'),
+          themeTs: path.resolve(styles, 'theme.ts'),
+        },
+      }
+
+      const webpackDirs = {
+        webpack: {
+          webpackCommonJs:
+            path.resolve(this.root, 'webpack', 'webpack.common.js'),
+        },
+      }
+
+      const paths = { ...srcDirs, ...webpackDirs }
+
+      return {
+        src: { ...paths },
+      }
+    },
+  }
+
+  const isNameDotCommand = (argv.name === '.')
+  const projectName = isNameDotCommand ? path.basename(process.cwd()) : argv.name
+
+  console.info('')
+  console.info(`Your project name is: ${projectName}`)
+  console.info('')
+
+  // create project
+  execCommand(`curl -L ${repo} | tar zx --one-top-level=${argv.name} --strip-components 1`)
+
+  // groom project
+  if (packageJson.hasOwnProperty('name')) packageJson.name = projectName
+  if (packageJson.hasOwnProperty('version')) packageJson.version = '1.0.0'
+  if (packageJson.hasOwnProperty('description')) packageJson.description = ''
+  if (packageJson.hasOwnProperty('author')) packageJson.author = ''
+  if (packageJson.hasOwnProperty('bin')) delete packageJson.bin
+  if (packageJson.hasOwnProperty('repository')) delete packageJson.repository
+  if (packageJson.dependencies.hasOwnProperty('yargs')) delete packageJson.dependencies.yargs
+
+  execCommand(`rm ${projectPaths.packageJson}`)
+  execCommand(`rm -rf ${projectPaths.bin}`)
+
+  try {
+    await writeFile(projectPaths.packageJson, JSON.stringify(packageJson, null, 2), {
+      encoding: 'utf8',
+    })
+  } catch (error) {
+    console.error('package.json creation failed', error)
+    process.exit(1)
+  }
+
+  execCommand(`touch ${projectPaths.env}`)
+
+  // install project dependencies
+  execCommand(`npm --prefix ${projectPaths.root} install`)
+
+  // finish up
+  console.info('')
+  console.info('Thanks for using Create Application Template!')
+
+  process.exit(0)
+}
+
+run()

package/jest/cssTransform.js

@@ -0,0 +1,13 @@
+// turning style imports into empty objects
+// https://jestjs.io/docs/code-transformation
+
+module.exports = {
+  process() {
+    return {
+      code: 'module.exports = {}',
+    }
+  },
+  getCacheKey() {
+    return 'cssTransform'
+  },
+}

package/jest/fontTransform.js

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

package/jest/setup.js

@@ -0,0 +1,5 @@
+// make a browser-like environment
+
+if (typeof window !== 'undefined') {
+  require('whatwg-fetch')  // fetch() polyfill
+}