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.

[mklabs]

https://github.com/milankinen/livereactload/tree/master/src/client

[mklabs]

I'll start the dashboard package / repo soon. Will keep you posted @hemanth

[mklabs]

Hi @shama @hemanth @elwayman02 I hope you're all doing well. I started working on the dashboard for the last few days, I just wanted to let you know with a little screenshot :). Right now, this is pretty basic and still very wip

It is able to list connected devices (testing with just browser tabs for now) by using socket.io to add / remove "cards" when client are created or destroyed. I'm still wondering how far the dashboard should go and how we might organise the codebase. Right now, the cli code is within the package but it should definitely go into a separate package (too much added dependencies)

I'm also wondering if we should replace the livereloadjs code with something like livereactload.

[elwayman02]

livereactload seems specifically geared to a single framework.

On Fri, Aug 12, 2016, 3:36 AM Mickael Daniel notifications@github.com
wrote:

Hi @shama https://github.com/shama @hemanth https://github.com/hemanth
@elwayman02 https://github.com/elwayman02 I hope you're all doing well.
I started working on the dashboard for the last few days, I just wanted to
let you know with a little screenshot :). Right now, this is pretty basic
and still very wip

[image: capture]
https://cloud.githubusercontent.com/assets/113832/17619801/0ffb6d0c-6088-11e6-9b55-1126a0b45a5d.PNG

It is able to list connected devices (testing with just browser tabs for
now) by using socket.io to add / remove "cards" when client are created
or destroyed. I'm still wondering how far the dashboard should go and how
we might organise the codebase. Right now, the cli code is within the
package but it should definitely go into a separate package (too much added
dependencies)

I'm also wondering if we should replace the livereloadjs code with
something like livereactload https://github.com/milankinen/livereactload
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#103 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABQ5qnMABTVxHsvZp71QLJNXHZ32zN9Kks5qfEy6gaJpZM4Ipd6s
.

[mklabs]

Hi Jordan,thanks for the feedback. I used it briefly on the past. From my understanding, it is designed for react but can work for any kind of code I guess (at least js). That being said, I got the dashboard running and working with livereloadjs and basic watching with glob and gaze. I assume it is enough for now (even though I really like this idea of hot reloading).

[elwayman02]

Maybe create a separate issue to discuss it and lay out the pros & cons of
switching over?

On Fri, Aug 12, 2016, 9:23 AM Mickael Daniel notifications@github.com
wrote:

Hi Jordan,thanks for the feedback. I used it briefly on the past. From my
understanding, it is designed for react but can work for any kind of code I
guess (at least js). That being said, I got the dashboard running and
working with livereloadjs and basic watching with glob and gaze. I assume
it is enough for now (even though I really like this idea of hot reloading).

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#103 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABQ5qtzsTsnq_c9irNzDJd6MQi5ruy_Gks5qfJ3xgaJpZM4Ipd6s
.

[mklabs]

Yep sure. Done with #107

[hemanth]

Nice start!

Thanks, I am doing well, hoping the same there.

[TehShrike]

I quite like how tiny tiny-lr is - could all these new features show up in other modules, leaving this tiny server here?

[mklabs]

@TehShrike I appreciate your feedback. Don't worry, it will remain the same. Actually all these v1 features have ended with the ES6 rewrite. And the dashboard part have been done in another module.

[smhg]

For future reference: 'Fork livereload-js, port it to es6 / babel' is taking place in the livereload-js repo.

[smhg]

@mklabs @elwayman02 I've published an 3.0.0-alpha.1 release of livereload-js which removes coffeescript. It would be awesome if you could test it with tiny-lr.

[mklabs]

@smhg Awesome. Thanks for letting us know.