Serve and livereload plugins (#31)

* Serve and livereload plugins
* Adding examples
* Fix: Changing the acorn module source, esm.sh not exporting default

examples/README.md

@@ -4,15 +4,17 @@ This directory contains a series of self-contained examples that you can use as
 starting points for your app, or as snippets to pull into your existing
 applications:
 
-| Example                  | Description                                                                                        |
-| ------------------------ | -------------------------------------------------------------------------------------------------- |
-| [css](./css)             | A Rollup plugin that bundles imported css.                                                         |
-| [helloDeno](./helloDeno) | A basic example to show Rollup usage within Deno.                                                  |
-| [html](./html)           | A Rollup plugin which creates HTML files to serve Rollup bundles.                                  |
-| [image](./image)         | A Rollup plugin which imports JPG, PNG, GIF, SVG, and WebP files.                                  |
-| [importmap](./importmap) | A Rollup plugin to apply [import map](https://github.com/WICG/import-maps) mappings to ES modules. |
-| [json](./json)           | A Rollup plugin which converts `.json` files to ES6 modules.                                       |
-| [postcss](./postcss)     | A Rollup plugin to apply [PostCSS](https://github.com/postcss/postcss) transforms to styles.       |
-| [svelte](./svelte)       | A Rollup plugin to compile Svelte components.                                                      |
-| [virtual](./virtual)     | A Rollup plugin which loads virtual modules from memory.                                           |
-| [yaml](./yaml)           | A Rollup plugin which converts YAML files to ES6 modules.                                          |
+| Example                    | Description                                                                                        |
+| ---------------------------| -------------------------------------------------------------------------------------------------- |
+| [css](./css)               | A Rollup plugin that bundles imported css.                                                         |
+| [helloDeno](./helloDeno)   | A basic example to show Rollup usage within Deno.                                                  |
+| [html](./html)             | A Rollup plugin which creates HTML files to serve Rollup bundles.                                  |
+| [image](./image)           | A Rollup plugin which imports JPG, PNG, GIF, SVG, and WebP files.                                  |
+| [importmap](./importmap)   | A Rollup plugin to apply [import map](https://github.com/WICG/import-maps) mappings to ES modules. |
+| [json](./json)             | A Rollup plugin which converts `.json` files to ES6 modules.                                       |
+| [livereload](./livereload) | A Rollup plugin which automatically reload your html whe the filesystem changes.                   |
+| [postcss](./postcss)       | A Rollup plugin to apply [PostCSS](https://github.com/postcss/postcss) transforms to styles.       |
+| [serve](./serve)           | A Rollup plugin to run a development server.                                                       |
+| [svelte](./svelte)         | A Rollup plugin to compile Svelte components.                                                      |
+| [virtual](./virtual)       | A Rollup plugin which loads virtual modules from memory.                                           |
+| [yaml](./yaml)             | A Rollup plugin which converts YAML files to ES6 modules.                                          |

examples/livereload/README.md

@@ -0,0 +1,49 @@
+# livereload
+
+This is a basic example to show Rollup usage with the `livereload` plugin.
+
+## Usage
+
+### Bundling
+
+#### Bundle CLI
+
+You can use the Rollup CLI to bundle files.
+
+Install the CLI:
+
+```console
+deno install -f -q --allow-read --allow-write --allow-net --allow-env --allow-run --unstable https://deno.land/x/drollup@2.42.3+0.17.1/rollup.ts
+```
+
+And follow any suggestions to update your `PATH` environment variable.
+
+You can then bundle the files using the `rollup.config.ts` with:
+
+```console
+rollup -c
+```
+
+### Watching
+
+#### Watch CLI
+
+Alternatively you can use the Rollup CLI to watch and rebuild your bundle.
+
+Install the CLI (same as before):
+
+```console
+deno install -f -q --allow-read --allow-write --allow-net --allow-env --allow-run --unstable https://deno.land/x/drollup@2.42.3+0.17.1/rollup.ts
+```
+
+And follow any suggestions to update your `PATH` environment variable.
+
+You can then bundle the files using the `rollup.config.ts` with:
+
+```console
+rollup -c --watch
+```
+
+When using the `--watch` CLI, not only will your bundle be rebuilt when your
+source files change, but Rollup will also reload your `rollup.config.ts` file
+when that changes.

examples/livereload/rollup.config.ts

@@ -0,0 +1,14 @@
+import serve from 'https://deno.land/x/drollup_plugin_serve@1.1.0+0.1.3/mod.ts'
+import live from 'https://deno.land/x/drollup_plugin_livereload@0.1.0/mod.ts'
+
+export default {
+  input: 'src/entry.ts',
+  output: {
+    file: 'src/dest.js',
+    format: 'cjs',
+  },
+  plugins: [
+    serve({ contentBase: 'src', port: Math.round(Math.random() * 10000) + 40000 }),
+    live(['src']),
+  ],
+}

examples/livereload/src/entry.ts

@@ -0,0 +1,3 @@
+window.onload = () =>
+  (document.body.innerHTML +=
+    '<br>Path: ' + window.location.pathname + '<br>Date: ' + Date.now())

examples/livereload/src/index.html

@@ -0,0 +1,4 @@
+<head>
+  <title>test UPDATE</title>
+</head>
+<script src="dest.js"></script>

examples/serve/README.md

@@ -0,0 +1,49 @@
+# serve
+
+This is a basic example to show Rollup usage with the `serve` plugin.
+
+## Usage
+
+### Bundling
+
+#### Bundle CLI
+
+You can use the Rollup CLI to bundle files.
+
+Install the CLI:
+
+```console
+deno install -f -q --allow-read --allow-write --allow-net --allow-env --allow-run --unstable https://deno.land/x/drollup@2.42.3+0.17.1/rollup.ts
+```
+
+And follow any suggestions to update your `PATH` environment variable.
+
+You can then bundle the files using the `rollup.config.ts` with:
+
+```console
+rollup -c
+```
+
+### Watching
+
+#### Watch CLI
+
+Alternatively you can use the Rollup CLI to watch and rebuild your bundle.
+
+Install the CLI (same as before):
+
+```console
+deno install -f -q --allow-read --allow-write --allow-net --allow-env --allow-run --unstable https://deno.land/x/drollup@2.42.3+0.17.1/rollup.ts
+```
+
+And follow any suggestions to update your `PATH` environment variable.
+
+You can then bundle the files using the `rollup.config.ts` with:
+
+```console
+rollup -c --watch
+```
+
+When using the `--watch` CLI, not only will your bundle be rebuilt when your
+source files change, but Rollup will also reload your `rollup.config.ts` file
+when that changes.

examples/serve/rollup.config.ts

@@ -0,0 +1,19 @@
+import serve from 'https://deno.land/x/drollup_plugin_serve@1.1.0+0.1.3/mod.ts'
+
+export default {
+  input: 'src/entry.ts',
+  output: {
+    file: 'src/dest.js',
+    format: 'cjs',
+  },
+  plugins: [
+    serve({ 
+      contentBase: 'src', 
+      port: Math.round(Math.random() * 10000) + 40000,
+      historyApiFallback: '/index.html'
+    }),
+  ],
+  watch: {
+    include: ["src/**"],
+  }
+}

examples/serve/src/dest.js

@@ -0,0 +1,3 @@
+'use strict';
+
+document.querySelector("#content").innerHTML = `<h1>This is a history fallback enabled website.</h1>\n<p><strong>Reach any endpoint and you will see me.</strong></p>`;

examples/serve/src/entry.ts

@@ -0,0 +1,2 @@
+document.querySelector("#content").innerHTML = `<h1>This is a historyApiFallback enabled website.</h1>
+<p><strong>Reach any endpoint and you will see me.</strong></p>`

examples/serve/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Example</title>
+</head>
+<body>
+  <div id="content"></div>
+</body>
+<script src="dest.js"></script>
+</html>

plugins/README.md

@@ -9,7 +9,12 @@
 | [image](./image)         | A Rollup plugin which imports JPG, PNG, GIF, SVG, and WebP files.                                  |
 | [importmap](./importmap) | A Rollup plugin to apply [import map](https://github.com/WICG/import-maps) mappings to ES modules. |
 | [json](./json)           | A Rollup plugin which converts `.json` files to ES6 modules.                                       |
+| [livereload][2]          | A Rollup plugin which automatically reload your html whe the filesystem changes.                   |
 | [postcss](./postcss)     | A Rollup plugin to apply [PostCSS](https://github.com/postcss/postcss) transforms to styles.       |
+| [serve][1]               | A Rollup plugin to run a development server.                                                       |
 | [svelte](./svelte)       | A Rollup plugin to compile Svelte components.                                                      |
 | [virtual](./virtual)     | A Rollup plugin which loads virtual modules from memory.                                           |
 | [yaml](./yaml)           | A Rollup plugin which converts YAML files to ES6 modules.                                          |
+
+[1]: https://github.com/denyncrawford/deno-rollup-plugin-serve
+[2]: https://github.com/denyncrawford/deno-rollup-plugin-livereload

test/deps.ts

@@ -6,4 +6,4 @@ export { default as listGitHub } from "https://esm.sh/list-github-dir-content@3.
 export { default as magicString } from "https://esm.sh/magic-string@0.25.7";
 export { default as url } from "https://esm.sh/url@0.11.0";
 export { default as sourceMap } from "https://esm.sh/source-map@0.7.3";
-export { default as acorn } from "https://esm.sh/acorn@8.0.4";
+export { default as acorn } from "https://cdn.skypack.dev/acorn@8.0.4";