bajaux/spandrel/jsx

Methods

(static) jsxToSpandrel(type, propsopt, …kids) → {module:bajaux/spandrel/jsx~JsxInstructions}

Description:

• Return JSX instructions for creating one node (DOM element of Widget) in a tree of spandrel
  data.

  These represent instructions only. The spandrel data will not be created until it is
  "reified" by calling .then() on the object returned by this function (or passing it to
  Promise.resolve() etc.). spandrel itself will perform this reification as part of the
  process of building out the widget.

Source:

• spandrel/jsx.js, line 130

Examples

Basic JSX->spandrel example

%** @jsx spandrel.jsx *%
class ComponentToHTML extends spandrel((comp) => {
  return (
    <table>
    {
      comp.getSlots().properties().toArray().map((prop) => {
        return <tr>
          <td>{ prop.getName() }</td>
          <td>{ prop.getType() }</td>
        </tr>;
      })
    }
    </table>
  );
}) {}

Continued configuration after creation

// these two widgets are equivalent.

spandrel((string) => <label className="hello">{ string }</label>);
spandrel((string) => {
  const label = <label>{string}</label>;
  label.className = 'hello';
  return label;
});

// at the moment, spandrel JSX nodes are *write only* from your javascript code. this means you
// cannot do this:

spandrel((string) => {
  const label = <label className="foo">{string}</label>;
  label.className += ' bar'; // can't read it!
  return label;
});

Parameters:

Returns:

Type

module:bajaux/spandrel/jsx~JsxInstructions