feat: default output filename for deno bundle (#2484)

And improve bundle docs

4 files changed, 78 insertions, 50 deletions

diff --git a/website/app.js b/website/app.ts
index 9f16e8e45..dfc299d2b 100644
--- a/website/app.js
+++ b/website/app.ts
@@ -139,7 +139,8 @@ function generate(
   const yAxis = {
     padding: { bottom: 0 },
     min: 0,
-    label: yLabel
+    label: yLabel,
+    tick: null
   };
   if (yTickFormat) {
     yAxis.tick = {
@@ -272,3 +273,27 @@ export async function drawChartsFromBenchmarkData(dataUrl) {
   gen("#thread-count-chart", threadCountColumns, "threads");
   gen("#syscall-count-chart", syscallCountColumns, "syscalls");
 }
+
+export function main(): void {
+  window["chartWidth"] = 800;
+  const overlay = window["document"].getElementById("spinner-overlay");
+
+  function showSpinner() {
+    overlay.style.display = "block";
+  }
+
+  function hideSpinner() {
+    overlay.style.display = "none";
+  }
+
+  function updateCharts() {
+    const u = window.location.hash.match("all") ? "./data.json" : "recent.json";
+
+    showSpinner();
+
+    drawCharts(u).finally(hideSpinner);
+  }
+  updateCharts();
+
+  window["onhashchange"] = updateCharts;
+}
diff --git a/website/app_test.js b/website/app_test.ts
index b6845a0f7..c16487585 100644
--- a/website/app_test.js
+++ b/website/app_test.ts
@@ -1,13 +1,14 @@
 // Copyright 2018-2019 the Deno authors. All rights reserved. MIT license.
 
 import { test, testPerm, assert, assertEquals } from "../js/test_util.ts";
+import { runIfMain } from "../js/deps/https/deno.land/std/testing/mod.ts";
 import {
   createBinarySizeColumns,
   createExecTimeColumns,
   createThreadCountColumns,
   createSyscallCountColumns,
   createSha1List
-} from "./app.js";
+} from "./app.ts";
 
 const regularData = [
   {
@@ -191,3 +192,5 @@ test(function createSha1ListRegularData() {
   const sha1List = createSha1List(regularData);
   assertEquals(sha1List, ["abcdef", "012345"]);
 });
+
+runIfMain(import.meta);
diff --git a/website/benchmarks.html b/website/benchmarks.html
index fa1b140e9..fd68faee2 100644
--- a/website/benchmarks.html
+++ b/website/benchmarks.html
@@ -230,31 +230,11 @@
     <script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
     <script src="https://unpkg.com/c3@0.6.7/c3.min.js"></script>
 
-    <script type="module">
-      import { drawCharts } from "./app.js";
-      window.chartWidth = 800;
-      const overlay = document.getElementById("spinner-overlay");
-
-      function showSpinner() {
-        overlay.style.display = "block";
-      }
-
-      function hideSpinner() {
-        overlay.style.display = "none";
-      }
-
-      function updateCharts() {
-        const u = window.location.hash.match("all")
-          ? "./data.json"
-          : "recent.json";
-
-        showSpinner();
-
-        drawCharts(u).finally(hideSpinner);
-      }
-      updateCharts();
-
-      window.onhashchange = updateCharts;
+    <!-- Run "deno bundle app.ts" to generate app.bundle.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+    <script src="app.bundle.js"></script>
+    <script>
+    requirejs(['app'], (app) => app.main());
     </script>
   </body>
 </html>
diff --git a/website/manual.md b/website/manual.md
index 8b3d37521..1810cdc7a 100644
--- a/website/manual.md
+++ b/website/manual.md
@@ -591,30 +591,9 @@ if (import.meta.main) {
 
 ### Flags
 
-```shellsession
-deno
-A secure runtime for JavaScript and TypeScript built with V8, Rust, and Tokio.
-
-Docs: https://deno.land/manual.html
-Modules: https://github.com/denoland/deno_std
-Bugs: https://github.com/denoland/deno/issues
-
-To run the REPL:
-
-  deno
-
-To execute a sandboxed script:
-
-  deno https://deno.land/welcome.ts
-
-To evaluate code from the command line:
-
-  deno eval "console.log(30933 + 404)"
-
-To get help on the another subcommands (run in this case):
-
-  deno help run
+Use `deno help` to see the help text.
 
+```
 USAGE:
     deno [FLAGS] [OPTIONS] [SUBCOMMAND]
 
@@ -640,6 +619,7 @@ OPTIONS:
 
 SUBCOMMANDS:
     <script>    Script to run
+    bundle      Bundle module and dependnecies into single file
     eval        Eval script
     fetch       Fetch the dependencies
     fmt         Format files
@@ -678,6 +658,46 @@ Particularly useful ones:
 --async-stack-trace
 ```
 
+### Bundling
+
+`deno bundle [URL]` will output a single JavaScript file, using
+[AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition), which
+includes all dependencies of the specified input.
+
+```
+> deno bundle https://deno.land/std/examples/colors.ts
+Bundling "colors.bundle.js"
+Emitting bundle to "colors.bundle.js"
+9.2 kB emitted.
+```
+
+To run then bundle in Deno use
+
+```
+deno https://deno.land/std/bundle/run.ts colors.bundle.js
+```
+
+Bundles can also be loaded in the web browser with the assistance of
+[RequireJS](https://requirejs.org/). Suppose we have a bundle called
+`website.bundle.js`, then the following HTML should be able to load it:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+<script src="website.bundle.js"></script>
+<script>
+  requirejs(["website"], website => website.main());
+</script>
+```
+
+Here we assume there's an exported function `main()` from `website.ts`.
+
+```js
+// website.ts
+export main() {
+  console.log("hello from the web browser");
+}
+```
+
 ## Import maps
 
 Deno supports [import maps](https://github.com/WICG/import-maps).