build(bazel): support ibazel for AIO example playgrounds

Also uses more fine-grained deps to make an ibazel rebuild fast.

aio/README.md

@@ -32,6 +32,7 @@ Here are the most important tasks you might need to use:
 * `yarn create-example` - create a new example directory containing initial source files.
 * `yarn example-playground <exampleName>` - set up a playground to manually test an example combined with its boilerplate files
   - `--local` - link locally build Angular packages as deps
+  - `--watch` - update the playground when sources change
 
 * `yarn example-e2e` - run all e2e tests for examples. Available options:
   - `--local`: run e2e tests against locally built Angular packages.

aio/tools/examples/BUILD.bazel

@@ -93,29 +93,29 @@ js_library(
     ],
 )
 
-EXAMPLES_WITH_BOILERPLATE = ["//aio/content/examples/%s" % example for example in EXAMPLES]
-
 LOCAL_PACKAGE_DEPS = [to_package_label(dep) for dep in AIO_EXAMPLE_PACKAGES]
 
 LOCAL_PACKAGE_ARGS = ["--localPackage=%s#$(rootpath %s)" % (
     dep,
     to_package_label(dep),
 ) for dep in AIO_EXAMPLE_PACKAGES]
 
-nodejs_binary(
-    name = "create-example-playground",
+[nodejs_binary(
+    name = "create-example-playground-%s" % example,
     args = select({
         # Hardcode package names/paths in args
         "//aio:aio_local_deps": LOCAL_PACKAGE_ARGS,
         "//conditions:default": [],
-    }),
+    }) + ["--example=%s" % example],
     data = [
         ":example-sandbox",
         "@aio_example_deps//:node_modules_files",
         "@aio_npm//yargs",
-    ] + EXAMPLES_WITH_BOILERPLATE + select({
+        "//aio/content/examples/%s" % example,
+    ] + select({
         "//aio:aio_local_deps": LOCAL_PACKAGE_DEPS,
         "//conditions:default": [],
     }),
     entry_point = "create-example-playground.mjs",
-)
+    tags = ["manual"],
+) for example in EXAMPLES]

aio/tools/examples/create-example-playground-wrapper.mjs

@@ -2,6 +2,7 @@ import shelljs from 'shelljs';
 import yargs from 'yargs'
 import {hideBin} from 'yargs/helpers';
 import {getNativeBinary as getNativeBazelBinary} from '@bazel/bazelisk';
+import {getNativeBinary as getNativeIBazelBinary} from '@bazel/ibazel';
 
 shelljs.set('-e')
 shelljs.set('-v')
@@ -19,21 +20,21 @@ shelljs.set('-v')
  * 
  * Flags:
  *  --local: use locally built angular packages
+ *  --watch: update playground when source files change
  */
 
 const options = yargs(hideBin(process.argv))
   .command('$0 <example>', 'Set up a playground for <example> in the source tree for manual testing')
   .option('local', {default: false, type: 'boolean'})
+  .option('watch', {default: false, type: 'boolean'})
   .version(false)
   .strict()
   .argv;
 
 const cmd = [
-  getNativeBazelBinary(),
+  options.watch ? getNativeIBazelBinary() : getNativeBazelBinary(),
   'run',
-  '//aio/tools/examples:create-example-playground',
-  '--',
-  `--example=${options.example}`,
+  `//aio/tools/examples:create-example-playground-${options.example}`,
 ];
 
 if (options.local) {

aio/tools/examples/create-example-playground.mjs

@@ -17,12 +17,10 @@ const playgroundRoot = path.join(sourceRoot, 'aio', 'content', 'example-playgrou
  * Create an example playground with shared example deps and optionally linked local
  * angular packages in the source tree under content/examples/example-playground. This
  * script is intended to only be run under bazel as it has the localPackage arguments
- * hardcoded into the binary via starlark.
+ * and example hardcoded into the binary via starlark.
  *
- * Usage: bazel run //aio/tools/examples:create-example-playground -- --example=<example>
+ * Usage: bazel run //aio/tools/examples:create-example-playground-{EXAMPLE}
  *
- * Args:
- *  example: name of the example
  */
 
 async function main(args) {

aio/tools/examples/example-sandbox.mjs

@@ -7,10 +7,15 @@ import os from 'node:os';
 // Construct a sandbox environment for an example, linking in shared example node_modules
 // and optionally linking in locally-built angular packages.
 export async function constructExampleSandbox(examplePath, destPath, nodeModulesPath, localPackages) {
-  fs.rmSync(destPath, {
-    recursive: true,
-    force: true
-  });
+  // If the sandbox folder exists delete the contents but not the folder itself. If cd'ed
+  // into the sandbox then bash will lose the reference and be stuck in a stray deleted folder,
+  // creating a confusing experience. This is relevant for developer experience with ibazel.
+  globbySync(`${destPath}/*`, {onlyFiles: false}).forEach(file => {
+    fs.rmSync(file, {
+      recursive: true,
+      force: true
+    });
+  })
   fs.copySync(examplePath, destPath);
 
   // Remove write protection as the example was copied from bazel output tree