JS Preact support

Hummingbird supports preact.js - a virtual DOM JavaScript library.

Getting Started

The quickest way to get started with preact is (as suggested on preact's getting started page ) to use a command-line tool (CLI).

Preact CLI is a simple command-line tool, which wraps up the best possible Webpack and Babel setup. After installing the preact CLI, you can choose between 4 preact project templates

• default - default template with all features.
• material - material template using preact-material-components
• simple - the simplest possible preact setup in a single file
• widget - template for a widget to be embedded in another website.

All of the above listed templates work in Hummingbird. For more in depth information on what is the difference between the template types, visit the Preact CLI documentation page.

After successfully creating a preact project from a template, you can run one of the following commands to serve the application on a local server:

• preact build - create a production build
• preact watch - spin up a development server
• preact serve - start a production version development server

By default the webpack configuration of Preact CLI, lists all browser's latest 2 versions as platform targets. Because of this, the css style interpreter adds the css prefixes, needed in the WebKit and the Mozilla browsers. The -webkit- and -moz- prefixes are not supported in Hummingbird, therefore they should not be included in the bundled css. To change the default webpack configuration's browsersList property, simply add the following to the preact project's package.json file:

"browserslist": [
    "chrome > 67"
]

Creating components

The process of creating preact components for Hummingbird is the same as the regular process of creating components:

• First, you need to import the Component class from preact

import { Component } from 'preact';

• Then, you need to create a class, which extends the Component class, like this

class MyPreactComponent extends Component {
    render() {
        return <span>Hello, Hummingbird!</span>;
    }
}

Preact has two types of components - class and functional. You can use whichever type you prefer in Hummingbird.

• After the component has been successfully created, it should be included and used in the main component file of the project. The main component of a preact project, created with the Preact CLI is the app.js file, located in the src/components folder.

import { Component } from 'preact';
import { MyPreactComponent } from 'MyPreactComponent';

export default class App extends Component {
    constructor(params) {
        super(params);
    }

    render() {
        return (
            <div id="app">
                <MyPreactComponent />
            </div>
        );
    }
}

Supported plugins

preact-socrates is a preact plugin supported by Hummingbird . It is a socrates plugin for preact. Socrates is a redux store to reduce boilerplate and promote good habits.

Usage Example

Create a store using Socrates:

import Socrates from 'socrates';

const store = Socrates(
    {
        boot(state, action) {
            return { greeting: 'Welcome to the game.' }
        },
        greeting: {
            change(state, action) {
                return action.greeting;
            },
        }
    }
);

Dispatch a boot action to specify the initial application state

store('boot', {
  greeting: 'Welcome to the game!'
});

Create a Renderable element, which you want to display on the page:

const Home = ({ dispatch, greeting }) => (
    <div class='home'>
        <h2>{greeting}</h2>
        <div id="start" className={style.button}
            onClick={(e) => dispatch('change greeting',
                { greeting: 'Starting game' })}>Start</div>
    </div>
);

Render the Home Renderable to the body

render(Home, store, document.body);

Preact portal is another of the supported preact plugins in Hummingbird. It provides a <Portal /> component, which renders a component into a specified container. It is useful for popups.

Usage Example

The Portal component:

import { h, Component, render } from 'preact';
import Portal from 'preact-portal';

export default class Thumbnail extends Component {
  open = () => this.setState({ open:true });
  close = () => this.setState({ open:false });

  render({ url }, { open }) {
    return (
      <div class="thumb" onClick={this.open}>
        <img src={url} />

        { open ? (
          <Portal into="#portal_holder">
            <div class="popup" onClick={this.close}>
              <img src={url} />
            </div>
          </Portal>
        ) : null }
      </div>
    );
  }
}

App.js or any other component:

import { h, Component } from 'preact';
import Thumbnail from '../components/thumbnail';

export default class App extends Component {
    render() {
        return (
            <div>
                <Thumbnail url="./../assets/doge.jpg" />
                <div id="portal_holder"></div>
            </div>
        );
    }
}