feat(dev): surface the stackblitz editor url in the dev url block

Author: danielroe

packages/nuxt-cli/src/dev/listen.ts

@@ -16,6 +16,7 @@ import { debug, logger } from '../utils/logger'
 import { resolveCertificate } from './cert'
 import { detectIsolatedEnvironment, isWsl } from './environment'
 import { resolvePortlessURLs } from './portless'
+import { resolveStackblitzURL } from './stackblitz'
 import { startTunnel } from './tunnel'
 
 export interface ListenOptions {
@@ -164,6 +165,7 @@ export async function listen(handler: RequestListener, options: ListenOptions =
   const portless = resolvePortlessURLs()
   const portlessURL = portless.url && portless.url + baseURL
   const portlessShareURL = portless.shareURL && portless.shareURL + baseURL
+  const stackblitzURL = resolveStackblitzURL()
 
   function getURLs(): ListenURL[] {
     const urls: ListenURL[] = []
@@ -173,6 +175,9 @@ export async function listen(handler: RequestListener, options: ListenOptions =
     for (const portlessURL of portless.all) {
       urls.push({ url: portlessURL + baseURL, type: 'public' })
     }
+    if (stackblitzURL) {
+      urls.push({ url: stackblitzURL, type: 'public' })
+    }
     if (anyHost) {
       urls.push({ url: formatURL('localhost'), type: 'local' })
       for (const address of getNetworkAddresses()) {
@@ -185,11 +190,14 @@ export async function listen(handler: RequestListener, options: ListenOptions =
     return urls
   }
 
-  const publicURL = options.publicURL || tunnel?.url || portlessShareURL || portlessURL
+  // The StackBlitz URL points at the editor rather than at a host another
+  // device can open, so it is not a QR code candidate.
+  const shareableURL = options.publicURL || tunnel?.url || portlessShareURL || portlessURL
+  const publicURL = shareableURL || stackblitzURL
 
   const qrURL = options.qr === false
     ? undefined
-    : publicURL
+    : shareableURL
       || getURLs().find(({ type }) => type === 'network')?.url
       || (options.qr ? url : undefined)
 
@@ -203,7 +211,7 @@ export async function listen(handler: RequestListener, options: ListenOptions =
     for (const { url: displayURL, type } of urls) {
       lines.push(line(labelColors[type], labels[type], colors.cyan(displayURL), qr && displayURL === qrURL))
     }
-    if (!anyHost && !tunnel && !portless.url) {
+    if (!anyHost && !tunnel && !portless.url && !stackblitzURL) {
       const isolated = LOOPBACK_HOSTS.has(hostname) ? detectIsolatedEnvironment() : undefined
       const hint = isolated
         ? `use ${colors.white('--host')} to reach this server from outside ${isolated}`

packages/nuxt-cli/src/dev/stackblitz.ts

@@ -0,0 +1,38 @@
+import process from 'node:process'
+
+import { provider as currentProvider } from 'std-env'
+
+/**
+ * Resolve the reachable editor URL for a dev server running inside StackBlitz
+ * or Codeflow, where the app is served through the editor rather than on a
+ * port the user can open locally.
+ *
+ * The project is identified by the working directory: `/home/projects/<id>`
+ * in the editor, `/home/<org>/<repo>` in Codeflow. `PWD` is used rather than
+ * `process.cwd()` because the latter is resolved through symlinks.
+ */
+export function resolveStackblitzURL(
+  env: NodeJS.ProcessEnv = process.env,
+  provider: string | undefined = currentProvider,
+): string | undefined {
+  if (provider !== 'stackblitz') {
+    return undefined
+  }
+
+  const cwd = env.PWD
+  if (!cwd) {
+    return undefined
+  }
+
+  if (cwd.startsWith('/home/projects/')) {
+    const projectId = cwd.split('/')[3]
+    return projectId ? `https://stackblitz.com/edit/${projectId}` : undefined
+  }
+
+  if (cwd.startsWith('/home/')) {
+    const [owner, repository] = cwd.split('/').slice(2)
+    return owner && repository ? `https://stackblitz.com/edit/~/github.com/${owner}/${repository}` : undefined
+  }
+
+  return undefined
+}

packages/nuxt-cli/test/unit/stackblitz.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveStackblitzURL } from '../../src/dev/stackblitz'
+
+describe('resolveStackblitzURL', () => {
+  it('should return nothing outside stackblitz', () => {
+    expect(resolveStackblitzURL({ PWD: '/home/projects/abc123' }, undefined)).toBeUndefined()
+    expect(resolveStackblitzURL({ PWD: '/home/projects/abc123' }, 'codesandbox')).toBeUndefined()
+  })
+
+  it('should derive the editor url from the project directory', () => {
+    expect(resolveStackblitzURL({ PWD: '/home/projects/abc123' }, 'stackblitz')).toBe('https://stackblitz.com/edit/abc123')
+    expect(resolveStackblitzURL({ PWD: '/home/projects/abc123/playground' }, 'stackblitz')).toBe('https://stackblitz.com/edit/abc123')
+  })
+
+  it('should derive the codeflow url from the repository directory', () => {
+    expect(resolveStackblitzURL({ PWD: '/home/nuxt/cli' }, 'stackblitz')).toBe('https://stackblitz.com/edit/~/github.com/nuxt/cli')
+    expect(resolveStackblitzURL({ PWD: '/home/nuxt/cli/packages/nuxt-cli' }, 'stackblitz')).toBe('https://stackblitz.com/edit/~/github.com/nuxt/cli')
+  })
+
+  it('should return nothing for an unrecognised directory', () => {
+    expect(resolveStackblitzURL({ PWD: '/home/daniel' }, 'stackblitz')).toBeUndefined()
+    expect(resolveStackblitzURL({ PWD: '/workspace/app' }, 'stackblitz')).toBeUndefined()
+    expect(resolveStackblitzURL({}, 'stackblitz')).toBeUndefined()
+  })
+})