getting-started-mithril.md

Getting started with Polythene for Mithril

• Example setup
• Usage in JavaScript modules
  • Which packages do you need?
  • Installation
  • Examples
    • A single component
    • A simple app
• Usage in a HTML file, JSFiddle or flems
  • Setup
  • Example script

Example setup

• polythene-mithril-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/[email protected]/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