Add sandbox example

examples/sandbox/.babelrc

@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    "transform-class-properties",
+    "transform-object-rest-spread",
+    ['module-resolver', {
+      'root': ['.'],
+      'alias': {}
+    }]
+  ],
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}

examples/sandbox/app/actions.js

@@ -0,0 +1,7 @@
+const store = require('./store.js')
+
+module.exports = {
+  updateText (text) {
+    store.setState({ text })
+  }
+}

examples/sandbox/app/app.js

@@ -0,0 +1,28 @@
+const loll = require('@loll/router')
+const { applyTransform } = require('@loll/h')
+const cxs = require('cxs')
+
+applyTransform(props => {
+  if (props.css && typeof props.css === 'object') {
+    props.className = [props.className || '', cxs(props.css)].join(' ').replace(/^\s/, '')
+  }
+
+  return props
+})
+
+const App = require('./components/App.js')
+const Home = require('./pages/Home.js')
+
+const app = loll([
+  ['/', () => {
+    return App(Home('Home'))
+  }],
+  ['/about', () => {
+    return App(Home('About'))
+  }],
+  ['*', () => {
+    return App(Home('404'))
+  }]
+])
+
+module.exports = app

examples/sandbox/app/components/App.js

@@ -0,0 +1,16 @@
+const h = require('@loll/h')
+
+module.exports = function App (children) {
+  return h`
+    <div>
+      <nav>
+        <ul>
+          <li><a href='/'>Home</a></li>
+          <li><a href='/about'>About</a></li>
+        </ul>
+      </nav>
+
+      ${children}
+    </div>
+  `
+}

examples/sandbox/app/components/MyComponent.js

@@ -0,0 +1,30 @@
+const component = require('@loll/component')
+const h = require('@loll/h')
+const { connect } = require('../store.js')
+const { updateText } = require('../actions.js')
+
+module.exports = connect(state => ({
+  text: state.text
+}))(
+  component({
+    initialState (props) {
+      return {
+        title: 'Hello'
+      }
+    },
+    render (props, state) {
+      return h`
+        <div>
+          <h1>${state.title}</h1>
+          <h2>${state.text}</h2>
+
+          <button onclick=${e => {
+            this.setState({ title: 'Hello world' })()
+          }}>Update title</button>
+
+          <button onclick=${e => updateText('pew pew pew')}>Mutate</button>
+        </div>
+      `
+    }
+  })
+)

examples/sandbox/app/components/Text.js

@@ -0,0 +1,10 @@
+const h = require('@loll/h')
+const { connect } = require('@loll/state')
+
+module.exports = connect(state => ({
+  text: state.text
+}))(function Text (props, state) {
+  return h`
+    <h4>${state.text}</h4>
+  `
+})

examples/sandbox/app/components/Updater.js

@@ -0,0 +1,10 @@
+const h = require('@loll/h')
+const { connect } = require('@loll/state')
+
+module.exports = connect()(function Text (props, state) {
+  return h`
+    <button onclick=${e => {
+      state.update(state => ({ text: 'Pew pew' }))
+    }}>Update text</button>
+  `
+})

examples/sandbox/app/index.js

@@ -0,0 +1,12 @@
+const app = require('./app.js')
+const store = require('./store.js')
+
+const program = app(document.getElementById('root'), () => {
+  console.info('App initialized.')
+})
+
+store.on('update', () => program.render())
+
+program.on('render', next => {
+  console.info(`on('render')`)
+})

examples/sandbox/app/pages/Home.js

@@ -0,0 +1,20 @@
+const h = require('@loll/h')
+// const Text = require('../components/Text.js')
+// const Updater = require('../components/Updater.js')
+const MyComponent = require('../components/MyComponent.js')
+
+module.exports = function Home (props) {
+  const content = MyComponent('Hello')
+  console.log(content)
+  return h`
+    <div>
+      <h1 css=${props === 'Home' ? {
+        color: 'tomato'
+      } : {
+        color: 'palevioletred'
+      }}>${props}</h1>
+
+      ${content}
+    </div>
+  `
+}

examples/sandbox/app/store.js

@@ -0,0 +1,5 @@
+const createStore = require('@loll/state')
+
+module.exports = createStore({
+  text: 'Initial text state'
+})