Skip to content

Commit 61b373b

Browse files
committed
chore: readme
1 parent c3f64b7 commit 61b373b

File tree

1 file changed

+41
-24
lines changed

1 file changed

+41
-24
lines changed

docs/tsdx-readme.md renamed to docs/tsdown-readme.md

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
# TSDX React w/ Storybook User Guide
1+
# tsdown React w/ Storybook User Guide
22

3-
Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Lets get you oriented with whats here and how to use it.
3+
Congrats! You just saved yourself hours of work by bootstrapping this project with tsdown. Let's get you oriented with what's here and how to use it.
44

5-
> This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If youre looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
5+
> This tsdown setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you're looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
66
77
> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
88
99
## Commands
1010

11-
TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
11+
tsdown scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
1212

13-
The recommended workflow is to run TSDX in one terminal:
13+
The recommended workflow is to run tsdown in one terminal:
1414

1515
```bash
1616
npm start # or pnpm start
@@ -42,7 +42,7 @@ npm i # or pnpm install to install dependencies
4242
npm start # or pnpm start
4343
```
4444

45-
The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
45+
The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure tsdown is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
4646

4747
To do a one-off build, use `npm run build` or `pnpm build`.
4848

@@ -89,9 +89,9 @@ tsconfig.json
8989

9090
We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
9191

92-
### Rollup
92+
### tsdown
9393

94-
TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
94+
tsdown uses [esbuild](https://esbuild.github.io/) as a bundler and generates multiple output formats for various module formats and build settings. See [Optimizations](#optimizations) for details.
9595

9696
### TypeScript
9797

@@ -108,25 +108,42 @@ Two actions are added by default:
108108

109109
## Optimizations
110110

111-
Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
111+
tsdown provides fast builds using esbuild and includes several optimization features:
112112

113-
```js
114-
// ./types/index.d.ts
115-
declare var __DEV__: boolean;
113+
- **Tree shaking**: Automatically removes unused code
114+
- **Minification**: Optional minification for production builds
115+
- **Source maps**: Generated for debugging
116+
- **Multiple formats**: ESM and CommonJS output
117+
- **TypeScript declarations**: Automatic `.d.ts` generation
116118

117-
// inside your code...
118-
if (__DEV__) {
119-
console.log('foo');
120-
}
121-
```
119+
You can configure these options in your `tsdown.config.js` file:
122120

123-
You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
121+
```js
122+
export default {
123+
entry: 'src/index.ts',
124+
outDir: 'dist',
125+
format: ['esm', 'cjs'],
126+
dts: true,
127+
external: ['react', 'react-dom'],
128+
clean: true,
129+
sourcemap: true,
130+
minify: false,
131+
splitting: false,
132+
treeshake: true,
133+
};
134+
```
124135

125136
## Module Formats
126137

127-
CJS, ESModules, and UMD module formats are supported.
138+
ESM and CommonJS module formats are supported by default.
139+
140+
The appropriate paths are configured in `package.json`:
141+
142+
- `main`: `dist/index.js` (CommonJS)
143+
- `module`: `dist/index.mjs` (ESM)
144+
- `types`: `dist/index.d.ts` (TypeScript declarations)
128145

129-
The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
146+
Please report if any issues are found.
130147

131148
## Deploying the Example Playground
132149

@@ -163,19 +180,19 @@ We recommend using [np](https://github.com/sindresorhus/np).
163180

164181
## Usage with Lerna
165182

166-
When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
183+
When creating a new package with tsdown within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
167184

168185
The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
169186

170187
Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
171188

172189
```diff
173-
"alias": {
190+
"alias": {
174191
- "react": "../node_modules/react",
175192
- "react-dom": "../node_modules/react-dom"
176193
+ "react": "../../../node_modules/react",
177194
+ "react-dom": "../../../node_modules/react-dom"
178-
},
195+
},
179196
```
180197

181-
An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)
198+
An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead.

0 commit comments

Comments
 (0)