chore: init

Author: TheAlexLichter

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  extends: [
+    '@nuxtjs'
+  ]
+}

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_STORE
+coverage
+dist

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+node_js:
+- "8"
+- "9"
+- "10"
+cache:
+  yarn: true
+  directories:
+  - node_modules
+install:
+- yarn
+script:
+- yarn test
+after_success:
+- yarn coverage

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Alexander Lichter <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,45 @@
+# Nuxt SVG Loader - SVGs as components, also on the server side!
+[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-svg-loader/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-svg-loader)
+[![npm](https://img.shields.io/npm/dt/nuxt-svg-loader.svg?style=flat-square)](https://npmjs.com/package/nuxt-svg-loader)
+[![Build Status](https://travis-ci.org/Developmint/nuxt-svg-loader.svg?branch=master)](https://travis-ci.org/Developmint/nuxt-svg-loader)
+[![codecov](https://codecov.io/gh/Developmint/nuxt-svg-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/Developmint/nuxt-svg-loader)
+[![Dependencies](https://david-dm.org/Developmint/nuxt-svg-loader/status.svg?style=flat-square)](https://david-dm.org/Developmint/nuxt-svg-loader)
+[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)
+
+>
+
+[📖 **Release Notes**](./CHANGELOG.md)
+
+## Features
+
+* Full support of SVGs as components. Import them like your Vue SFCs
+* Built on top of [vue-svg-loader](https://github.com/visualfanatic/vue-svg-loader)
+* Nuxt 2 (and only Nuxt 2) support
+* Fully tested!
+
+## Setup
+
+- Add `nuxt-svg-loader` dependency using yarn or npm to your project
+- Add `nuxt-svg-loader` to `modules` section of `nuxt.config.js`
+
+```js
+{
+  modules: [
+    'nuxt-svg-loader',
+  ],
+}
+```
+
+- No more options are needed. It'll simply work
+
+## Development
+
+- Clone this repository
+- Install dependencies using `yarn install` or `npm install`
+- Start development server using `npm run dev`
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) Alexander Lichter

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

lib/module.js

@@ -0,0 +1,30 @@
+const logger = require('consola').withScope('nuxt-svg-loader')
+
+export default function nuxtSvgLoader() {
+  const oldExtendFunction = this.options.build.extend
+
+  this.options.build.extend = (...args) => {
+    setupVueSvgLoader(...args)
+    if (oldExtendFunction) {
+      oldExtendFunction(...args)
+    }
+  }
+}
+
+const setupVueSvgLoader = (config) => {
+  const imageLoaderRule = config.module.rules.find(rule => rule.test && /svg/.test(rule.test.toString()))
+
+  if (!imageLoaderRule) {
+    logger.error('Could not modify image loader rule!')
+    return
+  }
+  // from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203
+  imageLoaderRule.test = /\.(png|jpe?g|gif|webp)$/
+
+  config.module.rules.push({
+    test: /\.svg$/,
+    loader: 'vue-svg-loader'
+  })
+}
+
+module.exports.meta = require('../package.json')

package.json

@@ -0,0 +1,88 @@
+{
+  "name": "nuxt-svg-loader",
+  "version": "0.0.1",
+  "description": "",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "Alexander Lichter <[email protected]>"
+    }
+  ],
+  "main": "lib/module.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Developmint/nuxt-svg-loader"
+  },
+  "bugs": {
+    "url": "https://github.com/Developmint/nuxt-svg-loader/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "nuxt --config-file test/fixture/configs/default.js",
+    "lint": "eslint lib test",
+    "test": "yarn run lint && jest",
+    "release": "standard-version && git push --follow-tags && npm publish",
+    "commitlint": "commitlint -e $GIT_PARAMS",
+    "coverage": "codecov"
+  },
+  "eslintIgnore": [
+    "lib/templates/*.*"
+  ],
+  "files": [
+    "lib"
+  ],
+  "keywords": [
+    "nuxtjs",
+    "nuxt",
+    "nuxt-module",
+    "svg",
+    "loader",
+    "svg-loader"
+  ],
+  "engines": {
+    "node": ">=8.0.0",
+    "npm": ">=5.0.0"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "collectCoverage": true,
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/test/fixture"
+    ],
+    "forceExit": true
+  },
+  "dependencies": {
+    "consola": "^1.4.4",
+    "vue-svg-loader": "^0.11.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^6.1.3",
+    "@commitlint/config-conventional": "^6.1.3",
+    "@nuxtjs/eslint-config": "^0.0.1",
+    "babel-eslint": "^10.0.1",
+    "codecov": "^3.1.0",
+    "eslint": "^5.7.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jest": "^21.24.1",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.0.0-beta.3",
+    "get-port": "^4.0.0",
+    "husky": "^1.0.0-rc.1",
+    "jest": "^23.6.0",
+    "jsdom": "^12.2.0",
+    "nuxt": "^2.2.0",
+    "standard-version": "^4.4.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn run lint",
+      "commit-msg": "yarn run commitlint"
+    }
+  }
+}

test/__snapshots__/module.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ssr correctly register SVG loader and load SVG correctly 1`] = `
+"<!doctype html>
+<html data-n-head-ssr data-n-head=\\"\\">
+  <head>
+    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"fd547dac:0\\">
+.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;transition:width .2s,opacity .4s;opacity:1;background-color:#efc14e;z-index:999999
+}</style>
+  </head>
+  <body data-n-head=\\"\\">
+    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><div class=\\"nuxt-progress\\" style=\\"width:0%;height:2px;background-color:black;opacity:0;\\"></div><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/687e6be1d38a624eb82e.js\\" defer></script><script src=\\"/_nuxt/b56a2d15b853e7513d21.js\\" defer></script><script src=\\"/_nuxt/f338aafc6d9996bc3a8d.js\\" defer></script><script src=\\"/_nuxt/c34084ccf58500f72ab8.js\\" defer></script>
+  </body>
+</html>
+"
+`;
+
+exports[`ssr honor custom build.extend function 1`] = `
+"<!doctype html>
+<html data-n-head-ssr data-n-head=\\"\\">
+  <head>
+    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"fd547dac:0\\">
+.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;transition:width .2s,opacity .4s;opacity:1;background-color:#efc14e;z-index:999999
+}</style>
+  </head>
+  <body data-n-head=\\"\\">
+    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><div class=\\"nuxt-progress\\" style=\\"width:0%;height:2px;background-color:black;opacity:0;\\"></div><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/687e6be1d38a624eb82e.js\\" defer></script><script src=\\"/_nuxt/b56a2d15b853e7513d21.js\\" defer></script><script src=\\"/_nuxt/f338aafc6d9996bc3a8d.js\\" defer></script><script src=\\"/_nuxt/c34084ccf58500f72ab8.js\\" defer></script>
+  </body>
+</html>
+"
+`;

test/fixture/components/Nuxt.svg

@@ -0,0 +1,11 @@
+const { resolve } = require('path')
+
+module.exports = {
+  dev: false,
+  rootDir: resolve(__dirname, '../../../'),
+  srcDir: resolve(__dirname, '../'),
+  render: {
+    resourceHints: false
+  },
+  modules: ['@@']
+}

test/fixture/configs/default.js

@@ -0,0 +1,11 @@
+const { resolve } = require('path')
+
+module.exports = {
+  dev: false,
+  rootDir: resolve(__dirname, '../../../'),
+  srcDir: resolve(__dirname, '../'),
+  render: {
+    resourceHints: false
+  },
+  modules: ['@@', '@/modules/error'],
+}

test/fixture/configs/error-without-image-loader-rule.js

@@ -0,0 +1,16 @@
+const { resolve } = require('path')
+const consola = require('consola')
+module.exports = {
+  dev: false,
+  rootDir: resolve(__dirname, '../../../'),
+  srcDir: resolve(__dirname, '../'),
+  render: {
+    resourceHints: false
+  },
+  modules: ['@@'],
+  build: {
+    extend() {
+      consola.log('Build fn')
+    }
+  }
+}

test/fixture/configs/with-extend-fn.js

@@ -0,0 +1,11 @@
+module.exports = function () {
+  const oldExtendFunction = this.options.build.extend
+
+  this.options.build.extend = (config, options) => {
+    const imageLoaderRule = config.module.rules.find(rule => rule.test && /svg/.test(rule.test.toString()))
+    imageLoaderRule.test = /^$/
+    if (oldExtendFunction) {
+      oldExtendFunction(config, options)
+    }
+  }
+}

test/fixture/modules/error.js

@@ -0,0 +1,12 @@
+<template>
+  <nuxt-logo/>
+</template>
+
+<script>
+import NuxtLogo from '../components/Nuxt.svg'
+export default {
+  components: {
+    NuxtLogo
+  }
+}
+</script>