|
@@ -1,99 +1,7 @@ |
|
|
# TSDX User Guide |
|
|
|
|
|
|
|
|
# Image Commons |
|
|
|
|
|
|
|
|
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. |
|
|
|
|
|
|
|
|
Useful methods for image-related functions. |
|
|
|
|
|
|
|
|
> 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`. |
|
|
|
|
|
|
|
|
## License |
|
|
|
|
|
|
|
|
> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript) |
|
|
|
|
|
|
|
|
|
|
|
## Commands |
|
|
|
|
|
|
|
|
|
|
|
TSDX scaffolds your new library inside `/src`. |
|
|
|
|
|
|
|
|
|
|
|
To run TSDX, use: |
|
|
|
|
|
|
|
|
|
|
|
```bash |
|
|
|
|
|
npm start # or yarn start |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`. |
|
|
|
|
|
|
|
|
|
|
|
To do a one-off build, use `npm run build` or `yarn build`. |
|
|
|
|
|
|
|
|
|
|
|
To run tests, use `npm test` or `yarn test`. |
|
|
|
|
|
|
|
|
|
|
|
## Configuration |
|
|
|
|
|
|
|
|
|
|
|
Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly. |
|
|
|
|
|
|
|
|
|
|
|
### Jest |
|
|
|
|
|
|
|
|
|
|
|
Jest tests are set up to run with `npm test` or `yarn test`. |
|
|
|
|
|
|
|
|
|
|
|
#### Setup Files |
|
|
|
|
|
|
|
|
|
|
|
This is the folder structure we set up for you: |
|
|
|
|
|
|
|
|
|
|
|
```txt |
|
|
|
|
|
/src |
|
|
|
|
|
index.tsx # EDIT THIS |
|
|
|
|
|
/test |
|
|
|
|
|
blah.test.tsx # EDIT THIS |
|
|
|
|
|
.gitignore |
|
|
|
|
|
package.json |
|
|
|
|
|
README.md # EDIT THIS |
|
|
|
|
|
tsconfig.json |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
### Rollup |
|
|
|
|
|
|
|
|
|
|
|
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. |
|
|
|
|
|
|
|
|
|
|
|
### TypeScript |
|
|
|
|
|
|
|
|
|
|
|
`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs. |
|
|
|
|
|
|
|
|
|
|
|
## Continuous Integration |
|
|
|
|
|
|
|
|
|
|
|
### GitHub Actions |
|
|
|
|
|
|
|
|
|
|
|
A simple action is included that runs these steps on all pushes: |
|
|
|
|
|
|
|
|
|
|
|
- Installs deps w/ cache |
|
|
|
|
|
- Lints, tests, and builds |
|
|
|
|
|
|
|
|
|
|
|
## Optimizations |
|
|
|
|
|
|
|
|
|
|
|
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: |
|
|
|
|
|
|
|
|
|
|
|
```js |
|
|
|
|
|
// ./types/index.d.ts |
|
|
|
|
|
declare var __DEV__: boolean; |
|
|
|
|
|
|
|
|
|
|
|
// inside your code... |
|
|
|
|
|
if (__DEV__) { |
|
|
|
|
|
console.log('foo'); |
|
|
|
|
|
} |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions. |
|
|
|
|
|
|
|
|
|
|
|
## Module Formats |
|
|
|
|
|
|
|
|
|
|
|
CJS, ESModules, and UMD module formats are supported. |
|
|
|
|
|
|
|
|
|
|
|
The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found. |
|
|
|
|
|
|
|
|
|
|
|
## Named Exports |
|
|
|
|
|
|
|
|
|
|
|
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. |
|
|
|
|
|
|
|
|
|
|
|
## Including Styles |
|
|
|
|
|
|
|
|
|
|
|
There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like. |
|
|
|
|
|
|
|
|
|
|
|
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. |
|
|
|
|
|
|
|
|
|
|
|
## Publishing to NPM |
|
|
|
|
|
|
|
|
|
|
|
We recommend using [np](https://github.com/sindresorhus/np). |
|
|
|
|
|
|
|
|
[MIT](./LICENSE) |