docs(js): executors examples (#12565)

Co-authored-by: Chau Tran <chautran@10.0.0.9>

docs/generated/packages/js.json

@@ -372,6 +372,7 @@
             ]
           }
         },
+        "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Using TypeScript Transformer Plugins\" %}\n\n`@nrwl/js:tsc` can run the [TypeScript Transformers](https://github.com/madou/typescript-transformer-handbook) by using the `transformers` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n  \"build\": {\n    \"executor\": \"@nrwl/js:tsc\",\n    \"options\": {\n      \"outputPath\": \"dist/libs/ts-lib\",\n      \"main\": \"libs/ts-lib/src/index.ts\",\n      \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n      \"assets\": [\"libs/ts-lib/*.md\"],\n      \"transformers\": [\n        \"@nestjs/swagger/plugin\",\n        {\n          \"name\": \"@automapper/classes/transformer-plugin\",\n          \"options\": {}\n        }\n      ]\n    }\n  }\n}\n```\n\n{% /tab %}\n{% tab label=\"Inline libraries\" %}\n\n`@nrwl/js:tsc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n  \"build\": {\n    \"executor\": \"@nrwl/js:tsc\",\n    \"options\": {\n      \"outputPath\": \"dist/libs/ts-lib\",\n      \"main\": \"libs/ts-lib/src/index.ts\",\n      \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n      \"assets\": [\"libs/ts-lib/*.md\"],\n      \"external\": \"all\"\n    }\n  }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=all\n```\n\n`@nrwl/js:tsc` can also inline buildable libraries by setting `external: 'none'`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n  \"build\": {\n    \"executor\": \"@nrwl/js:tsc\",\n    \"options\": {\n      \"outputPath\": \"dist/libs/ts-lib\",\n      \"main\": \"libs/ts-lib/src/index.ts\",\n      \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n      \"assets\": [\"libs/ts-lib/*.md\"],\n      \"external\": \"none\"\n    }\n  }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=none\n```\n\n{% /tab %}\n{% /tabs %}\n",
         "presets": []
       },
       "description": "Build a project using TypeScript.",
@@ -531,6 +532,7 @@
             ]
           }
         },
+        "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Inline libraries\" %}\n\n`@nrwl/js:swc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n  \"build\": {\n    \"executor\": \"@nrwl/js:swc\",\n    \"options\": {\n      \"outputPath\": \"dist/libs/ts-lib\",\n      \"main\": \"libs/ts-lib/src/index.ts\",\n      \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n      \"assets\": [\"libs/ts-lib/*.md\"],\n      \"external\": \"all\"\n    }\n  }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=all\n```\n\n`@nrwl/js:swc` can also inline buildable libraries by setting `external: 'none'`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n  \"build\": {\n    \"executor\": \"@nrwl/js:swc\",\n    \"options\": {\n      \"outputPath\": \"dist/libs/ts-lib\",\n      \"main\": \"libs/ts-lib/src/index.ts\",\n      \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n      \"assets\": [\"libs/ts-lib/*.md\"],\n      \"external\": \"none\"\n    }\n  }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=none\n```\n\n{% /tab %}\n{% tab label=\"Custom swcrc\" %}\n\n`@nrwl/js:swc` can compile your code with a custom `.swcrc`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n  \"build\": {\n    \"executor\": \"@nrwl/js:swc\",\n    \"options\": {\n      \"outputPath\": \"dist/libs/ts-lib\",\n      \"main\": \"libs/ts-lib/src/index.ts\",\n      \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n      \"assets\": [\"libs/ts-lib/*.md\"],\n      \"swcrc\": \"libs/ts-lib/.dev.swcrc\"\n    },\n    \"configurations\": {\n      \"production\": {\n        \"swcrc\": \"libs/ts-lib/.prod.swcrc\"\n      }\n    }\n  }\n}\n```\n\n{% /tab %}\n{% /tabs %}\n",
         "presets": []
       },
       "description": "Build a project using SWC.",

packages/js/docs/swc-examples.md

@@ -0,0 +1,74 @@
+## Examples
+
+{% tabs %}
+{% tab label="Inline libraries" %}
+
+`@nrwl/js:swc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.
+
+```json {% fileName="libs/ts-lib/project.json" %}
+{
+  "build": {
+    "executor": "@nrwl/js:swc",
+    "options": {
+      "outputPath": "dist/libs/ts-lib",
+      "main": "libs/ts-lib/src/index.ts",
+      "tsConfig": "libs/ts-lib/tsconfig.lib.json",
+      "assets": ["libs/ts-lib/*.md"],
+      "external": "all"
+    }
+  }
+}
+```
+
+```shell
+npx nx build ts-lib --external=all
+```
+
+`@nrwl/js:swc` can also inline buildable libraries by setting `external: 'none'`
+
+```json {% fileName="libs/ts-lib/project.json" %}
+{
+  "build": {
+    "executor": "@nrwl/js:swc",
+    "options": {
+      "outputPath": "dist/libs/ts-lib",
+      "main": "libs/ts-lib/src/index.ts",
+      "tsConfig": "libs/ts-lib/tsconfig.lib.json",
+      "assets": ["libs/ts-lib/*.md"],
+      "external": "none"
+    }
+  }
+}
+```
+
+```shell
+npx nx build ts-lib --external=none
+```
+
+{% /tab %}
+{% tab label="Custom swcrc" %}
+
+`@nrwl/js:swc` can compile your code with a custom `.swcrc`
+
+```json {% fileName="libs/ts-lib/project.json" %}
+{
+  "build": {
+    "executor": "@nrwl/js:swc",
+    "options": {
+      "outputPath": "dist/libs/ts-lib",
+      "main": "libs/ts-lib/src/index.ts",
+      "tsConfig": "libs/ts-lib/tsconfig.lib.json",
+      "assets": ["libs/ts-lib/*.md"],
+      "swcrc": "libs/ts-lib/.dev.swcrc"
+    },
+    "configurations": {
+      "production": {
+        "swcrc": "libs/ts-lib/.prod.swcrc"
+      }
+    }
+  }
+}
+```
+
+{% /tab %}
+{% /tabs %}

packages/js/docs/tsc-examples.md

@@ -0,0 +1,75 @@
+## Examples
+
+{% tabs %}
+{% tab label="Using TypeScript Transformer Plugins" %}
+
+`@nrwl/js:tsc` can run the [TypeScript Transformers](https://github.com/madou/typescript-transformer-handbook) by using the `transformers` option.
+
+```json {% fileName="libs/ts-lib/project.json" %}
+{
+  "build": {
+    "executor": "@nrwl/js:tsc",
+    "options": {
+      "outputPath": "dist/libs/ts-lib",
+      "main": "libs/ts-lib/src/index.ts",
+      "tsConfig": "libs/ts-lib/tsconfig.lib.json",
+      "assets": ["libs/ts-lib/*.md"],
+      "transformers": [
+        "@nestjs/swagger/plugin",
+        {
+          "name": "@automapper/classes/transformer-plugin",
+          "options": {}
+        }
+      ]
+    }
+  }
+}
+```
+
+{% /tab %}
+{% tab label="Inline libraries" %}
+
+`@nrwl/js:tsc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.
+
+```json {% fileName="libs/ts-lib/project.json" %}
+{
+  "build": {
+    "executor": "@nrwl/js:tsc",
+    "options": {
+      "outputPath": "dist/libs/ts-lib",
+      "main": "libs/ts-lib/src/index.ts",
+      "tsConfig": "libs/ts-lib/tsconfig.lib.json",
+      "assets": ["libs/ts-lib/*.md"],
+      "external": "all"
+    }
+  }
+}
+```
+
+```shell
+npx nx build ts-lib --external=all
+```
+
+`@nrwl/js:tsc` can also inline buildable libraries by setting `external: 'none'`
+
+```json {% fileName="libs/ts-lib/project.json" %}
+{
+  "build": {
+    "executor": "@nrwl/js:tsc",
+    "options": {
+      "outputPath": "dist/libs/ts-lib",
+      "main": "libs/ts-lib/src/index.ts",
+      "tsConfig": "libs/ts-lib/tsconfig.lib.json",
+      "assets": ["libs/ts-lib/*.md"],
+      "external": "none"
+    }
+  }
+}
+```
+
+```shell
+npx nx build ts-lib --external=none
+```
+
+{% /tab %}
+{% /tabs %}

packages/js/src/executors/swc/schema.json

@@ -134,5 +134,6 @@
         }
       ]
     }
-  }
+  },
+  "examplesFile": "../../../docs/swc-examples.md"
 }

packages/js/src/executors/tsc/schema.json

@@ -144,5 +144,6 @@
         }
       ]
     }
-  }
+  },
+  "examplesFile": "../../../docs/tsc-examples.md"
 }