Updates yargs usage to be ESM-compatible.

Refs #33.

In ESM, we need to do a default import of `yargs` and then call it as a function with arguments passed in.

See: https://yargs.js.org/2020/09/07/yargs-16.html. For some reason I can't get `yargs/helpers` to import, but it's not that important.

tools/binaries/annotation_extractor/annotation_extractor.ts

@@ -1,5 +1,5 @@
 import { promises as fs } from 'fs';
-import * as yargs from 'yargs';
+import yargs from 'yargs';
 import * as path from 'path';
 import { main } from '../../../common/binary';
 import { mdSpacing } from '../../../common/formatters';
@@ -14,7 +14,7 @@ main(async () => {
         'input-dir': inputDir,
         'output-dir': outputDir,
         'output-metadata': outputMetadata,
-    } = yargs
+    } = yargs(process.argv.slice(2))
         .usage(mdSpacing(`
             Extracts annotations from the all HTML files in the given directory.
             Outputs the input HTML files with the annotations removed to the

tools/binaries/css_bundler/css_bundler.ts

@@ -1,14 +1,14 @@
 import { promises as fs } from 'fs';
 import { bundleAsync } from 'lightningcss';
-import * as yargs from 'yargs';
+import yargs from 'yargs';
 import { main } from '../../../common/binary';
 import { mdSpacing } from '../../../common/formatters';
 
 main(async () => {
     const {
         'entry-point': entryPoints = [],
         'output': outputs = [],
-    } = yargs
+    } = yargs(process.argv.slice(2))
         .usage(mdSpacing(`
             Bundles the given CSS files by resolving and inlining \`@import\`
             statements.

tools/binaries/renderer/renderer.ts

@@ -1,6 +1,6 @@
 import { promises as fs } from 'fs';
 import * as path from 'path';
-import * as yargs from 'yargs';
+import yargs from 'yargs';
 import type { MainFn } from '../../../common/binary';
 import { mdSpacing } from '../../../common/formatters';
 import { invoke } from './entry_point';
@@ -34,7 +34,7 @@ export function createRenderer(
             'output-dir': outputDir,
             'inline-style-import': inlineStyleImports = [],
             'inline-style-path': inlineStylePaths = [],
-        } = yargs
+        } = yargs(args)
             .usage(mdSpacing(`
                 Invokes the given entry point which returns \`PrerenderResources\`
                 and writes each resource to the relevant location under
@@ -71,7 +71,7 @@ export function createRenderer(
                     of the \`--inline-style-import\` at the same index.
                 `),
             })
-            .parse(args);
+            .argv;
 
         // Pass through `--inline-style-import` and `--inline-style-path` flags as the
         // inline style map to be looked up by `inlineStyle()` calls.

tools/binaries/resource_injector/resource_injector.ts

@@ -1,6 +1,6 @@
 import { promises as fs } from 'fs';
 import * as path from 'path';
-import * as yargs from 'yargs';
+import yargs from 'yargs';
 import { main } from '../../../common/binary';
 import { mdSpacing } from '../../../common/formatters';
 import { InjectorConfig } from './config';
@@ -13,7 +13,8 @@ main(async () => {
         config: configFile,
         bundles,
         'output-dir': outputDir,
-    } = yargs.usage(mdSpacing(`
+    } = yargs(process.argv.slice(2))
+        .usage(mdSpacing(`
             Injects web resources specified by the config file into all the HTML
             files within the input directory and writes them to the same
             relative paths in the output directory. Non-HTML files in the input

tools/binaries/resource_packager/resource_packager.ts

@@ -1,4 +1,4 @@
-import * as yargs from 'yargs';
+import yargs from 'yargs';
 import { main } from '../../../common/binary';
 import { mdSpacing } from '../../../common/formatters';
 import { pack } from './packager';
@@ -11,7 +11,7 @@ main(async (args) => {
         'file-ref': fileRefs,
         'merge-dir': mergeDirs,
         'dest-dir': destDir,
-    } = yargs
+    } = yargs(process.argv.slice(2))
         .usage(mdSpacing(`
             Packages all the given resources (file references) by moving them to
             their associated URL path relative to the destination directory.

tools/binaries/script_entry_generator/script_entry_generator.ts

@@ -1,6 +1,6 @@
 import { promises as fs } from 'fs';
 import * as path from 'path';
-import * as yargs from 'yargs';
+import yargs from 'yargs';
 import { main } from '../../../common/binary';
 import { mdSpacing } from '../../../common/formatters';
 import { PrerenderMetadata } from '../../../common/models/prerender_metadata';
@@ -12,7 +12,7 @@ main(async () => {
         metadata: metadataFile,
         'output-dir': outputDir,
         root
-    } = yargs
+    } = yargs(process.argv.slice(2))
         .usage(mdSpacing(`
             Generates an entry point for all the scripts in the given metadata
             file. The entry point is a TypeScript source file which