feat(icon): make icons accessible (#51)

* Make icons accessible

* Update interface and add tests

* Update docs

Author: TheAlexLichter

.eslintignore

@@ -1,3 +1,6 @@
 **/templates
 **/node_modules
 **/dist
+
+# Contains Lodash templates
+packages/icon/plugin.js

docs/modules/icon.md

@@ -22,3 +22,16 @@ icon: {
 - Default: `[16, 120, 144, 152, 192, 384, 512]`
 
 Array of sizes to be generated (Square).
+
+**accessibleIcons**
+- Default: true
+
+Make icons accessible through `ctx` or Vue instances.
+
+Example: `ctx.$icon(512)` will return the url for the icon with the size of `512px`.
+Will return an empty string when no icon in the given size is available (eg. when the size is not in `sizes` array).
+
+**iconProperty**
+- Default: '$icon'
+
+Name of property for accessible icons.

packages/icon/index.js

@@ -62,13 +62,36 @@ function generateIcons (moduleOptions) {
       if (!this.options.manifest.icons) {
         this.options.manifest.icons = []
       }
+      const assetIcons = []
+      const exportIcons = {}
       icons.forEach(icon => {
-        this.options.manifest.icons.push({
-          src: fixUrl(`${publicPath}/${icon.fileName}`),
+        const src = fixUrl(`${publicPath}/${icon.fileName}`)
+        assetIcons.push({
+          src,
           sizes: `${icon.size}x${icon.size}`,
           type: `image/png`
         })
+
+        exportIcons[icon.size] = src
       })
+
+      assetIcons.forEach(icon => { this.options.manifest.icons.push(icon) })
+
+      // Add plugin to Vue to access icons
+      let moduleOptions = Object.assign({
+        accessibleIcons: true,
+        iconProperty: '$icon',
+        icons: exportIcons
+      }, options)
+
+      if (moduleOptions.accessibleIcons) {
+        this.addPlugin({
+          src: path.resolve(__dirname, './plugin.js'),
+          fileName: 'nuxt-icons.js',
+          options: moduleOptions
+        })
+      }
+
       // Register webpack plugin to emit icons
       this.options.build.plugins.push({
         apply (compiler) {

packages/icon/plugin.js

@@ -0,0 +1,6 @@
+export default async function (ctx, inject) {
+  const moduleOptions = <%= serialize(options) %>
+  inject(moduleOptions.iconProperty.replace('$', ''), retrieveIcons(moduleOptions.icons))
+}
+
+const retrieveIcons = icons => size => icons[size] || ''

test/__snapshots__/pwa.test.js.snap

@@ -27,6 +27,7 @@ Array [
   "fixture/.nuxt/dist/client/manifest.0fc4969c.json",
   "fixture/.nuxt/dist/client/ons.40ac840e.js",
   "fixture/.nuxt/dist/client/pages",
+  "fixture/.nuxt/dist/client/pages/icons.js",
   "fixture/.nuxt/dist/client/pages/index.js",
   "fixture/.nuxt/dist/client/workbox.dev.42554690.js",
   "fixture/.nuxt/dist/server",
@@ -40,6 +41,7 @@ Array [
   "fixture/.nuxt/layouts/default.vue",
   "fixture/.nuxt/loading.html",
   "fixture/.nuxt/middleware.js",
+  "fixture/.nuxt/nuxt-icons.js",
   "fixture/.nuxt/onesignal.js",
   "fixture/.nuxt/router.js",
   "fixture/.nuxt/server.js",
@@ -74,10 +76,13 @@ Array [
   "fixture/dist/_nuxt/manifest.0fc4969c.json",
   "fixture/dist/_nuxt/ons.40ac840e.js",
   "fixture/dist/_nuxt/pages",
+  "fixture/dist/_nuxt/pages/icons.js",
   "fixture/dist/_nuxt/pages/index.js",
   "fixture/dist/_nuxt/workbox.dev.42554690.js",
   "fixture/dist/custom-sw.js",
   "fixture/dist/icon.png",
+  "fixture/dist/icons",
+  "fixture/dist/icons/index.html",
   "fixture/dist/index.html",
   "fixture/dist/sw.js",
 ]

test/fixture/pages/icons.vue

@@ -0,0 +1,9 @@
+<template>
+<pre v-text="$icon(512)"/>
+</template>
+
+<script>
+export default {
+
+}
+</script>

test/pwa.test.js

@@ -10,15 +10,16 @@ const getRelativePath = fileObj => path.relative(__dirname, fileObj.path)
 describe('pwa', () => {
   let nuxt
 
-  test('build and generate', async () => {
-    nuxt = new Nuxt(require('./fixture/nuxt.config'))
+  test(
+    'build and generate', async () => {
+      nuxt = new Nuxt(require('./fixture/nuxt.config'))
 
-    const builder = new Builder(nuxt)
-    await builder.build()
+      const builder = new Builder(nuxt)
+      await builder.build()
 
-    const generator = new Generator(nuxt)
-    await generator.generate({ build: false })
-  })
+      const generator = new Generator(nuxt)
+      await generator.generate({ build: false })
+    })
 
   test('build files (.nuxt)', async () => {
     const buildFiles = klawSync(nuxt.options.buildDir).map(getRelativePath)
@@ -32,6 +33,11 @@ describe('pwa', () => {
     expect(generateFiles).toMatchSnapshot()
   })
 
+  test('accessible icons', async () => {
+    const {html} = await nuxt.renderRoute('/icons')
+    expect(html).toContain('/_nuxt/icons/icon_512.9mgd2ZDMcQu.png')
+  })
+
   test('sw.js', async () => {
     const swContents = await fs.readFile(path.resolve(nuxt.options.generate.dir, 'sw.js'), 'utf-8')