|
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 | +# @quest-chains/sdk |
0 commit comments