reacterminator

Node >= 6.0.0

Usage

How to use reacterminator?

reacterminator converts htmls into react components in es6 syntax.

You need to annoate the html tags with several simple data attributes that reacterminator recognize.

For example, you can add a data-component-name attribute to let reacterminator know that it is a react component:

// file: example.html
<body>
  <div data-component-name="Unicorn"></div>
</body>

Then let reacterminator do the chores:

$ reacterminator convert example.html

A file named 'Unicorn.jsx' will be generated at './components/Unicorn.jsx' with the following content:

import React from 'react';

export default class Unicorn extends React.Component {
  render() {
    return (
      <div/>
      );
  }
}

Please check the kitchen sink test for a comprehensive example of what reacterminator is capable of.

DATA ATTRIBUTES

REDUX INTEGRATION

CLI

npm i -g reacterminator

You can use reacterminator or rt for short.

  Usage: reacterminator [options] [command]


  Commands:

    convert|c <path>   convert html files into react component files.
    generate|g <path>  generate custom files.
    help [cmd]         display help for [cmd]

  Convert html files to react components

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

  Examples:

    $ reacterminator c design.html
    $ reacterminator c design/
    $ reacterminator g components/MyCustom

  Notes:

    If the input is a folder, the files ends with -ignore.html will be ignored.

NODE

/**
 * convert html to react components
 *
 * @param {Object} input
 * {('path'|'string')} input.type
 * {string} input.content
 *          When input.type is 'string', input.content is the html content.
 *          When input.type is 'path', input.content specify the path.
 *          The path can be a directory or a file.
 *
 * @param {Object} options
 * {boolean} [options.generateFiles=false]
 * {string}  [options.outputPath='./components']
 * {boolean} [options.recursive=false]
 *           When it is true, reacterminator will find .html files recursivly
 *           and convert all to them into react components.
 *           When it is false, reacterminator will only find the .html files
 *           in the current directory.
 **/

var reacterminator = require('reacterminator');

var components = reacterminator(
  {
    type: 'string',
    content: '<div data-component-name="Unicorn""></div>'
  },
  {
    generatefiles: false,
  }
);

console.log(components.Unicorn.formattedFileSnippet)

// import React from 'react';
//
// export default class Unicorn extends React.Component {
//   render() {
//     return (
//       <div/>
//       );
//   }
// }

Alternatives

Development

Workflow

write spec in read me
write tests
implementation ( please practic TDD by npm run test:watch:mocha )
ensure the following before you do a PR ( npm test )
- linting pass
- tests pass
- 100% coverage

Setup

install correct node version

nvm install # .nvmrc is used to specify node version
nvm use

make sure you can run this command:

npm run test
// Coverall will give you an error since your local is not a travis-ci environment.
// That is OK.

dongcai / reacterminator