Added navigate()

Author: yandeu

dev/index.js

@@ -2,4 +2,4 @@ const LiveServer = require('../lib/index').default
 
 const liveServer = new LiveServer()
 
-liveServer.start({ noBrowser: true })
+liveServer.start({ open: false })

injected.ts

@@ -73,6 +73,7 @@ if ('WebSocket' in window) {
         else if (msg.data === 'initRemoteLogs') overwriteLogs()
         else {
           const d = JSON.parse(msg.data)
+          if (d.navigate) window.location.replace(d.navigate)
           if (d.body) injectBody(d.body)
           if (d.position) {
             // TODO: This highlight section needs improvement

src/index.ts

@@ -456,6 +456,16 @@ export default class LiveServer {
     })
   }
 
+  /**
+   * Navigate the browser to another page.
+   * @param url Navigates to the given URL.
+   */
+  public navigate(url: string) {
+    this.clients.forEach(ws => {
+      if (ws) ws.sendWithDelay(JSON.stringify({ navigate: url }))
+    })
+  }
+
   /** Launch a new browser window. */
   public async launchBrowser(
     path: string | boolean | string[] | null | undefined,

src/types.ts

@@ -55,7 +55,9 @@ export interface LiveServerParams {
   highlight?: boolean
   /** Set to false to not inject body changes. (VSCode Extension only) */
   injectBody?: boolean
-  /** Absolute path of your vscode workspace. (VSCode Extension only) */
+  /** Navigates your browser automatically to the current working file. (VSCode Extension only) */
+  navigate?: boolean
+  /** @private Absolute path of your workspace. (VSCode Extension only) */
   workspace?: string
 
   /** @deprecated No need for an external https module */

test/navigation.test.js

@@ -0,0 +1,72 @@
+const path = require('path')
+const FiveServer = require('../lib').default
+const puppeteer = require('puppeteer')
+
+jest.setTimeout(15_000)
+
+const fiveServer = new FiveServer()
+let browser
+let page
+
+const options = {
+  root: path.join(__dirname, 'data'),
+  port: 40200,
+  open: false
+}
+
+const pause = (ms = 1000) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve()
+    }, ms)
+  })
+}
+
+const getInnerText = async query => {
+  const el = await page.$(query)
+
+  const innerText = await page.evaluate(x => {
+    return x.innerText
+  }, el)
+
+  return innerText
+}
+
+beforeAll(async () => {
+  await fiveServer.start(options)
+
+  browser = await puppeteer.launch()
+
+  page = await browser.newPage()
+  page.on('console', msg => {
+    log = msg.text()
+  })
+
+  await page.goto('http://localhost:40200/', { waitUntil: 'networkidle2' })
+})
+
+describe('navigation test', () => {
+  it('should open index.html at /', async done => {
+    const h1 = await getInnerText('h1')
+    expect(page.url()).toBe('http://localhost:40200/')
+    expect(h1).toBe('Hello world.')
+
+    done()
+  })
+
+  it('should navigate to /sub/sub.html', async done => {
+    await fiveServer.navigate('/sub/sub.html')
+    await pause()
+
+    const h1 = await getInnerText('h1')
+    expect(page.url()).toBe('http://localhost:40200/sub/sub.html')
+    expect(h1).toBe('Subdirectory')
+
+    done()
+  })
+})
+
+afterAll(async () => {
+  await fiveServer.shutdown()
+  await browser.close()
+})