1.0.72

README.MD

@@ -19,6 +19,7 @@ npm create jd-app@latest
 - [Prisma](https://github.com/prisma/prisma)
 - [tRPC](https://github.com/trpc/trpc)
 - [TailwindCSS](https://github.com/tailwindlabs/tailwindcss)
+- [UnoCSS](https://github.com/unocss/unocss)
 - [Upstash Ratelimit](https://github.com/upstash/ratelimit)
 
 ### Examples

package.json

@@ -1,11 +1,12 @@
 {
   "name": "create-jd-app",
-  "version": "1.0.71",
+  "version": "1.0.72",
   "main": "dist/index.js",
   "scripts": {
     "test": "ts-node -r tsconfig-paths/register src",
     "build": "rm -rf dist && tsc -p . && tsc-alias -p tsconfig.json",
     "postbuild": "ts-node -r tsconfig-paths/register src/scripts/copyFiles",
+    "postinstall": "ts-node -r tsconfig-paths/register src/scripts/generate",
     "patch": "npm version patch --no-git-tag-version",
     "cp": "ts-node -r tsconfig-paths/register src/scripts/copyFiles",
     "dev": "npm link && cd dist && npm link create-jd-app"

src/generated.ts

@@ -0,0 +1,3 @@
+// DO NOT EDIT THIS FILE, WAS GENERATED BY src/scripts/generate.ts
+type TInstaller = "Prisma" | "TailwindCSS" | "UnoCSS" | "Upstash Ratelimit" | "tRPC"
+

src/helpers/installer.ts

@@ -13,7 +13,7 @@ import {
 } from "~types";
 import { execFiles } from "~utils/files";
 import { execa, formatError, getUserPackageManager } from "~utils/helpers";
-import { packages, vercelEnv } from "~vercel";
+import { vercelPackages, vercelEnv } from "~vercel";
 import chalk from "chalk";
 
 export default async (
@@ -39,7 +39,7 @@ export default async (
     },
   ];
   if (ctx.vercel) {
-    const vercelPkgs = sortToDevAndNormal(packages);
+    const vercelPkgs = sortToDevAndNormal(vercelPackages);
     normalDeps = [...normalDeps, ...vercelPkgs[0]];
     devModeDeps = [...devModeDeps, ...vercelPkgs[1]];
     env = [...env, ...vercelEnv];
@@ -144,17 +144,23 @@ export const installPkgs = async (
 
 export async function getCtxWithInstallers(ctx: IAppCtx): Promise<ICtx> {
   let installers: string[] = [];
-  let pkgs: string[] = [];
+  let pkgs: TInstaller[] = [];
   try {
     installers = await fs.readdir(path.join(__dirname, "../installers"));
   } catch {}
   if (installers.length) {
     pkgs = (
-      await inquirer.prompt<{ pkgs: string[] }>({
+      await inquirer.prompt<{ pkgs: TInstaller[] }>({
         name: "pkgs",
         type: "checkbox",
         message: "What should we use for this app?",
         choices: installers,
+        validate: (ans:TInstaller[]) => {
+          if (ans.includes("TailwindCSS") && ans.includes("UnoCSS")) {
+            return "You can't use both TailwindCSS and UnoCSS at the same time";
+          }
+          return true;
+        },
       })
     ).pkgs;
   }

src/helpers/utils/getIndexPage.ts

@@ -2,10 +2,15 @@ import { ICtx, IUtil } from "~types";
 import { getStyle } from "~utils/jsx";
 
 const getIndexPage: IUtil = (ctx) => {
+  const useUno = ctx.installers.includes("UnoCSS");
   const uswTW = ctx.installers.includes("TailwindCSS");
+  const useStyles = useUno || uswTW;
   const useTRPC = ctx.installers.includes("tRPC");
   const shouldUsePrisma = ctx.installers.includes("Prisma") && !useTRPC;
-  const withStyles = getStyle(uswTW, "font-bold text-2xl text-gray-500");
+  const withStyles = getStyle(
+    useStyles,
+    `font-bold text-2xl ${useUno ? "text-gray" : "text-gray-500"}`
+  );
   const innerRes = getRes(ctx, shouldUsePrisma, useTRPC);
   const innerContent = getContent(withStyles, shouldUsePrisma, useTRPC);
   return `import { type ParentComponent${

src/helpers/utils/getReadMe.ts

@@ -1,3 +1,4 @@
+import { getViteConfig } from "~helpers/vite";
 import { IUtil } from "~types";
 import { getUserPackageManager } from "~utils/helpers";
 
@@ -19,18 +20,7 @@ ${pkg} ${pkg === "yarn" ? "add" : "install"} solid-start-vercel@latest -D
 ### Adding to vite config
 
 \`\`\`ts
-import solid from "solid-start/vite";
-import { defineConfig } from "vite";
-import dotenv from "dotenv";
-// @ts-expect-error no typing
-import vercel from "solid-start-vercel";
-
-export default defineConfig(() => {
-  dotenv.config();
-  return {
-    plugins: [solid({ ssr: false, adapter: vercel({ edge: false }) })],
-  };
-});
+${getViteConfig({ ...ctx, vercel: true })}
 \`\`\`
 
 ### Enviroment Variables

src/helpers/vite.ts

@@ -0,0 +1,46 @@
+import fs from "fs-extra";
+import path from "path";
+import { ICtx, IUtil } from "~types";
+
+export const getViteConfig: IUtil = (ctx) => {
+  const useUno = ctx.installers.includes("UnoCSS");
+  const plugins =
+    useUno && ctx.vercel
+      ? `[
+      solid({ ssr: false, adapter: vercel({ edge: false }) }),
+      UnoCSS(unoConfig),
+    ]`
+      : useUno
+      ? "[solid({ ssr: false }), UnoCSS(unoConfig)]"
+      : `[solid({ ssr: false, adapter: vercel({ edge: false }) })]`;
+  return `import solid from "solid-start/vite";
+import dotenv from "dotenv";${
+    useUno
+      ? `\nimport UnoCSS from "unocss/vite";
+import unoConfig from "./unocss.config";`
+      : ""
+  }
+import { defineConfig } from "vite";${
+    ctx.vercel
+      ? `\n// @ts-expect-error no typing
+import vercel from "solid-start-vercel";`
+      : ""
+  }
+  
+export default defineConfig(() => {
+  dotenv.config();
+  return {
+    plugins: ${plugins},
+  };
+});
+  `;
+};
+
+export const modifyConfigIfNeeded = async (ctx: ICtx) => {
+  if (ctx.vercel || ctx.installers.includes("UnoCSS")) {
+    await fs.writeFile(
+      path.join(ctx.userDir, "vite.config.ts"),
+      getViteConfig(ctx)
+    );
+  }
+};

src/installers/UnoCSS/files/config.txt

@@ -0,0 +1,6 @@
+import { defineConfig } from "unocss";
+import transformerVariantGroup from "@unocss/transformer-variant-group";
+
+export default defineConfig({
+  transformers: [transformerVariantGroup()],
+});

src/installers/UnoCSS/files/root.txt

@@ -0,0 +1,37 @@
+// @refresh reload
+import "./root.css";
+import "uno.css";
+import { Suspense } from "solid-js";
+import {
+  Body,
+  ErrorBoundary,
+  FileRoutes,
+  Head,
+  Html,
+  Meta,
+  Routes,
+  Scripts,
+  Title,
+} from "solid-start";
+
+export default function Root() {
+  return (
+    <Html lang="en">
+      <Head>
+        <Title>Create JD App</Title>
+        <Meta charset="utf-8" />
+        <Meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <Body>
+        <Suspense>
+          <ErrorBoundary>
+            <Routes>
+              <FileRoutes />
+            </Routes>
+          </ErrorBoundary>
+        </Suspense>
+        <Scripts />
+      </Body>
+    </Html>
+  );
+}

src/installers/UnoCSS/index.ts

@@ -0,0 +1,27 @@
+import { IInstaller } from "~types";
+
+const config: IInstaller = (ctx) => ({
+  pkgs: {
+    unocss: {
+      devMode: true,
+    },
+  },
+  name: "UnoCSS",
+  files: [
+    {
+      path: `${__dirname}/files/root.txt`,
+      to: `${ctx.userDir}/src/root.tsx`,
+    },
+    {
+      to: `${ctx.userDir}/src/root.css`,
+      content: "/* feel free to modify uno in here */",
+      type: "write",
+    },
+    {
+      path: `${__dirname}/files/config.txt`,
+      to: `${ctx.userDir}/unocss.config.ts`,
+    },
+  ],
+});
+
+export default config;

src/scripts/copyFiles.ts

@@ -3,7 +3,6 @@ import path from "path";
 import { formatError } from "~utils/helpers";
 
 const basePath = path.join(__dirname, "../installers");
-const baseHelpersPath = path.join(__dirname, "../helpers", "files");
 
 async function main() {
   await Promise.all([
@@ -16,7 +15,6 @@ async function main() {
         await fs.copy(oldPath, newPath);
       }
     }),
-    // fs.copy(baseHelpersPath, baseHelpersPath.replace("src", "dist")),
     fs.copy(
       path.join(__dirname, "../../README.MD"),
       path.join(__dirname, "../../dist/README.MD")

src/scripts/generate.ts

@@ -0,0 +1,22 @@
+import { formatError } from "~utils/helpers";
+import fs from "fs-extra";
+import path from "path";
+
+async function main() {
+  const installers = await fs.readdir(path.join(__dirname, "../installers"));
+  const type = `type TInstaller = ${installers
+    .map((i) => `"${i}"`)
+    .join(" | ")}`;
+  const G_PATH = path.join(__dirname, "../generated.ts");
+  await fs.writeFile(
+    G_PATH,
+    `// DO NOT EDIT THIS FILE, WAS GENERATED BY src/scripts/generate.ts
+${type}
+    `
+  );
+}
+
+main().catch((e) => {
+  console.log(formatError(e));
+  process.exit(1);
+});

src/types.ts

@@ -14,7 +14,7 @@ export type ICtxWith<T> = IAppCtx & T;
 export type ITRPCVersion = "V10" | "V9";
 
 export type ICtx = ICtxWith<{
-  installers: string[];
+  installers: TInstaller[];
   trpcVersion?: ITRPCVersion;
 }>;
 

src/utils/project.ts

@@ -15,7 +15,7 @@ import {
 import { IAppCtx, ICtx, IEnv } from "~types";
 import { installPkgs } from "~helpers/installer";
 import { updateEnv } from "~helpers/env";
-import { config } from "~vercel";
+import { modifyConfigIfNeeded } from "~helpers/vite";
 
 export async function initApp(): Promise<IAppCtx> {
   console.log();
@@ -69,8 +69,6 @@ export async function copyTemplate(appContext: IAppCtx) {
       path.join(appContext.userDir)
     );
     await Promise.all([
-      appContext.vercel &&
-        fs.writeFile(path.join(appContext.userDir, "vite.config.ts"), config),
       fs.rename(
         path.join(appContext.userDir, "_gitignore"),
         path.join(appContext.userDir, ".gitignore")
@@ -93,6 +91,7 @@ export async function modifyProject(
       solidHelper(ctx),
       updateEnv(ctx.userDir, env),
       solidUpdateJSON(ctx, scripts),
+      modifyConfigIfNeeded(ctx),
     ]);
     spinner.succeed("Modified project");
   } catch (e) {

src/vercel.ts

@@ -1,20 +1,6 @@
 import { IPkg, IEnv } from "~types";
 
-export const config = `import solid from "solid-start/vite";
-import dotenv from "dotenv";
-import { defineConfig } from "vite";
-// @ts-expect-error no typing
-import vercel from "solid-start-vercel";
-
-export default defineConfig(() => {
-  dotenv.config();
-  return {
-    plugins: [solid({ ssr: false, adapter: vercel({ edge: false }) })],
-  };
-});
-`;
-
-export const packages: IPkg = {
+export const vercelPackages: IPkg = {
   "solid-start-vercel": {
     devMode: true,
   },