Notify President Madagascar

    babel-plugin-vdux-transform

    1.1.1 • Public • Published

    babel-plugin-vdux-transform

    Forked from the excellent babel-plugin-react-transform. Does the same thing but works with components that aren't passed to any sort of constructor (e.g. React.createClass) so that it can be used with vdux and other things like deku.

    Usage

    This plugin doesn't do anything on its own, it just enables you to write transforms for your components. You apply those transforms like this:

    {
      "plugins": [
        ["vdux-transform", {
          "transforms": [{
            // can be an NPM module name or a local path
            "transform": "vdux-transform-hmr"
          }, {
            // can be an NPM module name or a local path
            "transform": "./src/my-custom-transform"
          }]
        }]
      ]
    }

    Writing transforms

    A trivial transform to add displayName's to components looks like this:

    function transform (opts) {
      return (component) => {
        const parts = opts.filename.split('/')
        const file = parts[parts.length - 1]
        const name = file.slice(0, file.indexOf('.'))
        const displayName = name[0].toUpperCase() + name.slice(1)
     
        return {
          displayName,
          ...component,
        }
      }
    }

    Higher-order components

    You may also specify an hoc config option which allows you to specify which functions return higher-order components (an example would be vdux-summon):

    {
      "plugins": [
        ["vdux-transform", {
          "hoc": ["summon"],
          "transforms": [{
            "transform": "vdux-transform-hmr"
          }]
        }]
      ]
    }

    Install

    npm i babel-plugin-vdux-transform

    DownloadsWeekly Downloads

    0

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • ashaffer88