Skip to content
Branch: master
Find file History
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.
README.md
index.jsx
index.template.html
package.json
webpack.config.js

README.md

Using JSX with Panel

The example in this directory notates the basic 'counter app' from the README but using JSX to inline the template:

customElements.define('counter-app', class extends Component {
  get config() {
    return {
      defaultState: {count: 1},

      helpers: {
        decr: () => this.changeCounter(-1),
        incr: () => this.changeCounter(1),
      },

      template: props =>
        <div className="counter">
          <div className="val">
            Counter: {props.count}
          </div>
          <div className="controls">
            <button className="decr" on-click={props.$helpers.decr}>-</button>
            <button className="incr" on-click={props.$helpers.incr}>+</button>
          </div>
        </div>
    };
  }

  changeCounter(offset) {
    this.update({count: this.state.count + offset});
  }
});

To install and run the example from this directory: npm install && npm start. The page will be served on localhost:8080 by Webpack dev server.

Notes

For transpiling JSX to JavaScript, this example uses the standard Babel plugin transform-react-jsx. In order for the plugin's output to interface correctly with snabbdom instead of React, we use the snabbdom-jsx package and configure the Babel plugin to use the html Hyperscript function provided by snabbdom-jsx.

Information on integrating Snabbdom-specific functionality (such as its dynamic class-toggling system) into JSX code can be found in Mapping JSX attributes from the snabbdom-jsx README.

You can’t perform that action at this time.