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'
 
 exportinterfaceListenOptions{
@@ -164,6 +165,7 @@ export async function listen(handler: RequestListener, options: ListenOptions =
 constportless=resolvePortlessURLs()
 constportlessURL=portless.url&&portless.url+baseURL
 constportlessShareURL=portless.shareURL&&portless.shareURL+baseURL
+conststackblitzURL=resolveStackblitzURL()
 
 functiongetURLs(): ListenURL[]{
 consturls: ListenURL[]=[]
@@ -173,6 +175,9 @@ export async function listen(handler: RequestListener, options: ListenOptions =
 for(constportlessURLofportless.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(constaddressofgetNetworkAddresses()){
@@ -185,11 +190,14 @@ export async function listen(handler: RequestListener, options: ListenOptions =
 returnurls
 }
 
-constpublicURL=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.
+constshareableURL=options.publicURL||tunnel?.url||portlessShareURL||portlessURL
+constpublicURL=shareableURL||stackblitzURL
 
 constqrURL=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 }ofurls){
 lines.push(line(labelColors[type],labels[type],colors.cyan(displayURL),qr&&displayURL===qrURL))
 }
-if(!anyHost&&!tunnel&&!portless.url){
+if(!anyHost&&!tunnel&&!portless.url&&!stackblitzURL){
 constisolated=LOOPBACK_HOSTS.has(hostname) ? detectIsolatedEnvironment() : undefined
 consthint=isolated
  ? `use ${colors.white('--host')} to reach this server from outside ${isolated}`

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

@@ -0,0 +1,38 @@
+importprocessfrom'node:process'
+
+import{providerascurrentProvider}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.
+ */
+exportfunctionresolveStackblitzURL(
+env: NodeJS.ProcessEnv=process.env,
+provider: string|undefined=currentProvider,
+): string|undefined{
+if(provider!=='stackblitz'){
+returnundefined
+}
+
+constcwd=env.PWD
+if(!cwd){
+returnundefined
+}
+
+if(cwd.startsWith('/home/projects/')){
+constprojectId=cwd.split('/')[3]
+returnprojectId ? `https://stackblitz.com/edit/${projectId}` : undefined
+}
+
+if(cwd.startsWith('/home/')){
+const[owner,repository]=cwd.split('/').slice(2)
+returnowner&&repository ? `https://stackblitz.com/edit/~/github.com/${owner}/${repository}` : undefined
+}
+
+returnundefined
+}

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()
+})
+})