@tanstack/cta-ui 0.10.0-alpha.20 → 0.10.0-alpha.22

package/lib/index.ts

@@ -1,23 +1,35 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-import type { SerializedOptions } from '@tanstack/cta-engine'
+import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
 
 export function launchUI({
   mode,
   addOns,
   options,
+  forcedMode,
+  forcedAddOns,
 }: {
   mode: 'add' | 'setup'
   addOns?: Array<string>
   options?: SerializedOptions
+  forcedMode?: Mode
+  forcedAddOns?: Array<string>
 }) {
   const projectPath = process.cwd()
 
-  process.env.CTA_PROJECT_PATH = projectPath
+  delete process.env.NODE_ENV
+
   process.env.CTA_ADD_ONS = addOns?.join(',') || ''
+  process.env.CTA_PROJECT_PATH = projectPath
   process.env.CTA_OPTIONS = options ? JSON.stringify(options) : ''
   process.env.CTA_MODE = mode
+  if (forcedMode) {
+    process.env.CTA_FORCED_ROUTER_MODE = forcedMode
+  }
+  if (forcedAddOns) {
+    process.env.CTA_FORCED_ADD_ONS = forcedAddOns.join(',')
+  }
 
   const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
   const configPath = resolve(developerPath, './app.config.js')

package/lib-dist/index.d.ts

@@ -1,6 +1,8 @@
-import type { SerializedOptions } from '@tanstack/cta-engine';
-export declare function launchUI({ mode, addOns, options, }: {
+import type { Mode, SerializedOptions } from '@tanstack/cta-engine';
+export declare function launchUI({ mode, addOns, options, forcedMode, forcedAddOns, }: {
     mode: 'add' | 'setup';
     addOns?: Array<string>;
     options?: SerializedOptions;
+    forcedMode?: Mode;
+    forcedAddOns?: Array<string>;
 }): void;

package/lib-dist/index.js

@@ -1,11 +1,18 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-export function launchUI({ mode, addOns, options, }) {
+export function launchUI({ mode, addOns, options, forcedMode, forcedAddOns, }) {
     const projectPath = process.cwd();
-    process.env.CTA_PROJECT_PATH = projectPath;
+    delete process.env.NODE_ENV;
     process.env.CTA_ADD_ONS = addOns?.join(',') || '';
+    process.env.CTA_PROJECT_PATH = projectPath;
     process.env.CTA_OPTIONS = options ? JSON.stringify(options) : '';
     process.env.CTA_MODE = mode;
+    if (forcedMode) {
+        process.env.CTA_FORCED_ROUTER_MODE = forcedMode;
+    }
+    if (forcedAddOns) {
+        process.env.CTA_FORCED_ADD_ONS = forcedAddOns.join(',');
+    }
     const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..');
     const configPath = resolve(developerPath, './app.config.js');
     process.chdir(developerPath);

package/package.json

@@ -28,7 +28,6 @@
     "@tanstack/react-router-devtools": "^1.114.3",
     "@tanstack/react-router-with-query": "^1.114.3",
     "@tanstack/react-start": "^1.114.3",
-    "@tanstack/react-store": "^0.7.0",
     "@tanstack/router-plugin": "^1.114.3",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
@@ -48,9 +47,9 @@
     "vinxi": "^0.5.3",
     "vite-tsconfig-paths": "^5.1.4",
     "zustand": "^5.0.3",
-    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.20",
-    "@tanstack/cta-engine": "0.10.0-alpha.20",
-    "@tanstack/cta-framework-solid": "0.10.0-alpha.20"
+    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.21",
+    "@tanstack/cta-engine": "0.10.0-alpha.21",
+    "@tanstack/cta-framework-solid": "0.10.0-alpha.21"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -66,6 +65,6 @@
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   },
-  "version": "0.10.0-alpha.20",
+  "version": "0.10.0-alpha.22",
   "scripts": {}
 }

package/src/engine-handling/generate-initial-payload.ts

@@ -13,6 +13,8 @@ import { createAppWrapper } from './create-app-wrapper.js'
 import { registerFrameworks } from './framework-registration.js'
 import {
   getApplicationMode,
+  getForcedAddOns,
+  getForcedRouterMode,
   getProjectOptions,
   getProjectPath,
 } from './server-environment.js'
@@ -30,6 +32,8 @@ export async function generateInitialPayload() {
       ? await cleanUpFiles(await recursivelyGatherFiles(projectPath, false))
       : {}
 
+  const forcedRouterMode = getForcedRouterMode()
+
   function getSerializedOptions() {
     if (applicationMode === 'setup') {
       const projectOptions = getProjectOptions()
@@ -37,7 +41,7 @@ export async function generateInitialPayload() {
         ...projectOptions,
         framework: projectOptions.framework || 'react-cra',
         projectName: projectOptions.projectName || basename(projectPath),
-        mode: projectOptions.mode || 'file-router',
+        mode: forcedRouterMode || projectOptions.mode,
         typescript: projectOptions.typescript || true,
         tailwind: projectOptions.tailwind || true,
         git: projectOptions.git || true,
@@ -89,5 +93,7 @@ export async function generateInitialPayload() {
     },
     options: serializedOptions,
     output,
+    forcedRouterMode,
+    forcedAddOns: getForcedAddOns(),
   }
 }

package/src/engine-handling/server-environment.ts

@@ -1,4 +1,4 @@
-import type { SerializedOptions } from '@tanstack/cta-engine'
+import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
 
 export function getProjectPath(): string {
   return process.env.CTA_PROJECT_PATH!
@@ -11,3 +11,14 @@ export function getApplicationMode(): 'add' | 'setup' {
 export function getProjectOptions(): SerializedOptions {
   return JSON.parse(process.env.CTA_OPTIONS!)
 }
+
+export function getForcedRouterMode(): Mode | undefined {
+  if (!process.env.CTA_FORCED_ROUTER_MODE) {
+    return undefined
+  }
+  return process.env.CTA_FORCED_ROUTER_MODE as Mode
+}
+
+export function getForcedAddOns(): Array<string> | undefined {
+  return process.env.CTA_FORCED_ADD_ONS?.split(',') || []
+}

package/src/store/project.ts

@@ -36,9 +36,14 @@ const useInitialData = () =>
         'file-router': [],
       },
       applicationMode: 'none',
+      forcedRouterMode: undefined,
+      forcedAddOns: [],
     },
   })
 
+const useForcedRouterMode = () => useInitialData().data.forcedRouterMode
+const useForcedAddOns = () => useInitialData().data.forcedAddOns
+
 export const useProjectLocalFiles = () => useInitialData().data.localFiles
 export const useOriginalOutput = () => useInitialData().data.output
 export const useOriginalSelectedAddOns = () =>
@@ -98,6 +103,7 @@ export function useAddOns() {
   const originalSelectedAddOns = useOriginalSelectedAddOns()
   const codeRouterAddOns = useCodeRouterAddOns()
   const fileRouterAddOns = useFileRouterAddOns()
+  const forcedAddOns = useForcedAddOns()
   const { userSelectedAddOns, customAddOns } = useMutableAddOns()
   const projectStarter = useProjectStarter().projectStarter
 
@@ -118,6 +124,9 @@ export function useAddOns() {
     for (const addOn of originalSelectedAddOns) {
       originalAddOns.add(addOn)
     }
+    for (const addOn of forcedAddOns) {
+      originalAddOns.add(addOn)
+    }
     return getAddOnStatus(
       availableAddOns,
       userSelectedAddOns,
@@ -128,11 +137,18 @@ export function useAddOns() {
     userSelectedAddOns,
     originalSelectedAddOns,
     projectStarter?.dependsOn,
+    forcedAddOns,
   ])
 
   const chosenAddOns = useMemo(() => {
-    return Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected)
-  }, [addOnState])
+    const addOns = new Set(
+      Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected),
+    )
+    for (const addOn of forcedAddOns) {
+      addOns.add(addOn)
+    }
+    return Array.from(addOns)
+  }, [addOnState, forcedAddOns])
 
   const toggleAddOn = useCallback(
     (addOnId: string) => {
@@ -166,7 +182,11 @@ export function useAddOns() {
 const useHasProjectStarter = () =>
   useProjectStarter((state) => state.projectStarter === undefined)
 
-export const useModeEditable = () => useHasProjectStarter()
+export const useModeEditable = () => {
+  const forcedRouterMode = useForcedRouterMode()
+  const hasProjectStarter = useHasProjectStarter()
+  return !forcedRouterMode && hasProjectStarter
+}
 
 export const useTypeScriptEditable = () => {
   const hasProjectStarter = useHasProjectStarter()
@@ -183,7 +203,11 @@ export const useTailwindEditable = () => {
 export const useProjectName = () =>
   useProjectOptions((state) => state.projectName)
 
-export const useRouterMode = () => useProjectOptions((state) => state.mode)
+export const useRouterMode = () => {
+  const forcedRouterMode = useForcedRouterMode()
+  const userMode = useProjectOptions((state) => state.mode)
+  return forcedRouterMode || userMode
+}
 
 export function useFilters() {
   const includedFiles = useApplicationSettings((state) => state.includeFiles)

package/src/types.d.ts

@@ -64,6 +64,8 @@ export type InitialData = {
     'file-router': Array<AddOnInfo>
   }
   applicationMode: ApplicationMode
+  forcedRouterMode?: Mode
+  forcedAddOns?: Array<string>
 }
 
 export type EventItem = {