diff --git a/package.json b/package.json index 223b821524..7fb0e6b9ea 100644 --- a/package.json +++ b/package.json @@ -4,15 +4,14 @@ "private": true, "scripts": { "build": "turbo run build", - "dev": "turbo run dev --parallel --concurrency 25", - "release": "turbo run build --filter=./packages/* && pnpm changeset publish", "canary:enter": "changeset pre enter canary", "canary:exit": "changeset pre exit", - "version": "changeset version && pnpm install --no-frozen-lockfile && pnpm lint:fix", "lint": "biome check", "lint:fix": "biome check --write .", + "release": "turbo run build --filter=./packages/* && pnpm changeset publish", "test": "turbo run test", - "test:watch": "turbo run test:watch" + "test:watch": "turbo run test:watch", + "version": "changeset version && pnpm install --no-frozen-lockfile && pnpm lint:fix" }, "devDependencies": { "@biomejs/biome": "2.0.5", diff --git a/packages/body/package.json b/packages/body/package.json index 2ce0d152ac..9a2ecf26b8 100644 --- a/packages/body/package.json +++ b/packages/body/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" diff --git a/packages/button/package.json b/packages/button/package.json index 4c14589414..543d876aef 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/code-block/package.json b/packages/code-block/package.json index fdf3afd4c1..ce43e6d253 100644 --- a/packages/code-block/package.json +++ b/packages/code-block/package.json @@ -24,8 +24,8 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", - "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch" + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", + "clean": "rm -rf dist" }, "repository": { "type": "git", diff --git a/packages/code-inline/package.json b/packages/code-inline/package.json index a00609f610..2b769d80fe 100644 --- a/packages/code-inline/package.json +++ b/packages/code-inline/package.json @@ -23,9 +23,9 @@ }, "license": "MIT", "scripts": { - "dev": "pnpm build --watch", - "clean": "rm -rf dist", - "build": "tsup src/index.ts --format esm,cjs --dts --external react" + "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", + "clean": "rm -rf dist" }, "engines": { "node": ">=18.0.0" diff --git a/packages/column/package.json b/packages/column/package.json index b862606041..e1933e4408 100644 --- a/packages/column/package.json +++ b/packages/column/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/components/package.json b/packages/components/package.json index 0e6fd92a0c..9345558666 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -24,8 +24,8 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", - "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch" + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", + "clean": "rm -rf dist" }, "repository": { "type": "git", diff --git a/packages/container/package.json b/packages/container/package.json index 52c6e2c5ff..5bc9bbf609 100644 --- a/packages/container/package.json +++ b/packages/container/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/font/package.json b/packages/font/package.json index 6db5099246..6c2f8ed4e2 100644 --- a/packages/font/package.json +++ b/packages/font/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" diff --git a/packages/head/package.json b/packages/head/package.json index e4b347bfb4..f3425a8a20 100644 --- a/packages/head/package.json +++ b/packages/head/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/heading/package.json b/packages/heading/package.json index 6eec032cb3..aa52b268b2 100644 --- a/packages/heading/package.json +++ b/packages/heading/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/hr/package.json b/packages/hr/package.json index 8383dc7212..f74be53ee4 100644 --- a/packages/hr/package.json +++ b/packages/hr/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/html/package.json b/packages/html/package.json index 9f20d221ea..f2b294c051 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/img/package.json b/packages/img/package.json index 22bb964ac4..4af8f2b460 100644 --- a/packages/img/package.json +++ b/packages/img/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/link/package.json b/packages/link/package.json index 5dcc3bed5f..f147b9bb7e 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/markdown/package.json b/packages/markdown/package.json index ce1edc8e8f..db01ebda78 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -23,10 +23,10 @@ }, "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "keywords": [ "react", diff --git a/packages/preview/package.json b/packages/preview/package.json index 057d3dc005..950e842179 100644 --- a/packages/preview/package.json +++ b/packages/preview/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/react-email/package.json b/packages/react-email/package.json index 4bff5c0287..35c703d41f 100644 --- a/packages/react-email/package.json +++ b/packages/react-email/package.json @@ -8,8 +8,8 @@ "type": "module", "scripts": { "build": "tsup-node", + "build:watch": "tsup-node --watch src", "clean": "rm -rf dist", - "dev": "tsup-node --watch src", "test": "vitest run", "test:watch": "vitest" }, diff --git a/packages/render/package.json b/packages/render/package.json index 0aaa440d60..0da8592afb 100644 --- a/packages/render/package.json +++ b/packages/render/package.json @@ -66,8 +66,8 @@ "license": "MIT", "scripts": { "build": "tsup-node", + "build:watch": "tsup-node --watch", "clean": "rm -rf dist", - "dev": "tsup-node --watch", "test": "vitest run", "test:watch": "vitest" }, diff --git a/packages/row/package.json b/packages/row/package.json index 1383b01493..06a24cd890 100644 --- a/packages/row/package.json +++ b/packages/row/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/section/package.json b/packages/section/package.json index 9c5a6b0084..ccfe701d03 100644 --- a/packages/section/package.json +++ b/packages/section/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json index f210dceb8f..de20d1ab61 100644 --- a/packages/tailwind/package.json +++ b/packages/tailwind/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsc && NODE_ENV=production vite build --mode production && node ./copy-tailwind-types.mjs", - "dev": "vite build --watch", + "build:watch": "vite build --watch", "clean": "rm -rf dist", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/packages/text/package.json b/packages/text/package.json index e921f99010..138e781165 100644 --- a/packages/text/package.json +++ b/packages/text/package.json @@ -24,10 +24,10 @@ "license": "MIT", "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch", "clean": "rm -rf dist", - "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch", - "test:watch": "vitest", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "repository": { "type": "git", diff --git a/playground/README.md b/playground/README.md new file mode 100644 index 0000000000..6a09c01c0f --- /dev/null +++ b/playground/README.md @@ -0,0 +1,40 @@ +# React Email Playground + +This is a playground for React Email made to experiment with components in realtime. + +It includes all components directly from source with a path alias import of `@react-email/components` and hot reloading in the `dev` script. + +## Development workflow + +### 1. Create an email template + +Create a new file at `playground/emails/testing.tsx` + +```tsx emails/testing.tsx +import { Html, Head, Body, Tailwind, Text } from '@react-email/components'; + +export default function Testing() { + return + + + + + + This is a testing email template. + + + + ; +} +``` + +### 2. Run playground server + +```sh +pnpm dev +``` + +### 3. Open in your browser + +Go to http://localhost:3000 + diff --git a/playground/components.ts b/playground/components.ts new file mode 100644 index 0000000000..71ab8f8017 --- /dev/null +++ b/playground/components.ts @@ -0,0 +1,19 @@ +export * from '../packages/body/src'; +export * from '../packages/button/src'; +export * from '../packages/code-block/src'; +export * from '../packages/code-inline/src'; +export * from '../packages/column/src'; +export * from '../packages/container/src'; +export * from '../packages/font/src'; +export * from '../packages/head/src'; +export * from '../packages/heading/src'; +export * from '../packages/hr/src'; +export * from '../packages/html/src'; +export * from '../packages/img/src'; +export * from '../packages/link/src'; +export * from '../packages/markdown/src'; +export * from '../packages/preview/src'; +export * from '../packages/row/src'; +export * from '../packages/section/src'; +export * from '../packages/tailwind/src'; +export * from '../packages/text/src'; diff --git a/playground/emails/.gitignore b/playground/emails/.gitignore new file mode 100644 index 0000000000..bf750e163d --- /dev/null +++ b/playground/emails/.gitignore @@ -0,0 +1,2 @@ +**/*.tsx +!example.tsx diff --git a/playground/emails/example.tsx b/playground/emails/example.tsx new file mode 100644 index 0000000000..2b721ebc2f --- /dev/null +++ b/playground/emails/example.tsx @@ -0,0 +1,30 @@ +import { + Body, + Container, + Head, + Heading, + Html, + Section, + Tailwind, + Text, +} from '@react-email/components'; + +export default function Example() { + return ( + + + + + +
+ Hello, World! + + This is a simple email template using React Email. + +
+ + + + + ); +} diff --git a/playground/package.json b/playground/package.json new file mode 100644 index 0000000000..e40e5e5938 --- /dev/null +++ b/playground/package.json @@ -0,0 +1,22 @@ +{ + "name": "playground", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "email dev", + "export": "email export" + }, + "dependencies": { + "@react-email/render": "workspace:*", + "react": "^19", + "react-dom": "^19" + }, + "devDependencies": { + "@react-email/preview-server": "workspace:*", + "@types/react": "^19", + "@types/react-dom": "^19", + "react-email": "workspace:*", + "tsconfig": "workspace:*", + "tsx": "4.19.3" + } +} diff --git a/playground/tsconfig.json b/playground/tsconfig.json new file mode 100644 index 0000000000..3012f83e6f --- /dev/null +++ b/playground/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "tsconfig/react-library.json", + "compilerOptions": { + "paths": { + "@react-email/components": ["./components.ts"] + } + }, + "include": ["."] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6656fe0361..6c56782fa0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -198,7 +198,7 @@ importers: version: 5.8.3 webpack: specifier: 5.99.6 - version: 5.99.6(@swc/core@1.11.21)(esbuild@0.25.0) + version: 5.99.6(@swc/core@1.11.21) zod: specifier: 3.24.3 version: 3.24.3 @@ -1029,6 +1029,37 @@ importers: packages/tsconfig: {} + playground: + dependencies: + '@react-email/render': + specifier: workspace:* + version: link:../packages/render + react: + specifier: ^19.0.0 + version: 19.0.0 + react-dom: + specifier: ^19.0.0 + version: 19.0.0(react@19.0.0) + devDependencies: + '@react-email/preview-server': + specifier: workspace:* + version: link:../packages/preview-server + '@types/react': + specifier: ^19.0.1 + version: 19.0.1 + '@types/react-dom': + specifier: ^19.0.1 + version: 19.0.1 + react-email: + specifier: workspace:* + version: link:../packages/react-email + tsconfig: + specifier: workspace:* + version: link:../packages/tsconfig + tsx: + specifier: 4.19.3 + version: 4.19.3 + packages: '@alloc/quick-lru@5.2.0': @@ -4426,6 +4457,9 @@ packages: caniuse-lite@1.0.30001716: resolution: {integrity: sha512-49/c1+x3Kwz7ZIWt+4DvK3aMJy9oYXXG6/97JKsnjdCk/6n9vVyWL8NAwVt95Lwt9eigI10Hl782kDfZUUlRXw==} + caniuse-lite@1.0.30001718: + resolution: {integrity: sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==} + caniuse-lite@1.0.30001721: resolution: {integrity: sha512-cOuvmUVtKrtEaoKiO0rSc29jcjwMwX5tOHDy4MgVFEWiUXj4uBMJkwI8MDySkgXidpMiHUcviogAvFi4pA2hDQ==} @@ -12068,7 +12102,7 @@ snapshots: browserslist@4.24.4: dependencies: - caniuse-lite: 1.0.30001716 + caniuse-lite: 1.0.30001718 electron-to-chromium: 1.5.74 node-releases: 2.0.19 update-browserslist-db: 1.1.1(browserslist@4.24.4) @@ -12137,6 +12171,8 @@ snapshots: caniuse-lite@1.0.30001716: {} + caniuse-lite@1.0.30001718: {} + caniuse-lite@1.0.30001721: {} ccount@2.0.1: {} @@ -16460,6 +16496,17 @@ snapshots: '@swc/core': 1.11.21 esbuild: 0.25.0 + terser-webpack-plugin@5.3.11(@swc/core@1.11.21)(webpack@5.99.6(@swc/core@1.11.21)): + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + jest-worker: 27.5.1 + schema-utils: 4.3.0 + serialize-javascript: 6.0.2 + terser: 5.37.0 + webpack: 5.99.6(@swc/core@1.11.21) + optionalDependencies: + '@swc/core': 1.11.21 + terser-webpack-plugin@5.3.11(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.19.11)(webpack@5.99.6(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.19.11)): dependencies: '@jridgewell/trace-mapping': 0.3.25 @@ -17009,6 +17056,36 @@ snapshots: webpack-sources@3.2.3: {} + webpack@5.99.6(@swc/core@1.11.21): + dependencies: + '@types/eslint-scope': 3.7.7 + '@types/estree': 1.0.7 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/wasm-edit': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 + acorn: 8.14.1 + browserslist: 4.24.4 + chrome-trace-event: 1.0.4 + enhanced-resolve: 5.17.1 + es-module-lexer: 1.6.0 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 4.3.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.11(@swc/core@1.11.21)(webpack@5.99.6(@swc/core@1.11.21)) + watchpack: 2.4.2 + webpack-sources: 3.2.3 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + webpack@5.99.6(@swc/core@1.11.21)(esbuild@0.25.0): dependencies: '@types/eslint-scope': 3.7.7 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 9716354f0d..481a608637 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - "apps/*" + - "benchmarks/*" - "packages/*" - "packages/react-email/dev" - - "benchmarks/*" + - "playground"