• Stars
    star
    169
  • Rank 224,453 (Top 5 %)
  • Language
    JavaScript
  • License
    Do What The F*ck ...
  • Created over 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿš€ Work Fast Work Wright

๐Ÿš€ Wright

Hot Module Reloading: at the Virtual Machine level

  • Compatible with any framework (or no framework at all)
  • Patches your JS, CSS and Static Assets on change without losing app state
  • Uses the Chrome Debugger Protocol to replace the source files in the VM
  • Convenient CLI/JS API for lightweight build systems / npm scripts
  • Fallback to regular refresh in all other browsers

Quick start

Wright was built to be able to plugin to various developer setups, and due to that it will have to be set up in many different ways. The quickest way to start is to open a terminal, cd to your project directory.

Then start wright by pointing either to your main .html entry point

wright index.html

or a url if you already have a dev server.

wright http://localhost:3000

From there on you can add extra options to benefit from wrights complete functionality.

Framework Support

Wright is framework agnostic because the code patching happens at the VM level.

Wright has been tested with many frameworks, and there are plenty of examples to help get you started.

Tested successfully with:

And should also work awesomely with candylize, fragmentor, pistontulastic or anything else you can throw at it ๐Ÿ‘

Currently works with Chrome, tested on OSX & Windows 10.

Wright automatically watches any resource (js, css, image, font) that is loaded in the browser, and hot reloads it when it changes.

Getting started

Wright can start a server for you using a specified index.html file or a boilerplate html where your js & css will be injected into.

It can also take a url to an existing server and inject js & css in to that.

CLI API

$ npm install -g wright

Using wright as a cli makes it easy to get started right away or to set up your project with npm scripts.

Options

main              Specifies the entry point of your app. Point to a .html
                  file to start a server serving that at all directory paths.
                  If you already have you own server running specifiy the
                  full url like http://localhost:5000

Standard Options:

-r,  --run        Activates Hot module reloading. This will inject any changed
                  javascript files, and then run the function if supplied.
                  If this is not specified, changing javascript
                  files will cause a full refresh.

-s,  --serve      Specify which local directory that is being served.
                  Defaults to folder of main file or the current directory.

-w,  --watch      Any folder, file or file type to watch that should cause a
                  refresh of the browser. Use commas to add more.

     --js         

     --css

Example

$ wright dist/index.html -r "m.redraw"

Javascript API

Using wright with javascript is great if you have some build steps or compilation that needs to happen before hot reloading js or css. It also allows you to avoid touching the file system, thereby getting a quicker time to screen for your js & css changes.

$ npm install -D wright

Wright exports a function which takes the options used for launching.

const wright = require('wright')

wright({
  // Main should specify the entry point of your app.
  //   .html   (eg. index.html)
  //   url     (eg. http://localhost:5000)
  //   defaults to using a boilerplate html file.
  main    : 'src/index.html',

  // Specify which directory to serve. This is the directory
  // where wright will watch the files loaded in the browser.
  // Defaults to root of main html file or CWD.
  serve   : String,       // Path to directory to serve
                          // Defaults to root of main
                          // html file or CWD.

  // Activates Hot module reloading. This will inject any
  // changed javascript files, and then run the global function
  // with the changed path as argument { path: 'file.js' }.
  run     : String,       // Global function to call on change

  // The JS property dynamically injects scripts without
  // touching the file system. You can add your build scripts
  // here to do their thing when your source changes.
  // Remember you just need to target chrome, so any build
  // steps including ES6>ES5 transpiling or minification is
  // unnecessary overhead.
  js      : {
    compile : Function,   // A function that returns a Promise
                          // resolving to the source code, or a
                          // function with a callback argument called
                          // in node style callback(err, code).
                          // * Required

    path    : String,     // Path to use as script src
                          // Defaults to wrightinjected.js

    watch   : String,     // Glob pattern used to watch files
                          // that should trigger compilation.
                          // Defaults to common js extensions
                          // '**/*.{js,ls,purs,ts,cljs,coffee,litcoffee,jsx}'
  },

  // The css property is also very useful to build and inject
  // css directly without touching the file system.
  css     : {
    compile : Function,   // A function that returns a Promise
                          // resolving to the source code, or a
                          // function with a callback argument called
                          // in node style callback(err, code).
                          // * Required

    path    : String,     // Path to use as script src
                          // Defaults to wrightinjected.js

    watch   : String,     // Glob pattern used to watch files
                          // that should trigger compilation.
                          // Defaults to common js extensions
                          // '**/*.{css,styl,less,sass}'
  },

  // Execute can be used to start another running process.
  // This can be a build command with watch capabilites like
  // `rollup -c --watch` or backend server api the app needs
  // to talk to.
  execute : String,        // A single or multiple commands

  // Watch is only to be used in case you want a quick way to force
  // a full browser refresh when some files change. This might be
  // useful in the case of a php server serving static html that
  // you want to see on file changes
  watch   : String        // Glob pattern
})

Advanced

The cli or options object also takes the following more advanced options:

port (default 3000) The port to serve from - Wright will use this as a starting point when probing for available ports.

debug (default false) Set to true to receive debugging info in the console. If set to 2 output from chrome will also be shown.

fps (default false) Activate the chrome fps gui widget

jail (default true) This will jail variables in your script to stop chrome from dereferencing them while doing Hot module reloading. Defaults to true.

More Repositories

1

postgres

Postgres.js - The Fastest full featured PostgreSQL client for Node.js and Deno
JavaScript
4,650
star
2

flems

A single file web playground and sandbox
JavaScript
403
star
3

pws

๐Ÿค Persistent Web Sockets
JavaScript
91
star
4

bss

๐ŸŽจ Better Style Sheets
JavaScript
82
star
5

prexit

A graceful way to shutdown / handle process exit
JavaScript
75
star
6

HashQL

JavaScript
73
star
7

postgres-benchmarks

A set of benchmarks focusing on the performance of Postgres client libraries for Node.js
JavaScript
60
star
8

busylight

node library for busylight
JavaScript
49
star
9

flems.io

Flems.io is a web playground. Ideal for prototyping & sharing live front-end examples.
33
star
10

ey

Ey is an ergonomic and fast server+router, built on uWebSockets.
JavaScript
27
star
11

postgres-shift

A simple forwards only migration solution for postgres.js
JavaScript
27
star
12

rollup-plugin-svgo

โœ‚๏ธ A rollup plugin to import svg files processed with svgo
JavaScript
22
star
13

env-install

Use environment variables in npm dependencies paths
JavaScript
16
star
14

downit

Resumeable downloader for node
JavaScript
13
star
15

HashQL-todos-sample

JavaScript
13
star
16

datie

Small template string based date formatter for the browser and Node.js.
JavaScript
13
star
17

rollup-plugin-modify

Modify rollup output with find / replace dynamically
JavaScript
12
star
18

mpv

mpv player json ipc wrapper
JavaScript
11
star
19

statee

Mutually exclusive properties state object
JavaScript
10
star
20

ubre

A Javascript library for pub/sub and req/res over any text message transport
JavaScript
10
star
21

headset

A node library for headsets
JavaScript
9
star
22

sign3

Create S3 presigned get and put urls
JavaScript
8
star
23

fantestic

Fantastic testing
JavaScript
7
star
24

ustatic

A static file serve handler for uWebSockets.js
JavaScript
6
star
25

tarts

Create tarballs in node or the browser
JavaScript
5
star
26

prut

Your new best friend when developing, and probably ONLY for development
JavaScript
5
star
27

stenum

Like enums where each one can contain a value
JavaScript
5
star
28

recur

JavaScript
4
star
29

ios-emojis

All of the emojis from iOS with categories
3
star
30

pg-shift

A simple forwards only migration solution for postgres
JavaScript
3
star
31

plog

`p` - A small global logging utility for faster debugging
JavaScript
2
star
32

primus-requests

JavaScript
1
star
33

deep-sealer

Takes an object and deeply seals it
JavaScript
1
star
34

postgres-deno-benchmarks

JavaScript
1
star
35

screendump

Cross Platform screenshots
C++
1
star
36

deep-freeze-copy

Takes an object and returns a deeply frozen copy
JavaScript
1
star