alchemy 0.2.5 → 0.3.0

package/lib/web/astro.js

@@ -0,0 +1,414 @@
+import { exec } from "child_process";
+import fs from "fs/promises";
+import path from "path";
+import { promisify } from "util";
+import { Folder, StaticJsonFile, StaticTextFile, StaticTypeScriptFile, } from "../fs";
+import { Resource } from "../resource";
+import { ShadcnUI } from "./shadcn";
+const execAsync = promisify(exec);
+/**
+ * Creates a new Astro project
+ *
+ * @example
+ * // Create a basic Astro project
+ * const basicProject = await AstroProject("my-astro-app", {
+ *   title: "My Astro Site",
+ *   description: "Built with Alchemy"
+ * });
+ *
+ * @example
+ * // Create an Astro project with React and Tailwind
+ * const reactProject = await AstroProject("astro-react", {
+ *   title: "Astro + React",
+ *   integrations: ["react", "tailwind"]
+ * });
+ *
+ * @example
+ * // Create an Astro project with Shadcn UI
+ * const shadcnProject = await AstroProject("astro-shadcn", {
+ *   title: "Astro with Shadcn UI",
+ *   integrations: ["react", "tailwind"],
+ *   shadcn: {
+ *     baseColor: "zinc",
+ *     components: ["button", "card", "input"]
+ *   }
+ * });
+ */
+export const AstroProject = Resource("project::AstroProject", {
+    alwaysUpdate: true,
+}, async function (id, props) {
+    const dir = props.dir ?? props.name;
+    if (this.phase === "delete") {
+        try {
+            if (props.delete !== false) {
+                if (await fs.stat(dir).catch(() => null)) {
+                    await execAsync(`rm -rf ${dir}`);
+                }
+            }
+        }
+        catch (error) {
+            console.error(`Error deleting project ${id}:`, error);
+        }
+        return this.destroy();
+    }
+    const cwd = path.resolve(process.cwd(), dir);
+    // Create the project directory
+    await Folder("project-dir", {
+        path: dir,
+        delete: true,
+    });
+    await Folder(".astro", {
+        path: dir,
+        delete: true,
+        clean: true,
+    });
+    await setupProject(props);
+    return this(props);
+    /**
+     * Set up the Astro project structure and configuration
+     */
+    async function setupProject(props) {
+        // Create project structure
+        await ProjectStructure();
+        // Set up package.json
+        await StaticJsonFile(path.join(dir, "package.json"), {
+            name: props.name,
+            type: "module",
+            version: "0.0.1",
+            scripts: {
+                dev: "astro dev",
+                start: "astro dev",
+                build: "astro build",
+                preview: "astro preview",
+                astro: "astro",
+                ...props.scripts,
+            },
+            dependencies: props.dependencies || {},
+            devDependencies: props.devDependencies || {},
+        });
+        // Set up tsconfig.json
+        await StaticJsonFile(path.join(dir, "tsconfig.json"), {
+            extends: props.tsconfig?.extends || "astro/tsconfigs/strict",
+            compilerOptions: {
+                baseUrl: ".",
+                paths: {
+                    "@/*": ["./src/*"],
+                },
+                jsx: "react-jsx",
+                jsxImportSource: "react",
+                ...props.tsconfig?.compilerOptions,
+            },
+            include: ["src/**/*.ts", "src/**/*.tsx", "src/**/*.astro"],
+            references: props.tsconfig?.references?.map((path) => ({ path })),
+        });
+        // Set up astro.config.mjs
+        await AstroConfig();
+        // Set up initial files
+        await InitialFiles();
+        // Install integrations
+        if (props.integrations && props.integrations.length > 0) {
+            await InstallIntegrations();
+        }
+        // Install dependencies
+        await InstallDependencies();
+        // Set up Shadcn if requested
+        if (props.shadcn) {
+            await ShadcnUI(id, {
+                ...props.shadcn,
+                cwd: dir,
+            });
+        }
+    }
+    /**
+     * Create the basic project structure
+     */
+    async function ProjectStructure() {
+        const folderPaths = [
+            "src",
+            "src/components",
+            "src/layouts",
+            "src/pages",
+            "public",
+        ];
+        for (const folderPath of folderPaths) {
+            await Folder(`${dir}-${folderPath}`, {
+                path: path.join(dir, folderPath),
+            });
+        }
+    }
+    /**
+     * Set up astro.config.mjs
+     */
+    async function AstroConfig() {
+        const integrations = [];
+        const vitePlugins = [];
+        // Add imports and integrations
+        const configImports = ['import { defineConfig } from "astro/config";'];
+        if (props.integrations?.includes("react")) {
+            configImports.push('import react from "@astrojs/react";');
+            integrations.push("react()");
+        }
+        if (props.integrations?.includes("preact")) {
+            configImports.push('import preact from "@astrojs/preact";');
+            integrations.push("preact()");
+        }
+        if (props.integrations?.includes("vue")) {
+            configImports.push('import vue from "@astrojs/vue";');
+            integrations.push("vue()");
+        }
+        if (props.integrations?.includes("svelte")) {
+            configImports.push('import svelte from "@astrojs/svelte";');
+            integrations.push("svelte()");
+        }
+        if (props.integrations?.includes("solid")) {
+            configImports.push('import solid from "@astrojs/solid-js";');
+            integrations.push("solid()");
+        }
+        if (props.integrations?.includes("lit")) {
+            configImports.push('import lit from "@astrojs/lit";');
+            integrations.push("lit()");
+        }
+        if (props.integrations?.includes("tailwind")) {
+            configImports.push('import tailwindcss from "@tailwindcss/vite";');
+            vitePlugins.push("tailwindcss()");
+        }
+        if (props.integrations?.includes("mdx")) {
+            configImports.push('import mdx from "@astrojs/mdx";');
+            integrations.push("mdx()");
+        }
+        if (props.integrations?.includes("sitemap")) {
+            configImports.push('import sitemap from "@astrojs/sitemap";');
+            integrations.push("sitemap()");
+        }
+        if (props.integrations?.includes("partytown")) {
+            configImports.push('import partytown from "@astrojs/partytown";');
+            integrations.push("partytown()");
+        }
+        if (props.integrations?.includes("markdoc")) {
+            configImports.push('import markdoc from "@astrojs/markdoc";');
+            integrations.push("markdoc()");
+        }
+        const integrationsStr = integrations.length
+            ? `\n  integrations: [${integrations.join(", ")}],`
+            : "";
+        const vitePluginsStr = vitePlugins.length
+            ? `\n  vite: {\n    plugins: [${vitePlugins.join(", ")}]\n  },`
+            : "";
+        return StaticTypeScriptFile(path.join(dir, "astro.config.ts"), `${configImports.join("\n")}
+
+// https://astro.build/config
+export default defineConfig({${integrationsStr}${vitePluginsStr}
+  site: "https://example.com",
+  output: "static"
+});`);
+    }
+    /**
+     * Create initial files for the project
+     */
+    async function InitialFiles() {
+        // Create .gitignore
+        await StaticTextFile(path.join(dir, ".gitignore"), `# build output
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+.astro/
+`);
+        // Create .env.d.ts
+        await StaticTextFile(path.join(dir, "src", "env.d.ts"), `/// <reference types="astro/client" />
+`);
+        // Create a basic layout
+        await StaticTextFile(path.join(dir, "src", "layouts", "Layout.astro"), `---
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description = "Welcome to my Astro site" } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="description" content={description} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    --accent: 124, 58, 237;
+    --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
+  }
+  html {
+    font-family: system-ui, sans-serif;
+    background-color: #f6f6f6;
+  }
+  code {
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+      Bitstream Vera Sans Mono, Courier New, monospace;
+  }
+</style>
+`);
+        // Create a basic index page
+        await StaticTextFile(path.join(dir, "src", "pages", "index.astro"), `---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="${props.title || "Astro Site"}" description="${props.description || "Welcome to my Astro site"}">
+  <main>
+    <h1><span class="text-gradient">Astro</span> Site</h1>
+    <p class="instructions">
+      To get started, edit <code>src/pages/index.astro</code> and save to see your changes.
+    </p>
+  </main>
+</Layout>
+
+<style>
+  main {
+    margin: auto;
+    padding: 1.5rem;
+    max-width: 60ch;
+  }
+  h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin: 0;
+  }
+  .text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+  }
+  .instructions {
+    line-height: 1.6;
+    margin: 1rem 0;
+    border: 1px solid rgba(var(--accent), 25%);
+    background-color: white;
+    padding: 1rem;
+    border-radius: 0.4rem;
+  }
+  .instructions code {
+    font-size: 0.875em;
+    font-weight: bold;
+    background: rgba(var(--accent), 12%);
+    color: rgb(var(--accent));
+    border-radius: 4px;
+    padding: 0.3em 0.45em;
+  }
+</style>
+`);
+        // Create public/favicon.svg
+        await StaticTextFile(path.join(dir, "public", "favicon.svg"), `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
+  <defs>
+    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF1639"/>
+      <stop offset="1" stop-color="#FF1639" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+</svg>
+`);
+    }
+    /**
+     * Install Astro integrations
+     */
+    async function InstallIntegrations() {
+        const exec = (command) => execAsync(command, { cwd });
+        const integrationPackages = [];
+        for (const integration of props.integrations) {
+            switch (integration) {
+                case "react":
+                    integrationPackages.push("@astrojs/react", "react", "react-dom");
+                    break;
+                case "preact":
+                    integrationPackages.push("@astrojs/preact", "preact");
+                    break;
+                case "vue":
+                    integrationPackages.push("@astrojs/vue", "vue");
+                    break;
+                case "svelte":
+                    integrationPackages.push("@astrojs/svelte", "svelte");
+                    break;
+                case "solid":
+                    integrationPackages.push("@astrojs/solid-js", "solid-js");
+                    break;
+                case "lit":
+                    integrationPackages.push("@astrojs/lit", "lit");
+                    break;
+                case "tailwind":
+                    integrationPackages.push("@tailwindcss/vite", "tailwindcss");
+                    // Create a base.css file with @tailwind directives
+                    await Folder(path.join(dir, "src", "styles"));
+                    await StaticTextFile(path.join(dir, "src", "styles", "global.css"), `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`);
+                    break;
+                case "mdx":
+                    integrationPackages.push("@astrojs/mdx");
+                    break;
+                case "sitemap":
+                    integrationPackages.push("@astrojs/sitemap");
+                    break;
+                case "partytown":
+                    integrationPackages.push("@astrojs/partytown");
+                    break;
+                case "markdoc":
+                    integrationPackages.push("@astrojs/markdoc");
+                    break;
+            }
+        }
+        if (integrationPackages.length > 0) {
+            await exec(`bun add astro ${integrationPackages.join(" ")}`);
+        }
+    }
+    /**
+     * Install dependencies
+     */
+    async function InstallDependencies() {
+        const exec = (command) => execAsync(command, { cwd });
+        // Install Astro and general dependencies
+        await exec(`bun add astro`);
+        // Install dev dependencies
+        const devDepsEntries = Object.entries(props.devDependencies || {});
+        if (devDepsEntries.length > 0) {
+            const devDepsArg = devDepsEntries
+                .map(([name, version]) => `${name}@${version}`)
+                .join(" ");
+            await exec(`bun add -D ${devDepsArg}`);
+        }
+        // Install regular dependencies
+        const depsEntries = Object.entries(props.dependencies || {});
+        if (depsEntries.length > 0) {
+            const depsArg = depsEntries
+                .map(([name, version]) => `${name}@${version}`)
+                .join(" ");
+            await exec(`bun add ${depsArg}`);
+        }
+    }
+});

package/lib/{shadcn/component.js → web/shadcn-component.js}

@@ -3,18 +3,11 @@ import fs from "fs/promises";
 import path from "path";
 import { promisify } from "util";
 import { Resource } from "../resource";
+import { ignore } from "../util/ignore";
 const execAsync = promisify(exec);
 export const ShadcnComponent = Resource("project::ShadcnComponent", async function (id, props) {
     if (this.phase === "delete") {
-        const componentPath = path.join(props.cwd, "src", "components", "ui", `${props.name}.tsx`);
-        try {
-            await fs.unlink(componentPath);
-        }
-        catch (error) {
-            if (error.code !== "ENOENT") {
-                throw error;
-            }
-        }
+        await ignore("ENOENT", () => fs.unlink(path.join(props.cwd, "src", "components", "ui", `${props.name}.tsx`)));
         return this.destroy();
     }
     // Build the shadcn add command with options

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>);