malte-wessel

const code = 'console.log("foo")';

console.log(require("babylon").parse(code, {
  // parse in strict mode and allow module declarations
  sourceType: "module",

  plugins: [
    // enable jsx and flow syntax
    "jsx",

malte-wessel

const Box = props => {
  const { children, childrenArgs, title } = props;
  o('div', { className: 'box' });
    if (title) {
      o('div', { className: 'box__title' });
        text(title);
      c('div');
    }
    o('div', { className: 'box__body' });
      children(...childrenArgs);

malte-wessel

import { component } from 'melody-component';

const mapProps = mapper => Component => props => component(Component, props.key, mapper(props)); 

malte-wessel

{% property 'expandable' with { type: 'boolean', required: true } %}
{% property 'expanded' with { type: 'boolean', required: true } %}
{% property 'toggle' with { type: 'function' } %}
{% property 'modifier' with { type: 'string' } %}

{% property 'children' with { type: 'node', required: true } %}
{% property 'title' with { type: 'node' } %}

<div
  class={{ "box box--" + modifier }}

malte-wessel

// Stateful
const MyComponent = createComponent({
  render(state, props, children, childrenArgs) {
    elementOpen('section');
      children(...childrenArgs);
    elementClose('section');
  }
});

// Stateless

malte-wessel

import { createComponent } from 'melody-component';
import { component } from 'melody-idom';

export default function mapProps(mapper) {
  return Component => createComponent({
    render() {
      return component(Component, 'child', mapper(props));
    }
  });
}

malte-wessel

import { Component } from 'melody-component';
import { component } from 'melody-idom';

export default function mapProps(mapper) {
  return Component => class MapPropsComponent extends Component {
    render() {
      return component(Component, 'child', mapper(props));
    }
  };
}

malte-wessel

function doWhile(test) {
    return function*(task, ...args) {
        let result;
        do {
            result = yield call(task, ...args);
        } while(yield test(result))
    };
}

function retryable(maxRetries = 0) {    

malte-wessel

import { createComponent } from 'melody-component';
import template from './Box.twig';
export default createComponent(template);

malte-wessel

var React = require('react');
var ReactDOMServer = require('react-dom/server');

function App() {
  return React.createElement("div", null,
    "Hallo ",
    name,
    ", Wie gehts?"
  );
}