feat(shadcn-ui): add support for jsx (#834)

.changeset/spicy-games-arrive.md

@@ -0,0 +1,5 @@
+---
+"shadcn-ui": minor
+---
+
+add support for jsx

apps/www/config/docs.ts

@@ -78,6 +78,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/changelog",
           items: [],
         },
+        {
+          title: "About",
+          href: "/docs/about",
+          items: [],
+        },
       ],
     },
     {

apps/www/content/docs/about.mdx

@@ -0,0 +1,20 @@
+---
+title: About
+description: Powered by amazing open source projects.
+---
+
+## About
+
+[ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com).
+
+## Credits
+
+- [Radix UI](https://radix-ui.com) - For the primitives.
+- [Vercel](https://vercel.com) - Where I host all my projects.
+- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
+- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
+- [cmdk](https://cmdk.paco.me) - For the `<Command />` component.
+
+## License
+
+MIT © [shadcn](https://shadcn.com)

apps/www/content/docs/changelog.mdx

@@ -4,6 +4,48 @@ description: Latest updates and announcements.
 toc: false
 ---
 
+## July 2023 - JavaScript
+
+This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.
+
+However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli).
+
+```txt
+Would you like to use TypeScript (recommended)? no
+```
+
+To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file.
+
+```json {10} title="components.json"
+{
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "rsc": false,
+  "tsx": false,
+  "aliases": {
+    "utils": "~/lib/utils",
+    "components": "~/components"
+  }
+}
+```
+
+To configure import aliases, you can use the following `jsconfig.json`:
+
+```json {4} title="jsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
 ## June 2023 - New CLI, Styles and more
 
 I have a lot of updates to share with you today:

apps/www/content/docs/index.mdx

@@ -65,11 +65,3 @@ But hey, let me know if you do. I'd love to see what you build.
 </AccordionItem>
 
 </Accordion>
-
-## Credits
-
-- [Radix UI](https://radix-ui.com) - For the primitives.
-- [Vercel](https://vercel.com) - Where I host all my projects.
-- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
-- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
-- [cmdk](https://cmdk.paco.me) - For the `<Command />` component.

apps/www/content/docs/installation/astro.mdx

@@ -88,6 +88,7 @@ npx shadcn-ui@latest init
 You will be asked a few questions to configure `components.json`:
 
 ```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no / yes
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › › ./src/styles/globals.css

apps/www/content/docs/installation/gatsby.mdx

@@ -84,6 +84,7 @@ npx shadcn-ui@latest init
 You will be asked a few questions to configure `components.json`:
 
 ```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no / yes
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › › ./src/styles/globals.css

apps/www/content/docs/installation/index.mdx

@@ -3,7 +3,9 @@ title: Installation
 description: How to install dependencies and structure your app.
 ---
 
-<div className="grid sm:grid-cols-2 gap-4 sm:gap-6">
+## Frameworks
+
+<div className="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6">
   <LinkedCard href="/docs/installation/next">
     <svg
       role="img"
@@ -87,6 +89,40 @@ description: How to install dependencies and structure your app.
   </LinkedCard>
 </div>
 
-## Other frameworks
+## TypeScript
+
+This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.
+
+However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli).
+
+To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file.
+
+```json {10} title="components.json"
+{
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "rsc": false,
+  "tsx": false,
+  "aliases": {
+    "utils": "~/lib/utils",
+    "components": "~/components"
+  }
+}
+```
+
+To configure import aliases, you can use the following `jsconfig.json`:
 
-I'm looking for help writing guides for other frameworks. Help me write those guides by [opening an PR](https://github.com/shadcn/ui).
+```json {4} title="jsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```

apps/www/content/docs/installation/next.mdx

@@ -26,6 +26,7 @@ npx shadcn-ui@latest init
 You will be asked a few questions to configure `components.json`:
 
 ```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no / yes
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › › app/globals.css

apps/www/content/docs/installation/remix.mdx

@@ -26,6 +26,7 @@ npx shadcn-ui@latest init
 You will be asked a few questions to configure `components.json`:
 
 ```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no / yes
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › app/tailwind.css

apps/www/content/docs/installation/vite.mdx

@@ -71,6 +71,7 @@ npx shadcn-ui@latest init
 You will be asked a few questions to configure `components.json`:
 
 ```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no / yes
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › › src/index.css

apps/www/public/schema.json

@@ -27,6 +27,9 @@
     "rsc": {
       "type": "boolean"
     },
+    "tsx": {
+      "type": "boolean"
+    },
     "aliases": {
       "type": "object",
       "properties": {

packages/cli/package.json

@@ -45,23 +45,30 @@
   },
   "dependencies": {
     "@antfu/ni": "^0.21.4",
+    "@babel/core": "^7.22.1",
+    "@babel/parser": "^7.22.6",
+    "@babel/plugin-transform-typescript": "^7.22.5",
     "chalk": "5.2.0",
     "commander": "^10.0.0",
     "cosmiconfig": "^8.1.3",
     "diff": "^5.1.0",
     "execa": "^7.0.0",
     "fs-extra": "^11.1.0",
     "https-proxy-agent": "^6.2.0",
+    "lodash.template": "^4.5.0",
     "node-fetch": "^3.3.0",
     "ora": "^6.1.2",
     "prompts": "^2.4.2",
+    "recast": "^0.23.2",
     "ts-morph": "^18.0.0",
     "tsconfig-paths": "^4.2.0",
     "zod": "^3.20.2"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.1",
     "@types/diff": "^5.0.3",
     "@types/fs-extra": "^11.0.1",
+    "@types/lodash.template": "^4.5.1",
     "@types/prompts": "^2.4.2",
     "rimraf": "^4.1.3",
     "tsup": "^6.6.3",

packages/cli/src/commands/add.ts

@@ -143,7 +143,7 @@ export const add = new Command()
         }
 
         for (const file of item.files) {
-          const filePath = path.resolve(targetDir, file.name)
+          let filePath = path.resolve(targetDir, file.name)
 
           // Run transformers.
           const content = await transform({
@@ -153,6 +153,10 @@ export const add = new Command()
             baseColor,
           })
 
+          if (!config.tsx) {
+            filePath = filePath.replace(/\.tsx$/, ".jsx")
+          }
+
           await fs.writeFile(filePath, content)
         }
 

packages/cli/src/commands/diff.ts

@@ -166,7 +166,7 @@ async function diffComponent(
         baseColor,
       })
 
-      const patch = diffLines(registryContent, fileContent)
+      const patch = diffLines(registryContent as string, fileContent)
       if (patch.length > 1) {
         changes.push({
           file: file.name,

packages/cli/src/commands/init.ts

@@ -2,7 +2,6 @@ import { existsSync, promises as fs } from "fs"
 import path from "path"
 import {
   DEFAULT_COMPONENTS,
-  DEFAULT_TAILWIND_BASE_COLOR,
   DEFAULT_TAILWIND_CONFIG,
   DEFAULT_TAILWIND_CSS,
   DEFAULT_UTILS,
@@ -23,6 +22,7 @@ import * as templates from "@/src/utils/templates"
 import chalk from "chalk"
 import { Command } from "commander"
 import { execa } from "execa"
+import template from "lodash.template"
 import ora from "ora"
 import prompts from "prompts"
 import * as z from "zod"
@@ -86,6 +86,16 @@ export async function promptForConfig(
   const baseColors = await getRegistryBaseColors()
 
   const options = await prompts([
+    {
+      type: "toggle",
+      name: "typescript",
+      message: `Would you like to use ${highlight(
+        "TypeScript"
+      )} (recommended)?`,
+      initial: defaultConfig?.tsx ?? true,
+      active: "yes",
+      inactive: "no",
+    },
     {
       type: "select",
       name: "style",
@@ -115,7 +125,9 @@ export async function promptForConfig(
     {
       type: "toggle",
       name: "tailwindCssVariables",
-      message: `Do you want to use ${highlight("CSS variables")} for colors?`,
+      message: `Would you like to use ${highlight(
+        "CSS variables"
+      )} for colors?`,
       initial: defaultConfig?.tailwind.cssVariables ?? true,
       active: "yes",
       inactive: "no",
@@ -158,6 +170,7 @@ export async function promptForConfig(
       cssVariables: options.tailwindCssVariables,
     },
     rsc: options.rsc,
+    tsx: options.typescript,
     aliases: {
       utils: options.utils,
       components: options.components,
@@ -213,12 +226,14 @@ export async function runInit(cwd: string, config: Config) {
     }
   }
 
+  const extension = config.tsx ? "ts" : "js"
+
   // Write tailwind config.
   await fs.writeFile(
     config.resolvedPaths.tailwindConfig,
     config.tailwind.cssVariables
-      ? templates.TAILWIND_CONFIG_WITH_VARIABLES
-      : templates.TAILWIND_CONFIG,
+      ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension })
+      : template(templates.TAILWIND_CONFIG)({ extension }),
     "utf8"
   )
 
@@ -236,8 +251,8 @@ export async function runInit(cwd: string, config: Config) {
 
   // Write cn file.
   await fs.writeFile(
-    `${config.resolvedPaths.utils}.ts`,
-    templates.UTILS,
+    `${config.resolvedPaths.utils}.${extension}`,
+    extension === "ts" ? templates.UTILS : templates.UTILS_JS,
     "utf8"
   )
 

packages/cli/src/utils/get-config.ts

@@ -22,6 +22,7 @@ export const rawConfigSchema = z
     $schema: z.string().optional(),
     style: z.string(),
     rsc: z.coerce.boolean().default(false),
+    tsx: z.coerce.boolean().default(true),
     tailwind: z.object({
       config: z.string(),
       css: z.string(),
@@ -89,6 +90,6 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
 
     return rawConfigSchema.parse(configResult.config)
   } catch (error) {
-    throw new Error(`Invald configuration found in ${cwd}/components.json.`)
+    throw new Error(`Invalid configuration found in ${cwd}/components.json.`)
   }
 }