tiny-lr v1

[mklabs]

Last published version is 8 months old, and tiny-lr didn't really changed since its first implementation.

I'm thinking about a bunch of ideas and features, while keeping it tiny and focused. It should stay small (maybe try to make it even smaller) and suitable to use as a library.

• ES6 rewrite
  • update src and tests
• CLI - tinylr-cli
  • Would expose a command (currently in https://github.com/mklabs/make-livereload) to spawn a dev server with micro-list and tiny-lr.
  • Since its separate from tiny-lr lib, we could introduce glob watch etc. probably using gaze.
  • If no glob patterns, just default to **/*.{html,css}. Handle .gitignore, ignore node_modules by default.
  • single js entry point: try to build the require tree with module-deps.
  • A flag to allow additional commands to run on file change, like -c 'npm test' -c 'gulp lint'
• Dashboard
  • Would be a separate package to install along tiny-lr. If installed, would change the default http://locahost:<lrport> default JSON response.
  • A simple dashboard listing connected devices
  • Maybe some way to configure tiny-lr options
• Plugins
  • A "tiny-lr" field in package.json would allow adding plugins / middlewares to tiny-lr. A bit like browserify transforms.
• Client
  • Fork livereload-js, port it to es6 / babel
  • web socket polyfill. I'd like to be able to use livereload for browsers that don't natively support web sockets. Instead of switching to socket.io which is a bit heavy on the dependency tree and install time.
  • Hot reload for JS
• livereactload
  • Implement hot reloading and integrate into https://github.com/milankinen/livereactload
  • maybe a separate plugin
  • would automatically watch js / css that have been requested from a client (server sees a request with *.{js,css}).
• Options
  • autoinject - livereactload kinda does this automatically. this is a feature that would simplify the process of adding the client side livereload script and allow more flexibility in how the connection is handled (as the default livereload dbrowser extension doesn't allow you to change the port and hostname)
  • ...

---

cc @shama @elwayman02 What do you guys think ? Worth the effort ? Any other ideas or features you'd like to see implemented ?

[shama]

👍 The dashboard is a great idea. Just let me know if I can help! Thanks!

[mklabs]

Hey @shama, glad you like the dashboard idea, I was aiming to use bel and yoyo to build it :p Actually, your help would be invaluable.

I started working on it yesterday and did most of the work to refresh the code base into es6, reviewed the build process and tests, put eslint with standard config, etc. It's up on the dev branch if you'd like to take a look.

I also just started the CLI, which spawns the server for now.

[elwayman02]

This seems like a great list so far! As I noted on the other issue, my OSS time is limited for a few months, but I'm happy to help review PRs for sanity checks in the meantime.

[mklabs]

@elwayman02 No worries. I'm more than happy with just feedbacks. Plus, it is probably a long term effort, plenty of times to contribute.

[mklabs]

cc @hemanth

[hemanth]

@mklabs What's the plan for the Dashboard? (You have a specific design in your mind?)

[mklabs]

Yep, I can try to photoshop a mockup quickly.

But we can start with no design at all, or just go with getmdl.io I really like their fwk

[mklabs]

we could use https://github.com/GoogleChrome/big-rig#big-rig app as a starting point (https://getmdl.io/templates/dashboard/index.html)

also the hot stuff I've seen recently on the chrome remote protocol made me think about some interresting livereload options for chrome.

[hemanth]

So we would need this to be the dashboard or /dashboard makes more sense?

[mklabs]

I think / is best, but if its configurable it would be even better.

[mklabs]

The main tech issue with dashboard is getting informations about tiny lr state and asking for a web socket connection.

Will need major rewrite to both client / server side code. And we'd need to init the livereload js fork.

[mklabs]

or be lazy :p https://github.com/joewalnes/websocketd

[hemanth]

I would like the rewrite ;) [If the todo part of dash board becomes more granular, I can be bit lazy ;)]

[mklabs]

We might try to implement something similar than livereactload. I know it doesn't need to add a script tag to the page, and use browserify / babel transforms and plugins to establish a simple WS connection.

[mklabs]

mklabs/watchd@8540668

Could use module-deps and something similar for CSS to build require tree, automatically watch with gaze, on code change trigger a watchify change, then trigger POST request to tiny-lr and dashboard.