chore: more docs and removing unused variables support

Author: jherr

ARCHITECTURE.md

@@ -24,3 +24,28 @@
 
 - `@tanstack/cta-frameworks-react-cra` - The React (Create React App) framework for TanStack CTA.
 - `@tanstack/cta-frameworks-solid` - The Solid framework for TanStack CTA.
+
+## File Templates
+
+The CTA system uses EJS to render the files into the final application.
+
+Below are all of the variables that are available to the file templates.
+
+| Variable                     | Description                                                                                                                                                                                          |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `packageManager`             | The package manager that is being used (e.g. `npm`, `yarn`, `pnpm`)                                                                                                                                  |
+| `projectName`                | The name of the project                                                                                                                                                                              |
+| `typescript`                 | Boolean value that is `true` if TypeScript is being used, otherwise it is `false`                                                                                                                    |
+| `tailwind`                   | Boolean value that is `true` if Tailwind CSS is being used, otherwise it is `false`                                                                                                                  |
+| `js`                         | The file extension for files that do not include JSX. When in TypeScript mode it is `ts`. When in JavaScript mode it is `js`.                                                                        |
+| `jsx`                        | The file extension for files that include JSX. When in TypeScript mode it is `tsx`. When in JavaScript mode it is `jsx`.                                                                             |
+| `fileRouter`                 | Boolean value that is `true` if the file router is being used, otherwise it is `false`                                                                                                               |
+| `codeRouter`                 | Boolean value that is `true` if the code router is being used, otherwise it is `false`                                                                                                               |
+| `addOnEnabled`               | An object that contains the enabled add-ons. The keys are the `id` values of the add-ons. For example, if the tanstack-query add-on is enabled the `addOnEnabled]['tanstack-query']` will be `true`. |
+| `addOns`                     | An array of the enabled add-on objects                                                                                                                                                               |
+| `integrations`               | An array of the enabled integrations                                                                                                                                                                 |
+| `routes`                     | An array containing all of the routes from all of the add-ons. (Used by the header and the `code-router` setup.)                                                                                     |
+| `getPackageManagerAddScript` | A function that returns the script to add a dependency to the project.                                                                                                                               |
+| `getPackageManagerRunScript` | A function that returns the script to run a command in the project.                                                                                                                                  |
+| `relativePath`               | A function that returns the relative path from the current file to the specified target file.                                                                                                        |
+| `ignoreFile`                 | A function that if called will tell CTA to not include this file in the application.                                                                                                                 |

frameworks/react-cra/ADD-ON-AUTHORING.md

@@ -1,4 +1,4 @@
-# Add-on Authoring for the React CRA Template System
+# Add-on Authoring for the CTA Framework for React CRA
 
 # Available Integrations
 
@@ -135,3 +135,35 @@ Configuration in `info.json`:
   },
 ]
 ```
+
+# Routes
+
+If your add-on creates routes you need to specify those in the `info.json` file.
+
+This example will define a route at `/demo/my-demo-route` that will be rendered by the `DemoMyDemoRoute` component. There will be a `Demo Route` link in the header to this route.
+
+```json
+"routes": [
+  {
+    "url": "/demo/my-demo-route",
+    "name": "Demo Route",
+    "path": "src/routes/demo.my-demo-route.tsx",
+    "jsName": "DemoMyDemoRoute"
+  }
+],
+```
+
+If you don't want a header link you can omit the `url` and `name` properties.
+
+```json
+"routes": [
+  {
+    "path": "src/routes/demo.my-hidden-demo-route.tsx",
+    "jsName": "DemoMyHiddenDemoRoute"
+  }
+],
+```
+
+You **MUST** specify routes in the `info.json` file if your add-on supports the `code-router` mode. This is because the `code-routers` setup needs to import the routes in order to add them to the router.
+
+By convension you should prefix demo routes with `demo` to make it clear that they are demo routes so they can be easily identified and removed.

frameworks/solid/ADD-ON-AUTHORING.md

@@ -1,4 +1,4 @@
-# Add-on Authoring for the Solid Framework
+# Add-on Authoring for the CTA Framework for Solid
 
 # Available Integrations
 
@@ -95,3 +95,35 @@ Configuration in `info.json`:
   },
 ]
 ```
+
+# Routes
+
+If your add-on creates routes you need to specify those in the `info.json` file.
+
+This example will define a route at `/demo/my-demo-route` that will be rendered by the `DemoMyDemoRoute` component. There will be a `Demo Route` link in the header to this route.
+
+```json
+"routes": [
+  {
+    "url": "/demo/my-demo-route",
+    "name": "Demo Route",
+    "path": "src/routes/demo.my-demo-route.tsx",
+    "jsName": "DemoMyDemoRoute"
+  }
+],
+```
+
+If you don't want a header link you can omit the `url` and `name` properties.
+
+```json
+"routes": [
+  {
+    "path": "src/routes/demo.my-hidden-demo-route.tsx",
+    "jsName": "DemoMyHiddenDemoRoute"
+  }
+],
+```
+
+You **MUST** specify routes in the `info.json` file if your add-on supports the `code-router` mode. This is because the `code-routers` setup needs to import the routes in order to add them to the router.
+
+By convension you should prefix demo routes with `demo` to make it clear that they are demo routes so they can be easily identified and removed.

packages/cta-cli/src/command-line.ts

@@ -111,6 +111,5 @@ export async function normalizeOptions(
     git: !!cliOptions.git,
     chosenAddOns,
     starter,
-    variableValues: {},
   }
 }

packages/cta-cli/src/options.ts

@@ -122,8 +122,6 @@ export async function promptForOptions(
     options.typescript = true
   }
 
-  options.variableValues = {}
-
   options.git = cliOptions.git || (await selectGit())
 
   return options

packages/cta-engine/src/index.ts

@@ -38,7 +38,6 @@ export type {
   Mode,
   Options,
   Starter,
-  Variable,
 } from './types.js'
 export type { PersistedOptions } from './config-file.js'
 export type { PackageManager } from './package-manager.js'

packages/cta-engine/src/template-file.ts

@@ -67,16 +67,6 @@ export function createTemplateFile(environment: Environment, options: Options) {
     }
   }
 
-  const variables = {
-    ...options.variableValues,
-    ...options.chosenAddOns.reduce<Record<string, any>>((acc, addOn) => {
-      return {
-        ...acc,
-        ...addOn.variables,
-      }
-    }, {}),
-  }
-
   const addOnEnabled = options.chosenAddOns.reduce<Record<string, boolean>>(
     (acc, addOn) => {
       acc[addOn.id] = true
@@ -99,7 +89,6 @@ export function createTemplateFile(environment: Environment, options: Options) {
       addOns: options.chosenAddOns,
       integrations,
       routes,
-      variables,
 
       getPackageManagerAddScript,
       getPackageManagerRunScript,

packages/cta-engine/src/types.ts

@@ -42,7 +42,6 @@ export type AddOnDefinition = {
   warning?: string
   dependsOn?: Array<string>
   integrations?: Array<Integration>
-  variables?: Array<Variable>
 
   files?: Record<string, string>
   deletedFiles?: Array<string>
@@ -97,8 +96,6 @@ export interface Options {
 
   chosenAddOns: Array<AddOn>
   starter?: AddOn | undefined
-
-  variableValues: Record<string, string | number | boolean>
 }
 
 type ProjectEnvironment = {
@@ -134,26 +131,3 @@ type UIEnvironment = {
 }
 
 export type Environment = ProjectEnvironment & FileEnvironment & UIEnvironment
-
-type BooleanVariable = {
-  name: string
-  default: boolean
-  description: string
-  type: 'boolean'
-}
-
-type NumberVariable = {
-  name: string
-  default: number
-  description: string
-  type: 'number'
-}
-
-type StringVariable = {
-  name: string
-  default: string
-  description: string
-  type: 'string'
-}
-
-export type Variable = BooleanVariable | NumberVariable | StringVariable