alchemy 0.2.2 → 0.2.4

package/src/vitepress/vitepress.ts

@@ -0,0 +1,382 @@
+import { exec } from "child_process";
+import fs from "fs/promises";
+import path from "path";
+import { promisify } from "util";
+import type { DefaultTheme, ThemeOptions } from "vitepress";
+import yaml from "yaml";
+import type { Context } from "../context";
+import { Folder, JsonFile, TextFile, TypeScriptFile } from "../fs";
+import { Resource } from "../resource";
+import { InstallDependencies, fixedDependencies } from "./dependencies";
+import type { HomePage } from "./home-page";
+
+const execAsync = promisify(exec);
+
+export interface VitePressProjectProps {
+  /**
+   * The name/path of the project
+   */
+  name: string;
+
+  /**
+   * The title of the documentation site
+   */
+  title?: string;
+
+  /**
+   * The description of the documentation site
+   */
+  description?: string;
+
+  /**
+   * Whether to use TypeScript for config and theme files
+   * @default true
+   */
+  typescript?: boolean;
+
+  tsconfig?: {
+    extends?: string;
+    references?: string[];
+    compilerOptions?: Record<string, any>;
+  };
+
+  /**
+   * Force overwrite the project config files during the update phase
+   * @default false
+   */
+  overwrite?: boolean;
+
+  /**
+   * The dependencies to install
+   */
+  dependencies?: Record<string, string>;
+
+  /**
+   * The dev dependencies to install
+   */
+  devDependencies?: Record<string, string>;
+
+  /**
+   * The theme options to use
+   */
+  theme?: ThemeOptions;
+
+  /**
+   * The theme config to use
+   */
+  themeConfig: DefaultTheme.Config;
+
+  /**
+   * The home page configuration
+   */
+  home: HomePage;
+
+  /**
+   * Whether to delete the project folder during the delete phase
+   * @default true
+   */
+  delete?: boolean;
+
+  /**
+   * The directory to generate the docs in
+   *
+   * @default {@link name}
+   */
+  dir?: string;
+}
+
+export interface VitePressProject extends VitePressProjectProps, Resource {
+  /**
+   * The name/path of the project
+   */
+  name: string;
+}
+
+export const VitePressProject = Resource(
+  "project::VitePressProject",
+  {
+    alwaysUpdate: true,
+  },
+  async function (
+    this: Context<VitePressProject>,
+    id: string,
+    props: VitePressProjectProps,
+  ): Promise<VitePressProject> {
+    const dir = props.dir ?? props.name;
+    if (this.phase === "delete") {
+      try {
+        if (props.delete !== false) {
+          if (await fs.exists(dir)) {
+            // Delete the entire project directory
+            await execAsync(`rm -rf ${dir}`);
+          }
+        }
+      } catch (error) {
+        console.error(`Error deleting VitePress project ${id}:`, error);
+      }
+      return this.destroy();
+    }
+
+    const cwd = (
+      await Folder("dir", {
+        path: dir,
+        delete: props.delete,
+      })
+    ).path;
+
+    // Initialize package.json
+    await JsonFile(path.join(cwd, "package.json"), {
+      name: props.name,
+      scripts: {
+        "docs:gen": "bun alchemy.run.ts",
+        "docs:dev": "vitepress dev",
+        "docs:build": "vitepress build",
+        "docs:preview": "vitepress preview",
+      },
+      dependencies: fixedDependencies(props.dependencies || {}),
+      devDependencies: fixedDependencies(props.devDependencies || {}),
+    });
+
+    await InstallDependencies("dependencies", {
+      cwd,
+      dependencies: props.dependencies,
+      devDependencies: {
+        vue: "latest",
+        vitepress: "latest",
+        "@shikijs/vitepress-twoslash": "latest",
+        "markdown-it-footnote": "latest",
+        ...props.devDependencies,
+      },
+    });
+    // Create .vitepress directory and config
+    await Folder(path.join(cwd, ".vitepress"));
+    await Folder(path.join(cwd, ".vitepress", "theme"));
+
+    await Promise.all([
+      TextFile(path.join(cwd, ".gitignore"), `.vitepress/cache\n`),
+      JsonFile(path.join(cwd, "tsconfig.json"), {
+        extends: props.tsconfig?.extends,
+        references: props.tsconfig?.references?.map((path) => ({ path })),
+        compilerOptions: props.tsconfig?.compilerOptions,
+      }),
+      TextFile(
+        path.join(cwd, "index.md"),
+        `---\n${yaml.stringify(props.home)}---\n`,
+      ),
+      //       TypeScriptFile(
+      //         path.join(cwd, "alchemy.run.ts"),
+      //         `import alchemy from "alchemy";
+      // import { Folder } from "alchemy/fs";
+      // import { Document } from "alchemy/docs";
+      // import path from "path";
+
+      // await using _ = alchemy("alchemy.run", {
+      //   stage: "prod",
+      //   phase: process.argv.includes("--destroy") ? "destroy" : "up",
+      //   password: process.env.SECRET_PASSPHRASE,
+      //   quiet: !process.argv.includes("--verbose"),
+      // });
+
+      // const docs = await Folder(path.join("alchemy.run", "docs"));
+
+      // await Document("home.md", {
+      //   path: path.join(docs.path, "home.md"),
+      //   prompt: await alchemy\`Generate a landing page.\`,
+      // });
+      // `,
+      //       ),
+      TypeScriptFile(
+        path.join(cwd, ".vitepress", "theme", "index.ts"),
+        `import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client";
+import "@shikijs/vitepress-twoslash/style.css";
+import type { Theme as ThemeConfig } from "vitepress";
+import Theme from "vitepress/theme-without-fonts";
+import "./style.css";
+
+export default {
+  extends: Theme,
+  enhanceApp(ctx) {
+    ctx.app.use(TwoslashFloatingVue);
+  },
+} satisfies ThemeConfig;
+  `,
+      ),
+      TextFile(
+        path.join(cwd, ".vitepress", "theme", "style.css"),
+        `/**
+* Customize default theme styling by overriding CSS variables:
+* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+*/
+
+/**
+* Colors
+*
+* Each colors have exact same color scale system with 3 levels of solid
+* colors with different brightness, and 1 soft color.
+*
+* - \`XXX-1\`: The most solid color used mainly for colored text. It must
+*   satisfy the contrast ratio against when used on top of \`XXX-soft\`.
+*
+* - \`XXX-2\`: The color used mainly for hover state of the button.
+*
+* - \`XXX-3\`: The color for solid background, such as bg color of the button.
+*   It must satisfy the contrast ratio with pure white (#ffffff) text on
+*   top of it.
+*
+* - \`XXX-soft\`: The color used for subtle background such as custom container
+*   or badges. It must satisfy the contrast ratio when putting \`XXX-1\` colors
+*   on top of it.
+*
+*   The soft color must be semi transparent alpha channel. This is crucial
+*   because it allows adding multiple "soft" colors on top of each other
+*   to create a accent, such as when having inline code block inside
+*   custom containers.
+*
+* - \`default\`: The color used purely for subtle indication without any
+*   special meanings attached to it such as bg color for menu hover state.
+*
+* - \`brand\`: Used for primary brand colors, such as link text, button with
+*   brand theme, etc.
+*
+* - \`tip\`: Used to indicate useful information. The default theme uses the
+*   brand color for this by default.
+*
+* - \`warning\`: Used to indicate warning to the users. Used in custom
+*   container, badges, etc.
+*
+* - \`danger\`: Used to show error, or dangerous message to the users. Used
+*   in custom container, badges, etc.
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+* Component: Button
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+* Component: Home
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+* Component: Custom Block
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+* Component: Algolia
+* -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+`,
+      ),
+      TypeScriptFile(
+        path.join(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 ?? [],
+  })}
+});
+`,
+      ),
+    ]);
+
+    return this(props);
+  },
+);

package/lib/project/vite.d.ts

@@ -1,90 +0,0 @@
-import type { Context } from "../context";
-import { Resource } from "../resource";
-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 declare const ViteProject: ((this: Context<ViteProject>, id: string, props: ViteProjectProps) => Promise<ViteProject>) | (((this: any, id: string, props: ViteProjectProps) => never) & (new (_: never) => never));
-export {};

package/lib/project/vite.js

@@ -1,228 +0,0 @@
-import { exec } from "child_process";
-import fs from "fs/promises";
-import path from "path";
-import { promisify } from "util";
-import { Resource } from "../resource";
-import { ShadcnComponent } from "../shadcn/component";
-import { rm } from "../util/rm";
-const execAsync = promisify(exec);
-export const ViteProject = Resource("project::ViteProject", {
-    alwaysUpdate: true,
-}, async function (id, props) {
-    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) {
-        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) => 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)),
-            ]);
-        }
-    }
-});