|
1 | | -# TSDX User Guide |
2 | | - |
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 | | - |
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 | | -
|
7 | | -> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript) |
8 | | -
|
9 | | -## Commands |
10 | | - |
11 | | -TSDX scaffolds your new library inside `/src`. |
12 | | - |
13 | | -To run TSDX, use: |
14 | | - |
15 | | -```bash |
16 | | -npm start # or yarn start |
17 | | -``` |
18 | | - |
19 | | -This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`. |
20 | | - |
21 | | -To do a one-off build, use `npm run build` or `yarn build`. |
22 | | - |
23 | | -To run tests, use `npm test` or `yarn test`. |
24 | | - |
25 | | -## Configuration |
26 | | - |
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 | | -### Bundle Analysis |
34 | | - |
35 | | -[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`. |
36 | | - |
37 | | -#### Setup Files |
38 | | - |
39 | | -This is the folder structure we set up for you: |
40 | | - |
41 | | -```txt |
42 | | -/src |
43 | | - index.tsx # EDIT THIS |
44 | | -/test |
45 | | - blah.test.tsx # EDIT THIS |
46 | | -.gitignore |
47 | | -package.json |
48 | | -README.md # EDIT THIS |
49 | | -tsconfig.json |
50 | | -``` |
51 | | - |
52 | | -### Rollup |
53 | | - |
54 | | -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. |
55 | | - |
56 | | -### TypeScript |
57 | | - |
58 | | -`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs. |
59 | | - |
60 | | -## Continuous Integration |
61 | | - |
62 | | -### GitHub Actions |
63 | | - |
64 | | -Two actions are added by default: |
65 | | - |
66 | | -- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix |
67 | | -- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit) |
68 | | - |
69 | | -## Optimizations |
70 | | - |
71 | | -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: |
72 | | - |
73 | | -```js |
74 | | -// ./types/index.d.ts |
75 | | -declare var __DEV__: boolean; |
76 | | - |
77 | | -// inside your code... |
78 | | -if (__DEV__) { |
79 | | - console.log('foo'); |
80 | | -} |
81 | | -``` |
82 | | - |
83 | | -You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions. |
84 | | - |
85 | | -## Module Formats |
86 | | - |
87 | | -CJS, ESModules, and UMD module formats are supported. |
88 | | - |
89 | | -The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found. |
90 | | - |
91 | | -## Named Exports |
92 | | - |
93 | | -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. |
94 | | - |
95 | | -## Including Styles |
96 | | - |
97 | | -There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like. |
98 | | - |
99 | | -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. |
100 | | - |
101 | | -## Publishing to NPM |
102 | | - |
103 | | -We recommend using [np](https://github.com/sindresorhus/np). |
| 1 | +# This package is inactive and should probably be deleted. |
0 commit comments