Giter Club home page Giter Club logo

chooify's Introduction

chooify Build Status js-standard-style

WIP - Browserify transform to process .choo files as isolated, stateless choo components

TODO

  • require .choo files.
    • Parse view.
      • Wrap view function to bind local data to this.
      • Allow to require packages.
    • Parse and export model.
      • Ignore state.
      • Remove namespaces.
      • Read local data and pass it to view.
      • Bind local data to this in effects.
      • Bind local data to this in reducers.
      • Bind local data to this in subscriptions.
    • Allow to pass local data when required.
  • Create init hook.
    • Wrap initial state.
    • Re-render when there are local changes.
  • Make a real life example.

Installation

npm install --save chooify

Usage

Run it as any Browserify transform

CLI

$ browserify -e index.js -o bundle.js -t chooify

Node

var fs = require("fs")
var browserify = require('browserify')
var chooify = require('chooify')

browserify('./main.js')
  .transform(chooify)
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"))

How it works

The above transform allows you to write choo stateless components like this

// my-component.choo -> yep, .choo files

/* choo-view */

<main onload=${(e) => send('toggle')}>
  <h1 class="${this.active ? 'active' : ''}">${state.title}</h1>
</main>

/* choo-model */
{
  local: {
    active: false
  },
  effects: {
    toggle: (data, state, send, done) => {
      this.active = !this.active
    }
  }
}
// main.js
const choo = require('choo')
const init = require('chooify/init')
const state = require('./state')
const mainComponent = require('./components/main.choo')({ active: true })

const app = choo()
init(app, state)

app.model(mainComponent.model)

app.router(route => [
  route('/', mainComponent.view)
])

Explanation

Tha main idea is to have components that manage local data without polluting the global state, and that are completly reusable. To do this, I created the .choo files, which is a javascript file with two sections, the view and the model, which are also exported, when required, as an object with two properties, view and model. When required, the choo components receive an object as input, and return an object with the view and model, for choo app. The input object, is the local data for that component.

The model section

Starts whit a comment like this /* choo-model */ and ends with the end of the file or the start of the view section. It must contain an object definition, which is a choo model, with some litle differences.

  • No namespace support.
  • state property is ignored.
  • local property added. The component local data, not binded to the global app state, can be initialized here and/or by passing it when required. IF initialized in both places, like in the example, the input data takes preference. Anything passed that is not defined in the model part will be ignored.
  • Local data binded to this in effects, reducers and subscriptions

The view section

Starts whit a comment like this /* choo-view */ and ends with the end of the file or the start of the model section. It must contain a string to be parsed by bel. You can access to the state, prev, send arguments, as any other choo view, and to any data defined in the component local property of the model, as the active local data in the example.

Considerations

Components ignore the state property of choo model, so to initialize a global state, this module also expose an init method that implement the wrapInitialState hook, so your global state is in a single place and not splitted in different models. There is no required section for components. You can have a choo file with no model section or without view section, also you could use a component view outside of the router inside another component. You can even pass a full component as local data of another component (maybe we could have an extend property in the model section?). Effects and reducers are still global, to make them local, we must define a way of communication between components.

License

MIT

Crafted with <3 by Yerko Palma.


This package was initially generated with yeoman and the p generator.

chooify's People

Contributors

yerkopalma avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

chooify's Issues

Make 'local' changes reactives

  • Make a choo plugin to catch hooks
  • Catch local changes, maybe with a hook or something (onAction)
  • Render with nanoraf or a web worker the changes

TODO

Things to be implemented

  • require .choo files.
    • Read view property from required object.
    • Read model property from required object.
  • Ignore namespace from model.
  • Ignore state declaration from component models.
  • Bind the local property to the this scope of the component (in model).
  • Bind the local property to the global this scope in views.
  • Pass local data to components when required.
  • Wrap initial state for state initialization

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.