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

And improve bundle docs

.gitignore

@@ -15,4 +15,5 @@ node_modules
 # temp benchmark data
 /website/data.json
 /website/recent.json
+/website/*.bundle.js
 /js/gen

cli/flags.rs

@@ -186,11 +186,14 @@ compiler.",
         .setting(AppSettings::DisableVersion)
         .about("Bundle module and dependencies into single file")
         .long_about(
-          "Fetch, compile, and output to a single file a module and its dependencies.
+          "Output a single JavaScript file with all dependencies
-"
+
+Example:
+
+  deno bundle https://deno.land/std/examples/colors.ts"
         )
           .arg(Arg::with_name("source_file").takes_value(true).required(true))
-          .arg(Arg::with_name("out_file").takes_value(true).required(true)),
+          .arg(Arg::with_name("out_file").takes_value(true).required(false)),
     ).subcommand(
       SubCommand::with_name("fetch")
         .setting(AppSettings::DisableVersion)
@@ -498,6 +501,29 @@ pub enum DenoSubcommand {
   Xeval,
 }
 
+fn get_default_bundle_filename(source_file: &str) -> String {
+  use crate::worker::root_specifier_to_url;
+  let url = root_specifier_to_url(source_file).unwrap();
+  let path_segments = url.path_segments().unwrap();
+  let last = path_segments.last().unwrap();
+  String::from(last.trim_end_matches(".ts").trim_end_matches(".js"))
+    + ".bundle.js"
+}
+
+#[test]
+fn test_get_default_bundle_filename() {
+  assert_eq!(get_default_bundle_filename("blah.ts"), "blah.bundle.js");
+  assert_eq!(
+    get_default_bundle_filename("http://example.com/blah.ts"),
+    "blah.bundle.js"
+  );
+  assert_eq!(get_default_bundle_filename("blah.js"), "blah.bundle.js");
+  assert_eq!(
+    get_default_bundle_filename("http://example.com/blah.js"),
+    "blah.bundle.js"
+  );
+}
+
 pub fn flags_from_vec(
   args: Vec<String>,
 ) -> (DenoFlags, DenoSubcommand, Vec<String>) {
@@ -510,7 +536,10 @@ pub fn flags_from_vec(
     ("bundle", Some(bundle_match)) => {
       flags.allow_write = true;
       let source_file: &str = bundle_match.value_of("source_file").unwrap();
-      let out_file: &str = bundle_match.value_of("out_file").unwrap();
+      let out_file = bundle_match
+        .value_of("out_file")
+        .map(String::from)
+        .unwrap_or_else(|| get_default_bundle_filename(source_file));
       argv.extend(vec![source_file.to_string(), out_file.to_string()]);
       DenoSubcommand::Bundle
     }

js/unit_tests.ts

@@ -50,7 +50,7 @@ import "./performance_test.ts";
 import "./permissions_test.ts";
 import "./version_test.ts";
 
-import "../website/app_test.js";
+import "../website/app_test.ts";
 
 import { runIfMain } from "./deps/https/deno.land/std/testing/mod.ts";
 

tools/build_website.py

@@ -0,0 +1,8 @@
+#!/usr/bin/env python
+# Copyright 2018-2019 the Deno authors. All rights reserved. MIT license.
+import os
+from util import run, root_path, build_path
+
+os.chdir(os.path.join(root_path, "website"))
+deno_exe = os.path.join(build_path(), "deno")
+run([deno_exe, "bundle", "app.ts", "app.bundle.js"])

tools/upload_website.py

@@ -1,14 +1,18 @@
 #!/usr/bin/env python
 # Copyright 2018-2019 the Deno authors. All rights reserved. MIT license.
 import os
+import sys
 import tempfile
-from util import run, root_path
+from util import run, root_path, build_path
 
 # Probably run tools/docs.py first.
 # AWS CLI must be installed separately.
 
 os.chdir(os.path.join(root_path, "website"))
 
+deno_exe = os.path.join(build_path(), "deno")
+run([sys.executable, "../tools/build_website.py"])
+
 # Invalidate the cache.
 run([
     "aws", "cloudfront", "create-invalidation", "--distribution-id",

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;
+}

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);

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">
+    <!-- Run "deno bundle app.ts" to generate app.bundle.js -->
-      import { drawCharts } from "./app.js";
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
-      window.chartWidth = 800;
+    <script src="app.bundle.js"></script>
-      const overlay = document.getElementById("spinner-overlay");
+    <script>
-
+    requirejs(['app'], (app) => app.main());
-      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;
     </script>
   </body>
 </html>

website/manual.md

@@ -591,30 +591,9 @@ if (import.meta.main) {
 
 ### Flags
 
-```shellsession
+Use `deno help` to see the help text.
-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
 
+```
 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).