alchemy 0.2.5 → 0.3.1

package/lib/web/shadcn.d.ts

@@ -0,0 +1,97 @@
+import type { Context } from "../context";
+import { Folder } from "../fs";
+import { Resource } from "../resource";
+/**
+ * Properties for initializing Shadcn UI
+ */
+export interface ShadcnUIProps {
+    /**
+     * The working directory where Shadcn UI should be installed
+     */
+    cwd: string;
+    /**
+     * The base color to use
+     * @default "neutral"
+     */
+    baseColor?: "neutral" | "gray" | "zinc" | "stone" | "slate";
+    /**
+     * Use default configuration
+     * @default false
+     */
+    defaults?: boolean;
+    /**
+     * Force overwrite of existing configuration
+     * @default false
+     */
+    force?: boolean;
+    /**
+     * Mute output
+     * @default false
+     */
+    silent?: boolean;
+    /**
+     * Use the src directory when creating a new project
+     * @default true
+     */
+    srcDir?: boolean;
+    /**
+     * Use css variables for theming
+     * @default true
+     */
+    cssVariables?: boolean;
+    /**
+     * The components to add
+     */
+    components?: string[];
+    /**
+     * Whether tailwind is already installed and configured.
+     * Shadcn UI requires Tailwind CSS to be installed and configured.
+     * @default false
+     */
+    tailwind?: boolean;
+    /**
+     * Whether react is already installed
+     * @default false
+     */
+    react?: boolean;
+}
+/**
+ * Shadcn UI resource
+ */
+export interface ShadcnUI extends ShadcnUIProps, Resource<"project::ShadcnUI"> {
+    /**
+     * The working directory where Shadcn UI is installed
+     */
+    cwd: string;
+    /**
+     * The ui directory
+     */
+    ui: Folder;
+    /**
+     * The lib directory
+     */
+    lib: Folder;
+}
+/**
+ * Initializes Shadcn UI in a project directory
+ *
+ * @example
+ * // Initialize Shadcn UI with default settings
+ * const shadcn = await ShadcnUI("my-shadcn", {
+ *   cwd: "my-project",
+ *   tailwind: true,  // Tailwind must be installed separately
+ *   react: true     // React must be installed separately
+ * });
+ *
+ * @example
+ * // Initialize Shadcn UI with custom settings and components
+ * const shadcn = await ShadcnUI("custom-shadcn", {
+ *   cwd: "my-project",
+ *   baseColor: "zinc",
+ *   force: true,
+ *   components: ["button", "card", "input"],
+ *   tailwind: true,  // Tailwind must be installed separately
+ *   react: true     // React must be installed separately
+ * });
+ */
+export declare const ShadcnUI: (((this: any, id: string, props?: {}) => never) & (new (_: never) => never)) | ((this: Context<ShadcnUI>, id: string, props: ShadcnUIProps) => Promise<ShadcnUI>);

package/lib/web/shadcn.js

@@ -0,0 +1,99 @@
+import { exec } from "child_process";
+import path from "path";
+import { promisify } from "util";
+import { Folder, StaticJsonFile } from "../fs";
+import { StaticTypeScriptFile } from "../fs/static-typescript-file";
+import { Resource } from "../resource";
+import { ShadcnComponent } from "./shadcn-component";
+const execAsync = promisify(exec);
+/**
+ * Initializes Shadcn UI in a project directory
+ *
+ * @example
+ * // Initialize Shadcn UI with default settings
+ * const shadcn = await ShadcnUI("my-shadcn", {
+ *   cwd: "my-project",
+ *   tailwind: true,  // Tailwind must be installed separately
+ *   react: true     // React must be installed separately
+ * });
+ *
+ * @example
+ * // Initialize Shadcn UI with custom settings and components
+ * const shadcn = await ShadcnUI("custom-shadcn", {
+ *   cwd: "my-project",
+ *   baseColor: "zinc",
+ *   force: true,
+ *   components: ["button", "card", "input"],
+ *   tailwind: true,  // Tailwind must be installed separately
+ *   react: true     // React must be installed separately
+ * });
+ */
+export const ShadcnUI = Resource("project::ShadcnUI", async function (id, props) {
+    if (this.phase === "delete") {
+        // For a delete phase, we don't perform any action
+        // as removing Shadcn UI would require removing many files
+        // which could be destructive to the project
+        console.log("Note: ShadcnUI delete phase does not remove installed components");
+        return this.destroy();
+    }
+    // Setup execAsync with the correct cwd
+    const exec = (command) => execAsync(command, { cwd: props.cwd });
+    // Ensure React is installed if not already
+    if (!props.react) {
+        await exec(`bun add react react-dom`);
+    }
+    // Install shadcn dependencies
+    await exec(`bun add -D @types/node`);
+    // Create components.json directly instead of running shadcn init
+    await StaticJsonFile(path.join(props.cwd, "components.json"), {
+        $schema: "https://ui.shadcn.com/schema.json",
+        style: props.cssVariables !== false ? "default" : "new-york",
+        tsx: true,
+        rsc: false,
+        tailwind: {
+            config: "tailwind.config.js",
+            css: props.srcDir !== false
+                ? "src/styles/globals.css"
+                : "styles/globals.css",
+            baseColor: props.baseColor || "neutral",
+            cssVariables: props.cssVariables !== false,
+        },
+        aliases: {
+            components: props.srcDir !== false ? "@/components" : "./components",
+            utils: props.srcDir !== false ? "@/lib/utils" : "./lib/utils",
+        },
+    });
+    // Ensure ui components directory exists
+    const ui = await Folder(path.join(props.cwd, props.srcDir !== false ? "src" : "", "components", "ui"));
+    // Create lib directory
+    const libPath = path.join(props.cwd, props.srcDir !== false ? "src" : "", "lib");
+    const lib = await Folder(libPath);
+    // Create utils.ts file
+    const utilsContent = `
+      import { type ClassValue, clsx } from "clsx";
+      import { twMerge } from "tailwind-merge";
+       
+      export function cn(...inputs: ClassValue[]) {
+        return twMerge(clsx(inputs));
+      }
+    `;
+    await StaticTypeScriptFile(path.join(libPath, "utils.ts"), utilsContent);
+    // Install clsx and tailwind-merge
+    await exec(`bun add clsx tailwind-merge`);
+    // Install requested components
+    if (props.components && props.components.length > 0) {
+        for (const componentName of props.components) {
+            await ShadcnComponent(`shadcn-component-${componentName}`, {
+                name: componentName,
+                cwd: props.cwd,
+                force: props.force,
+                silent: props.silent,
+            });
+        }
+    }
+    return this({
+        ...props,
+        ui,
+        lib,
+    });
+});

package/lib/web/tailwind.d.ts

@@ -0,0 +1,64 @@
+import type { Context } from "../context";
+import { Resource } from "../resource";
+/**
+ * Framework types supported by the Tailwind resource
+ */
+export type TailwindFramework = "vite" | "astro" | "next" | "standalone";
+/**
+ * Properties for Tailwind configuration
+ */
+export interface TailwindConfigProps {
+    /**
+     * The working directory where Tailwind should be installed
+     */
+    cwd: string;
+    /**
+     * The framework being used (determines which dependencies to install)
+     * @default "standalone"
+     */
+    framework?: TailwindFramework;
+    /**
+     * The path to the CSS file where Tailwind directives should be added
+     * If not provided, a new file will be created at src/styles/base.css
+     */
+    cssPath?: string;
+    /**
+     * Custom additional packages to install with Tailwind
+     */
+    additionalPackages?: string[];
+}
+/**
+ * Tailwind configuration resource
+ */
+export interface TailwindConfig extends TailwindConfigProps, Resource<"config::TailwindConfig"> {
+    /**
+     * The working directory where Tailwind is installed
+     */
+    cwd: string;
+}
+/**
+ * Installs and configures Tailwind CSS for a project
+ *
+ * @example
+ * // Install Tailwind for a Vite project
+ * const tailwind = await TailwindConfig("vite-tailwind", {
+ *   cwd: "my-vite-app",
+ *   framework: "vite"
+ * });
+ *
+ * @example
+ * // Install Tailwind for an Astro project
+ * const tailwind = await TailwindConfig("astro-tailwind", {
+ *   cwd: "my-astro-app",
+ *   framework: "astro"
+ * });
+ *
+ * @example
+ * // Install Tailwind as standalone with a custom CSS path
+ * const tailwind = await TailwindConfig("custom-tailwind", {
+ *   cwd: "my-project",
+ *   cssPath: "src/css/main.css",
+ *   additionalPackages: ["@tailwindcss/typography", "@tailwindcss/forms"]
+ * });
+ */
+export declare const TailwindConfig: (((this: any, id: string, props?: {}) => never) & (new (_: never) => never)) | ((this: Context<TailwindConfig>, id: string, props: TailwindConfigProps) => Promise<TailwindConfig>);

package/lib/web/tailwind.js

@@ -0,0 +1,97 @@
+import { exec } from "child_process";
+import path from "path";
+import { promisify } from "util";
+import { Folder, StaticTextFile } from "../fs";
+import { Resource } from "../resource";
+const execAsync = promisify(exec);
+/**
+ * Installs and configures Tailwind CSS for a project
+ *
+ * @example
+ * // Install Tailwind for a Vite project
+ * const tailwind = await TailwindConfig("vite-tailwind", {
+ *   cwd: "my-vite-app",
+ *   framework: "vite"
+ * });
+ *
+ * @example
+ * // Install Tailwind for an Astro project
+ * const tailwind = await TailwindConfig("astro-tailwind", {
+ *   cwd: "my-astro-app",
+ *   framework: "astro"
+ * });
+ *
+ * @example
+ * // Install Tailwind as standalone with a custom CSS path
+ * const tailwind = await TailwindConfig("custom-tailwind", {
+ *   cwd: "my-project",
+ *   cssPath: "src/css/main.css",
+ *   additionalPackages: ["@tailwindcss/typography", "@tailwindcss/forms"]
+ * });
+ */
+export const TailwindConfig = Resource("config::TailwindConfig", async function (id, props) {
+    if (this.phase === "delete") {
+        // Nothing to clean up specifically for Tailwind
+        return this.destroy();
+    }
+    const framework = props.framework || "standalone";
+    // Setup execAsync with the correct cwd
+    const exec = (command) => execAsync(command, { cwd: props.cwd });
+    // Install Tailwind and framework-specific dependencies
+    await installTailwindDependencies(framework);
+    // Create CSS file with Tailwind directives
+    await createTailwindCssFile();
+    return this({
+        ...props,
+        framework: framework,
+    });
+    /**
+     * Install Tailwind and framework-specific dependencies
+     */
+    async function installTailwindDependencies(framework) {
+        const basePackages = ["tailwindcss", "postcss", "autoprefixer"];
+        // Add framework-specific packages
+        const frameworkPackages = getFrameworkPackages(framework);
+        // Add custom additional packages
+        const additionalPackages = props.additionalPackages || [];
+        // Combine all packages
+        const allPackages = [
+            ...basePackages,
+            ...frameworkPackages,
+            ...additionalPackages,
+        ];
+        // Install all packages
+        await exec(`bun add -D ${allPackages.join(" ")}`);
+    }
+    /**
+     * Get framework-specific packages for Tailwind
+     */
+    function getFrameworkPackages(framework) {
+        switch (framework) {
+            case "vite":
+                return ["@tailwindcss/vite"];
+            case "astro":
+                return ["@astrojs/tailwind"];
+            case "next":
+                return [];
+            case "standalone":
+            default:
+                return [];
+        }
+    }
+    /**
+     * Create or update CSS file with Tailwind directives
+     */
+    async function createTailwindCssFile() {
+        const tailwindDirectives = `@import 'tailwindcss';`;
+        // Determine CSS file path
+        const cssPath = props.cssPath || path.join(props.cwd, "src", "styles", "global.css");
+        // Create directory structure if needed
+        const cssDir = path.dirname(cssPath);
+        await Folder(path.join(id, "css-dir"), {
+            path: cssDir,
+        });
+        // Create CSS file with Tailwind directives
+        await StaticTextFile(cssPath, tailwindDirectives);
+    }
+});

package/lib/{vite → web}/vite.d.ts

@@ -79,6 +79,11 @@ export interface ViteProjectProps {
      * @default false
      */
     overwrite?: boolean;
+    /**
+     * Whether to delete the project folder during the delete phase
+     * @default true
+     */
+    delete?: boolean;
 }
 export interface ViteProject extends ViteProjectProps, Resource {
     /**

package/lib/{vite → web}/vite.js

@@ -1,10 +1,11 @@
 import { exec } from "child_process";
-import fs from "fs/promises";
 import path from "path";
 import { promisify } from "util";
+import { Folder, StaticJsonFile, StaticTypeScriptFile } from "../fs";
 import { Resource } from "../resource";
-import { ShadcnComponent } from "../shadcn/component";
 import { rm } from "../util/rm";
+import { ShadcnComponent } from "./shadcn-component";
+import { TailwindConfig } from "./tailwind";
 const execAsync = promisify(exec);
 export const ViteProject = Resource("project::ViteProject", {
     alwaysUpdate: true,
@@ -12,9 +13,8 @@ export const ViteProject = Resource("project::ViteProject", {
     const phase = this.phase;
     if (this.phase === "delete") {
         try {
-            if (await fs.exists(props.name)) {
-                // TODO: OS agnostic - fs.rm is slow to delete node_modules/
-                await execAsync("rm -rf " + props.name);
+            if (props.delete !== false) {
+                await execAsync(`rm -rf ${props.name}`);
             }
         }
         catch (error) {
@@ -45,6 +45,11 @@ export const ViteProject = Resource("project::ViteProject", {
             "react()",
         ].filter((s) => typeof s === "string");
         const cwd = path.resolve(process.cwd(), props.name);
+        // Create folder for project
+        await Folder("project-dir", {
+            path: props.name,
+            delete: props.delete,
+        });
         const exec = (command) => execAsync(command, { cwd });
         if (phase === "create" || props.overwrite) {
             await removeUnnecessaryFiles();
@@ -65,8 +70,11 @@ export const ViteProject = Resource("project::ViteProject", {
             await execAsync(`bun vite build`, { cwd: props.name });
         }
         async function installTailwind() {
-            await exec(`bun add tailwindcss @tailwindcss/vite`);
-            await fs.writeFile(path.join(props.name, "vite.config.ts"), `import path from "path";
+            await TailwindConfig(`${id}-tailwind`, {
+                cwd: props.name,
+                framework: "vite",
+            });
+            await StaticTypeScriptFile(path.join(props.name, "vite.config.ts"), `import path from "path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 ${tailwind ? "import tailwindcss from '@tailwindcss/vite';" : ""}
@@ -81,12 +89,6 @@ export default defineConfig({
     },
   },
 });`);
-            // Add Tailwind CSS import to index.css
-            const indexCssPath = path.join(props.name, "src", "index.css");
-            const currentCss = await fs.readFile(indexCssPath, "utf-8");
-            if (!currentCss.includes('@import "tailwindcss";')) {
-                await fs.writeFile(indexCssPath, '@import "tailwindcss";\n\n' + currentCss);
-            }
         }
         async function installShadcn() {
             await exec("bun add -D @types/node");
@@ -120,8 +122,12 @@ export default defineConfig({
             await exec(`bun add -D @tanstack/router-plugin @tanstack/react-router-devtools`);
             const src = path.join(props.name, "src");
             const routes = path.join(src, "routes");
-            await fs.mkdir(routes, { recursive: true });
-            await fs.writeFile(path.join(routes, "__root.tsx"), `import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
+            // Create routes directory
+            await Folder("routes-dir", {
+                path: routes,
+            });
+            // Create root route file
+            await StaticTypeScriptFile(path.join(routes, "__root.tsx"), `import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
 export const Route = createRootRoute({
@@ -142,7 +148,8 @@ export const Route = createRootRoute({
   ),
 });
 `);
-            await fs.writeFile(path.join(routes, "index.tsx"), `import { createLazyFileRoute } from '@tanstack/react-router'
+            // Create index route file
+            await StaticTypeScriptFile(path.join(routes, "index.tsx"), `import { createLazyFileRoute } from '@tanstack/react-router'
 
 export const Route = createLazyFileRoute('/')({
   component: Index,
@@ -155,7 +162,8 @@ function Index() {
     </div>
   )
 }`);
-            await fs.writeFile(path.join(routes, "about.tsx"), `import { createLazyFileRoute } from '@tanstack/react-router'
+            // Create about route file
+            await StaticTypeScriptFile(path.join(routes, "about.tsx"), `import { createLazyFileRoute } from '@tanstack/react-router'
 
 export const Route = createLazyFileRoute('/about')({
   component: About,
@@ -164,7 +172,8 @@ export const Route = createLazyFileRoute('/about')({
 function About() {
   return <div className="p-2">Hello from About!</div>
 }`);
-            await fs.writeFile(path.join(src, "main.tsx"), `import { StrictMode } from 'react'
+            // Create main.tsx
+            await StaticTypeScriptFile(path.join(src, "main.tsx"), `import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import './index.css'
@@ -194,35 +203,26 @@ if (!rootElement.innerHTML) {
 }`);
         }
         async function removeUnnecessaryFiles() {
-            await Promise.all([
-                rm(path.join(props.name, "src", "App.tsx")),
-                rm(path.join(props.name, "src", "App.css")),
-            ]);
+            await rm(path.join(props.name, "src", "App.tsx"));
+            await rm(path.join(props.name, "src", "App.css"));
         }
         async function patchTsConfig() {
-            await Promise.all([
-                rm(path.join(props.name, "tsconfig.app.json")),
-                rm(path.join(props.name, "tsconfig.node.json")),
-                fs.writeFile(path.join(props.name, "tsconfig.json"), JSON.stringify({
-                    extends: props.extends,
-                    compilerOptions: {
-                        baseUrl: ".",
-                        paths: {
-                            "@/*": ["./src/*"],
-                        },
-                        types: ["@cloudflare/workers-types"],
-                        allowImportingTsExtensions: true,
-                        jsx: "react-jsx",
+            await rm(path.join(props.name, "tsconfig.app.json"));
+            await rm(path.join(props.name, "tsconfig.node.json"));
+            await StaticJsonFile(path.join(props.name, "tsconfig.json"), {
+                extends: props.extends,
+                compilerOptions: {
+                    baseUrl: ".",
+                    paths: {
+                        "@/*": ["./src/*"],
                     },
-                    include: [
-                        "vite/*.ts",
-                        "src/**/*.ts",
-                        "src/**/*.tsx",
-                        "src/env.d.ts",
-                    ],
-                    references: props.references?.map((path) => ({ path })),
-                }, null, 2)),
-            ]);
+                    types: ["@cloudflare/workers-types"],
+                    allowImportingTsExtensions: true,
+                    jsx: "react-jsx",
+                },
+                include: ["vite/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/env.d.ts"],
+                references: props.references?.map((path) => ({ path })),
+            });
         }
     }
 });

package/lib/web/vitepress/config.d.ts

@@ -0,0 +1,10 @@
+import type { DefaultTheme, ThemeOptions } from "vitepress";
+export type VitePressConfigProps = {
+    cwd: string;
+    title?: string;
+    description?: string;
+    theme?: ThemeOptions;
+    themeConfig: DefaultTheme.Config;
+};
+export type VitePressConfig = Awaited<ReturnType<typeof VitePressConfig>>;
+export declare function VitePressConfig(props: VitePressConfigProps): Promise<import("../../fs").File>;

package/lib/web/vitepress/config.js

@@ -0,0 +1,31 @@
+import path from "path";
+import { StaticTypeScriptFile } from "../../fs/static-typescript-file";
+export function VitePressConfig(props) {
+    return StaticTypeScriptFile(path.join(props.cwd, ".vitepress", "config.mts"), `import { transformerTwoslash } from "@shikijs/vitepress-twoslash";
+import footnotePlugin from "markdown-it-footnote";
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: ${JSON.stringify(props.title || "Alchemy")},
+  description: ${JSON.stringify(props.description || "Alchemy Docs")},
+  markdown: {
+    // @ts-ignore
+    codeTransformers: [transformerTwoslash()],
+    theme: ${JSON.stringify(props.theme ?? {
+        light: "light-plus",
+        dark: "dark-plus",
+    })},
+    config: (md) => md.use(footnotePlugin),
+  },
+  // https://vitepress.dev/reference/default-theme-config
+  themeConfig: ${JSON.stringify({
+        ...props.themeConfig,
+        search: props.themeConfig.search ?? { provider: "local" },
+        nav: props.themeConfig.nav ?? [{ text: "Home", link: "/" }],
+        sidebar: props.themeConfig.sidebar ?? [],
+        socialLinks: props.themeConfig.socialLinks ?? [],
+    })}
+});
+`);
+}