
=encoding utf8

=head1 NAME

Mojolicious::Plugin::AssetPack::Manual::Reloader - Enable automatic reloading of assets

=head1 DESCRIPTION

It is possible to reload assets in the browser, when they are changed on disk.

This feature is EXPERIMENTAL, and should only be used while developing!

=head2 Example application

  use Mojolicious::Lite;

  # need to specify to AssetPack that we want to enable "reloader"
  plugin AssetPack => {reloader => {}};

  # define our own assets, define some routes and start the app
  app->asset("app.css" => "/css/app.css");
  get "/" => "index";
  app->start;

  __DATA__
  @@ css/app.css
  body { background: #eee; }
  @@ index.html.ep
  <!DOCTYPE html>
  <html>
    <head>
      <title>Reloader demo</title>
      %= asset "app.css"
      %# Reloader is only available in development mode
      %= asset "reloader.js" if app->mode eq "development"
    </head>
    <body>
      Reloader demo. Try to change css/app.css and see this page auto-update.
    </body>
  </html>

=head2 Running the application

To make this work, we need to start L<morbo|Mojo::Server::Morbo> and manually
make it watch our files:

  $ morbo -w morbo examples/reloader.pl -w lib -w templates -w public/css

=head2 How does it work?

C<reloader.js> contains a JavaScript which connects to a WebSocket in our
server. Every time the WebSocket connection is broken the JavaScript
will trigger a refresh.

There are two different refresh strategies available: "head" and "document".

  plugin AssetPack => {
    reloader => {strategy => "head"}
  };

Setting the C<strategy> to "head" will only replace the head-tag in your
document, while the default ("document") will refresh the whole document.

=head1 AUTHOR

Jan Henning Thorsen - C<jhthorsen@cpan.org>

=cut
