todo.md

• Jest improvements.
  • Set testEnvironment based on file extension.
    • .[tj]sx --> 'jsdom'
    • .[tj]s --> 'node'
• Webpack tree shaking
• How to make your React app importable from an npm install.
  • Also would likely want to convert TypeScript interfaces/types to PropTypes.
    • Possible starting place.
• ESM in browser.
  • Maybe mark all in src/ as externals?
  • They'd probably still at least need Babel transpilation
  • Need to do both module and nomodule output.
    • How to (not super in depth though)
    • Option: webpack-module-nomodule-plugin
    • Option: html-webpack-multi-build-plugin
    • Option: EsmWebpackPlugin
    • Babel targest.esmodules
      • Would likely require the module/nomodule pattern offered by @babel/preset-modules.
      • See the preset-env bugfixes option for more details.
  • Investigate Babel preset-env bugfixes
    • Might help with browser ESM.
  • Customize package.json exports field
    • Allows exporting multiple files (e.g. .mjs and .js) when publishing libraries.
    • File chosen depends on the consuming project's import statement. For example:

      // package.json
      {
          "exports": {
              // Will choose the correct file based on import-statement keyword
              ".": {
                  "import": "dist/index.mjs",
                  "require": "dist/index.js",
              },
              // Will select a file based on import query
              "./Button": "dist/components/Button.js", // Tree-shaking example
              "./components/*.js": "dist/components/*.js", // Tree-shaking with globs (** isn't necessary)
              "./internal/": null // Hide files you don't want consumers to import
          }
      }

    • Example: postcss-js
• Allow type: module in package.json without webpack crashing on src/ imports without extensions.
  • Starter: https://developpaper.com/browser-module-main-field-priority-you-dont-know-about-in-package-json/
• Add preview/start image in manifest.json for when the installed PWA is opening before the page content is actually loaded and the spinner shows.
• Improve output website SEO/usability on different sites.
  • Duplicate/add useful <meta> tags in HtmlWebpackPlugin for OpenGraph (how preview images/text appear when embedded in social media, Slack, etc.).
  • Site-map for which pages/routes exist on a website (helps for SEO). One possibly helpful package is next-sitemap in a postbuild npm script.
• Investigate isomorphic JavaScript.
  • Could be SSR, could be React Native, or something else.
  • During investigation, check out differences between:
    • NextJS - All-in-one/no-configuration-required system.
    • React Starter Kit - Not as much no-configuration-required, meaning we have more control over configs.
      • Uses isomorphic-style-loader for loading (S)CSS styles in all (back-/front-end) contexts.
• BrowserRouter vs HashRouter
  • Client vs Server routing
  • Catch-all in Spring for index.html
• Change AlterFilePostBuild to match InterpolateHtmlPlugin
  • It's possible fs read/write isn't even necessary and maybe webpack does that part automatically
  • Another option other than InterpolateHtmlPlugin: serviceworker-webpack-plugin