build: create script for building docs-content (#20198)

Creates a script that builds the docs-content. We also use
that script in the our CI setup to reduce duplication.

The script will not pack the package by default, as that is
up to the consumer of the script. It's totally fine just
adding a package directory to a project (similar to a tarball).

(cherry picked from commit 53c9441)

Author: devversion

.circleci/config.yml

@@ -440,7 +440,7 @@ jobs:
       # The components examples package is not a release package, but we publish it
       # as part of this job to the docs-content repository. It's not contained in the
       # attached release output, so we need to build it here.
-      - run: bazel build src/components-examples:npm_package --config=snapshot-build
+      - run: yarn build-docs-content
 
       # Ensures that we do not push the snapshot artifacts upstream until all previous
       # snapshot build jobs have completed. This helps avoiding conflicts when multiple

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "postinstall": "node tools/postinstall/apply-patches.js && ngcc --properties module main --create-ivy-entry-points && node tools/postinstall/update-ngcc-main-fields.js",
     "build": "node ./scripts/build-packages-dist.js",
+    "build-docs-content": "node ./scripts/build-docs-content.js",
     "dev-app": "ibazel run //src/dev-app:devserver",
     "test": "node ./scripts/run-component-tests.js",
     "test-local": "yarn -s test --local",

scripts/build-docs-content.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+/**
+ * Script that builds the docs content NPM package and moves it into an conveniently
+ * accessible distribution directory (the project `dist/` directory).
+ */
+
+const {join} = require('path');
+const {chmod, cd, cp, mkdir, rm, set, exec} = require('shelljs');
+
+/** Path to the project directory. */
+const projectDir = join(__dirname, '../');
+
+/** Path to the distribution directory. */
+const distDir = join(projectDir, 'dist/');
+
+/**
+ * Path to the directory where the docs-content package is copied to. Note: When
+ * changing the path, also change the path in the docs-content deploy script.
+ */
+const outputDir = join(distDir, 'docs-content-pkg');
+
+/** Command that runs Bazel. */
+const bazelCmd = process.env.BAZEL_COMMAND || `yarn -s bazel`;
+
+// ShellJS should exit if a command fails.
+set('-e');
+
+// Go to project directory.
+cd(projectDir);
+
+/** Path to the bazel bin output directory. */
+const bazelBinPath = exec(`${bazelCmd} info bazel-bin`).stdout.trim();
+
+/** Path where the NPM package is built into by Bazel. */
+const bazelBinOutDir = join(bazelBinPath, 'src/components-examples/npm_package');
+
+// Build the docs-content package with the snapshot-build mode. That will help
+// determining which commit is associated with the built docs-content.
+exec(`${bazelCmd} build src/components-examples:npm_package --config=snapshot-build`);
+
+// Clean the output directory to ensure that the docs-content package
+// will not contain outdated files from previous builds.
+rm('-rf', outputDir);
+mkdir('-p', distDir);
+
+// Copy the package output into the dist path. Also update the permissions
+// as Bazel by default marks files in the bazel-out as readonly.
+cp('-R', bazelBinOutDir, outputDir);
+chmod('-R', 'u+w', outputDir);
+
+console.info(`Built docs-content into: ${outputDir}`);

scripts/deploy/publish-docs-content.sh

@@ -23,8 +23,9 @@ docsDistPath="${projectPath}/dist/docs"
 # Path to the cloned docs-content repository.
 docsContentPath="${projectPath}/tmp/material2-docs-content"
 
-# Path to the release output of the Bazel "@angular/components-examples" NPM package.
-examplesPackagePath="$(bazel info bazel-bin)/src/components-examples/npm_package"
+# Path to the build output of the Bazel "@angular/components-examples" NPM package.
+# Note: When changing this, also change the path in `scripts/build-docs-content.js`.
+examplesPackagePath="${projectPath}/dist/docs-content-pkg/"
 
 # Git clone URL for the material2-docs-content repository.
 docsContentRepoUrl="https://github.com/angular/material2-docs-content"