Skip to content

Commit e7128f8

Browse files
committed
(docs): basic template README should be like React ones
- those are far more detailed about various pieces than the basic one - basically just remove the React-specific pieces of the React one - substitute some references with non-React ones where applicable - also be more explicit about library use-case in each README
1 parent effdc31 commit e7128f8

File tree

3 files changed

+89
-16
lines changed

3 files changed

+89
-16
lines changed

templates/basic/README.md

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,99 @@
1-
# TSDX Bootstrap
1+
# TSDX User Guide
22

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.
44

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`.
66
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)
88
9-
### `npm start` or `yarn start`
9+
## Commands
1010

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`.
1212

13-
<img src="https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif" width="600" />
13+
To run TSDX, use:
1414

15-
Your library will be rebuilt if you make edits.
15+
```bash
16+
npm start # or yarn start
17+
```
1618

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`.
1820

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`.
2122

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`.
2324

24-
### `npm test` or `yarn test`
25+
## Configuration
2526

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).

templates/react-with-storybook/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
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.
44

5-
> This TSDX setup is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
5+
> This TSDX 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

templates/react/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
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.
44

5-
> This TSDX setup is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
5+
> This TSDX 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

0 commit comments

Comments
 (0)