diff --git a/examples/README.md b/examples/README.md index b251357..cf9c553 100644 --- a/examples/README.md +++ b/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. | diff --git a/examples/livereload/README.md b/examples/livereload/README.md new file mode 100644 index 0000000..aa9b307 --- /dev/null +++ b/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. diff --git a/examples/livereload/rollup.config.ts b/examples/livereload/rollup.config.ts new file mode 100644 index 0000000..48eb367 --- /dev/null +++ b/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']), + ], +} \ No newline at end of file diff --git a/examples/livereload/src/entry.ts b/examples/livereload/src/entry.ts new file mode 100644 index 0000000..9eb7c01 --- /dev/null +++ b/examples/livereload/src/entry.ts @@ -0,0 +1,3 @@ +window.onload = () => + (document.body.innerHTML += + '
Path: ' + window.location.pathname + '
Date: ' + Date.now()) \ No newline at end of file diff --git a/examples/livereload/src/index.html b/examples/livereload/src/index.html new file mode 100644 index 0000000..c5f2829 --- /dev/null +++ b/examples/livereload/src/index.html @@ -0,0 +1,4 @@ + + test UPDATE + + \ No newline at end of file diff --git a/examples/serve/README.md b/examples/serve/README.md new file mode 100644 index 0000000..16d9f8a --- /dev/null +++ b/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. diff --git a/examples/serve/rollup.config.ts b/examples/serve/rollup.config.ts new file mode 100644 index 0000000..618c5f0 --- /dev/null +++ b/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/**"], + } +} \ No newline at end of file diff --git a/examples/serve/src/dest.js b/examples/serve/src/dest.js new file mode 100644 index 0000000..0e03819 --- /dev/null +++ b/examples/serve/src/dest.js @@ -0,0 +1,3 @@ +'use strict'; + +document.querySelector("#content").innerHTML = `

This is a history fallback enabled website.

\n

Reach any endpoint and you will see me.

`; diff --git a/examples/serve/src/entry.ts b/examples/serve/src/entry.ts new file mode 100644 index 0000000..fbee9fb --- /dev/null +++ b/examples/serve/src/entry.ts @@ -0,0 +1,2 @@ +document.querySelector("#content").innerHTML = `

This is a historyApiFallback enabled website.

+

Reach any endpoint and you will see me.

` \ No newline at end of file diff --git a/examples/serve/src/index.html b/examples/serve/src/index.html new file mode 100644 index 0000000..72a543a --- /dev/null +++ b/examples/serve/src/index.html @@ -0,0 +1,13 @@ + + + + + + + Example + + +
+ + + \ No newline at end of file diff --git a/plugins/README.md b/plugins/README.md index 6e6f39c..35d665b 100644 --- a/plugins/README.md +++ b/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 \ No newline at end of file diff --git a/test/deps.ts b/test/deps.ts index 3e4c2a1..8c0506a 100644 --- a/test/deps.ts +++ b/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";