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

unijs

v0.1.6

Published

Renders reactJS apps universal on node.js without defining server fetchings.

Downloads

7

Readme

UniJS

UniJS is a library for rendering ReactJS apps on node.js.

  • Universal: Use the same code base for server- and client-rendering. Also there is no force to use flux.
  • Autofetch Data: Don't worry about data fetching on your server. Just provide a REST-API somewhere and perform AJAX-Requests. UniJS automatically detects which data is neccessary for rendering and fetches it before render.
  • State Sync: Sync's the server rendered state to the client. After rendering the app UniJS takes the state out of all components and responds them with the HTML to the client. There the state gets pushed back to the components as initial state.
  • EcmaScript 6: Build your apps in ES6 style.

Documentation

##Quick Start

git clone https://github.com/unijs/demo.git
cd demo
npm install
npm start

##Usage

###Installation

npm install unijs

###Server

On server-side you need to define your react-router Routes by setting the Router. With the resources attribute array you can add js and css files.

var unijs = require('unijs');
var Router = require('client/js/Routes.js');

app.use(Server.getMiddleware());
// Here express is used. You can also use something similar, that passes (req, res, next) to the returned function on each request.

var Server = unijs.Server();

var myApp = new Server.App('myApp');

myApp.Router = Router;
myApp.resources.push(__dirname+'/bundle.js');

Server.mount('/', myApp);

####Main client render file for bundle

Your React App in the bundle file needs to render to #main div container.

var React = require('react');
var Router = require('react-router');
var routes = require('/path/to/Routes.js');
window.onload = function() {
	Router.run(routes, Router.HistoryLocation, function(Handler) {
		React.render(<Handler/>, document.getElementById('main'));
	});
};

###Client

On client you need to extend each component that has state or is loading data with AJAX.

class Blog extends React.Component{
	// component methods
}

Blog = unijs.extend(Blog);

And load your data with superagent plus unijs-plugin in the componentDidMount method. (componentDidMount gets called while server-rendering when componentWillMount gets called)

class Blog extends React.Component{
	componentDidMount(){
		superagent.get('/getdata')
			.use(unijs.superagentPlugin)
			.end(function(err, res) {
				this.setState(JSON.parse(res.text));
			}.bind(this)
		);
	}
}

Define your initial state as you do it in React ES6:

class Blog extends React.Component{
	constructor(){
		super();
		this.state = {title: '', content: ''};
	}
}

Now put it all together with some ReactJS basics...

import React from 'react';
import superagent from'superagent';
import unijs from 'unijs';

class Blog extends React.Component {
	constructor() {
		super();
		this.state = {title: '', content: ''};
	}
	componentDidMount() {
		superagent.get('/blog/getpost/' + this.props.id)
			.use(unijs.superagentPlugin)
			.end(function(err, res) {
				this.setState(JSON.parse(res.text));
			}.bind(this)
		);
	}
	componentWillReceiveProps(nextProps) {
		if (nextProps.id != this.props.id) {
			this.loadBlogPost(nextProps.id);
		}
	}
	render() {
		return (
			<div>
				<h1>{this.state.title}</h1>
				<div>{this.state.content}</div>
			</div>
		);
	}
}
Blog = unijs.extend(Blog);

export default Blog;

Roadmap

  • [ ] Load component's code just when it is needed. Maybe with webpack or something own.
  • [ ] Improve Transmission Algorithm.

Contribution and Ideas are Welcome! ;-)

Ideally just create a GitHub Issue or may even a PullRequest to discuss.

MIT