MichaelDimmitt/rr-routes-proposal

routes for react router

React-Routes, a proposal for react router

A command to list routes for an application that uses react router.

Objectives:

1. List routes. (Currently this works via cypress + a react app running.) ✅
2. Should allow static evaluation and not require the app to be running. ✅

How it works

1. a top level typescript config enables interaction with jsx elements
2. the following command is used to run the implementations file with typescript npx tsx src/implementations.ts

V1, react-routes worked but required both an app and cypress implementation to run.
V2, react-routes is working and is a full cli solution with no server needing to run. 🎉

use the command: npx tsx src/implementations.ts to see v2 in action!

Examples of v2 in action!

Test data

I need to find or create react-router implementations that:

1. show deeply nested route "object style" working.
2. show deeply nested route "component style" working.

Ideally these will be in the react-router examples codebase or be added when/if this change is pr'd. ✅ This was achieved due to the update script in package.json that grabs the example folder from react-router.

Therefore, I am going to start using some of the react-router examples as my initial data-set.
(list generated by looking at a few lines and then using count lines of code to find the largest examples.)

1. route-objects examples/route-objects/src/App.tsx
2. auth examples/auth-router-provider/src/App.tsx
3. transitions examples/view-transitions/src/main.tsx

react-router, example section, lines of code analysis

This project will have a test folder that uses cypress to assert the routes output match desired results. COMING SOON, currently exists in implementations file.

Resources:

https://github.com/AlDanial/cloc

cd ../react-router/examples/ &&
for d in ./*/ ; do (
  cd "$d" && 
  printf '%-40s' "$d" && 
  cloc --vcs git | 
  grep -vE "Language|JSON|-|TypeScript|CSS|HTML|Markdown|github.com/AlDanial|JSX|JavaScript" 
); done &&
cd -;