feat: add plugins option (#8)

Author: ricardogobbosouza

README.md

@@ -72,6 +72,37 @@ You can use `'pusher'`, `'socket.io'` or `'null'`.
 
 See https://laravel.com/docs/broadcasting#driver-prerequisites
 
+### `plugins`
+
+- Type: `Array`
+- Default: `null`
+
+If you have plugins that need to access `$echo`, you can use `echo.plugins` option.
+
+> **Note:** Plugins are pushed in client mode only (`ssr: false`).
+
+`nuxt.config.js`
+
+```js
+{
+  buildModules: [
+    '@nuxtjs/laravel-echo'
+  ],
+  echo: {
+     plugins: [ '~/plugins/echo.js' ]
+  }
+}
+```
+
+`plugins/echo.js`
+
+```js
+export default function ({ $echo }) {
+  // Echo is available here
+  console.log($echo)
+}
+```
+
 ### `authModule`
 
 - Type: `Boolean`
@@ -116,12 +147,6 @@ export default {
 </script>
 ```
 
-## Development
-
-1. Clone this repository
-2. Install dependencies using `yarn install` or `npm install`
-3. Start development server using `npm run dev`
-
 ## License
 
 [MIT License](./LICENSE)

lib/module.js

@@ -4,13 +4,15 @@ module.exports = function (moduleOptions) {
   this.nuxt.hook('builder:extendPlugins', (plugins) => {
     const options = {
       broadcaster: 'null',
+      plugins: null,
       authModule: false,
       connectOnLogin: true,
       disconnectOnLogout: true,
       ...this.options.echo,
       ...moduleOptions
     }
 
+    // Copy echo plugin
     const { dst } = this.addTemplate({
       src: resolve(__dirname, 'plugin.js'),
       fileName: 'echo.js',
@@ -21,6 +23,16 @@ module.exports = function (moduleOptions) {
       ssr: false,
       src: resolve(this.options.buildDir, dst)
     })
+
+    // Extend echo with plugins
+    if (options.plugins) {
+      options.plugins.forEach(p => plugins.push({
+        ssr: false,
+        src: p
+      }))
+
+      delete options.plugins
+    }
   })
 }
 

package.json

@@ -12,7 +12,6 @@
   ],
   "main": "lib/module.js",
   "scripts": {
-    "dev": "nuxt test/fixture",
     "lint": "eslint --ext .js,.vue .",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
     "test": "yarn lint && jest"

test/module.test.js test/basic.test.jstest/module.test.js renamed to test/basic.test.js

@@ -1,10 +1,10 @@
 const { setup, loadConfig, get, url } = require('@nuxtjs/module-test-utils')
 
-describe('module', () => {
+describe('basic', () => {
   let nuxt
 
   beforeAll(async () => {
-    ({ nuxt } = (await setup(loadConfig(__dirname))))
+    ({ nuxt } = (await setup(loadConfig(__dirname, 'basic'))))
   }, 60000)
 
   afterAll(async () => {

test/fixture/nuxt.config.js test/fixture/basic/nuxt.config.jstest/fixture/nuxt.config.js renamed to test/fixture/basic/nuxt.config.js

@@ -4,6 +4,6 @@ module.exports = {
     resourceHints: false
   },
   buildModules: [
-    { handler: require('../../') }
+    { handler: require('../../../') }
   ]
 }

test/fixture/pages/index.vue test/fixture/basic/pages/index.vuetest/fixture/pages/index.vue renamed to test/fixture/basic/pages/index.vue

@@ -0,0 +1,12 @@
+module.exports = {
+  rootDir: __dirname,
+  render: {
+    resourceHints: false
+  },
+  buildModules: [
+    { handler: require('../../../') }
+  ],
+  echo: {
+    plugins: [ '~/plugins/echo.js' ]
+  }
+}

test/fixture/with-plugins/nuxt.config.js

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    Works!
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

test/fixture/with-plugins/pages/index.vue

@@ -0,0 +1,3 @@
+export default function ({ $echo }) {
+  $echo.plugin = true
+}

test/fixture/with-plugins/plugins/echo.js

@@ -0,0 +1,24 @@
+const { setup, loadConfig, get, url } = require('@nuxtjs/module-test-utils')
+
+describe('with-plugins', () => {
+  let nuxt
+
+  beforeAll(async () => {
+    ({ nuxt } = (await setup(loadConfig(__dirname, 'with-plugins'))))
+  }, 60000)
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('echo plugin should be defined', async () => {
+    const window = await nuxt.renderAndGetWindow(url('/'))
+    expect(window.$nuxt.$echo).toBeDefined()
+    expect(window.$nuxt.$echo.plugin).toBe(true)
+  })
+
+  test('render', async () => {
+    const html = await get('/')
+    expect(html).toContain('Works!')
+  })
+})