From 111926f3e82bb7c04b89b81fa87431bde8b8e34c Mon Sep 17 00:00:00 2001 From: sw-yx Date: Sun, 25 Aug 2019 23:58:29 -0400 Subject: [PATCH] update docs for boolean extractErrors --- README.md | 19 +++++++++---------- src/errors/extractErrors.ts | 1 + src/index.ts | 9 ++------- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 363cd640b..35cfb0150 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,6 @@ Despite all the recent hype, setting up a new TypeScript (x React) library can b - - [Features](#features) - [Quick Start](#quick-start) - [`npm start` or `yarn start`](#npm-start-or-yarn-start) @@ -49,6 +48,7 @@ TSDX comes with the "battery-pack included" and is part of a complete TypeScript - Works with React - Human readable error messages (and in VSCode-friendly format) - Bundle size snapshots +- Opt-in to extract `invariant` error codes - Jest test runner setup with sensible defaults via `tsdx test` - Zero-config, single dependency @@ -216,7 +216,7 @@ if (!condition) { Note: TSDX doesn't supply an `invariant` function for you, you need to import one yourself. We recommend https://github.com/alexreardon/tiny-invariant. -To extract and minify error codes in production into a static `codes.json` file, pass an `extractErrors` flag with a URL where you will decode the error code. Example: `tsdx build --extractErrors=https://your-url.com/?invariant=` +To extract and minify `invariant` error codes in production into a static `codes.json` file, specify either `--extractErrors` in command line or set `extractErrors: true` in `tsdx.config.js`. For more details see [Error extraction docs](#error-extraction). ##### `warning` @@ -277,13 +277,11 @@ TSDX will rewrite your `import kebabCase from 'lodash/kebabCase'` to `import o f ### Error extraction -_This feature is still under development_ - After running `--extractErrors`, you will have a `./errors/codes.json` file with all your extracted error codes. This process scans your production code and swaps out your error message strings for a corresponding error code (just like React!). This extraction only works if your error checking/warning is done by a function called `invariant`. Note: you can use either `tiny-invariant` or `tiny-warning`, but you must then import the module as a variable called `invariant` and it should have the same type signature. -After that, you will need to host the decoder somewhere. Look at `./errors/ErrorProd.js` and replace the URL with yours. +⚠️Don't forget: you will need to host the decoder somewhere. Once you have a URL, look at `./errors/ErrorProd.js` and replace the `reactjs.org` URL with yours. -_Simple guide to host error codes to be completed_ +_TODO: Simple guide to host error codes to be completed_ ## Customization @@ -317,7 +315,7 @@ export interface TsdxOptions { env: 'development' | 'production'; // Path to tsconfig file tsconfig?: string; - // Is error extraction running? + // Is opt-in invariant error extraction active? extractErrors?: boolean; // Is minifying? minify?: boolean; @@ -352,9 +350,10 @@ module.exports = { }, }; ``` + ### Babel -You can add your own `.babelrc` to the root of your project and TSDX will **merge** it with its own babel transforms (which are mostly for optimization). +You can add your own `.babelrc` to the root of your project and TSDX will **merge** it with its own babel transforms (which are mostly for optimization). ## Inspiration @@ -409,7 +408,7 @@ Options --target Specify your target environment (default web) --name Specify name exposed in UMD builds --format Specify module format(s) (default cjs,esm) - --extractErrors Specify url for extracting error codes + --extractErrors Opt-in to extracting invariant error codes --tsconfig Specify your custom tsconfig path (default /tsconfig.json) -h, --help Displays this message @@ -418,7 +417,7 @@ Examples $ tsdx build --target node $ tsdx build --name Foo $ tsdx build --format cjs,esm,umd - $ tsdx build --extractErrors=https://reactjs.org/docs/error-decoder.html?invariant= + $ tsdx build --extractErrors $ tsdx build --tsconfig ./tsconfig.foo.json ``` diff --git a/src/errors/extractErrors.ts b/src/errors/extractErrors.ts index 751bb40c6..878a2b74c 100644 --- a/src/errors/extractErrors.ts +++ b/src/errors/extractErrors.ts @@ -120,6 +120,7 @@ export default ErrorDev; paths.appErrors + '/ErrorProd.js', ` function ErrorProd(code) { + // TODO: replace this URL with yours let url = 'https://reactjs.org/docs/error-decoder.html?invariant=' + code; for (let i = 1; i < arguments.length; i++) { url += '&args[]=' + encodeURIComponent(arguments[i]); diff --git a/src/index.ts b/src/index.ts index be7c2284e..45053e6be 100755 --- a/src/index.ts +++ b/src/index.ts @@ -324,13 +324,8 @@ prog .example('watch --verbose') .option('--tsconfig', 'Specify custom tsconfig path') .example('watch --tsconfig ./tsconfig.foo.json') - .option( - '--extractErrors', - 'Extract errors to ./errors/codes.json and provide a url for decoding.' - ) - .example( - 'build --extractErrors=https://reactjs.org/docs/error-decoder.html?invariant=' - ) + .option('--extractErrors', 'Extract invariant errors to ./errors/codes.json.') + .example('build --extractErrors') .action(async (dirtyOpts: any) => { const opts = await normalizeOpts(dirtyOpts); const buildConfigs = createBuildConfigs(opts);