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

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

@@ -1,7 +1,9 @@
+import type { Environment } from '@tanstack/cta-engine';
 import type { Response } from 'express';
 export declare function addToAppWrapper(addOns: Array<string>, opts: {
     dryRun?: boolean;
     response?: Response;
+    environmentFactory?: () => Environment;
 }): Promise<{
     files: Record<string, string>;
     deletedFiles: Array<string>;

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

@@ -1,26 +1,29 @@
-import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { addToApp, createDefaultEnvironment, createMemoryEnvironment, recursivelyGatherFiles, } from '@tanstack/cta-engine';
+import { CONFIG_FILE, addToApp, createAppOptionsFromPersisted, createDefaultEnvironment, createMemoryEnvironment, createSerializedOptionsFromPersisted, readConfigFile, recursivelyGatherFiles, writeConfigFileToEnvironment, } 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 persistedOptions = await readConfigFile(projectPath);
+    if (!persistedOptions) {
+        throw new Error('No config file found');
+    }
+    const options = await createAppOptionsFromPersisted(persistedOptions);
+    options.targetDir = projectPath;
     const newAddons = [];
     for (const addOn of addOns) {
-        if (!persistedOptions.existingAddOns.includes(addOn)) {
+        if (!options.chosenAddOns.some((a) => a.id === addOn)) {
             newAddons.push(addOn);
         }
     }
     if (newAddons.length === 0) {
-        return await createAppWrapper(persistedOptions, opts);
+        const serializedOptions = createSerializedOptionsFromPersisted(persistedOptions);
+        return await createAppWrapper(serializedOptions, 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]);
@@ -28,7 +31,7 @@ export async function addToAppWrapper(addOns, opts) {
             return { environment, output };
         }
         return {
-            environment: createDefaultEnvironment(),
+            environment: opts.environmentFactory?.() ?? createDefaultEnvironment(),
             output: { files: {}, deletedFiles: [], commands: [] },
         };
     }
@@ -38,7 +41,7 @@ export async function addToAppWrapper(addOns, opts) {
             'Content-Type': 'text/plain',
             'Transfer-Encoding': 'chunked',
         });
-        environment.startStep = ({ id, type, message }) => {
+        environment.startStep = ({ id, type, message, }) => {
             opts.response.write(JSON.stringify({
                 msgType: 'start',
                 id,
@@ -62,9 +65,11 @@ export async function addToAppWrapper(addOns, opts) {
     }
     else {
         environment.startRun();
+        environment.writeFile(resolve(projectPath, CONFIG_FILE), JSON.stringify(persistedOptions, null, 2));
         await addToApp(environment, newAddons, projectPath, {
             forced: true,
         });
+        writeConfigFileToEnvironment(environment, options);
         environment.finishRun();
         output.files = cleanUpFiles(output.files, projectPath);
         output.deletedFiles = cleanUpFileArray(output.deletedFiles, projectPath);

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

@@ -1,8 +1,9 @@
-import type { SerializedOptions } from '@tanstack/cta-engine';
+import type { Environment, SerializedOptions } from '@tanstack/cta-engine';
 import type { Response } from 'express';
 export declare function createAppWrapper(projectOptions: SerializedOptions, opts: {
     dryRun?: boolean;
     response?: Response;
+    environmentFactory?: () => Environment;
 }): Promise<{
     files: Record<string, string>;
     deletedFiles: Array<string>;

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

@@ -7,11 +7,13 @@ export async function createAppWrapper(projectOptions, opts) {
     registerFrameworks();
     const framework = getFrameworkById(projectOptions.framework);
     let starter;
-    const addOns = [...(projectOptions.chosenAddOns || [])];
+    const addOns = [...projectOptions.chosenAddOns];
     if (projectOptions.starter) {
         starter = await loadStarter(projectOptions.starter);
-        for (const addOn of starter?.dependsOn ?? []) {
-            addOns.push(addOn);
+        if (starter) {
+            for (const addOn of starter.dependsOn ?? []) {
+                addOns.push(addOn);
+            }
         }
     }
     const chosenAddOns = await finalizeAddOns(framework, projectOptions.mode, addOns);
@@ -31,7 +33,7 @@ export async function createAppWrapper(projectOptions, opts) {
             return createMemoryEnvironment(targetDir);
         }
         return {
-            environment: createDefaultEnvironment(),
+            environment: opts.environmentFactory?.() ?? createDefaultEnvironment(),
             output: { files: {}, deletedFiles: [], commands: [] },
         };
     }

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

@@ -1,10 +1,11 @@
 import { basename } from 'node:path';
+import { CONFIG_FILE } from '@tanstack/cta-engine';
 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') {
+        if (basename(file) !== CONFIG_FILE) {
             acc[targetDir ? file.replace(targetDir, '.') : file] = content;
         }
         return acc;
@@ -12,7 +13,7 @@ export function cleanUpFiles(files, targetDir) {
 }
 export function cleanUpFileArray(files, targetDir) {
     return files.reduce((acc, file) => {
-        if (basename(file) !== '.cta.json') {
+        if (basename(file) !== CONFIG_FILE) {
             acc.push(targetDir ? file.replace(targetDir, '.') : file);
         }
         return acc;

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

@@ -1,29 +1,11 @@
 import type { SerializedOptions } from '@tanstack/cta-engine';
-import type { Registry } from '../types.js';
+import type { AddOnInfo } 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;
-        }[];
+        'code-router': AddOnInfo[];
+        'file-router': AddOnInfo[];
     };
     options: SerializedOptions;
     output: {
@@ -36,5 +18,15 @@ export declare function generateInitialPayload(): Promise<{
     } | undefined;
     forcedRouterMode: import("@tanstack/cta-engine").Mode | undefined;
     forcedAddOns: string[];
-    registry: Registry | undefined;
+    registry: {
+        "add-ons": never[];
+        starters: {
+            name: string;
+            description: string;
+            url: string;
+            banner?: string;
+            mode: Mode;
+            framework: string;
+        }[];
+    };
 }>;

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

@@ -1,16 +1,21 @@
-import { readFileSync } from 'node:fs';
 import { basename, resolve } from 'node:path';
-import { createSerializedOptionsFromPersisted, getAllAddOns, getFrameworkById, recursivelyGatherFiles, } from '@tanstack/cta-engine';
+import { createSerializedOptionsFromPersisted, getAllAddOns, getFrameworkById, getRawRegistry, getRegistryAddOns, readConfigFile, 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(/^\.\//, '')}`;
+import { getApplicationMode, getForcedAddOns, getForcedRouterMode, getProjectOptions, getProjectPath, getRegistry as getRegistryURL, } from './server-environment.js';
+function convertAddOnToAddOnInfo(addOn) {
+    return {
+        id: addOn.id,
+        name: addOn.name,
+        description: addOn.description,
+        modes: addOn.modes,
+        type: addOn.type,
+        smallLogo: addOn.smallLogo,
+        logo: addOn.logo,
+        link: addOn.link,
+        dependsOn: addOn.dependsOn,
+    };
 }
 export async function generateInitialPayload() {
     registerFrameworks();
@@ -20,7 +25,7 @@ export async function generateInitialPayload() {
         ? await cleanUpFiles(await recursivelyGatherFiles(projectPath, false))
         : {};
     const forcedRouterMode = getForcedRouterMode();
-    function getSerializedOptions() {
+    async function getSerializedOptions() {
         if (applicationMode === 'setup') {
             const projectOptions = getProjectOptions();
             return {
@@ -31,63 +36,53 @@ export async function generateInitialPayload() {
                 typescript: projectOptions.typescript || true,
                 tailwind: projectOptions.tailwind || true,
                 git: projectOptions.git || true,
+                targetDir: projectOptions.targetDir ||
+                    resolve(projectPath, projectOptions.projectName),
             };
         }
         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 persistedOptions = await readConfigFile(projectPath);
+            if (!persistedOptions) {
+                throw new Error('No config file found');
             }
+            return createSerializedOptionsFromPersisted(persistedOptions);
         }
     }
-    const serializedOptions = getSerializedOptions();
+    const rawRegistry = await getRawRegistry(getRegistryURL());
+    const registryAddOns = await getRegistryAddOns(getRegistryURL());
+    const serializedOptions = await 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,
-    }));
+    const codeRouterAddOns = getAllAddOns(framework, 'code-router').map(convertAddOnToAddOnInfo);
+    const fileRouterAddOns = getAllAddOns(framework, 'file-router').map(convertAddOnToAddOnInfo);
+    for (const addOnInfo of registryAddOns || []) {
+        const addOnFramework = rawRegistry?.['add-ons'].find((addOn) => addOn.url === addOnInfo.id);
+        if (addOnFramework?.framework === serializedOptions.framework) {
+            if (addOnInfo.modes.includes('code-router')) {
+                codeRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo));
+            }
+            if (addOnInfo.modes.includes('file-router')) {
+                fileRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo));
+            }
+        }
+    }
+    const serializedRegistry = {
+        ['add-ons']: [],
+        starters: (rawRegistry?.starters || []).filter((starter) => starter.framework === serializedOptions.framework),
+    };
     return {
         applicationMode,
         localFiles,
         addOns: {
-            'code-router': codeRouter,
-            'file-router': fileRouter,
+            'code-router': codeRouterAddOns,
+            'file-router': fileRouterAddOns,
         },
         options: serializedOptions,
         output,
         forcedRouterMode,
         forcedAddOns: getForcedAddOns(),
-        registry,
+        registry: serializedRegistry,
     };
 }

package/lib-dist/index.d.ts

@@ -1,4 +1,6 @@
 import type { ServerEnvironment } from './engine-handling/server-environment.js';
+import type { Environment } from '@tanstack/cta-engine';
 export declare function launchUI(options: Partial<ServerEnvironment> & {
     port?: number;
+    environmentFactory?: () => Environment;
 }): void;

package/lib-dist/index.js

@@ -2,6 +2,7 @@ import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import express from 'express';
 import cors from 'cors';
+import chalk from 'chalk';
 import { AddOnCompiledSchema, StarterCompiledSchema, } from '@tanstack/cta-engine';
 import { addToAppWrapper } from './engine-handling/add-to-app-wrapper.js';
 import { createAppWrapper } from './engine-handling/create-app-wrapper.js';
@@ -22,21 +23,25 @@ export function launchUI(options) {
     app.post('/api/add-to-app', async (req, res) => {
         await addToAppWrapper(req.body.addOns, {
             response: res,
+            environmentFactory: options.environmentFactory,
         });
     });
     app.post('/api/create-app', async (req, res) => {
         await createAppWrapper(req.body.options, {
             response: res,
+            environmentFactory: options.environmentFactory,
         });
     });
     app.post('/api/dry-run-add-to-app', async (req, res) => {
         res.send(await addToAppWrapper(req.body.addOns, {
             dryRun: true,
+            environmentFactory: options.environmentFactory,
         }));
     });
     app.post('/api/dry-run-create-app', async (req, res) => {
         res.send(await createAppWrapper(req.body.options, {
             dryRun: true,
+            environmentFactory: options.environmentFactory,
         }));
     });
     app.get('/api/initial-payload', async (_req, res) => {
@@ -119,6 +124,6 @@ export function launchUI(options) {
     });
     const port = requestedPort || process.env.PORT || 8080;
     app.listen(port, () => {
-        console.log(`Create TanStack ${launchUI ? 'App' : 'API'} is running on http://localhost:${port}`);
+        console.log(`🔥 ${chalk.blueBright(`Create TanStack ${launchUI ? 'App' : 'API'}`)} is running on ${chalk.underline(`http://localhost:${port}`)}`);
     });
 }

package/package.json

@@ -26,6 +26,7 @@
     "@tanstack/react-query-devtools": "^5.66.5",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
+    "chalk": "^5.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cors": "^2.8.5",
@@ -44,11 +45,12 @@
     "tailwindcss-animate": "^1.0.7",
     "vite-tsconfig-paths": "^5.1.4",
     "zustand": "^5.0.3",
-    "@tanstack/cta-engine": "0.10.0-alpha.26",
-    "@tanstack/cta-framework-solid": "0.10.0-alpha.26",
-    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.26"
+    "@tanstack/cta-engine": "0.10.0-alpha.27",
+    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.27",
+    "@tanstack/cta-framework-solid": "0.10.0-alpha.27"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/cors": "^2.8.17",
@@ -64,6 +66,6 @@
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   },
-  "version": "0.10.0-alpha.26",
+  "version": "0.10.0-alpha.28",
   "scripts": {}
 }

package/src/components/background-animation.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+import { useMounted } from '@/hooks/use-mounted'
+import { usePrefersReducedMotion } from '@/hooks/use-preferred-reduced-motion'
+
+export function BackgroundAnimation() {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const mounted = useMounted()
+  const isHomePage = false
+
+  React.useEffect(() => {
+    if (prefersReducedMotion !== false) {
+      return
+    }
+
+    const canvas = canvasRef.current
+
+    let morphDuration = 2000
+    const waitDuration = 1000 * 60 * 2
+
+    const easingFn = cubicBezier(0.645, 0.045, 0.355, 1.0)
+
+    if (canvas) {
+      const ctx = canvas.getContext('2d')!
+
+      let rafId: ReturnType<typeof requestAnimationFrame> | null = null
+      let timeout: ReturnType<typeof setTimeout> | null = null
+      let startTime = performance.now()
+
+      function createBlobs() {
+        return shuffle([
+          {
+            color: { h: 10, s: 100, l: 50 },
+          },
+          {
+            color: { h: 40, s: 100, l: 50 },
+          },
+          {
+            color: { h: 150, s: 100, l: 50 },
+          },
+          {
+            color: { h: 200, s: 100, l: 50 },
+          },
+        ]).map((blob) => ({
+          ...blob,
+          x: Math.random() * canvas!.width,
+          y: Math.random() * canvas!.height,
+          r: Math.random() * 500 + 700,
+          colorH: blob.color.h,
+          colorS: blob.color.s,
+          colorL: blob.color.l,
+        }))
+      }
+
+      function shuffle<T>(array: T[]) {
+        for (let i = array.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1))
+          ;[array[i], array[j]] = [array[j], array[i]]
+        }
+        return array
+      }
+
+      let startBlobs = createBlobs()
+      let currentBlobs = startBlobs
+      let targetBlobs: ReturnType<typeof createBlobs> = []
+
+      function resizeHandler() {
+        // Create an offscreen canvas and copy the current content
+        const offscreen = document.createElement('canvas')
+        offscreen.width = canvas!.width
+        offscreen.height = canvas!.height
+        offscreen.getContext('2d')!.drawImage(canvas!, 0, 0)
+
+        // Resize the main canvas
+        canvas!.width = window.innerWidth
+        canvas!.height = window.innerHeight
+
+        // Stretch and redraw the saved content to fill the new size
+        ctx.drawImage(offscreen, 0, 0, canvas!.width, canvas!.height)
+      }
+
+      function start() {
+        if (timeout) {
+          clearTimeout(timeout)
+        }
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+        }
+
+        startBlobs = JSON.parse(JSON.stringify(currentBlobs))
+        targetBlobs = createBlobs()
+        startTime = performance.now()
+        animate()
+      }
+
+      function animate() {
+        ctx.clearRect(0, 0, canvas!.width, canvas!.height)
+
+        const time = performance.now() - startTime
+        const progress = time / morphDuration
+        const easedProgress = easingFn(progress)
+
+        // Draw the blobs
+        startBlobs.forEach((startBlob, i) => {
+          const targetBlob = targetBlobs[i]
+
+          currentBlobs[i].x = interpolate(
+            startBlob.x,
+            targetBlob.x,
+            easedProgress,
+          )
+          currentBlobs[i].y = interpolate(
+            startBlob.y,
+            targetBlob.y,
+            easedProgress,
+          )
+
+          const gradient = ctx.createRadialGradient(
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            0,
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            currentBlobs[i].r,
+          )
+
+          currentBlobs[i].colorH = interpolate(
+            startBlob.colorH,
+            targetBlob.colorH,
+            easedProgress,
+          )
+          currentBlobs[i].colorS = interpolate(
+            startBlob.colorS,
+            targetBlob.colorS,
+            easedProgress,
+          )
+          currentBlobs[i].colorL = interpolate(
+            startBlob.colorL,
+            targetBlob.colorL,
+            easedProgress,
+          )
+
+          gradient.addColorStop(
+            0,
+            `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 1)`,
+          )
+          gradient.addColorStop(
+            1,
+            `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 0)`,
+          )
+
+          ctx.fillStyle = gradient
+          ctx.beginPath()
+          ctx.arc(
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            currentBlobs[i].r,
+            0,
+            Math.PI * 2,
+          )
+          ctx.fill()
+        })
+
+        if (progress < 1) {
+          rafId = requestAnimationFrame(animate)
+        } else {
+          timeout = setTimeout(() => {
+            morphDuration = 4000
+            start()
+          }, waitDuration)
+        }
+      }
+
+      resizeHandler()
+      start()
+      window.addEventListener('resize', resizeHandler)
+
+      return () => {
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+        }
+        if (timeout) {
+          clearTimeout(timeout)
+        }
+        window.removeEventListener('resize', resizeHandler)
+      }
+    }
+  }, [prefersReducedMotion])
+
+  return (
+    <div
+      className={twMerge(
+        'fixed inset-0 z-0 opacity-20 pointer-events-none',
+        'transition-opacity duration-[2s] ease-linear',
+        '[&+*]:relative',
+        mounted
+          ? isHomePage
+            ? 'opacity-10 dark:opacity-20'
+            : 'opacity-10 dark:opacity-20'
+          : 'opacity-0',
+      )}
+    >
+      <canvas ref={canvasRef} />
+    </div>
+  )
+}
+
+function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number) {
+  return function (t: number) {
+    const cx = 3 * p1x
+    const bx = 3 * (p2x - p1x) - cx
+    const ax = 1 - cx - bx
+
+    const cy = 3 * p1y
+    const by = 3 * (p2y - p1y) - cy
+    const ay = 1 - cy - by
+
+    const x = ((ax * t + bx) * t + cx) * t
+    const y = ((ay * t + by) * t + cy) * t
+
+    return y
+  }
+}
+
+function interpolate(start: number, end: number, progress: number) {
+  return start + (end - start) * progress
+}