D0pe NPM | npm.io

d0pe

A dope JavaScript framework for building user interfaces.

WHY

Because React is awesome and this author felt inspired.

INSTALL

npm i d0pe

<script src="https://unpkg.com/d0pe/dist/umd/index.js"></script>

USE

// ECMAScript Modules
import Dope from 'd0pe'
const dope = new Dope(...)

// UMD
const dope = new d0pe(...)

// Add dope to your component tree.
import RootComponent from './RootComponent.js'

const rootElement = document.getElementById('root')
const dope = new d0pe(RootComponent, rootElement)
dope.render()

API

// Make a dope component.
const Component = dope => {
  return dope.make('p', {
    text: 'This is dope!'
  })
}

// Fetch data in a dope component.
const Component = dope => {
  // Set the component's initial state.
  dope.initialState = { data: null }

  // Fetch data after the component is mounted to the DOM.
  dope.onMount(async () => {
    const response = await fetch('./data')
    dope.state.data = await response.json()
  })

  // Return null if a component is not yet dope enough.
  if (!dope.state.data) {
    return dope.make(null)
  }

  // Make dopeness.
  return dope.make('pre', {
    text: JSON.stringfy(dope.state.data)
  })
}

// Consume props in your dope components.
const NavContent = (dope, props) => {
  return dope.make('div', { text: props.msg })
}

const Nav = dope => {
  // Inject props into your dope components.
  const ContentWithProps = dope.inject(Content, { msg: 'Dope Nav!' })

  return dope.make('nav', {
    children: [Nav]
  })
}

// Use the router.
const Component = dope => {
  const router = dope.router()

  if (router.route !== '/') {
    router.redirect('/')
  }

  return dope.make('a', {
    text: 'Link to nowhere.',
    // Add Event handlers.
    onClick: () => router.push('/foo')
  })
}