|
1 |
| -# TSDX Bootstrap |
| 1 | +# TSDX User Guide |
2 | 2 |
|
3 |
| -This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx). |
| 3 | +Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it. |
4 | 4 |
|
5 |
| -## Local Development |
| 5 | +> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`. |
6 | 6 |
|
7 |
| -Below is a list of commands you will probably find useful. |
| 7 | +> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript) |
8 | 8 |
|
9 |
| -### `npm start` or `yarn start` |
| 9 | +## Commands |
10 | 10 |
|
11 |
| -Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab. |
| 11 | +TSDX scaffolds your new library inside `/src`. |
12 | 12 |
|
13 |
| -<img src="https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif" width="600" /> |
| 13 | +To run TSDX, use: |
14 | 14 |
|
15 |
| -Your library will be rebuilt if you make edits. |
| 15 | +```bash |
| 16 | +npm start # or yarn start |
| 17 | +``` |
16 | 18 |
|
17 |
| -### `npm run build` or `yarn build` |
| 19 | +This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`. |
18 | 20 |
|
19 |
| -Bundles the package to the `dist` folder. |
20 |
| -The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module). |
| 21 | +To do a one-off build, use `npm run build` or `yarn build`. |
21 | 22 |
|
22 |
| -<img src="https://user-images.githubusercontent.com/4060187/52168322-a98e5b00-26f6-11e9-8cf6-222d716b75ef.gif" width="600" /> |
| 23 | +To run tests, use `npm test` or `yarn test`. |
23 | 24 |
|
24 |
| -### `npm test` or `yarn test` |
| 25 | +## Configuration |
25 | 26 |
|
26 |
| -Runs Jest. |
| 27 | +Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly. |
| 28 | + |
| 29 | +### Jest |
| 30 | + |
| 31 | +Jest tests are set up to run with `npm test` or `yarn test`. |
| 32 | + |
| 33 | +#### Setup Files |
| 34 | + |
| 35 | +This is the folder structure we set up for you: |
| 36 | + |
| 37 | +```txt |
| 38 | +/src |
| 39 | + index.tsx # EDIT THIS |
| 40 | +/test |
| 41 | + blah.test.tsx # EDIT THIS |
| 42 | +.gitignore |
| 43 | +package.json |
| 44 | +README.md # EDIT THIS |
| 45 | +tsconfig.json |
| 46 | +``` |
| 47 | + |
| 48 | +### Rollup |
| 49 | + |
| 50 | +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. |
| 51 | + |
| 52 | +### TypeScript |
| 53 | + |
| 54 | +`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs. |
| 55 | + |
| 56 | +## Continuous Integration |
| 57 | + |
| 58 | +### GitHub Actions |
| 59 | + |
| 60 | +A simple action is included that runs these steps on all pushes: |
| 61 | + |
| 62 | +- Installs deps w/ cache |
| 63 | +- Lints, tests, and builds |
| 64 | + |
| 65 | +## Optimizations |
| 66 | + |
| 67 | +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: |
| 68 | + |
| 69 | +```js |
| 70 | +// ./types/index.d.ts |
| 71 | +declare var __DEV__: boolean; |
| 72 | + |
| 73 | +// inside your code... |
| 74 | +if (__DEV__) { |
| 75 | + console.log('foo'); |
| 76 | +} |
| 77 | +``` |
| 78 | + |
| 79 | +You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions. |
| 80 | + |
| 81 | +## Module Formats |
| 82 | + |
| 83 | +CJS, ESModules, and UMD module formats are supported. |
| 84 | + |
| 85 | +The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found. |
| 86 | + |
| 87 | +## Named Exports |
| 88 | + |
| 89 | +Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library. |
| 90 | + |
| 91 | +## Including Styles |
| 92 | + |
| 93 | +There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like. |
| 94 | + |
| 95 | +For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader. |
| 96 | + |
| 97 | +## Publishing to NPM |
| 98 | + |
| 99 | +We recommend using [np](https://github.com/sindresorhus/np). |
0 commit comments