npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fluxex

v0.7.13

Published

An extended Flux implement to build isomorphic javascript React app.

Downloads

295

Readme

FluxEx

An extended Flux implementation to build isomorphic javascript React app.

npm version npm download Dependency Status devDependency Status Build Status Test Coverage Code Climate License

npm

Features

All in one Starter

Everything in React

Minimal context APIs

To understand Flux, you only need to learn these APIs: this.executeAction(), this.getStore(), this.dispatch() !

  • this.executeAction() or this.getStore(name) in components.
  • this.dispatch() or this.executeAction() or this.getStore(name) in actions.
  • this.emitChange() or this._get() or this._set() in stores.
  • [CORE] Super lightweight, less than 250 lines of code.
  • [CORE] Context based flux system.
  • [CORE] React Server side rendering + client mount.
  • [CORE] HTML as top level react component, no need container.
  • [EXTRA] express middleware to serve the fluxex application.
  • [EXTRA] full integrated gulp task for development.
  • [EXTRA] pjax support.
  • [EXTRA] rpc and api call support.

See the FluxEx Magic

  • Check example projects you can see how fluxex do server side rendering + context deliver + Full HTML react rendering!
  • No more index.html. Start with npm:express and your Html.jsx!
  • No more AJAX, all http request by npm:request!

Start from Scratch

Read Start from Scratch to know how to create a fluxex application!

Quick Start

Prepare your project

npm init
npm install fluxex

Use the Starter template

node_modules/.bin/fluxex_starter

Start the Server

node_modules/.bin/gulp develop
  • Connect to http://localhost:3001/search?q=pizza
  • You can start your development now, gulp handled everything (jshint, browserify, nodemon, restart, browser-sync).
  • Put your actions, stores and components into correspond directories.
  • Edit components/Html.jsx to include your React components.
  • Edit actions/routing.js to add routing.
  • Edit fluxexapp.js to add your store.

Difference with Flux

FluxEx is context based flux implemention. Server side react rendering can be done easy when the flux is scoped under a request based context. Store and dispatcher are singletons in Facebook flux, but in fluxex they are not.

var myApp = require('fluxex').createApp({
    product: require('./stores/product')
}, process.cwd() + '/components/Html.jsx');
// inside a component, requires Fluxex.mixin
...
onStoreChange: function () {
    return this.getStore('myStore').getSomething();
},
handleClick: function () {
    this.executeAction(myAction);
}
// myAction
var myAction = function (payload) {
    ... do your tasks ....
    return this.dispatch('UPDATE_SOMETHING', ....); // this returns a promise
}
var myStore = {
    // the dispatch will happened after these stores be dispatched
    waitFor: {
        UPDATE_SOMETHING: ['oneStore', 'anotherStore']
    },

    // handle this.dispatch('UPDATE_SOMETHING', ....)
    handle_UPDATE_SOMETHING: function (payload) {
        this._set('data', payload); // There are ._get() and ._set() in all stores
        this.emitChange();
    }
}

Notes for IE8 support

  • NOTE React v15+ stop supporting IE8
  • You should add require('fluxex/extra/polyfill-ie8'); in your fluxexapp.js to polyfill EventListener methods and XMLHttpRequest consts for IE8.
  • catch is reserved keyword in IE8, you need to replace somePromise.catch(...) with somePromise['catch'](...)
  • for (... in ...) will loop beyond properties in IE8, you need to replace for (I in myArray) with myArray.forEach(function (V, I) { ...}

IE8 Unsupported features

  • window.history.pushState
  • set innerHTML of script or title node
  • compare prototype.constructor with another function
  • console and console.log when developer tool not opened