Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

crazy-taxi

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

crazy-taxi

A wrapper around mithril that utilizes mithril-node-render and webpack to render mithril templates server side along with their bundle so that they function seamlessly on the client.

0.4.4
Source
npm

Version published: 7 years ago

Maintainers: 1

Created: 8 years ago

Source

Crazy Taxi

Universal Javascript: easy and seamless

Crazy taxi is based on Mithril.js and uses hyperscript syntax (pure JS) for it's templates. Dead simple backend rendering.

var ct = require('crazy-taxi’)

var component = ct.compile('./component.js’)

var compiledHTMLString = component({name: ‘Joe’})

The rendering of each component is independent, and functions independently on the front end. Any attributes you pass into the compiled function are pre-rendered and hydrated automatically on the client!

var rendered_page = `
	<head>
		<title>Craaaaazy Taaaaxi</title>
	</head>

	<body>
		<h1>
			${component_one({name: ‘Joe’})}
			${component_one({name: ‘Schmoe’})}
		<h2>

		<p>
			${component_two({title: ‘Programmer’})}
		</p>

		<div>
			<p>
				Don't be afraid to write HUUUUGE components!
			</p>
			${huge_component_with_lots_of_children()}
		</div>
	</body>
`

Template Engine:

Crazy Taxi's tempating is powered by Mithril.js A super tiny (7kb gzip & min), ultra fast library that is extremely easy to learn.

Mithril Uses Hyperscript templating, which unlike JSX is pure javascript so it's easy to reason about and requires no transpilation:

var SimpleMarkupComponent = {
    view: function(vnode) {
        return c('div', [ 
	        c('p', {style:{'color': 'orange'}} ,'Hello!')
        ]
    }
}

Just like React, Mithril uses a virtual DOM to diff changes and redraw the page. This means is has lifecycle components, just like react:

var ComponentWithHooks = {
    oninit: function(vnode) {
        console.log("initialized")
    },
    oncreate: function(vnode) {
        console.log("DOM created")
    },
    onupdate: function(vnode) {
        console.log("DOM updated")
    },
    onbeforeremove: function(vnode, done) {
        console.log("exit animation can start")
        done()
    },
    onremove: function(vnode) {
        console.log("removing DOM element")
    },
    onbeforeupdate: function(vnode, old) {
        return true
    },
    view: function(vnode) {
        return "hello"
    }
}

Options:

Once a Crazy Taxi component has been compiled, you can pass options into the returned function:

Options:

exclude_framework: Bool Removes the the compiled Mithril framework from the output string. By default Crazy Taxi will include Mithril in every output string generation. If you have more than one component being sent from the server at a time, you can set exclude_framework: true for every component after the first and just let them piggy back of the first components framework instance.

Examples:

Basic:

/component.js:

var c = require('crazy-taxi')

module.exports = {
   
   // This is the view. It renders hyperscript.
    view: function(vnode) {
        return c('h1', vnode.attrs.text)
    }
}

/server.js

const express 		= require('express')
const c 			= require('crazy-taxi')

const app = express()

const component = c.compile('./component.js')

app.get('*', (req, res) => {

	res.send(component({text: 'Hello World!'}))

})


app.listen(3000)

Easy:

/component.js:

var c = require('crazy-taxi')

const Component = {

    oninit: function(vnode) { 
    
        vnode.state.name = vnode.attrs.name

        vnode.state.randomName = function(e){
            var name_array = [
                'Benedict Kapusniak',
                'Leota Wetsel',
                'Bryon Caselli',
                'Karin Nersesian',
                'Monroe Soprych',
                'Alfonso Noerenberg',
            ]
            
            vnode.state.name = name_array[Math.floor(Math.random() * name_array.length)]
        }

   
        vnode.state.async_response = c.request({
            method: "GET",
            url: "https://jsonplaceholder.typicode.com/posts",
            initialValue: []
        })

    },
   
    view: function(vnode) {
        return c('div', [

        	c('h1', ['Hello ' + vnode.state.name]),

            c('button', {onclick: vnode.state.randomName}, 'Say Hi!'),

            c('pre', JSON.stringify(vnode.state.async_response().slice(0, 4), null, 4))
        ])
    }
}

module.exports = Component

/server.js

const express 		= require('express')
const ct 			= require('crazy-taxi')
const random_name 	= require('node-random-name')


const app = express()


const asyncFunction = () => new Promise((resolve, reject) => {
	
	setTimeout(() => {

		resolve(random_name())

	}, 100)
})



const component = ct.compile('./component.js')

app.get('*', (req, res) => {

	asyncFunction().then(name => {

		res.send(`

			${component({name: name})}

			${component({name: 'Joe Schmoe'}, {exclude_framework: true})}
		`)
	})

})


app.listen(3000)

Universal Javascript: Finally Easy

Keywords

FAQs

What is crazy-taxi?

Is crazy-taxi well maintained?

Package last updated on 23 Mar 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install