docs: add open in IDX support (angular#57099)

This change adds a menu to the in-browser code editor on adev and adds the option for open in IDX. PR Close angular#57099

Author: MarkTechson

adev/BUILD.bazel

@@ -80,6 +80,7 @@ APPLICATION_DEPS = [
  "@npm//@lezer/javascript",
  "@npm//@lezer/common",
  "@npm//@stackblitz/sdk",
+ "@npm//open-in-idx",
  "@npm//@xterm/xterm",
  "@npm//@xterm/addon-fit",
  "@npm//algoliasearch",

adev/src/app/editor/code-editor/code-editor.component.html

@@ -68,11 +68,23 @@
  <button
  class="adev-editor-download-button"
  type="button"
- (click)="openCurrentCodeInStackBlitz()"
- aria-label="Open current code in editor in StackBlitz"
+ aria-label="Open current code in editor in an online editor"
+ [cdkMenuTriggerFor]="launcherMenu"
  >
  <docs-icon>launch</docs-icon>
  </button>
+ <!-- launcher dropdown window -->
+ <ng-template #launcherMenu>
+ <div class="adev-editor-dropdown" cdkMenu>
+ <button cdkMenuItem (click)="openCurrentSolutionInIDX()">
+ <span>Open in IDX </span>
+ <img class="icon" src="assets/images/tutorials/common/idx_logo.svg" height="32">
+ </button>
+ <button cdkMenuItem (click)="openCurrentCodeInStackBlitz()">
+ Open in StackBlitz
+ </button>
+ </div>
+ </ng-template>
  <button
  class="adev-editor-download-button"
  type="button"

adev/src/app/editor/code-editor/code-editor.component.scss

@@ -186,3 +186,34 @@
  }
  }
 }
+
+.adev-editor-dropdown {
+ border: 1px solid var(--senary-contrast);
+ border-radius: 0.25rem;
+ padding: 0;
+ transform: translateY(-0.7rem);
+
+ button {
+ background: var(--page-background);
+ font-size: 0.875rem;
+ width: 100%;
+ text-align: left;
+ padding-block: 0.5rem;
+ color: var(--quaternary-contrast);
+ transition: color 0.3s ease, background 0.3s ease;
+ font-weight: 400;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &:hover {
+ background: var(--senary-contrast);
+ color: var(--primary-contrast);
+ }
+ .icon {
+ margin: initial;
+ padding: initial;
+ width: auto;
+ }
+ }
+}

adev/src/app/editor/code-editor/code-editor.component.ts

@@ -31,6 +31,8 @@ import {DiagnosticWithLocation, DiagnosticsState} from './services/diagnostics-s
 import {DownloadManager} from '../download-manager.service';
 import {StackBlitzOpener} from '../stackblitz-opener.service';
 import {ClickOutside, IconComponent} from '@angular/docs';
+import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
+import {IDXLauncher} from '../idx-launcher.service';
 
 export const REQUIRED_FILES = new Set([
  'src/main.ts',
@@ -46,7 +48,16 @@ const ANGULAR_DEV = 'https://angular.dev';
  templateUrl: './code-editor.component.html',
  styleUrls: ['./code-editor.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [NgIf, NgFor, MatTabsModule, IconComponent, ClickOutside],
+ imports: [
+ NgIf,
+ NgFor,
+ MatTabsModule,
+ IconComponent,
+ ClickOutside,
+ CdkMenu,
+ CdkMenuItem,
+ CdkMenuTrigger,
+ ],
 })
 export class CodeEditor implements AfterViewInit, OnDestroy {
  @ViewChild('codeEditorWrapper') private codeEditorWrapperRef!: ElementRef<HTMLDivElement>;
@@ -78,6 +89,7 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
  private readonly diagnosticsState = inject(DiagnosticsState);
  private readonly downloadManager = inject(DownloadManager);
  private readonly stackblitzOpener = inject(StackBlitzOpener);
+ private readonly idxLauncher = inject(IDXLauncher);
  private readonly title = inject(Title);
  private readonly location = inject(Location);
  private readonly embeddedTutorialManager = inject(EmbeddedTutorialManager);
@@ -117,6 +129,9 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
  this.codeMirrorEditor.disable();
  }
 
+ openCurrentSolutionInIDX(): void {
+ this.idxLauncher.openCurrentSolutionInIDX();
+ }
  async openCurrentCodeInStackBlitz(): Promise<void> {
  const title = this.title.getTitle();
 

adev/src/app/editor/idx-launcher.service.ts

@@ -0,0 +1,51 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {EnvironmentInjector, Injectable, inject} from '@angular/core';
+import {injectAsync} from '../core/services/inject-async';
+import * as IDX from 'open-in-idx';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class IDXLauncher {
+ private readonly environmentInjector = inject(EnvironmentInjector);
+
+ async openCurrentSolutionInIDX(): Promise<void> {
+ const nodeRuntimeSandbox = await injectAsync(this.environmentInjector, () =>
+ import('./node-runtime-sandbox.service').then((c) => c.NodeRuntimeSandbox),
+ );
+
+ const runtimeFiles = await nodeRuntimeSandbox.getSolutionFiles();
+ const workspaceFiles: Record<string, string> = {};
+
+ for (let i = 0; i < runtimeFiles.length; i++) {
+ const file = runtimeFiles[i];
+
+ //don't include config.json, BUILD.bazel, package-lock.json, package.json.template
+ const doNotAllowList = [
+ 'config.json',
+ 'BUILD.bazel',
+ 'package-lock.json',
+ 'package.json.template',
+ ];
+
+ const path = file.path.replace(/^\//, '');
+
+ //don't include binary formats
+ if (!doNotAllowList.includes(path) && typeof file.content === 'string') {
+ if (path === 'idx/dev.nix') {
+ workspaceFiles['.idx/dev.nix'] = file.content as string;
+ } else {
+ workspaceFiles[path] = file.content as string;
+ }
+ }
+ }
+ IDX.newAdhocWorkspace({files: workspaceFiles});
+ }
+}

adev/src/assets/images/tutorials/common/idx_logo.svg

@@ -0,0 +1,35 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+ # Which nixpkgs channel to use.
+ channel = "stable-23.11"; # or "unstable"
+ # Use https://search.nixos.org/packages to find packages
+ packages = [
+ pkgs.nodejs_18
+ ];
+ # Sets environment variables in the workspace
+ env = {};
+ idx = {
+ # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+ extensions = [
+ "angular.ng-template"
+ ];
+ workspace = {
+ # Runs when a workspace is first created with this \`dev.nix\` file
+ onCreate = {
+ npm-install = "npm install --no-audit --prefer-offline";
+ };
+ # To run something each time the environment is rebuilt, use the \`onStart\` hook
+ };
+ # Enable previews and customize configuration
+ previews = {
+ enable = true;
+ previews = {
+ web = {
+ command = ["npm" "run" "start" "--" "--port" "$PORT" "--host" "0.0.0.0"];
+ manager = "web";
+ };
+ };
+ };
+ };
+}

adev/src/content/tutorials/first-app/common/idx/dev.nix

@@ -0,0 +1,35 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+ # Which nixpkgs channel to use.
+ channel = "stable-23.11"; # or "unstable"
+ # Use https://search.nixos.org/packages to find packages
+ packages = [
+ pkgs.nodejs_18
+ ];
+ # Sets environment variables in the workspace
+ env = {};
+ idx = {
+ # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+ extensions = [
+ "angular.ng-template"
+ ];
+ workspace = {
+ # Runs when a workspace is first created with this \`dev.nix\` file
+ onCreate = {
+ npm-install = "npm install --no-audit --prefer-offline";
+ };
+ # To run something each time the environment is rebuilt, use the \`onStart\` hook
+ };
+ # Enable previews and customize configuration
+ previews = {
+ enable = true;
+ previews = {
+ web = {
+ command = ["npm" "run" "start" "--" "--port" "$PORT" "--host" "0.0.0.0"];
+ manager = "web";
+ };
+ };
+ };
+ };
+}

adev/src/content/tutorials/homepage/idx/dev.nix

@@ -0,0 +1,35 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+ # Which nixpkgs channel to use.
+ channel = "stable-23.11"; # or "unstable"
+ # Use https://search.nixos.org/packages to find packages
+ packages = [
+ pkgs.nodejs_18
+ ];
+ # Sets environment variables in the workspace
+ env = {};
+ idx = {
+ # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+ extensions = [
+ "angular.ng-template"
+ ];
+ workspace = {
+ # Runs when a workspace is first created with this \`dev.nix\` file
+ onCreate = {
+ npm-install = "npm install --no-audit --prefer-offline";
+ };
+ # To run something each time the environment is rebuilt, use the \`onStart\` hook
+ };
+ # Enable previews and customize configuration
+ previews = {
+ enable = true;
+ previews = {
+ web = {
+ command = ["npm" "run" "start" "--" "--port" "$PORT" "--host" "0.0.0.0"];
+ manager = "web";
+ };
+ };
+ };
+ };
+}

adev/src/content/tutorials/learn-angular/common/idx/dev.nix

@@ -0,0 +1,35 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+ # Which nixpkgs channel to use.
+ channel = "stable-23.11"; # or "unstable"
+ # Use https://search.nixos.org/packages to find packages
+ packages = [
+ pkgs.nodejs_18
+ ];
+ # Sets environment variables in the workspace
+ env = {};
+ idx = {
+ # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+ extensions = [
+ "angular.ng-template"
+ ];
+ workspace = {
+ # Runs when a workspace is first created with this \`dev.nix\` file
+ onCreate = {
+ npm-install = "npm install --no-audit --prefer-offline";
+ };
+ # To run something each time the environment is rebuilt, use the \`onStart\` hook
+ };
+ # Enable previews and customize configuration
+ previews = {
+ enable = true;
+ previews = {
+ web = {
+ command = ["npm" "run" "start" "--" "--port" "$PORT" "--host" "0.0.0.0"];
+ manager = "web";
+ };
+ };
+ };
+ };
+}