Skip to content

Commit edc653c

Browse files
shadcnshadcn
authored
feat(shadcn-ui): add support for jsx (#834)
1 parent f78a4aa commit edc653c

28 files changed

+666
-56
lines changed

‎.changeset/spicy-games-arrive.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"shadcn-ui": minor
3+
---
4+
5+
add support for jsx

‎apps/www/config/docs.ts

+5
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,11 @@ export const docsConfig: DocsConfig = {
7878
href: "/docs/changelog",
7979
items: [],
8080
},
81+
{
82+
title: "About",
83+
href: "/docs/about",
84+
items: [],
85+
},
8186
],
8287
},
8388
{

‎apps/www/content/docs/about.mdx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: About
3+
description: Powered by amazing open source projects.
4+
---
5+
6+
## About
7+
8+
[ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com).
9+
10+
## Credits
11+
12+
- [Radix UI](https://radix-ui.com) - For the primitives.
13+
- [Vercel](https://vercel.com) - Where I host all my projects.
14+
- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
15+
- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
16+
- [cmdk](https://cmdk.paco.me) - For the `<Command />` component.
17+
18+
## License
19+
20+
MIT © [shadcn](https://shadcn.com)

‎apps/www/content/docs/changelog.mdx

+42
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,48 @@ description: Latest updates and announcements.
44
toc: false
55
---
66

7+
## July 2023 - JavaScript
8+
9+
This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.
10+
11+
However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli).
12+
13+
```txt
14+
Would you like to use TypeScript (recommended)? no
15+
```
16+
17+
To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file.
18+
19+
```json {10} title="components.json"
20+
{
21+
"style": "default",
22+
"tailwind": {
23+
"config": "tailwind.config.js",
24+
"css": "src/app/globals.css",
25+
"baseColor": "zinc",
26+
"cssVariables": true
27+
},
28+
"rsc": false,
29+
"tsx": false,
30+
"aliases": {
31+
"utils": "~/lib/utils",
32+
"components": "~/components"
33+
}
34+
}
35+
```
36+
37+
To configure import aliases, you can use the following `jsconfig.json`:
38+
39+
```json {4} title="jsconfig.json"
40+
{
41+
"compilerOptions": {
42+
"paths": {
43+
"@/*": ["./*"]
44+
}
45+
}
46+
}
47+
```
48+
749
## June 2023 - New CLI, Styles and more
850

951
I have a lot of updates to share with you today:

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

-8
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,3 @@ But hey, let me know if you do. I'd love to see what you build.
6565
</AccordionItem>
6666

6767
</Accordion>
68-
69-
## Credits
70-
71-
- [Radix UI](https://radix-ui.com) - For the primitives.
72-
- [Vercel](https://vercel.com) - Where I host all my projects.
73-
- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
74-
- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
75-
- [cmdk](https://cmdk.paco.me) - For the `<Command />` component.

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

+1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ npx shadcn-ui@latest init
8888
You will be asked a few questions to configure `components.json`:
8989

9090
```txt showLineNumbers
91+
Would you like to use TypeScript (recommended)? no / yes
9192
Which style would you like to use? › Default
9293
Which color would you like to use as base color? › Slate
9394
Where is your global CSS file? › › ./src/styles/globals.css

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

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ npx shadcn-ui@latest init
8484
You will be asked a few questions to configure `components.json`:
8585

8686
```txt showLineNumbers
87+
Would you like to use TypeScript (recommended)? no / yes
8788
Which style would you like to use? › Default
8889
Which color would you like to use as base color? › Slate
8990
Where is your global CSS file? › › ./src/styles/globals.css

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

+39-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ title: Installation
33
description: How to install dependencies and structure your app.
44
---
55

6-
<div className="grid sm:grid-cols-2 gap-4 sm:gap-6">
6+
## Frameworks
7+
8+
<div className="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6">
79
<LinkedCard href="/docs/installation/next">
810
<svg
911
role="img"
@@ -87,6 +89,40 @@ description: How to install dependencies and structure your app.
8789
</LinkedCard>
8890
</div>
8991

90-
## Other frameworks
92+
## TypeScript
93+
94+
This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.
95+
96+
However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli).
97+
98+
To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file.
99+
100+
```json {10} title="components.json"
101+
{
102+
"style": "default",
103+
"tailwind": {
104+
"config": "tailwind.config.js",
105+
"css": "src/app/globals.css",
106+
"baseColor": "zinc",
107+
"cssVariables": true
108+
},
109+
"rsc": false,
110+
"tsx": false,
111+
"aliases": {
112+
"utils": "~/lib/utils",
113+
"components": "~/components"
114+
}
115+
}
116+
```
117+
118+
To configure import aliases, you can use the following `jsconfig.json`:
91119

92-
I'm looking for help writing guides for other frameworks. Help me write those guides by [opening an PR](https://github.com/shadcn/ui).
120+
```json {4} title="jsconfig.json"
121+
{
122+
"compilerOptions": {
123+
"paths": {
124+
"@/*": ["./*"]
125+
}
126+
}
127+
}
128+
```

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

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ npx shadcn-ui@latest init
2626
You will be asked a few questions to configure `components.json`:
2727

2828
```txt showLineNumbers
29+
Would you like to use TypeScript (recommended)? no / yes
2930
Which style would you like to use? › Default
3031
Which color would you like to use as base color? › Slate
3132
Where is your global CSS file? › › app/globals.css

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

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ npx shadcn-ui@latest init
2626
You will be asked a few questions to configure `components.json`:
2727

2828
```txt showLineNumbers
29+
Would you like to use TypeScript (recommended)? no / yes
2930
Which style would you like to use? › Default
3031
Which color would you like to use as base color? › Slate
3132
Where is your global CSS file? › app/tailwind.css

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

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ npx shadcn-ui@latest init
7171
You will be asked a few questions to configure `components.json`:
7272

7373
```txt showLineNumbers
74+
Would you like to use TypeScript (recommended)? no / yes
7475
Which style would you like to use? › Default
7576
Which color would you like to use as base color? › Slate
7677
Where is your global CSS file? › › src/index.css

‎apps/www/public/schema.json

+3
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
"rsc": {
2828
"type": "boolean"
2929
},
30+
"tsx": {
31+
"type": "boolean"
32+
},
3033
"aliases": {
3134
"type": "object",
3235
"properties": {

‎packages/cli/package.json

+7
Original file line numberDiff line numberDiff line change
@@ -45,23 +45,30 @@
4545
},
4646
"dependencies": {
4747
"@antfu/ni": "^0.21.4",
48+
"@babel/core": "^7.22.1",
49+
"@babel/parser": "^7.22.6",
50+
"@babel/plugin-transform-typescript": "^7.22.5",
4851
"chalk": "5.2.0",
4952
"commander": "^10.0.0",
5053
"cosmiconfig": "^8.1.3",
5154
"diff": "^5.1.0",
5255
"execa": "^7.0.0",
5356
"fs-extra": "^11.1.0",
5457
"https-proxy-agent": "^6.2.0",
58+
"lodash.template": "^4.5.0",
5559
"node-fetch": "^3.3.0",
5660
"ora": "^6.1.2",
5761
"prompts": "^2.4.2",
62+
"recast": "^0.23.2",
5863
"ts-morph": "^18.0.0",
5964
"tsconfig-paths": "^4.2.0",
6065
"zod": "^3.20.2"
6166
},
6267
"devDependencies": {
68+
"@types/babel__core": "^7.20.1",
6369
"@types/diff": "^5.0.3",
6470
"@types/fs-extra": "^11.0.1",
71+
"@types/lodash.template": "^4.5.1",
6572
"@types/prompts": "^2.4.2",
6673
"rimraf": "^4.1.3",
6774
"tsup": "^6.6.3",

‎packages/cli/src/commands/add.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export const add = new Command()
143143
}
144144

145145
for (const file of item.files) {
146-
const filePath = path.resolve(targetDir, file.name)
146+
let filePath = path.resolve(targetDir, file.name)
147147

148148
// Run transformers.
149149
const content = await transform({
@@ -153,6 +153,10 @@ export const add = new Command()
153153
baseColor,
154154
})
155155

156+
if (!config.tsx) {
157+
filePath = filePath.replace(/\.tsx$/, ".jsx")
158+
}
159+
156160
await fs.writeFile(filePath, content)
157161
}
158162

‎packages/cli/src/commands/diff.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ async function diffComponent(
166166
baseColor,
167167
})
168168

169-
const patch = diffLines(registryContent, fileContent)
169+
const patch = diffLines(registryContent as string, fileContent)
170170
if (patch.length > 1) {
171171
changes.push({
172172
file: file.name,

‎packages/cli/src/commands/init.ts

+21-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { existsSync, promises as fs } from "fs"
22
import path from "path"
33
import {
44
DEFAULT_COMPONENTS,
5-
DEFAULT_TAILWIND_BASE_COLOR,
65
DEFAULT_TAILWIND_CONFIG,
76
DEFAULT_TAILWIND_CSS,
87
DEFAULT_UTILS,
@@ -23,6 +22,7 @@ import * as templates from "@/src/utils/templates"
2322
import chalk from "chalk"
2423
import { Command } from "commander"
2524
import { execa } from "execa"
25+
import template from "lodash.template"
2626
import ora from "ora"
2727
import prompts from "prompts"
2828
import * as z from "zod"
@@ -86,6 +86,16 @@ export async function promptForConfig(
8686
const baseColors = await getRegistryBaseColors()
8787

8888
const options = await prompts([
89+
{
90+
type: "toggle",
91+
name: "typescript",
92+
message: `Would you like to use ${highlight(
93+
"TypeScript"
94+
)} (recommended)?`,
95+
initial: defaultConfig?.tsx ?? true,
96+
active: "yes",
97+
inactive: "no",
98+
},
8999
{
90100
type: "select",
91101
name: "style",
@@ -115,7 +125,9 @@ export async function promptForConfig(
115125
{
116126
type: "toggle",
117127
name: "tailwindCssVariables",
118-
message: `Do you want to use ${highlight("CSS variables")} for colors?`,
128+
message: `Would you like to use ${highlight(
129+
"CSS variables"
130+
)} for colors?`,
119131
initial: defaultConfig?.tailwind.cssVariables ?? true,
120132
active: "yes",
121133
inactive: "no",
@@ -158,6 +170,7 @@ export async function promptForConfig(
158170
cssVariables: options.tailwindCssVariables,
159171
},
160172
rsc: options.rsc,
173+
tsx: options.typescript,
161174
aliases: {
162175
utils: options.utils,
163176
components: options.components,
@@ -213,12 +226,14 @@ export async function runInit(cwd: string, config: Config) {
213226
}
214227
}
215228

229+
const extension = config.tsx ? "ts" : "js"
230+
216231
// Write tailwind config.
217232
await fs.writeFile(
218233
config.resolvedPaths.tailwindConfig,
219234
config.tailwind.cssVariables
220-
? templates.TAILWIND_CONFIG_WITH_VARIABLES
221-
: templates.TAILWIND_CONFIG,
235+
? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension })
236+
: template(templates.TAILWIND_CONFIG)({ extension }),
222237
"utf8"
223238
)
224239

@@ -236,8 +251,8 @@ export async function runInit(cwd: string, config: Config) {
236251

237252
// Write cn file.
238253
await fs.writeFile(
239-
`${config.resolvedPaths.utils}.ts`,
240-
templates.UTILS,
254+
`${config.resolvedPaths.utils}.${extension}`,
255+
extension === "ts" ? templates.UTILS : templates.UTILS_JS,
241256
"utf8"
242257
)
243258

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const rawConfigSchema = z
2222
$schema: z.string().optional(),
2323
style: z.string(),
2424
rsc: z.coerce.boolean().default(false),
25+
tsx: z.coerce.boolean().default(true),
2526
tailwind: z.object({
2627
config: z.string(),
2728
css: z.string(),
@@ -89,6 +90,6 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
8990

9091
return rawConfigSchema.parse(configResult.config)
9192
} catch (error) {
92-
throw new Error(`Invald configuration found in ${cwd}/components.json.`)
93+
throw new Error(`Invalid configuration found in ${cwd}/components.json.`)
9394
}
9495
}

0 commit comments

Comments
 (0)