Code Monkey home page Code Monkey logo

jsx-transform's Introduction

jsx-transform Build Status NPM version Dependency Status

JSX transpiler. Desugar JSX into JavaScript.

This module aims to be a standard and configurable implementation of JSX decoupled from React for use with Mercury or other modules.

JSX is a JavaScript syntax for composing virtual DOM elements. See React's documentation for an explanation.

For linting files containing JSX see JSXHint.

Installation

npm install jsx-transform

API

jsx-transform

This module aims to be a standard and configurable implementation of JSX decoupled from React for use with Mercury or other modules.

JSX is a JavaScript syntax for composing virtual DOM elements. See React's documentation for an explanation.

For linting files containing JSX see JSXHint.

jsx-transform~fromString(str, [options]) ⇒ String

Desugar JSX and return transformed string.

Kind: inner method of jsx-transform

Param Type Description
str String
[options] Object
options.factory String Factory function name for element creation.
[options.spreadFn] String Name of function for use with spread attributes (default: Object.assign).
[options.unknownTagPattern] String uses given pattern for unknown tags where {tag} is replaced by the tag name. Useful for rending mercury components as Component.render() instead of Component().
[options.passUnknownTagsToFactory] Boolean Handle unknown tags like known tags, and pass them as an object to options.factory. If true, createElement(Component) instead of Component() (default: false).
[options.unknownTagsAsString] Boolean Pass unknown tags as string to options.factory (default: false).
[options.arrayChildren] Boolean Pass children as array instead of arguments (default: true).

Example

var jsx = require('jsx-transform');

jsx.fromString('<h1>Hello World</h1>', {
  factory: 'mercury.h'
});
// => 'mercury.h("h1", null, ["Hello World"])'

jsx-transform~fromFile(path, [options]) ⇒ String

Kind: inner method of jsx-transform

Param Type
path String
[options] Object

jsx-transform~browserifyTransform([filename], [options]) ⇒ function

Make a browserify transform.

Kind: inner method of jsx-transform
Returns: function - browserify transform

Param Type Description
[filename] String
[options] Object
[options.extensions] String Array of file extensions to run browserify transform on (default: ['.js', '.jsx', '.es', '.es6']).

Example

var browserify = require('browserify');
var jsxify = require('jsx-transform').browserifyTransform;

browserify()
  .transform(jsxify, options)
  .bundle()

Use .configure(options) to return a configured transform:

var browserify = require('browserify');
var jsxify = require('jsx-transform').browserifyTransform;

browserify({
  transforms: [jsxify.configure(options)]
}).bundle()

Use in package.json:

"browserify": {
  "transform": [
    ["jsx-transform/browserify", { "factory": "h" }]
  ]
}

BSD Licensed

jsx-transform's People

Contributors

alexmingoia avatar anthonyshort avatar brandonhorst avatar chairmanlee8 avatar dy avatar jmullo avatar kuraga avatar markuskobler avatar rikukissa avatar wildlyinaccurate avatar zacqary avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.