build: use genrule to generate example module (#17615)

* build: use genrule to generate example module

Since we no longer use NGC for generating the package output
of the examples, we can start using the genrule for the
`ExampleModule` again.

This means that we can fully remove the example module tasks
from gulp. Additionally renames the `material-examples` package
to `components-examples` and removes the `module.ts` workaround
for the examples since we do not need a flat module index file with ngtsc.

* fixup! build: use genrule to generate example module

Make glob less confusing

Author: devversion

.circleci/config.yml

@@ -356,7 +356,7 @@ jobs:
 
       # TODO(devversion): Ideally the "build_release_packages" job should build all packages with
       # Bazel, but for now we mix up the Gulp and bazel setup, so we need to build the package here.
-      - run: bazel build src/material-examples:npm_package --config=release
+      - run: bazel build src/components-examples:npm_package --config=release
 
       - run: ./scripts/circleci/publish-snapshots.sh
 

.github/CODEOWNERS

@@ -121,7 +121,7 @@
 
 # Docs examples & guides
 /guides/**                                         @jelbourn
-/src/material-examples/**                          @jelbourn
+/src/components-examples/**                        @jelbourn
 
 # Accessibility demos
 /src/a11y-demo/**/*                                @jelbourn

.gitignore

@@ -6,10 +6,6 @@
 /deploy
 /bazel-out
 
-# Example module file will be auto-generated.
-# TODO(devversion): re-add the example-module once angular#30259 is fixed.
-# /src/material-examples/example-module.ts
-
 # dependencies
 node_modules
 /bower_components

rollup-globals.bzl

@@ -105,13 +105,13 @@ create_globals(
 # Rollup globals the examples package. Since individual examples are
 # grouped by package and component, the primary entry-point imports
 # from entry-points which should be treated as external imports.
-create_globals("material-examples/cdk", CDK_ENTRYPOINTS)
-create_globals("material-examples/cdk-experimental", CDK_EXPERIMENTAL_ENTRYPOINTS)
+create_globals("components-examples/cdk", CDK_ENTRYPOINTS)
+create_globals("components-examples/cdk-experimental", CDK_EXPERIMENTAL_ENTRYPOINTS)
 create_globals(
-    "material-examples/material",
+    "components-examples/material",
     MATERIAL_ENTRYPOINTS + MATERIAL_TESTING_ENTRYPOINTS,
 )
 create_globals(
-    "material-examples/material-experimental",
+    "components-examples/material-experimental",
     MATERIAL_EXPERIMENTAL_ENTRYPOINTS + MATERIAL_EXPERIMENTAL_TESTING_ENTRYPOINTS,
 )

scripts/deploy/publish-docs-content.sh

@@ -23,8 +23,8 @@ 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/material-examples" NPM package.
-examplesPackagePath="$(bazel info bazel-bin)/src/material-examples/npm_package"
+# Path to the release output of the Bazel "@angular/components-examples" NPM package.
+examplesPackagePath="$(bazel info bazel-bin)/src/components-examples/npm_package"
 
 # Git clone URL for the material2-docs-content repository.
 docsContentRepoUrl="https://github.com/angular/material2-docs-content"

src/components-examples/BUILD.bazel

@@ -0,0 +1,132 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+load("//tools/highlight-files:index.bzl", "highlight_files")
+load("//tools/package-docs-content:index.bzl", "package_docs_content")
+
+EXAMPLE_PACKAGES = [
+    # TODO(devversion): try to have for each entry-point a bazel package so that
+    # we can automate this using the "package.bzl" variables. Currently generated
+    # with "bazel query 'kind("ng_module", //src/components-examples/...:*)' --output="label"
+    "//src/components-examples/material/tree",
+    "//src/components-examples/material/tooltip",
+    "//src/components-examples/material/toolbar",
+    "//src/components-examples/material/tabs",
+    "//src/components-examples/material/table",
+    "//src/components-examples/material/stepper",
+    "//src/components-examples/material/sort",
+    "//src/components-examples/material/snack-bar",
+    "//src/components-examples/material/slider",
+    "//src/components-examples/material/slide-toggle",
+    "//src/components-examples/material/sidenav",
+    "//src/components-examples/material/select",
+    "//src/components-examples/material/radio",
+    "//src/components-examples/material/progress-spinner",
+    "//src/components-examples/material/progress-bar",
+    "//src/components-examples/material/paginator",
+    "//src/components-examples/material/menu",
+    "//src/components-examples/material/list",
+    "//src/components-examples/material/input",
+    "//src/components-examples/material/icon",
+    "//src/components-examples/material/grid-list",
+    "//src/components-examples/material/form-field",
+    "//src/components-examples/material/expansion",
+    "//src/components-examples/material/divider",
+    "//src/components-examples/material/dialog",
+    "//src/components-examples/material/datepicker",
+    "//src/components-examples/material/core",
+    "//src/components-examples/material/chips",
+    "//src/components-examples/material/checkbox",
+    "//src/components-examples/material/card",
+    "//src/components-examples/material/button-toggle",
+    "//src/components-examples/material/button",
+    "//src/components-examples/material/bottom-sheet",
+    "//src/components-examples/material/badge",
+    "//src/components-examples/material/autocomplete",
+    "//src/components-examples/material-experimental/popover-edit",
+    "//src/components-examples/cdk/tree",
+    "//src/components-examples/cdk/text-field",
+    "//src/components-examples/cdk/table",
+    "//src/components-examples/cdk/stepper",
+    "//src/components-examples/cdk/scrolling",
+    "//src/components-examples/cdk/portal",
+    "//src/components-examples/cdk/platform",
+    "//src/components-examples/cdk/drag-drop",
+    "//src/components-examples/cdk/clipboard",
+    "//src/components-examples/cdk/a11y",
+    "//src/components-examples/cdk-experimental/popover-edit",
+]
+
+ng_module(
+    name = "components-examples",
+    srcs = glob(["*.ts"]) + [":example-module.ts"],
+    module_name = "@angular/components-examples",
+    deps = EXAMPLE_PACKAGES,
+)
+
+filegroup(
+    name = "example-source-files",
+    srcs = ["%s:source-files" % pkg for pkg in EXAMPLE_PACKAGES],
+)
+
+highlight_files(
+    name = "highlighted-source-files",
+    srcs = [":example-source-files"],
+    tags = ["docs-package"],
+)
+
+package_docs_content(
+    name = "docs-content",
+    srcs = {
+        # We want to package the guides in to the docs content. These will be displayed
+        # in the documentation.
+        "//guides": "guides",
+
+        # Package the overviews for "@angular/material" and "@angular/cdk" into the docs content
+        "//src/cdk:overviews": "overviews/cdk",
+        "//src/material:overviews": "overviews/material",
+
+        # Package the API docs for the Material and CDK package into the docs-content
+        "//src:api-docs": "api-docs",
+
+        # In order to be able to run examples in StackBlitz, we also want to package the
+        # plain source files into the docs-content.
+        ":example-source-files": "examples-source",
+
+        # For the live-examples in our docs, we want to package the highlighted files
+        # into the docs content. These will be used to show the source code for examples.
+        ":highlighted-source-files": "examples-highlighted",
+    },
+    tags = ["docs-package"],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    data = [":docs-content"],
+    entry_point = ":public-api.ts",
+    tags = ["docs-package"],
+    deps = [":components-examples"] + EXAMPLE_PACKAGES,
+)
+
+genrule(
+    name = "example-module",
+    srcs = [":example-source-files"],
+    outs = [
+        "example-module.ts",
+        "_example_module.MF",
+    ],
+    cmd = """
+      # Create source file manifest
+      echo "$(locations //src/components-examples:example-source-files)" \
+          > $(location _example_module.MF)
+
+      # Run the bazel entry-point for generating the example module.
+      ./$(location //tools/example-module:bazel-bin) \
+          "$(location _example_module.MF)" \
+          "$(location example-module.ts)" \
+          "$$PWD/src/components-examples"
+    """,
+    output_to_bindir = True,
+    tools = ["//tools/example-module:bazel-bin"],
+)

src/material-examples/cdk-experimental/popover-edit/BUILD.bazel renamed to src/components-examples/cdk-experimental/popover-edit/BUILD.bazel

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk-experimental/popover-edit",
+    module_name = "@angular/components-examples/cdk-experimental/popover-edit",
     deps = [
         "//src/cdk-experimental/popover-edit",
         "//src/cdk/collections",
@@ -21,8 +21,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.css renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.css

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/a11y",
+    module_name = "@angular/components-examples/cdk/a11y",
     deps = [
         "//src/cdk/a11y",
         "//src/material/select",
@@ -19,8 +19,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.html renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.html

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/clipboard",
+    module_name = "@angular/components-examples/cdk/clipboard",
     deps = [
         "//src/cdk/clipboard",
         "@npm//@angular/forms",
@@ -19,8 +19,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.ts renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.ts

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/drag-drop",
+    module_name = "@angular/components-examples/cdk/drag-drop",
     deps = [
         "//src/cdk/drag-drop",
         "//src/cdk/overlay",
@@ -20,8 +20,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.css renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.css

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/platform",
+    module_name = "@angular/components-examples/cdk/platform",
     deps = [
         "//src/cdk/platform",
     ],
@@ -18,8 +18,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.html renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.html

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/portal",
+    module_name = "@angular/components-examples/cdk/portal",
     deps = [
         "//src/cdk/portal",
     ],
@@ -18,8 +18,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.ts renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.ts

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/scrolling",
+    module_name = "@angular/components-examples/cdk/scrolling",
     deps = [
         "//src/cdk/scrolling",
     ],
@@ -18,8 +18,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.css renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.css

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/stepper",
+    module_name = "@angular/components-examples/cdk/stepper",
     deps = [
         "//src/cdk/stepper",
     ],
@@ -18,8 +18,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )

src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html renamed to src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html

@@ -9,7 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    module_name = "@angular/material-examples/cdk/table",
+    module_name = "@angular/components-examples/cdk/table",
     deps = [
         "//src/cdk/table",
     ],
@@ -18,8 +18,8 @@ ng_module(
 filegroup(
     name = "source-files",
     srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
     ]),
 )