Skip to content

poetic/reacterminator

Repository files navigation

reacterminator

travis npm semantic-release coverall

Node >= 6.0.0

Usage

How to use reacterminator?

Reacterminator converts html into es6 react components.

To get started, annotate your html tags with several simple data attributes that reacterminator recognizes.

For example, you can add a data-component-name attribute to your html 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 work:

$ 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.

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, files ending 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 specifies 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 options.recursive is true, reacterminator will find .html files recursivly
 *           and convert them into react components.
 *           When 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.

Resouces