@tanstack/cta-ui 0.10.0-alpha.24 → 0.10.0-alpha.26

package/lib/index.ts

@@ -1,43 +1,149 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import express from 'express'
+import cors from 'cors'
+import {
+  AddOnCompiledSchema,
+  StarterCompiledSchema,
+} 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()
-
-  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(',')
+import { addToAppWrapper } from './engine-handling/add-to-app-wrapper.js'
+import { createAppWrapper } from './engine-handling/create-app-wrapper.js'
+import { generateInitialPayload } from './engine-handling/generate-initial-payload.js'
+import { setServerEnvironment } from './engine-handling/server-environment.js'
+
+import type { ServerEnvironment } from './engine-handling/server-environment.js'
+
+export function launchUI(
+  options: Partial<ServerEnvironment> & {
+    port?: number
+  },
+) {
+  const { port: requestedPort, ...rest } = options
+  setServerEnvironment(rest)
+
+  const app = express()
+
+  app.use(cors())
+  app.use(express.json())
+  app.use(express.urlencoded({ extended: true }))
+
+  const launchUI = !process.env.CTA_DISABLE_UI
+  if (launchUI) {
+    const packagePath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+    app.use(express.static(resolve(packagePath, 'dist')))
   }
 
-  const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
-  const configPath = resolve(developerPath, './app.config.js')
+  app.post('/api/add-to-app', async (req, res) => {
+    await addToAppWrapper(req.body.addOns, {
+      response: res,
+    })
+  })
+
+  app.post('/api/create-app', async (req, res) => {
+    await createAppWrapper(req.body.options, {
+      response: res,
+    })
+  })
+
+  app.post('/api/dry-run-add-to-app', async (req, res) => {
+    res.send(
+      await addToAppWrapper(req.body.addOns, {
+        dryRun: true,
+      }),
+    )
+  })
+
+  app.post('/api/dry-run-create-app', async (req, res) => {
+    res.send(
+      await createAppWrapper(req.body.options, {
+        dryRun: true,
+      }),
+    )
+  })
+
+  app.get('/api/initial-payload', async (_req, res) => {
+    res.send(await generateInitialPayload())
+  })
 
-  process.chdir(developerPath)
+  app.get('/api/load-remote-add-on', async (req, res) => {
+    const { url } = req.query
+    if (!url) {
+      res.status(400).send('URL is required')
+      return
+    }
+    try {
+      const response = await fetch(url as string)
+      const data = await response.json()
+      const parsed = AddOnCompiledSchema.safeParse(data)
+      if (!parsed.success) {
+        res.status(400).json({ error: 'Invalid add-on data' })
+      } else {
+        res.json({
+          id: url,
+          name: parsed.data.name,
+          description: parsed.data.description,
+          version: parsed.data.version,
+          author: parsed.data.author,
+          license: parsed.data.license,
+          link: parsed.data.link,
+          smallLogo: parsed.data.smallLogo,
+          logo: parsed.data.logo,
+          type: parsed.data.type,
+          modes: parsed.data.modes,
+        })
+      }
+    } catch {
+      res.status(500).send('Failed to load add-on')
+    }
+  })
+
+  app.get('/api/load-starter', async (req, res) => {
+    const { url } = req.query
+    if (!url) {
+      res.status(400).send('URL is required')
+      return
+    }
+    try {
+      const response = await fetch(url as string)
+      const data = await response.json()
+      const parsed = StarterCompiledSchema.safeParse(data)
+      if (!parsed.success) {
+        res.status(400).json({ error: 'Invalid starter data' })
+      } else {
+        res.json({
+          url,
+          id: parsed.data.id,
+          name: parsed.data.name,
+          description: parsed.data.description,
+          version: parsed.data.version,
+          author: parsed.data.author,
+          license: parsed.data.license,
+          dependsOn: parsed.data.dependsOn,
+          mode: parsed.data.mode,
+          typescript: parsed.data.typescript,
+          tailwind: parsed.data.tailwind,
+          banner: parsed.data.banner
+            ? (url as string).replace('starter.json', parsed.data.banner)
+            : undefined,
+        })
+      }
+    } catch {
+      res.status(500).send('Failed to load starter')
+    }
+  })
+
+  app.post('/api/shutdown', (_req, res) => {
+    setTimeout(() => {
+      process.exit(0)
+    }, 50)
+    res.send({ shutdown: true })
+  })
 
-  import(configPath).then(async (config) => {
-    const out = await config.default
-    await out.dev()
+  const port = requestedPort || process.env.PORT || 8080
+  app.listen(port, () => {
+    console.log(
+      `Create TanStack ${launchUI ? 'App' : 'API'} is running on http://localhost:${port}`,
+    )
   })
 }

package/lib/types.d.ts

@@ -0,0 +1,13 @@
+export type Registry = {
+  starters: Array<{
+    name: string
+    description: string
+    url: string
+    banner?: string
+  }>
+  'add-ons': Array<{
+    name: string
+    description: string
+    url: string
+  }>
+}

package/lib-dist/engine-handling/add-to-app-wrapper.d.ts

@@ -0,0 +1,12 @@
+import type { Response } from 'express';
+export declare function addToAppWrapper(addOns: Array<string>, opts: {
+    dryRun?: boolean;
+    response?: Response;
+}): Promise<{
+    files: Record<string, string>;
+    deletedFiles: Array<string>;
+    commands: Array<{
+        command: string;
+        args: Array<string>;
+    }>;
+} | undefined>;

package/lib-dist/engine-handling/add-to-app-wrapper.js

@@ -0,0 +1,73 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { addToApp, createDefaultEnvironment, createMemoryEnvironment, recursivelyGatherFiles, } from '@tanstack/cta-engine';
+import { cleanUpFileArray, cleanUpFiles } from './file-helpers.js';
+import { getProjectPath } from './server-environment.js';
+import { createAppWrapper } from './create-app-wrapper.js';
+export async function addToAppWrapper(addOns, opts) {
+    const projectPath = getProjectPath();
+    const persistedOptions = JSON.parse(readFileSync(resolve(projectPath, '.cta.json')).toString());
+    persistedOptions.targetDir = projectPath;
+    const newAddons = [];
+    for (const addOn of addOns) {
+        if (!persistedOptions.existingAddOns.includes(addOn)) {
+            newAddons.push(addOn);
+        }
+    }
+    if (newAddons.length === 0) {
+        return await createAppWrapper(persistedOptions, opts);
+    }
+    async function createEnvironment() {
+        if (opts.dryRun) {
+            const { environment, output } = createMemoryEnvironment(projectPath);
+            environment.writeFile(resolve(projectPath, '.cta.json'), JSON.stringify(persistedOptions, null, 2));
+            const localFiles = await cleanUpFiles(await recursivelyGatherFiles(projectPath, false));
+            for (const file of Object.keys(localFiles)) {
+                environment.writeFile(resolve(projectPath, file), localFiles[file]);
+            }
+            return { environment, output };
+        }
+        return {
+            environment: createDefaultEnvironment(),
+            output: { files: {}, deletedFiles: [], commands: [] },
+        };
+    }
+    const { environment, output } = await createEnvironment();
+    if (opts.response) {
+        opts.response.writeHead(200, {
+            'Content-Type': 'text/plain',
+            'Transfer-Encoding': 'chunked',
+        });
+        environment.startStep = ({ id, type, message }) => {
+            opts.response.write(JSON.stringify({
+                msgType: 'start',
+                id,
+                type,
+                message,
+            }) + '\n');
+        };
+        environment.finishStep = (id, message) => {
+            opts.response.write(JSON.stringify({
+                msgType: 'finish',
+                id,
+                message,
+            }) + '\n');
+        };
+        environment.startRun();
+        await addToApp(environment, newAddons, projectPath, {
+            forced: true,
+        });
+        environment.finishRun();
+        opts.response.end();
+    }
+    else {
+        environment.startRun();
+        await addToApp(environment, newAddons, projectPath, {
+            forced: true,
+        });
+        environment.finishRun();
+        output.files = cleanUpFiles(output.files, projectPath);
+        output.deletedFiles = cleanUpFileArray(output.deletedFiles, projectPath);
+        return output;
+    }
+}

package/lib-dist/engine-handling/create-app-wrapper.d.ts

@@ -0,0 +1,13 @@
+import type { SerializedOptions } from '@tanstack/cta-engine';
+import type { Response } from 'express';
+export declare function createAppWrapper(projectOptions: SerializedOptions, opts: {
+    dryRun?: boolean;
+    response?: Response;
+}): Promise<{
+    files: Record<string, string>;
+    deletedFiles: Array<string>;
+    commands: Array<{
+        command: string;
+        args: Array<string>;
+    }>;
+} | undefined>;

package/lib-dist/engine-handling/create-app-wrapper.js

@@ -0,0 +1,68 @@
+import { resolve } from 'node:path';
+import { createApp, createDefaultEnvironment, createMemoryEnvironment, finalizeAddOns, getFrameworkById, loadStarter, } from '@tanstack/cta-engine';
+import { registerFrameworks } from './framework-registration.js';
+import { cleanUpFileArray, cleanUpFiles } from './file-helpers.js';
+import { getApplicationMode, getProjectPath } from './server-environment.js';
+export async function createAppWrapper(projectOptions, opts) {
+    registerFrameworks();
+    const framework = getFrameworkById(projectOptions.framework);
+    let starter;
+    const addOns = [...(projectOptions.chosenAddOns || [])];
+    if (projectOptions.starter) {
+        starter = await loadStarter(projectOptions.starter);
+        for (const addOn of starter?.dependsOn ?? []) {
+            addOns.push(addOn);
+        }
+    }
+    const chosenAddOns = await finalizeAddOns(framework, projectOptions.mode, addOns);
+    const projectPath = getProjectPath();
+    const targetDir = getApplicationMode() === 'add'
+        ? projectOptions.targetDir
+        : resolve(projectPath, projectOptions.projectName);
+    const options = {
+        ...projectOptions,
+        targetDir,
+        starter,
+        framework,
+        chosenAddOns,
+    };
+    function createEnvironment() {
+        if (opts.dryRun) {
+            return createMemoryEnvironment(targetDir);
+        }
+        return {
+            environment: createDefaultEnvironment(),
+            output: { files: {}, deletedFiles: [], commands: [] },
+        };
+    }
+    const { environment, output } = createEnvironment();
+    if (opts.response) {
+        opts.response.writeHead(200, {
+            'Content-Type': 'text/plain',
+            'Transfer-Encoding': 'chunked',
+        });
+        environment.startStep = ({ id, type, message }) => {
+            opts.response.write(JSON.stringify({
+                msgType: 'start',
+                id,
+                type,
+                message,
+            }) + '\n');
+        };
+        environment.finishStep = (id, message) => {
+            opts.response.write(JSON.stringify({
+                msgType: 'finish',
+                id,
+                message,
+            }) + '\n');
+        };
+        await createApp(environment, options);
+        opts.response.end();
+    }
+    else {
+        await createApp(environment, options);
+        output.files = cleanUpFiles(output.files, targetDir);
+        output.deletedFiles = cleanUpFileArray(output.deletedFiles, targetDir);
+        return output;
+    }
+}

package/lib-dist/engine-handling/file-helpers.d.ts

@@ -0,0 +1,2 @@
+export declare function cleanUpFiles(files: Record<string, string>, targetDir?: string): Record<string, string>;
+export declare function cleanUpFileArray(files: Array<string>, targetDir?: string): string[];

package/lib-dist/engine-handling/file-helpers.js

@@ -0,0 +1,20 @@
+import { basename } from 'node:path';
+export function cleanUpFiles(files, targetDir) {
+    return Object.keys(files).reduce((acc, file) => {
+        const content = files[file].startsWith('base64::')
+            ? '<binary file>'
+            : files[file];
+        if (basename(file) !== '.cta.json') {
+            acc[targetDir ? file.replace(targetDir, '.') : file] = content;
+        }
+        return acc;
+    }, {});
+}
+export function cleanUpFileArray(files, targetDir) {
+    return files.reduce((acc, file) => {
+        if (basename(file) !== '.cta.json') {
+            acc.push(targetDir ? file.replace(targetDir, '.') : file);
+        }
+        return acc;
+    }, []);
+}

package/lib-dist/engine-handling/framework-registration.d.ts

@@ -0,0 +1 @@
+export declare function registerFrameworks(): void;

package/lib-dist/engine-handling/framework-registration.js

@@ -0,0 +1,10 @@
+import { register as registerReactCra } from '@tanstack/cta-framework-react-cra';
+import { register as registerSolid } from '@tanstack/cta-framework-solid';
+let registered = false;
+export function registerFrameworks() {
+    if (registered)
+        return;
+    registerReactCra();
+    registerSolid();
+    registered = true;
+}

package/lib-dist/engine-handling/generate-initial-payload.d.ts

@@ -0,0 +1,40 @@
+import type { SerializedOptions } from '@tanstack/cta-engine';
+import type { Registry } from '../types.js';
+export declare function generateInitialPayload(): Promise<{
+    applicationMode: "add" | "setup";
+    localFiles: Record<string, string>;
+    addOns: {
+        'code-router': {
+            id: string;
+            name: string;
+            description: string;
+            type: "starter" | "add-on" | "example" | "toolchain";
+            smallLogo: string | undefined;
+            logo: string | undefined;
+            link: string | undefined;
+            dependsOn: string[] | undefined;
+        }[];
+        'file-router': {
+            id: string;
+            name: string;
+            description: string;
+            type: "starter" | "add-on" | "example" | "toolchain";
+            smallLogo: string | undefined;
+            logo: string | undefined;
+            link: string | undefined;
+            dependsOn: string[] | undefined;
+        }[];
+    };
+    options: SerializedOptions;
+    output: {
+        files: Record<string, string>;
+        deletedFiles: Array<string>;
+        commands: Array<{
+            command: string;
+            args: Array<string>;
+        }>;
+    } | undefined;
+    forcedRouterMode: import("@tanstack/cta-engine").Mode | undefined;
+    forcedAddOns: string[];
+    registry: Registry | undefined;
+}>;

package/lib-dist/engine-handling/generate-initial-payload.js

@@ -0,0 +1,93 @@
+import { readFileSync } from 'node:fs';
+import { basename, resolve } from 'node:path';
+import { createSerializedOptionsFromPersisted, getAllAddOns, getFrameworkById, recursivelyGatherFiles, } from '@tanstack/cta-engine';
+import { cleanUpFiles } from './file-helpers.js';
+import { createAppWrapper } from './create-app-wrapper.js';
+import { registerFrameworks } from './framework-registration.js';
+import { getApplicationMode, getForcedAddOns, getForcedRouterMode, getProjectOptions, getProjectPath, getRegistry, } from './server-environment.js';
+function absolutizeUrl(originalUrl, relativeUrl) {
+    if (relativeUrl.startsWith('http') || relativeUrl.startsWith('https')) {
+        return relativeUrl;
+    }
+    const baseUrl = originalUrl.replace(/registry.json$/, '');
+    return `${baseUrl}${relativeUrl.replace(/^\.\//, '')}`;
+}
+export async function generateInitialPayload() {
+    registerFrameworks();
+    const projectPath = getProjectPath();
+    const applicationMode = getApplicationMode();
+    const localFiles = applicationMode === 'add'
+        ? await cleanUpFiles(await recursivelyGatherFiles(projectPath, false))
+        : {};
+    const forcedRouterMode = getForcedRouterMode();
+    function getSerializedOptions() {
+        if (applicationMode === 'setup') {
+            const projectOptions = getProjectOptions();
+            return {
+                ...projectOptions,
+                framework: projectOptions.framework || 'react-cra',
+                projectName: projectOptions.projectName || basename(projectPath),
+                mode: forcedRouterMode || projectOptions.mode,
+                typescript: projectOptions.typescript || true,
+                tailwind: projectOptions.tailwind || true,
+                git: projectOptions.git || true,
+            };
+        }
+        else {
+            const persistedOptions = JSON.parse(readFileSync(resolve(projectPath, '.cta.json')).toString());
+            return createSerializedOptionsFromPersisted(persistedOptions);
+        }
+    }
+    const registryUrl = getRegistry();
+    let registry;
+    if (registryUrl) {
+        registry = (await fetch(registryUrl).then((res) => res.json()));
+        for (const addOn of registry['add-ons']) {
+            addOn.url = absolutizeUrl(registryUrl, addOn.url);
+        }
+        for (const starter of registry.starters) {
+            starter.url = absolutizeUrl(registryUrl, starter.url);
+            if (starter.banner) {
+                starter.banner = absolutizeUrl(registryUrl, starter.banner);
+            }
+        }
+    }
+    const serializedOptions = getSerializedOptions();
+    const output = await createAppWrapper(serializedOptions, {
+        dryRun: true,
+    });
+    const framework = await getFrameworkById(serializedOptions.framework);
+    const codeRouter = getAllAddOns(framework, 'code-router').map((addOn) => ({
+        id: addOn.id,
+        name: addOn.name,
+        description: addOn.description,
+        type: addOn.type,
+        smallLogo: addOn.smallLogo,
+        logo: addOn.logo,
+        link: addOn.link,
+        dependsOn: addOn.dependsOn,
+    }));
+    const fileRouter = getAllAddOns(framework, 'file-router').map((addOn) => ({
+        id: addOn.id,
+        name: addOn.name,
+        description: addOn.description,
+        type: addOn.type,
+        smallLogo: addOn.smallLogo,
+        logo: addOn.logo,
+        link: addOn.link,
+        dependsOn: addOn.dependsOn,
+    }));
+    return {
+        applicationMode,
+        localFiles,
+        addOns: {
+            'code-router': codeRouter,
+            'file-router': fileRouter,
+        },
+        options: serializedOptions,
+        output,
+        forcedRouterMode,
+        forcedAddOns: getForcedAddOns(),
+        registry,
+    };
+}

package/lib-dist/engine-handling/server-environment.d.ts

@@ -0,0 +1,17 @@
+import type { Mode, SerializedOptions } from '@tanstack/cta-engine';
+export type ServerEnvironment = {
+    projectPath: string;
+    mode: 'add' | 'setup';
+    options?: SerializedOptions;
+    addOns?: Array<string>;
+    forcedRouterMode?: Mode;
+    forcedAddOns?: Array<string>;
+    registry?: string;
+};
+export declare function setServerEnvironment(options: Partial<ServerEnvironment>): void;
+export declare const getProjectPath: () => string;
+export declare const getApplicationMode: () => "add" | "setup";
+export declare const getProjectOptions: () => SerializedOptions;
+export declare const getForcedRouterMode: () => Mode | undefined;
+export declare const getForcedAddOns: () => string[];
+export declare const getRegistry: () => string | undefined;

package/lib-dist/engine-handling/server-environment.js

@@ -0,0 +1,18 @@
+const serverEnvironment = {
+    projectPath: '',
+    mode: 'add',
+    options: {},
+    addOns: [],
+    forcedRouterMode: undefined,
+    forcedAddOns: undefined,
+    registry: undefined,
+};
+export function setServerEnvironment(options) {
+    Object.assign(serverEnvironment, options);
+}
+export const getProjectPath = () => serverEnvironment.projectPath;
+export const getApplicationMode = () => serverEnvironment.mode;
+export const getProjectOptions = () => serverEnvironment.options;
+export const getForcedRouterMode = () => serverEnvironment.forcedRouterMode;
+export const getForcedAddOns = () => serverEnvironment.forcedAddOns || [];
+export const getRegistry = () => serverEnvironment.registry;

package/lib-dist/index.d.ts

@@ -1,8 +1,4 @@
-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>;
+import type { ServerEnvironment } from './engine-handling/server-environment.js';
+export declare function launchUI(options: Partial<ServerEnvironment> & {
+    port?: number;
 }): void;