alchemy 0.2.1 → 0.2.3

package/src/vite/vite.ts

@@ -0,0 +1,406 @@
+import { exec } from "child_process";
+import fs from "fs/promises";
+import path from "path";
+import { promisify } from "util";
+import type { Context } from "../context";
+import { Resource } from "../resource";
+import { ShadcnComponent } from "../shadcn/component";
+import { rm } from "../util/rm";
+
+const execAsync = promisify(exec);
+
+type ViteTemplate =
+  | "vanilla"
+  | "vanilla-ts"
+  | "vue"
+  | "vue-ts"
+  | "react"
+  | "react-ts"
+  | "react-swc"
+  | "react-swc-ts"
+  | "preact"
+  | "preact-ts"
+  | "lit"
+  | "lit-ts"
+  | "svelte"
+  | "svelte-ts"
+  | "solid"
+  | "solid-ts"
+  | "qwik"
+  | "qwik-ts";
+
+export interface ViteProjectProps {
+  /**
+   * The name/path of the project
+   */
+  name: string;
+  /**
+   * The Vite template to use
+   */
+  template: ViteTemplate;
+  /**
+   * The extends to add to the tsconfig.json file
+   */
+  extends?: string;
+  /**
+   * The references to add to the tsconfig.json file
+   */
+  references?: string[];
+  /**
+   * Add Tailwind CSS to the project
+   * @default false
+   */
+  tailwind?: boolean;
+  /**
+   * Add Tanstack Router to the project
+   * @default false
+   */
+  tanstack?: boolean;
+  /**
+   * Add Shadcn UI to the project
+   * @default false
+   */
+  shadcn?: {
+    /**
+     * 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;
+
+    /**
+     * The working directory
+     * @default current directory
+     */
+    cwd?: string;
+
+    /**
+     * Mute output
+     * @default false
+     */
+    silent?: boolean;
+
+    /**
+     * Use the src directory when creating a new project
+     * @default false
+     */
+    srcDir?: boolean;
+
+    /**
+     * Use css variables for theming
+     * @default true
+     */
+    cssVariables?: boolean;
+
+    /**
+     * The components to add
+     */
+    components?: string[];
+  };
+  /**
+   * Force overwrite the project config files during the update phase
+   *
+   * @default false
+   */
+  overwrite?: boolean;
+}
+
+export interface ViteProject extends ViteProjectProps, Resource {
+  /**
+   * The name/path of the project
+   */
+  name: string;
+}
+
+export const ViteProject = Resource(
+  "project::ViteProject",
+  {
+    alwaysUpdate: true,
+  },
+  async function (
+    this: Context<ViteProject>,
+    id: string,
+    props: ViteProjectProps,
+  ): Promise<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);
+        }
+      } catch (error) {
+        console.error(`Error deleting project ${id}:`, error);
+      }
+      return this.destroy();
+    }
+
+    if (this.phase === "update") {
+      if (props.overwrite) {
+        await modifyConfig(props);
+      } else {
+        console.warn(
+          "ViteProject does not support updates - the project must be recreated to change the template",
+        );
+      }
+    } else {
+      await execAsync(`bun create vite ${id} --template ${props.template}`);
+
+      await modifyConfig(props);
+    }
+
+    return this(props);
+
+    async function modifyConfig(props: ViteProjectProps) {
+      const tailwind = props.tailwind ?? false;
+      const tanstack = props.tanstack ?? false;
+
+      const plugins = [
+        tailwind && "tailwindcss()",
+        tanstack &&
+          "TanStackRouterVite({ target: 'react', autoCodeSplitting: true })",
+        "react()",
+      ].filter((s) => typeof s === "string");
+
+      const cwd = path.resolve(process.cwd(), props.name);
+
+      const exec = (command: string) => execAsync(command, { cwd });
+
+      if (phase === "create" || props.overwrite) {
+        await removeUnnecessaryFiles();
+      }
+
+      await patchTsConfig();
+
+      if (props.tailwind) {
+        await installTailwind();
+      }
+
+      if (props.tanstack) {
+        await installTanstack();
+      }
+
+      if (props.shadcn !== undefined) {
+        await installShadcn();
+      }
+
+      await build();
+
+      async function build() {
+        // tsc -b will fail if we have not invoked tan stacks' code gen
+        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";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+${tailwind ? "import tailwindcss from '@tailwindcss/vite';" : ""}
+${tanstack ? 'import { TanStackRouterVite } from "@tanstack/router-plugin/vite";' : ""}
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [${plugins.join(", ")}],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});`,
+        );
+
+        // 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");
+
+        // Build the shadcn init command with all options
+        const shadcnOptions = props.shadcn;
+        const initCommand = [
+          "bunx --bun shadcn@latest init",
+          shadcnOptions?.baseColor && `-b ${shadcnOptions.baseColor}`,
+          shadcnOptions?.defaults && "-d",
+          shadcnOptions?.force && "-f",
+          shadcnOptions?.cwd && `-c ${shadcnOptions.cwd}`,
+          shadcnOptions?.silent && "-s",
+          shadcnOptions?.srcDir && "--src-dir",
+          shadcnOptions?.cssVariables === false && "--no-css-variables",
+        ]
+          .filter(Boolean)
+          .join(" ");
+
+        await exec(initCommand);
+
+        // Install requested components using the ShadcnComponent resource
+        for (const componentName of props.shadcn?.components ?? []) {
+          await ShadcnComponent(`shadcn-component-${componentName}`, {
+            name: componentName,
+            cwd: props.name,
+            force: props.shadcn?.force,
+            silent: props.shadcn?.silent,
+          });
+        }
+      }
+
+      async function installTanstack() {
+        await exec(`bun add @tanstack/react-router`);
+        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";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+export const Route = createRootRoute({
+  component: () => (
+    <div className="w-full min-h-screen flex flex-col">
+      <div className="p-2 flex gap-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>{" "}
+        <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </div>
+  ),
+});
+`,
+        );
+
+        await fs.writeFile(
+          path.join(routes, "index.tsx"),
+          `import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/')({
+  component: Index,
+})
+
+function Index() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  )
+}`,
+        );
+
+        await fs.writeFile(
+          path.join(routes, "about.tsx"),
+          `import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/about')({
+  component: About,
+})
+
+function About() {
+  return <div className="p-2">Hello from About!</div>
+}`,
+        );
+
+        await fs.writeFile(
+          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'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+const router = createRouter({ routeTree })
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}`,
+        );
+      }
+
+      async function removeUnnecessaryFiles() {
+        await Promise.all([
+          rm(path.join(props.name, "src", "App.tsx")),
+          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",
+                },
+                include: [
+                  "vite/*.ts",
+                  "src/**/*.ts",
+                  "src/**/*.tsx",
+                  "src/env.d.ts",
+                ],
+                references: props.references?.map((path) => ({ path })),
+              },
+              null,
+              2,
+            ),
+          ),
+        ]);
+      }
+    }
+  },
+);

package/src/vitepress/dependencies.ts

@@ -0,0 +1,68 @@
+import { exec } from "child_process";
+import { promisify } from "util";
+import type { Context } from "../context";
+import { Resource } from "../resource";
+
+const execAsync = promisify(exec);
+
+export type InstallDependencies = Resource<"project::InstallDependencies">;
+
+export const InstallDependencies = Resource(
+  "project::InstallDependencies",
+  {
+    alwaysUpdate: true,
+  },
+  async function (
+    this: Context<InstallDependencies>,
+    id: string,
+    {
+      cwd,
+      dependencies,
+      devDependencies,
+    }: {
+      cwd: string;
+      dependencies?: Record<string, string>;
+      devDependencies?: Record<string, string>;
+    },
+  ) {
+    if (this.phase === "delete") {
+      return this.destroy();
+    }
+
+    await installDependencies(cwd, dependencies);
+    await installDependencies(cwd, devDependencies, "-D");
+    await execAsync("bun install", { cwd });
+
+    return this({});
+  },
+);
+
+function isInstallableVersion(version: string) {
+  // TODO: file:// ?
+  return !version.startsWith("workspace:");
+}
+
+export function fixedDependencies(dependencies?: Record<string, string>) {
+  if (!dependencies) return {};
+  return Object.fromEntries(
+    Object.entries(dependencies).filter(
+      ([, value]) => !isInstallableVersion(value),
+    ),
+  );
+}
+
+export async function installDependencies(
+  cwd: string,
+  dependencies: Record<string, string> | undefined,
+  ...args: string[]
+) {
+  if (!dependencies) return;
+  const deps = Object.entries(dependencies)
+    .filter(([, value]) => isInstallableVersion(value))
+    .map(([pkg, version]) => `${pkg}@${version}`)
+    .join(" ");
+
+  const cmd = `bun add ${args.join(" ")} ${deps}`;
+  console.log(cmd);
+  await execAsync(cmd, { cwd });
+}

package/src/vitepress/home-page.ts

@@ -0,0 +1,166 @@
+import yaml from "yaml";
+
+/**
+ * Image that can be themed for light/dark mode
+ */
+export interface ThemeableImage {
+  /**
+   * Image source URL
+   */
+  src?: string;
+
+  /**
+   * Image alt text
+   */
+  alt?: string;
+
+  /**
+   * Light theme image URL
+   */
+  light?: string;
+
+  /**
+   * Dark theme image URL
+   */
+  dark?: string;
+}
+
+/**
+ * Hero action button configuration
+ */
+export interface HeroAction {
+  /**
+   * Color theme of the button
+   * @default "brand"
+   */
+  theme?: "brand" | "alt";
+
+  /**
+   * Label of the button
+   */
+  text: string;
+
+  /**
+   * Destination link of the button
+   */
+  link: string;
+
+  /**
+   * Link target attribute
+   */
+  target?: string;
+
+  /**
+   * Link rel attribute
+   */
+  rel?: string;
+}
+
+/**
+ * Hero section configuration
+ */
+export interface Hero {
+  /**
+   * The string shown top of text. Comes with brand color
+   * and expected to be short, such as product name.
+   */
+  name?: string;
+
+  /**
+   * The main text for the hero section. This will be defined
+   * as h1 tag.
+   */
+  text: string;
+
+  /**
+   * Tagline displayed below text
+   */
+  tagline?: string;
+
+  /**
+   * The image displayed next to the text and tagline area
+   */
+  image?: string | ThemeableImage;
+
+  /**
+   * Action buttons to display in home hero section
+   */
+  actions?: HeroAction[];
+}
+
+/**
+ * Feature item configuration
+ */
+export interface Feature {
+  /**
+   * Show icon on each feature box
+   */
+  icon?: string | ThemeableImage;
+
+  /**
+   * Title of the feature
+   */
+  title: string;
+
+  /**
+   * Details of the feature
+   */
+  details: string;
+
+  /**
+   * Link when clicked on feature component
+   */
+  link?: string;
+
+  /**
+   * Link text to be shown inside feature component
+   */
+  linkText?: string;
+
+  /**
+   * Link rel attribute
+   */
+  rel?: string;
+
+  /**
+   * Link target attribute
+   */
+  target?: string;
+}
+
+/**
+ * VitePress home page configuration
+ */
+export interface HomePage {
+  /**
+   * Use home page layout
+   */
+  layout: "home";
+
+  /**
+   * Hero section configuration
+   */
+  hero?: Hero;
+
+  /**
+   * Features section configuration
+   */
+  features?: Feature[];
+
+  /**
+   * Whether to apply default markdown styles
+   * @default true
+   */
+  markdownStyles?: boolean;
+}
+
+/**
+ * Parse YAML frontmatter to home page config
+ */
+export function parseHomePage(content: string): HomePage {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) {
+    throw new Error("Invalid frontmatter format");
+  }
+  return yaml.parse(match[1]) as HomePage;
+}

package/src/vitepress/index.md

@@ -0,0 +1,75 @@
+# Docs Index
+
+```ts twoslash
+// @noErrors
+import path from "path";
+
+import alchemy, { Resource, Context } from "alchemy";
+
+import { Zone } from "alchemy/cloudflare";
+
+type alchemy = any;
+
+await using app = alchemy("github:alchemy", {
+  //          ^?
+  stage: "prod",
+  phase: process.argv.includes("--destroy") ? "destroy" : "up",
+  // pass the password in (you can get it from anywhere, e.g. stdin)
+  password: process.env.SECRET_PASSPHRASE,
+  quiet: process.argv.includes("--verbose") ? false : true,
+});
+
+export interface Product {}
+
+export const Product = Resource(
+  "stripe::Product",
+  async function (
+    this: Context<any>,
+    id: string,
+    props: any,
+  ): Promise<Product> {
+    this.
+    //   ^|
+  }
+);
+```
+
+```ts twoslash
+// @noErrors
+// @esModuleInterop
+import express from "express"
+const app = {
+  get(path: string, fn: (req: any, res: { send(): void }))
+}
+app.get("/", function (req, res) {
+  res.sen
+//       ^|
+})
+app.listen(3000)
+```
+
+```ts twoslash
+// @module: esnext
+// @filename: maths.ts
+export function absolute(num: number) {
+  if (num < 0) return num * -1;
+  return num;
+}
+// @filename: index.ts
+import { absolute } from "./maths";
+const value = absolute(-1);
+```
+
+```ts twoslash
+// @module: esnext
+// @filename: maths.ts
+export function absolute(num: number) {
+  if (num < 0) return num * -1;
+  return num;
+}
+// @filename: index.ts
+// ---cut---
+import { absolute } from "./maths";
+const value = absolute(-1);
+//    ^?
+```

package/src/vitepress/index.ts

@@ -0,0 +1,2 @@
+export * from "./home-page";
+export * from "./vitepress";