Map components to path / JSX fragment

client/nanoc/rules/react.rules

@@ -1,15 +1,13 @@
 #!/usr/bin/env ruby
 # frozen_string_literal: true
 
-components = {
-  "react-task" => ["tasks/new", "tasks/edit"],
-  "react-tasks" => ["/", "tasks"],
-  "react-projects" => ["projects"]
-}
-
-components.each do |name, paths|
-  compile "/html/react.html.erb", rep: name do
-    filter(:erb, locals: {name:, src: "/js/main.js"})
+{
+  "Task" => ["tasks/new", "tasks/edit"],
+  "Tasks" => ["/", "tasks"],
+  "Projects" => ["projects"]
+}.each do |component, paths|
+  compile "/html/react.html.erb", rep: component do
+    filter(:erb, locals: {name: "react-#{component.downcase}", src: "/js/main.js"})
     paths.each do |path|
       (path == "/") ? write("/index.html") : write("/#{path}/index.html")
     end

client/src/js/main/main.tsx

@@ -7,17 +7,17 @@ import { Task } from "~/components/Task";
 
 (function () {
   const components = {
-    "react-task": () => (
+    "Task": () => (
       <App>
         <Task />
       </App>
     ),
-    "react-tasks": () => (
+    "Tasks": () => (
       <App>
         <Tasks />
       </App>
     ),
-    "react-projects": () => (
+    "Projects": () => (
       <App>
         <Projects />
       </App>
@@ -25,8 +25,8 @@ import { Task } from "~/components/Task";
   };
   const ents = Object.entries(components);
   for (let i = 0; i < ents.length; i++) {
-    const [name, getJSX] = ents[i];
-    const root = document.querySelector(`.${name}`);
+    const [component, getJSX] = ents[i];
+    const root = document.querySelector(`.react-${component.toLowerCase()}`);
     if (root) {
       ReactDOM.createRoot(root).render(getJSX());
       break;