Skip to content
Babel plugin for converting ESX to createElement calls for production browser code
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore 1st Apr 24, 2019
.npmignore
LICENSE 1st Apr 24, 2019
index.js
package.json
readme.md stable Apr 25, 2019

readme.md

babel-plugin-esx-browser

Babel plugin to prepare ESX for production-ready browser code.

Status

Stable.

Example

In

const esx = require('esx')()
const data = { value: 'hi' }
const Component = ({ value, prop, title }) => esx`
  <div>
    <p> some content: ${title} </p>
    <p> some ${value} </p>
    <p> some ${prop} prop </p>
  </div>
`

esx.register({ Component })

const App = ({ title }) => {
  return esx`<Component prop="static" ...${data} title=${title}/>`
}

export default App

Out

import React from 'react';
const data = {
  value: 'hi'
};

const Component = ({
  value,
  prop,
  title
}) => React.createElement('div', null, [React.createElement('p', null, [" some content: ", title]), React.createElement('p', null, [" some ", value]), React.createElement('p', null, [" some ", prop, " prop "])]);

const App = ({
  title
}) => {
  return React.createElement(Component, {
    prop: "static",
    ...data,
    title: title
  });
};

export default App;

Out when configured with @babel/preset-env

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var data = {
  value: 'hi'
};

var Component = function Component(_ref) {
  var value = _ref.value,
      prop = _ref.prop,
      title = _ref.title;
  return _react["default"].createElement('div', null, [_react["default"].createElement('p', null, [" some content: ", title]), _react["default"].createElement('p', null, [" some ", value]), _react["default"].createElement('p', null, [" some ", prop, " prop "])]);
};

var App = function App(_ref2) {
  var title = _ref2.title;
  return _react["default"].createElement(Component, _objectSpread({
    prop: "static"
  }, data, {
    title: title
  }));
};

var _default = App;
exports["default"] = _default;

Installation

$ npm install babel-plugin-esx-ssr

Usage

.babelrc

{
  "plugins": ["esx-ssr", {
     "framework": "React",
     "include": "import"
  }]
}

Options

framework (default: React)

Currently the only available option is React.

When set to React all elements are created with React.createElement and if React has not been included into a script, it will be added with either import or require as per the include option.

include (default: import)

May be either import or require. If the framework hasn't been added to a script, it will included with the module syntax specified.

Requirements

This plugin is for esx v2.x.x.

Contributions

esx is an OPEN Open Source Project. This means that:

Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

See the CONTRIBUTING.md file for more details.

Licence

MIT

You can’t perform that action at this time.