foobara-empty-typescript-react-project-generator 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d88f0fadc7f0afc451cff43e45176a18e7cf1a9b3f7bf731a6123ff7f702fb1b
-  data.tar.gz: efe8102579f2d61c603365f8c874523eff5cfa1bab1e554763a7a466b5fe2341
+  metadata.gz: 7f7b4ac21e56483eddd6d15620cf1edaaccd9448e227d17dd2fc73f33c1d38d6
+  data.tar.gz: 7b6a39dbbf4e8e24e739af7cc782677f5dc10139d4971d40b473935c5763a030
 SHA512:
-  metadata.gz: e7efd4a034de02009d2c62d493550b155b91e690ce80e70ec1f9321b3fb773eceb1ed5662a93584952daf17af131cc007f4ff3cd3219d5f45ea6bf165d7e8a81
-  data.tar.gz: 198dfe37e4f82b40e8bd0040728129a581f1608399f67b606d3fc6eb9bdc33677299ef663cf1447e698d2d33cb627fb94e814236b97805ac169442d1afd52948
+  metadata.gz: 324c237a91f5351a2b885d541b364d6593c5341960cdcf021851926f841ffdb21815bee05dc1b46926808eed81c400a21d5e397e8ae919462e8af9d889306151
+  data.tar.gz: cae37cc52abad3774ec99bfbc02c2719cee244d900f6a2efe9384177011302837cf27a6a6d5bcae07964d3ff7145b73c2cd0d008745f31bb8ab262d0e4488821

data/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [0.3.0] - 2026-07-05
+
+- Wire up react router/nav
+- Wire up a sitemap/prerender stuff
+- Switch to oxlint in generated projects
+
+## [0.2.0] - 2026-03-19
+
+- Switch to generating the project with Vite instead of CRA
+
 ## [0.1.0] - 2025-08-22
 
 - Mark as compatible with Foobara 0.1.0

data/src/empty_typescript_react_project_config.rb

@@ -8,6 +8,7 @@ module Foobara
           project_dir :string, :required
           github_organization :string
           push_to_github :boolean, default: false
+          site_url :string, default: "https://example.com"
         end
       end
     end

data/src/empty_typescript_react_project_generator.rb

@@ -7,8 +7,10 @@ module Foobara
             def manifest_to_generator_classes(manifest)
               case manifest
               when EmptyTypescriptReactProjectConfig
-                # Nothing to do yet re: rendering templates. Everything is untemplated so far.
-                []
+                [
+                  Generators::RobotsTxtGenerator,
+                  Generators::RoutesTsGenerator
+                ]
               else
                 # :nocov:
                 raise "Not sure how build a generator for a #{manifest}"
@@ -16,6 +18,10 @@ module Foobara
               end
             end
           end
+
+          alias empty_typescript_react_project_config relevant_manifest
+
+          def templates_dir = "#{__dir__}/../templates"
         end
       end
     end

data/src/generate_empty_typescript_react_project.rb

@@ -18,10 +18,7 @@ module Foobara
           add_initial_elements_to_generate
 
           each_element_to_generate do
-            # currently there are no templated files to write and so this code path isn't hit
-            # :nocov:
             generate_element
-            # :nocov:
           end
 
           paths_to_source_code

data/src/generators/robots_txt_generator.rb

@@ -0,0 +1,13 @@
+require_relative "../empty_typescript_react_project_generator"
+
+module Foobara
+  module Generators
+    module EmptyTypescriptReactProjectGenerator
+      module Generators
+        class RobotsTxtGenerator < EmptyTypescriptReactProjectGenerator
+          def template_path = ["public", "robots.txt.erb"]
+        end
+      end
+    end
+  end
+end

data/src/generators/routes_ts_generator.rb

@@ -0,0 +1,13 @@
+require_relative "../empty_typescript_react_project_generator"
+
+module Foobara
+  module Generators
+    module EmptyTypescriptReactProjectGenerator
+      module Generators
+        class RoutesTsGenerator < EmptyTypescriptReactProjectGenerator
+          def template_path = ["scripts", "routes.ts.erb"]
+        end
+      end
+    end
+  end
+end

data/src/write_empty_typescript_react_project_to_disk.rb

@@ -54,19 +54,17 @@ module Foobara
         end
 
         def run_pre_generation_tasks
-          run_npx_create_react_app
-          add_necessary_dev_dependencies_for_eslint
-          fix_uncorrectable_lint_violations
-          eslint_fix
+          run_npm_create_vite
+          npm_install
           git_init
           git_add_all
-          git_commit_lint_fixes
+          git_commit_initial_setup
         end
 
-        def run_npx_create_react_app
-          puts "created empty project with create-react-app..."
+        def run_npm_create_vite
+          puts "creating empty project with Vite..."
 
-          cmd = "npx create-react-app --template typescript #{empty_typescript_react_project_config.project_dir}"
+          cmd = "npm create vite@latest #{empty_typescript_react_project_config.project_dir} -- --template react-ts"
 
           FileUtils.mkdir_p output_parent_directory
 
@@ -75,16 +73,10 @@ module Foobara
           end
         end
 
-        def add_necessary_dev_dependencies_for_eslint
-          puts "adding dependencies needed for linter to actually work..."
+        def npm_install
+          puts "installing dependencies..."
 
-          cmd = "npm install --save-dev " \
-                "@babel/plugin-proposal-private-property-in-object@^7.21.11 " \
-                "@eslint/create-config@^0.4.6 " \
-                "eslint-config-standard-with-typescript@^37.0.0 " \
-                "eslint-plugin-n@^16.5.0 " \
-                "eslint-plugin-promise@^6.1.1 " \
-                "typescript@^4.0.0 "
+          cmd = "npm install"
 
           Dir.chdir project_directory do
             run_cmd_and_write_output(cmd)
@@ -92,7 +84,11 @@ module Foobara
         end
 
         def run_post_generation_tasks
-          eslint_fix
+          npm_install_react_router
+          npm_install_sitemap_and_prerender_dependencies
+          add_build_scripts_to_package_json
+          remove_static_title_from_index_html
+          oxlint_fix
           git_add_all
           git_commit_generated_files
           git_branch_main
@@ -104,18 +100,52 @@ module Foobara
           end
         end
 
-        def fix_uncorrectable_lint_violations
-          Dir.chdir(project_directory) do
-            web_vitals_contents = File.read("src/reportWebVitals.ts")
-            web_vitals_contents.gsub!("if (onPerfEntry && ", "if (onPerfEntry != null && ")
-            File.write("src/reportWebVitals.ts", web_vitals_contents)
+        def npm_install_react_router
+          puts "installing react-router..."
+
+          cmd = "npm install react-router-dom"
+
+          Dir.chdir project_directory do
+            run_cmd_and_write_output(cmd)
           end
         end
 
-        def eslint_fix
+        def npm_install_sitemap_and_prerender_dependencies
+          puts "installing sitemap/pre-render dependencies..."
+
+          cmd = "npm install --save-dev puppeteer tsx @types/node"
+
+          Dir.chdir project_directory do
+            run_cmd_and_write_output(cmd)
+          end
+        end
+
+        def add_build_scripts_to_package_json
+          puts "adding prebuild/postbuild scripts..."
+
+          Dir.chdir project_directory do
+            run_cmd_and_write_output(
+              'npm pkg set scripts.prebuild="npx puppeteer browsers install chrome && ' \
+              'tsx scripts/generate-sitemap.ts"'
+            )
+            run_cmd_and_write_output(
+              'npm pkg set scripts.postbuild="tsx scripts/prerender.ts"'
+            )
+          end
+        end
+
+        # Pages now set their own <title> in React 19
+        def remove_static_title_from_index_html
+          index_html_path = File.join(project_directory, "index.html")
+          contents = File.read(index_html_path)
+
+          File.write(index_html_path, contents.sub(%r{\s*<title>.*</title>}, ""))
+        end
+
+        def oxlint_fix
           puts "linting..."
 
-          cmd = "npx eslint 'src/**/*.{js,jsx,ts,tsx}' --fix"
+          cmd = "npx oxlint --fix"
           Dir.chdir project_directory do
             run_cmd_and_write_output(cmd)
           end
@@ -137,8 +167,8 @@ module Foobara
           end
         end
 
-        def git_commit_lint_fixes
-          cmd = "git commit -m 'Make project work with eslint and eslint --fix everything'"
+        def git_commit_initial_setup
+          cmd = "git commit -m 'Initial Vite project with react-ts template'"
 
           Dir.chdir project_directory do
             run_cmd_and_write_output(cmd, raise_if_fails: false)

data/templates/.github/workflows/tests.yml

@@ -3,16 +3,17 @@ on: push
 jobs:
   tests:
     runs-on: ubuntu-latest
-    name: run test suite
+    name: build and lint
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js
         if: always()
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          # how to grab this from .nvmrc??
-          node-version: "20.9"
+          node-version: "20"
       - name: Install dependencies
         run: npm install
-      - name: Run test
-        run: npm run test
+      - name: Lint
+        run: npm run lint
+      - name: Build
+        run: npm run build

data/templates/.oxlintrc.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  },
+  "overrides": [
+    {
+      "files": ["src/domains/**/*.{ts,tsx}"],
+      "rules": {
+        "typescript/no-explicit-any": "off",
+        "typescript/prefer-as-const": "off"
+      }
+    }
+  ]
+}

data/templates/public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

data/templates/public/robots.txt.erb

@@ -0,0 +1,5 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
+
+Sitemap: <%= site_url %>/sitemap.xml

data/templates/scripts/generate-sitemap.ts

@@ -0,0 +1,28 @@
+import { writeFileSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { SITE_URL, getSitemapPages } from './routes.ts'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const allPages = getSitemapPages()
+
+const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${allPages
+  .map(
+    (page) => `  <url>
+    <loc>${SITE_URL}${page.loc}</loc>
+    <changefreq>${page.changefreq}</changefreq>
+    <priority>${page.priority}</priority>${page.lastmod ? `\n    <lastmod>${page.lastmod}</lastmod>` : ''}
+  </url>`,
+  )
+  .join('\n')}
+</urlset>
+`
+
+const sitemapPath = resolve(__dirname, '../public/sitemap.xml')
+writeFileSync(sitemapPath, sitemap)
+
+console.log(`Generated sitemap with ${allPages.length} URLs`)

data/templates/scripts/prerender.ts

@@ -0,0 +1,53 @@
+import { writeFileSync, mkdirSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { preview } from 'vite'
+import puppeteer from 'puppeteer'
+import { getRoutePaths } from './routes.ts'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const projectRoot = resolve(__dirname, '..')
+const distDir = resolve(projectRoot, 'dist')
+
+const routes = getRoutePaths()
+
+const server = await preview({ root: projectRoot })
+const serverUrl = server.resolvedUrls!.local[0]
+
+const browser = await puppeteer.launch({
+  args: ['--no-sandbox', '--disable-setuid-sandbox'],
+})
+
+// Render everything before writing anything to deal with / prerendering
+const rendered: { route: string; outputPath: string; html: string }[] = []
+
+for (const route of routes) {
+  const page = await browser.newPage()
+
+  await page.evaluateOnNewDocument(() => {
+    document.addEventListener('prerender-ready', () => {
+      ;(window as Window & { __prerenderReady?: boolean }).__prerenderReady = true
+    })
+  })
+
+  await page.goto(new URL(route, serverUrl).href, { waitUntil: 'networkidle0' })
+  await page.waitForFunction('window.__prerenderReady === true')
+
+  const outputPath = route === '/' ? 'index.html' : `${route.replace(/^\//, '')}.html`
+  rendered.push({ route, outputPath, html: await page.content() })
+
+  await page.close()
+}
+
+for (const { route, outputPath, html } of rendered) {
+  const outputFile = resolve(distDir, outputPath)
+
+  mkdirSync(dirname(outputFile), { recursive: true })
+  writeFileSync(outputFile, html)
+  console.log(`Pre-rendered ${route} -> dist/${outputPath}`)
+}
+
+await browser.close()
+server.httpServer.close()
+process.exit(0)

data/templates/scripts/routes.ts.erb

@@ -0,0 +1,25 @@
+export const SITE_URL = '<%= site_url %>'
+
+export interface SitemapPage {
+  loc: string
+  changefreq: string
+  priority: string
+  lastmod?: string
+}
+
+export const STATIC_PAGES: SitemapPage[] = [
+  { loc: '/', changefreq: 'monthly', priority: '1.0' },
+  { loc: '/about', changefreq: 'monthly', priority: '0.8' },
+]
+
+export function getDynamicPages(): SitemapPage[] {
+  return []
+}
+
+export function getSitemapPages(): SitemapPage[] {
+  return [...STATIC_PAGES, ...getDynamicPages()]
+}
+
+export function getRoutePaths(): string[] {
+  return getSitemapPages().map((page) => page.loc)
+}

data/templates/src/App.tsx

@@ -0,0 +1,24 @@
+import { NavLink, Route, Routes } from 'react-router-dom'
+import './App.css'
+import Home from './pages/Home'
+import About from './pages/About'
+import NotFound from './pages/NotFound'
+
+function App() {
+  return (
+    <div className="App">
+      <nav>
+        <NavLink to="/">Home</NavLink> | <NavLink to="/about">About</NavLink>
+      </nav>
+      <main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </main>
+    </div>
+  )
+}
+
+export default App

data/templates/src/main.tsx

@@ -0,0 +1,28 @@
+import { StrictMode } from 'react'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App.tsx'
+
+const rootElement = document.getElementById('root')!
+
+const app = (
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+)
+
+if (rootElement.hasChildNodes()) {
+  hydrateRoot(rootElement, app)
+} else {
+  createRoot(rootElement).render(app)
+}
+
+// Not sure if this is necessary but gives some extra time for things to settle before pre-rendering
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    document.dispatchEvent(new Event('prerender-ready'))
+  })
+})

data/templates/src/pages/About.tsx

@@ -0,0 +1,12 @@
+function About() {
+  return (
+    <div>
+      <title>About</title>
+      <meta name="description" content="About this project" />
+      <h1>About</h1>
+      <p>Stuff about this project or whatever</p>
+    </div>
+  )
+}
+
+export default About

data/templates/src/pages/Home.tsx

@@ -0,0 +1,12 @@
+function Home() {
+  return (
+    <div>
+      <title>Home</title>
+      <meta name="description" content="The home page" />
+      <h1>Home</h1>
+      <p>Hello, World!</p>
+    </div>
+  )
+}
+
+export default Home

data/templates/src/pages/NotFound.tsx

@@ -0,0 +1,11 @@
+function NotFound() {
+  return (
+    <div>
+      <title>Not Found</title>
+      <h1>Not Found</h1>
+      <p>There is nothing at this URL.</p>
+    </div>
+  )
+}
+
+export default NotFound

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foobara-empty-typescript-react-project-generator
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Miles Georgi
@@ -58,11 +58,22 @@ files:
 - src/empty_typescript_react_project_config.rb
 - src/empty_typescript_react_project_generator.rb
 - src/generate_empty_typescript_react_project.rb
+- src/generators/robots_txt_generator.rb
+- src/generators/routes_ts_generator.rb
 - src/write_empty_typescript_react_project_to_disk.rb
 - templates/.env
-- templates/.eslintrc.js
 - templates/.github/workflows/tests.yml
-- templates/tsconfig.json
+- templates/.oxlintrc.json
+- templates/public/_redirects
+- templates/public/robots.txt.erb
+- templates/scripts/generate-sitemap.ts
+- templates/scripts/prerender.ts
+- templates/scripts/routes.ts.erb
+- templates/src/App.tsx
+- templates/src/main.tsx
+- templates/src/pages/About.tsx
+- templates/src/pages/Home.tsx
+- templates/src/pages/NotFound.tsx
 homepage: https://github.com/foobara/generators-empty-typescript-react-project-generator
 licenses:
 - Apache-2.0
@@ -80,13 +91,16 @@ required_ruby_version: !ruby/object:Gem::Requirement
   - - ">="
     - !ruby/object:Gem::Version
       version: 3.4.0
+  - - "<"
+    - !ruby/object:Gem::Version
+      version: 4.1.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.10
 specification_version: 4
 summary: Generates empty typescript react projects
 test_files: []

data/templates/.eslintrc.js

@@ -1,45 +0,0 @@
-module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "standard-with-typescript",
-        "plugin:react/recommended"
-    ],
-    "overrides": [
-        {
-            "env": {
-                "node": true
-            },
-            "files": [
-                ".eslintrc.{js,cjs}"
-            ],
-            "parserOptions": {
-                "sourceType": "script"
-            }
-        }
-    ],
-    parser: '@typescript-eslint/parser',
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        project: ['./tsconfig.json'],
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    settings: {
-        react: {
-            version: "detect"
-        },
-    },
-    "rules": {
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/triple-slash-reference": "off",
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/no-floating-promises": "off",
-        "react/jsx-indent" : ["error", 2],
-        "react/jsx-indent-props": ["error", 2]
-    }
-}

data/templates/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "CommonJS",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}