Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#175, #179, #135, #93, #183, #184, #191, fix broken html tests, fix broken --react-import-path #176

Open
wants to merge 16 commits into
base: gh-pages
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,5 @@ npm-debug.log
### Test Output ###
test/data/**/*.rt.actual.js
test/data/**/*.code.js
test/data/**/*.actual.html

75 changes: 68 additions & 7 deletions docs/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ Options:
--flow Add /* @flow */ to the top of the generated file
--native-target-version, --rnv String React native version to generate code for (0.9.0, 0.29.0, default) - either: 0.9.0, 0.29.0, or default - default: 0.9.0
--normalize-html-whitespace Remove repeating whitespace from HTML text. - default: false
--create-element-alias Use an alias name for "React.createElement()"
--external-helpers Emit helper functions as external dependency (and do not rely on 'lodash').
```

### `-h`, `--help`
Expand All @@ -54,7 +56,7 @@ The option enable or disable color in the output.

Use output modules. Valid targets are: `amd`, `commonjs`, `none`, `es6`, `typescript`, or `jsrt`.

### `-n`, `--name`
### `-n`, `--name`

When using globals, the name for the variable. The default is the [file name]RT, when using amd, the name of the module.

Expand All @@ -70,7 +72,7 @@ This option allows to override the output file even if there are no changes.

Use a specific output format (`stylish` or `json`).

### `-t`, `--target-version`
### `-t`, `--target-version`

React version to generate code for (15.0.1, 15.0.0, 0.14.0, 0.13.1, 0.12.2, 0.12.1, 0.12.0, 0.11.2, 0.11.1, 0.11.0, 0.10.0, default). default: 0.14.0

Expand All @@ -92,27 +94,86 @@ Dependency path for importing React.

### `--lodash-import-path`

Dependency path for importing lodash.
Dependency path for importing lodash.

### `--native`, `--rn`

Renders react native templates.

### `--native-target-version`, `--rnv`
### `--native-target-version`, `--rnv`

React native version to generate code for (0.9.0, 0.29.0, default) - either: 0.9.0, 0.29.0, or default - default: 0.9.0

### `--flow`

Add /* @flow */ to the top of the generated file

### `--normalize-html-whitespace`
### `--normalize-html-whitespace`

Remove repeating whitespace from HTML text.
Remove repeating whitespace from HTML text.

Repeating whitespaces normally are not displayed and thus can be removed in order to reduce
the size of the generated JavaScript file.

Whitespace removal is not applied on `<pre>` and `<textarea>` tags, or when the special attribute `rt-pre` is specified on a tag.


### `--create-element-alias`

Use an alias name for `React.createElement()`, allowing shorter function calls in the generated JavaScript code.

Example, use `h` instead of `React.createElement()`:
```
rt foo.rt --create-element-alias h
```
will generate:
```
var h = require('react').createElement;
module.exports = function () {
return h('div', {}, h('span', {}, 'Hello'));
};
```

If using a different library than `React` and the element-creating function is not named `createElement`,
the actual name of the function can be specified by adding a comma after the alias:

Example, use `h` from library `preact`:
```
rt foo.rt --react-import-path preact --create-element-alias h,h
```
will generate:
```
var h = require('preact').h;
module.exports = function () {
return h('div', {}, h('span', {}, 'Hello'));
};
```

### `--external-helpers`

Specify an external module from where to load the runtime helper functions.

Normally `react-templates` uses `lodash` to perform some utility functions, indeed `lodash`
is the only needed dependency apart from the obvious `react`.

By using `--external-helpers`, the utility functions will not be taken from `lodash` or
embedded in the code, but will be loaded separately as a module, thus allowing
to reduce or fine-tune the dependency from `lodash`.

Example:
```
rt foo.rt --external-helpers react-templates-helpers
```
loads the utility functions from `react-templates-helpers` module (which is the
standard one that falls back on `lodash`).

The specified external module must export the following helper functions:
```
__rtmap(collection, function); // loops over a collection
__rtclass(object); // turns a map object into a HTML class-attribute
__rtassign(dest,...objs) // assign properties to destination object
__rtmergeprops(dest,...objs) // as above, but considering "style" and "className"
```




12 changes: 11 additions & 1 deletion src/options.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,22 @@ $ rt <filename> [<filename> ...] [<args>]`,
alias: 'rnv',
type: 'String',
enum: Object.keys(reactNativeSupport),
default: reactNativeSupport.default,
default: reactNativeSupport.default,
description: `React native version to generate code for (${Object.keys(reactNativeSupport).join(', ')})`
}, {
option: 'normalize-html-whitespace',
type: 'Boolean',
default: 'false',
description: 'Remove repeating whitespace from HTML text.'
}, {
option: 'create-element-alias',
default: '',
type: 'String',
description: 'Use an alias name for "React.createElement()".'
}, {
option: 'external-helpers',
default: '',
type: 'String',
description: "Emit helper functions as external dependency (and do not rely on 'lodash')"
}]
});
Loading