Skip to content

Commit

Permalink
fix: allow options for pragma and pragmaFrag JSX transforms
Browse files Browse the repository at this point in the history
  • Loading branch information
@osdevisnot
osdevisnot committed Jun 7, 2021
1 parent b156cf8 commit e70dcc0
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 22 deletions.
38 changes: 20 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,24 +86,26 @@ Then use `npm run` or `yarn` to invoke npm scripts as you normally would.

`klap` uses sensible defaults for most part. However, as needed, use below properties in `package.json` to fine tune `klap`. You can also use `cli flags` to control config options for `klap`.

| option | cli flag(s) | description | default |
| ---------------- | ---------------------- | ---------------------------------------------- | ------------------------------------------------------------- |
| `source` | -s --source | source file to compile and bundle | `src/index.js` |
| `cjs` | -c --cjs | the output file for common js format | pkg.main |
| `esm` | -e --esm | the output file for esm format | pkg.module |
| `umd` | -u --umd | the output file for umd format | pkg.browser |
| `types` | -t --types | the output file for type definitions | pkg.types |
| `browserslist` | -b --browserslist | browserslist compatible compilation target | `last 2 versions modern browsers if usage is greater than 1%` |
| `klap.name` | -n --name | package name for `umd` bundles | sanitized `pkg.name` |
| `klap.port` | -p --port | port for development server | `1234` |
| `klap.example` | --example | location of index js/ts file for start command | `public/index.js` or `pkg.source` |
| `klap.fallback` | --fallback | location of index html file for start command | `public/index.html` |
| `klap.target` | --target | target for development server (`umd, es`) | `es` |
| `klap.sourcemap` | --no-sourcemap | sourcemaps for builds | `true` |
| `klap.minify` | --no-minify | minification for builds | `true` |
| `klap.runtime` | --runtime | the runtime for new JSX transform | `react` |
| `klap.usets` | --usets | use typescript compiler for the project | `false` |
| `klap.globals` | | global names for umd bundles | `{}` |
| option | cli flag(s) | description | default |
| ----------------- | ---------------------- | ---------------------------------------------- | ------------------------------------------------------------- |
| `source` | -s --source | source file to compile and bundle | `src/index.js` |
| `cjs` | -c --cjs | the output file for common js format | pkg.main |
| `esm` | -e --esm | the output file for esm format | pkg.module |
| `umd` | -u --umd | the output file for umd format | pkg.browser |
| `types` | -t --types | the output file for type definitions | pkg.types |
| `browserslist` | -b --browserslist | browserslist compatible compilation target | `last 2 versions modern browsers if usage is greater than 1%` |
| `klap.name` | -n --name | package name for `umd` bundles | sanitized `pkg.name` |
| `klap.port` | -p --port | port for development server | `1234` |
| `klap.example` | --example | location of index js/ts file for start command | `public/index.js` or `pkg.source` |
| `klap.fallback` | --fallback | location of index html file for start command | `public/index.html` |
| `klap.target` | --target | target for development server (`umd, es`) | `es` |
| `klap.sourcemap` | --no-sourcemap | sourcemaps for builds | `true` |
| `klap.minify` | --no-minify | minification for builds | `true` |
| `klap.runtime` | --runtime | the runtime for new JSX transform | `react` |
| `klap.pragma` | --pragma | the JSX Pragma for classic runtime | `react` |
| `klap.pragmaFrag` | --pragmaFrag | JSX Fragment pragma | `react` |
| `klap.usets` | --usets | use typescript compiler for the project | `false` |
| `klap.globals` | | global names for umd bundles | `{}` |

> `--usets` allows the library code to use typescript features not supported by `@babel/preset-typescript`. See [const-enums](examples/const-enums) example to enable usage of const enums.
Expand Down
6 changes: 2 additions & 4 deletions src/babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,12 @@ const hasPackage = (pkg, name) =>

export const babelConfig = (command, pkg, options) => {
const extensions = [...DEFAULT_EXTENSIONS, '.ts', '.tsx', '.json']
const { browserslist, format, runtime } = options
const { browserslist, format, runtime, pragma, pragmaFrag } = options

// Note: when using `React`, presetTs needs `React` as jsxPragma,
// vs presetReact needs `React.createElement`,
// but when using `h` as pragma, both presets needs it to be just `h`
const [jsxPragma, pragma, pragmaFrag] = hasPackage(pkg, 'react')
? ['React', 'React.createElement', 'React.Fragment']
: ['h', 'h', 'h']
const jsxPragma = pragma === 'React.createElement' ? 'React' : pragma

// New JSX Transform - https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
let reactPresetOptions = { runtime: 'classic', pragma, pragmaFrag }
Expand Down
2 changes: 2 additions & 0 deletions src/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const getOptions = (pkg, command) => {
fallback = 'public/index.html',
example = 'public/index.js',
runtime = 'classic',
pragma = 'React.createElement',
pragmaFrag = 'React.Fragment',
usets = false,
} = klap
const options = getopts(process.argv.slice(3), {
Expand Down

0 comments on commit e70dcc0

Please sign in to comment.