Getting started with Polythene for Mithril

August 2, 2019 ยท View on GitHub

Example setup

Usage in JavaScript modules

Add Polythene to your project with npm or yarn.

Which packages do you need?

Essential:

  • mithril
  • polythene-mithril

Recommended:

  • polythene-css Provides component CSS files and Material Design styles (typography and font); optionally activates CSS-in-JS more info

Optional:

  • polythene-utilities Layout helper classes more info
  • polythene-core-css CSS tools more info

Installation

npm install --save polythene-mithril polythene-css

Examples

A single component

import m from "mithril"
import { Button } from "polythene-mithril"
import "polythene-css"

m(Button, {
  raised: true,
  label: "Click"
})

A simple app

import m from "mithril"
import { Button, Dialog } from "polythene-mithril"
import { addTypography } from "polythene-css"

addTypography()

const App = {
  view: () => [
    m(Button, {
      raised: true,
      label: "Show dialog",
      events: {
        onclick: () => Dialog.show({
          /* note the Dialog component is below the other elements in the app */
          title: "Hello",
          body: "Click outside to close, or press ESCAPE",
          backdrop: true
        })
      }
    }),
    m(Dialog),
  ]
}

m.mount(document.querySelector("#app"), App)

Usage in a HTML file, JSFiddle or flems

A "standalone" version of Polythene - useful for demonstration purposes - is available at:

https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js

Included:

  • All components
  • All component styles, plus Material Design styles (typography and font), from polythene-css
  • subscribe, unsubscribe from polythene-core
  • Layout styles from polythene-utilities

Not included:

  • Mithril

Setup

Add to your HTML file:

<div id="root"></div>

<script src="https://unpkg.com/mithril@1.1.6/mithril.min.js"></script>
<script src="https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js"></script>

To be able to write es6, add babel-standalone (not necessary for JSFiddle or flems):

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

Example script

/* global m, polythene */
const { Button } = polythene

const App = {
  view: () =>
    m(Button, {
      raised: true,
      label: "Button"
    })
}

// Assuming a html element with id `root`
m.mount(document.getElementById("root"), App)

See: online flems