All Projects → yahoo → Routr

yahoo / Routr

Licence: other
A component that provides router related functionalities for both client and server.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Routr

Babel Plugin Prismjs
A babel plugin to use PrismJS with standard bundlers.
Stars: ✭ 114 (-52.7%)
Mutual labels:  webpack, browserify
Public
Repository for wallaby.js questions and issues
Stars: ✭ 662 (+174.69%)
Mutual labels:  webpack, browserify
Modular Css
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Stars: ✭ 234 (-2.9%)
Mutual labels:  webpack, browserify
Uicookbook
A few recipes and build workflows for UI dev
Stars: ✭ 19 (-92.12%)
Mutual labels:  webpack, browserify
Template.js
A javascript template engine, simple, easy & extras, support webpack, rollup, parcel, browserify, fis and gulp
Stars: ✭ 1,201 (+398.34%)
Mutual labels:  webpack, browserify
Conditioner
💆🏻 Frizz free, context-aware, JavaScript modules
Stars: ✭ 1,053 (+336.93%)
Mutual labels:  webpack, browserify
Xhr
A small xhr wrapper
Stars: ✭ 801 (+232.37%)
Mutual labels:  webpack, browserify
Npm Pipeline Rails
Use npm as part of your Rails asset pipeline
Stars: ✭ 93 (-61.41%)
Mutual labels:  webpack, browserify
Minipack
📦 A simplified example of a modern module bundler written in JavaScript
Stars: ✭ 2,625 (+989.21%)
Mutual labels:  webpack, browserify
React Svg Inline
DEPRECATED, I recommend you the tool SVGR
Stars: ✭ 230 (-4.56%)
Mutual labels:  webpack
Fast Sass Loader
High performance sass loader for webpack
Stars: ✭ 229 (-4.98%)
Mutual labels:  webpack
Webpack Chain
A chaining API to generate and simplify the modification of Webpack configurations.
Stars: ✭ 2,821 (+1070.54%)
Mutual labels:  webpack
Wpk
a friendly, intuitive & intelligent CLI for webpack
Stars: ✭ 232 (-3.73%)
Mutual labels:  webpack
Critters
🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
Stars: ✭ 2,894 (+1100.83%)
Mutual labels:  webpack
Webpack Messages
Beautifully format Webpack messages throughout your bundle lifecycle(s)!
Stars: ✭ 238 (-1.24%)
Mutual labels:  webpack
Ol3echarts
🌏 📊 ol3Echarts | a openlayers extension to echarts
Stars: ✭ 229 (-4.98%)
Mutual labels:  webpack
Vue I18n Loader
🌐 vue-i18n loader for custom blocks
Stars: ✭ 229 (-4.98%)
Mutual labels:  webpack
Lit Vue
🔥 Vue SFC goodies directly in JavaScript files.
Stars: ✭ 241 (+0%)
Mutual labels:  webpack
Sha.js
Streamable SHA hashes in pure javascript
Stars: ✭ 237 (-1.66%)
Mutual labels:  browserify
React Ant
(基于pro 2.0)基于Ant Design Pro 的 (多标签页tabs、拖拽、富文本、拾色器、多功能table、多选Select)
Stars: ✭ 231 (-4.15%)
Mutual labels:  webpack

Routr

npm version Build Status Dependency Status devDependency Status Coverage Status

Routr library is an implementation of router-related functionalities that can be used for both server and client. It follows the same routing rules as Express by using the same library. This library does not use callbacks for routes, instead just mapping them to string names that can be used as application state and used within your application later. For instance in Flux, the current route would be held as state in a store.

Usage

For more detailed examples, please check out example applications;

var Router = require('routr');

var router = new Router([
    {
        name: 'view_user',
        path: '/user/:id',
        method: 'get',
        foo: {
            bar: 'baz'
        }
    },
    {
        name: 'view_user_post',
        path: '/user/:id/post/:post',
        method: 'get'
    }
]);

// match route
var route = router.getRoute('/user/garfield?foo=bar');
if (route) {
    // this will output:
    //   - "view_user" for route.name
    //   - "/user/garfield" for route.url
    //   - {id: "garfield"} for route.params
    //   - {path: "/user/:id", method: "get", foo: { bar: "baz"}} for route.config
    //   - { foo: 'bar' } for route.query
    console.log('[Route found]:', route);
}

// generate path name (does not include query string) from route
// "path" will be "/user/garfield/post/favoriteFood?meal=breakfast"
var path = router.makePath('view_user_post', {id: 'garfield', post: 'favoriteFood'}, { meal: 'breakfast' });

Object.freeze

We use Object.freeze to freeze the router and route objects for non-production environments to ensure the immutability of these objects.

For production environments, it is recommended to use tools like envify along with uglify as part of your build process to strip out the production specific code for performance benefits.

We use if (process.env.NODE_ENV !== 'production') to wrap around Object.freeze(), so that you can use various tools to build the code for different environments:

Build with Webpack

Two main utility plugins:

Example of the webpack configuration:

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin(),
        ...
    ]

Build with Browserify

Similar to webpack, you can also use the following two utils with your favorite build system:

  • use envify to set process.env.NODE_ENV to the desired environment
  • use uglifyjs to remove dead code.

Command-line example:

$ browserify index.js -t [ envify --NODE_ENV production  ] | uglifyjs -c > bundle.js

API

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.

Third-pary open source code used are listed in our package.json file.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].