Repository: Developmint/nuxt-svg-loader
Branch: master
Commit: 7e3a18d10091
Files: 23
Total size: 21.7 KB

Directory structure:
gitextract_eibwddy1/

├── .editorconfig
├── .eslintrc.js
├── .github/
│   └── FUNDING.yml
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── commitlint.config.js
├── lib/
│   └── module.js
├── package.json
├── renovate.json
└── test/
    ├── __snapshots__/
    │   └── module.test.js.snap
    ├── fixture/
    │   ├── configs/
    │   │   ├── default.js
    │   │   ├── error-without-image-loader-rule.js
    │   │   ├── with-extend-fn.js
    │   │   └── with-options.js
    │   ├── modules/
    │   │   ├── error.js
    │   │   └── main.css
    │   └── pages/
    │       ├── background-image.vue
    │       ├── index.vue
    │       └── two.vue
    └── module.test.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
# 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


================================================
FILE: .eslintrc.js
================================================
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  extends: [
    '@nuxtjs'
  ],
  rules: {
    'vue/attribute-hyphenation': ['error', 'always', {
      ignore: ['viewBox']
    }]
  }
}


================================================
FILE: .github/FUNDING.yml
================================================
github: [manniL]
custom: ['https://www.lichter.io/support-me/']


================================================
FILE: .gitignore
================================================
node_modules
*.iml
.idea
*.log*
.nuxt
.vscode
.DS_STORE
coverage
dist

================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "8"
- "9"
- "10"
cache:
  yarn: true
  directories:
  - node_modules
install:
- yarn
script:
- yarn test
after_success:
- yarn coverage


================================================
FILE: CHANGELOG.md
================================================
# Change Log

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

<a name="1.2.0"></a>
# [1.2.0](https://github.com/Developmint/nuxt-svg-loader/compare/v1.0.1...v1.2.0) (2020-01-22)


### Bug Fixes

* revert df4be5 to fix regex ([465298a](https://github.com/Developmint/nuxt-svg-loader/commit/465298a))
* use image name function when using inline query ([c90a8ed](https://github.com/Developmint/nuxt-svg-loader/commit/c90a8ed))


### Features

* proper loading svg used as background url ([#50](https://github.com/Developmint/nuxt-svg-loader/issues/50)) ([9df6300](https://github.com/Developmint/nuxt-svg-loader/commit/9df6300))



<a name="1.1.0"></a>
# [1.1.0](https://github.com/Developmint/nuxt-svg-loader/compare/v1.0.1...v1.1.0) (2020-01-22)


### Bug Fixes

* use image name function when using inline query ([c90a8ed](https://github.com/Developmint/nuxt-svg-loader/commit/c90a8ed))


### Features

* proper loading svg used as background url ([#50](https://github.com/Developmint/nuxt-svg-loader/issues/50)) ([9df6300](https://github.com/Developmint/nuxt-svg-loader/commit/9df6300))



<a name="1.0.1"></a>
## [1.0.1](https://github.com/Developmint/nuxt-svg-loader/compare/v1.0.0...v1.0.1) (2019-01-11)


### Bug Fixes

* re-enable lazy-loading capabilities ([#28](https://github.com/Developmint/nuxt-svg-loader/issues/28)) ([e7928ab](https://github.com/Developmint/nuxt-svg-loader/commit/e7928ab))



<a name="1.0.0"></a>
# [1.0.0](https://github.com/Developmint/nuxt-svg-loader/compare/v0.1.0...v1.0.0) (2019-01-09)


### Bug Fixes

* check if options is a thing ([ec9999f](https://github.com/Developmint/nuxt-svg-loader/commit/ec9999f))


### Features

* replaced vue-svg-loader with svg-to-vue-component ([#19](https://github.com/Developmint/nuxt-svg-loader/issues/19)) ([6061109](https://github.com/Developmint/nuxt-svg-loader/commit/6061109))
* use default options from svg-to-vue and add svgo backwards compat ([84a84b7](https://github.com/Developmint/nuxt-svg-loader/commit/84a84b7))



<a name="0.1.0"></a>
# [0.1.0](https://github.com/Developmint/nuxt-svg-loader/compare/v0.0.1...v0.1.0) (2018-11-05)


### Features

* pass custom loader options if needed ([071edce](https://github.com/Developmint/nuxt-svg-loader/commit/071edce))



<a name="0.0.1"></a>
## 0.0.1 (2018-10-14)


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) Alexander Lichter <github@lichter.io>

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.


================================================
FILE: README.md
================================================
# 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.com/Developmint/nuxt-svg-loader.svg?branch=master)](https://travis-ci.com/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)
 [![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://thanks.lichter.io/)

>

[📖 **Release Notes**](./CHANGELOG.md)

## Features

* Full support of SVGs as components. Import them like your Vue SFCs
* Use Vue bindings as you'd do it with normal components
* Built on top of [svg-to-vue-component](https://github.com/egoist/svg-to-vue-component)
* Nuxt 2 (and only Nuxt 2) support
* Fully tested!

## Demo

A live demo is available through the [CodeSandBox](https://codesandbox.io/s/github/Developmint/nuxt-svg-loader/tree/master) of the repo.

## Setup

- Add `nuxt-svg-loader` as a dependency using yarn or npm to your project
- Add `nuxt-svg-loader` to `modules` section of `nuxt.config.js`

```js
{
  modules: [
    'nuxt-svg-loader',
  ]
}
```

- Now you can use your svg files like regular Vue components
- You can use inline svg as well by adding `?inline` at the end of the file path
```
<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
    <a href="https://github.com/svg/svgo">
      <SVGOLogo />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackLogo />
      webpack
    </a>
    <!-- Inline svg -->
    <a class="with-background-svg" href="https://github.com/webpack/webpack">
      webpack
    </a>
    <a href="https://github.com/webpack/webpack">
      <img src="../components/NuxtTwo.svg?inline">
      webpack>
    </a>
  </nav>
</template>
<script>
import VueLogo from '@/assets/svg/vue.svg';
import SVGOLogo from '@/assets/svg/svgo.svg';
import WebpackLogo from '@/assets/svg/webpack.svg';

export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOLogo,
    WebpackLogo,
  }
};
</script>
<style>
.with-background-svg {
  background: url('@/assets/svg/vue.svg?inline')
}
</style>
```

- No more options are needed. It'll simply work

## Configuration

The plugin will work seamlessly out of the box.
It will also include SVGO defaults to avoid collisions between your optimized SVG files!
 
If you want to configure the underlying loader (or SVGO), you can do that easily as well.
(All options available [here](https://github.com/egoist/svg-to-vue-component#loader-options))

```js
// file: nuxt.config.js

export default {
  // ...
  // Your loader options as svgLoader object
  svgLoader: {
    svgoConfig: {
      plugins: [
        { prefixIds: false } // Disables prefixing for SVG IDs
      ]
    }
  }
}
```

## Migrating from 0.x

1. Update the deps (of course!)
2. Rename `svgo` to `svgoConfig`
3. If you used id prefixing manually before, you can delete the config:

```js
export default {
  svgLoader: {
    svgo: { //Rename to svgoConfig  
      plugins: [
        { prefixIds: true } // Delete that line (or the whole svgLoader object if you don't have any other configurations)
      ]
    }
  }
}
```

## How to fix Eslint auto lint error
If you turn on Eslint on save by server, you should exclude `.svg` files of `eslint-loader`.

Example:
```js
// nuxt.config.js
build: {
    extend(config, ctx) {
    // Run ESLint on save
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)|(\.svg$)/ /* <--- here */
      })
    }
  }
}
```

## 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


================================================
FILE: commitlint.config.js
================================================
module.exports = { extends: ['@commitlint/config-conventional'] }


================================================
FILE: lib/module.js
================================================
const logger = require('consola').withScope('nuxt-svg-loader')

export default function nuxtSvgLoader(moduleOptions) {
  const options = Object.assign({}, this.options.svgLoader, moduleOptions)

  if (options && options.svgo && !options.svgoConfig) {
    options.svgoConfig = options.svgo
  }

  const fileName = this.nuxt.options.build.filenames.img(this.nuxt.options.dev)

  this.extendBuild(setupVueSvgLoader(options, fileName))
}

const svgRulePredicate = rule => rule.test && rule.test.test('.svg')

const setupVueSvgLoader = (options, fileName) => (config) => {
  // https://github.com/egoist/svg-to-vue-component#nuxtjs-2
  const imageLoaderRule = config.module.rules.find(svgRulePredicate)

  if (!imageLoaderRule) {
    logger.error('Could not modify image loader rule!')
    return
  }

  // Don't process .svg files in default image rule
  // from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203
  imageLoaderRule.test = /\.(png|jpe?g|gif|webp)$/

  // Add a new rule for .svg file
  config.module.rules.push({
    test: /\.svg$/,
    oneOf: [
      {
        resourceQuery: /inline/,
        use: {
            loader: "file-loader",
            options: {
              esModule: false,
              name: fileName
            },
        },
      },
      {
        use: [
          'vue-loader',
          {
            loader: 'svg-to-vue-component/loader',
            options
          }
        ]
      }
    ]
  })
}

module.exports.meta = require('../package.json')


================================================
FILE: package.json
================================================
{
  "name": "nuxt-svg-loader",
  "version": "1.2.0",
  "description": "",
  "license": "MIT",
  "contributors": [
    {
      "name": "Alexander Lichter <npm@lichter.io>"
    }
  ],
  "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 --detectOpenHandles",
    "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": "^2.3.2",
    "svg-to-vue-component": "^0.3.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^7.3.1",
    "@commitlint/config-conventional": "^7.3.1",
    "@nuxtjs/eslint-config": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "codecov": "^3.1.0",
    "eslint": "^5.12.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jest": "^22.1.3",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.1.0",
    "get-port": "^4.1.0",
    "husky": "^1.3.1",
    "jest": "^23.6.0",
    "jsdom": "^13.1.0",
    "nuxt-edge": "^2.4.0-25786640.3ebd6b70",
    "standard-version": "^4.4.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn run lint",
      "commit-msg": "yarn run commitlint"
    }
  }
}


================================================
FILE: renovate.json
================================================
{
  "extends": [
    "@nuxtjs"
  ]
}


================================================
FILE: test/__snapshots__/module.test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ssr correctly load SVG as background image 1`] = `
"<!doctype html>
<html data-n-head-ssr data-n-head=\\"\\">
  <head data-n-head=\\"\\">
    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style><style data-vue-ssr-id=\\"7bcfa2f0:0\\">h1{background:url(/_nuxt/img/a88f1f4.svg)}</style>
  </head>
  <body data-n-head=\\"\\">
    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><div><h1>-</h1> <h2>-</h2></div></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/background-image.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
  </body>
</html>
"
`;

exports[`ssr correctly load two lazy-loaded SVGs 1`] = `
"<!doctype html>
<html data-n-head-ssr data-n-head=\\"\\">
  <head data-n-head=\\"\\">
    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
  </head>
  <body data-n-head=\\"\\">
    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><div><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"Nuxt_svg__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> <svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><g id=\\"NuxtTwo_svg__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></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/two.js\\" defer></script><script src=\\"/_nuxt/7.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
  </body>
</html>
"
`;

exports[`ssr honor custom build.extend function 1`] = `
"<!doctype html>
<html data-n-head-ssr data-n-head=\\"\\">
  <head data-n-head=\\"\\">
    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
  </head>
  <body data-n-head=\\"\\">
    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"Nuxt_svg__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/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
  </body>
</html>
"
`;

exports[`ssr honor custom loader options 1`] = `
"<!doctype html>
<html data-n-head-ssr data-n-head=\\"\\">
  <head data-n-head=\\"\\">
    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
  </head>
  <body data-n-head=\\"\\">
    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"1 2 3 4\\" width=\\"100\\"><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/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
  </body>
</html>
"
`;


================================================
FILE: test/fixture/configs/default.js
================================================
const { resolve } = require('path')

module.exports = {
  rootDir: resolve(__dirname, '../../../'),
  srcDir: resolve(__dirname, '../'),
  render: {
    resourceHints: false
  },
  modules: ['@@'],
  build: {
    filenames: {
      app: '[name].js',
      chunk: '[name].js'
    }
  }
}


================================================
FILE: test/fixture/configs/error-without-image-loader-rule.js
================================================
const { resolve } = require('path')

module.exports = {
  rootDir: resolve(__dirname, '../../../'),
  srcDir: resolve(__dirname, '../'),
  render: {
    resourceHints: false
  },
  modules: ['@@', '@/modules/error'],
  build: {
    quiet: false,
    filenames: {
      app: '[name].js',
      chunk: '[name].js'
    }
  }
}


================================================
FILE: test/fixture/configs/with-extend-fn.js
================================================
const { resolve } = require('path')
const consola = require('consola')

module.exports = {
  rootDir: resolve(__dirname, '../../../'),
  srcDir: resolve(__dirname, '../'),
  render: {
    resourceHints: false
  },
  modules: ['@@'],
  build: {
    quiet: false,
    filenames: {
      app: '[name].js',
      chunk: '[name].js'
    },
    extend() {
      consola.fatal('Build fn')
    }
  }
}


================================================
FILE: test/fixture/configs/with-options.js
================================================
const { resolve } = require('path')

module.exports = {
  rootDir: resolve(__dirname, '../../../'),
  srcDir: resolve(__dirname, '../'),
  render: {
    resourceHints: false
  },
  modules: ['@@'],
  svgLoader: {
    svgo: {
      plugins: [
        { prefixIds: false }
      ]
    }
  },
  build: {
    filenames: {
      app: '[name].js',
      chunk: '[name].js'
    }
  }
}


================================================
FILE: test/fixture/modules/error.js
================================================
module.exports = function () {
  const svgRulePredicate = rule => rule.test && rule.test.test('.svg')
  this.extendBuild((config) => {
    const imageLoaderRule = config.module.rules.find(svgRulePredicate)
    imageLoaderRule.test = /^$/
  })
}


================================================
FILE: test/fixture/modules/main.css
================================================
h2 {
  background: url('../components/NuxtTwo.svg?inline')
}

================================================
FILE: test/fixture/pages/background-image.vue
================================================
<template>
  <div>
    <h1>-</h1>
    <h2>-</h2>
  </div>
</template>

<script>
import '../modules/main.css'
export default {
  loading: false,
}
</script>

<style>
h1 {
  background: url('../components/NuxtTwo.svg?inline')
}
</style>



================================================
FILE: test/fixture/pages/index.vue
================================================
<template>
  <nuxt-logo viewBox="1 2 3 4" width="100" />
</template>

<script>
import NuxtLogo from '../components/Nuxt.svg'
export default {
  loading: false,
  components: {
    NuxtLogo
  }
}
</script>


================================================
FILE: test/fixture/pages/two.vue
================================================
<template>
  <div>
    <nuxt-logo viewBox="1 2 3 4" width="100" />
    <nuxt-logo-two />
  </div>
</template>

<script>
export default {
  loading: false,
  components: {
    NuxtLogo: () => import('../components/Nuxt.svg'),
    NuxtLogoTwo: () => import('../components/NuxtTwo.svg')
  }
}
</script>


================================================
FILE: test/module.test.js
================================================
const consola = require('consola')
const getPort = require('get-port')
const { Nuxt, Builder } = require('nuxt-edge')

jest.setTimeout(60 * 1000)

let nuxt, port

describe('ssr', () => {
  beforeEach(() => {
    consola.mockTypes(() => jest.fn())
  })

  test('emit error when loader can\'t be registered', async () => {
    try {
      await setupNuxt(require('./fixture/configs/error-without-image-loader-rule'))
    } catch (e) {
      expect(e.message).toBe('Nuxt Build Error')
      return
    }
    Error('Never reach this state')
  })

  test('correctly load two lazy-loaded SVGs', async () => {
    const nuxt = await setupNuxt(require('./fixture/configs/default'))
    const { html } = await nuxt.renderRoute('/two')
    expect(html).toMatchSnapshot()
  })

  test('honor custom build.extend function', async () => {
    nuxt = await setupNuxt(require('./fixture/configs/with-extend-fn'))

    const messageInExtendFunction = 'Build fn'
    const consolaMessages = consola.fatal.mock.calls.map(c => c[0])
    expect(consolaMessages).toContain(messageInExtendFunction)

    const { html } = await nuxt.renderRoute('/')
    expect(html).toMatchSnapshot()
  })

  test('honor custom loader options', async () => {
    nuxt = await setupNuxt(require('./fixture/configs/with-options'))

    const { html } = await nuxt.renderRoute('/')
    expect(html).toMatchSnapshot()
  })

  test('correctly load SVG as background image', async () => {
    const nuxt = await setupNuxt(require('./fixture/configs/default'))
    const { html } = await nuxt.renderRoute('/background-image')
    expect(html).toMatchSnapshot()
  })

  afterEach(async () => {
    if (nuxt) {
      await nuxt.close()
    }
  })
})

const setupNuxt = async (config) => {
  const nuxt = new Nuxt(config)
  await new Builder(nuxt).build()
  port = await getPort()
  await nuxt.listen(port)

  return nuxt
}