refactor: move to nuxt-community and improvements

.circleci/config.yml

@@ -0,0 +1,38 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node
+    steps:
+      # Checkout repository
+      - checkout
+
+      # Restore cache
+      - restore_cache:
+          key: yarn-cache-{{ checksum "yarn.lock" }}
+
+      # Install dependencies
+      - run:
+          name: Install Dependencies
+          command: NODE_ENV=dev yarn
+
+      # Keep cache
+      - save_cache:
+          key: yarn-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - "node_modules"
+
+      # Lint
+      - run:
+          name: Lint
+          command: yarn lint
+
+      # Tests
+      - run:
+          name: Tests
+          command: yarn jest
+
+      # Coverage
+      - run:
+          name: Coverage
+          command: yarn codecov

.editorconfig

@@ -1,9 +1,13 @@
+# editorconfig.org
 root = true
 
 [*]
-charset = utf-8
-indent_style = space
 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

.eslintignore

@@ -0,0 +1,5 @@
+# Common
+node_modules
+dist
+.nuxt
+coverage

.eslintrc.js

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

.gitignore

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

README.md

@@ -1,25 +1,50 @@
-# nuxt-svg [![npm version](https://badge.fury.io/js/nuxt-svg.svg)](https://badge.fury.io/js/nuxt-svg) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+# @nuxtjs/svg
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Circle CI][circle-ci-src]][circle-ci-href]
+[![Codecov][codecov-src]][codecov-href]
+[![License][license-src]][license-href]
 
 _Super simple svg loading module for Nuxt.js_
 
+[📖 **Release Notes**](./CHANGELOG.md)
+
 ## Introduction
 
-`nuxt-svg` allows you to import `.svg` files in multiple ways depending on the [resource query](https://webpack.js.org/configuration/module/#rule-resourcequery) you provide. Currently, this allows you to do the following:
+SVG module for Nuxt.js, allows you to import `.svg` files in multiple ways depending on the [resource query](https://webpack.js.org/configuration/module/#rule-resourcequery) you provide. Currently, this allows you to do the following:
 
 - `file.svg` - normal import using `file-loader`
 - `file.svg?data` - base64 data url import using `url-loader`
 - `file.svg?inline` - inline import using `vue-svg-loader`
 
 ## Installation
 
+Using Yarn:
+/**
+ * This is the original RegExp cloned from the original Nuxt.js configuration
+ * files, with only the search for ".svg" files removed. Keep tabs on this in
+ * case the core decides to add additional qualifiers to the pattern.
+ */
+const ORIGINAL_TEST = /\.(png|jpe?g|gif|svg|webp)$/;
+const REPLACEMENT_TEST = /\.(png|jpe?g|gif|webp)$/;
+
+```console
+yarn add @nuxtjs/svg
+```
+
+Using NPM:
+
 ```console
-npm install nuxt-svg
+npm install @nuxtjs/svg
 ```
 
 ```javascript
 // nuxt.config.js
 export default {
-  modules: ["nuxt-svg"]
+  modules: [
+    '@nuxtjs/svg'
+  ]
 };
 ```
 
@@ -102,3 +127,25 @@ So when using the `?data` query, it will _always_ use `url-loader` regardless of
 As this loader attempts to abstract webpack configuration from the process and make it easier to use multiple svg loaders, any contributions that add more svg loader methods to the configuration will be accepted wholeheartedly!
 
 Also I'll be actively maintaining this project so if you'd rather just make a request for a loader or a feature; I'd be happy to take a look and see what I can do myself :)
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) Sam Holmes
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/svg/latest.svg?style=flat-square
+[npm-version-href]: https://npmjs.com/package/@nuxtjs/svg
+
+[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/svg.svg?style=flat-square
+[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/svg
+
+[circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/svg-module.svg?style=flat-square
+[circle-ci-href]: https://circleci.com/gh/nuxt-community/svg-module
+
+[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/svg-module.svg?style=flat-square
+[codecov-href]: https://codecov.io/gh/nuxt-community/svg-module
+
+[license-src]: https://img.shields.io/npm/l/@nuxtjs/svg.svg?style=flat-square
+[license-href]: https://npmjs.com/package/@nuxtjs/svg

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env', {
+        targets: {
+          esmodules: true
+        }
+      }
+    ]
+  ]
+}

example/nuxt.config.js

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

example/pages/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h3>External Import:</h3>
+    <img src="~assets/nuxt.svg">
+
+    <h3>Inline base64:</h3>
+    <img src="~assets/nuxt.svg?data">
+
+    <h3>Inline Components:</h3>
+    <NuxtLogo />
+  </div>
+</template>
+
+<script>
+import NuxtLogo from '~/assets/nuxt.svg?inline'
+
+export default {
+  components: {
+    NuxtLogo
+  }
+}
+</script>
+</script>

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  testEnvironment: 'node',
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'lib/**/*.js',
+    '!lib/plugin.js'
+  ],
+  moduleNameMapper: {
+    '^~/(.*)$': '<rootDir>/lib/$1',
+    '^~~$': '<rootDir>',
+    '^@@$': '<rootDir>',
+    '^@/(.*)$': '<rootDir>/lib/$1'
+  },
+  transform: {
+    '^.+\\.js$': 'babel-jest'
+  }
+}

module.js → lib/module.js

@@ -3,11 +3,11 @@
  * files, with only the search for ".svg" files removed. Keep tabs on this in
  * case the core decides to add additional qualifiers to the pattern.
  */
-const ORIGINAL_TEST = /\.(png|jpe?g|gif|svg|webp)$/;
-const REPLACEMENT_TEST = /\.(png|jpe?g|gif|webp)$/;
+const ORIGINAL_TEST = /\.(png|jpe?g|gif|svg|webp)$/
+const REPLACEMENT_TEST = /\.(png|jpe?g|gif|webp)$/
 
-export default function Module(options) {
-  this.extendBuild(setup);
+module.exports = function (options) {
+  this.extendBuild(setup)
 }
 
 /**
@@ -16,39 +16,35 @@ export default function Module(options) {
  *
  * @param config The webpack configuration object to extend
  */
-function setup(config) {
-  const rules = config.module.rules;
+function setup (config) {
+  const rules = config.module.rules
 
   // Remove any original svg rules
-  const svgRules = rules.filter(rule => rule.test.test(".svg"));
+  const svgRules = rules.filter(rule => rule.test.test('.svg'))
 
-  svgRules.forEach(rule => {
+  for (const rule of svgRules) {
     if (
       rule.test.source !== ORIGINAL_TEST.source &&
       rule.test.source !== REPLACEMENT_TEST.source
-    )
-      throw "nuxt-svg: Unexpected '.svg' rule in the webpack configuration";
-
-    rule.test = REPLACEMENT_TEST;
-  });
+    ) {
+      throw new Error("nuxt-svg: Unexpected '.svg' rule in the webpack configuration")
+    }
+    rule.test = REPLACEMENT_TEST
+  }
 
   const vueSvgLoader = [
     {
-      loader: "vue-svg-loader",
+      loader: 'vue-svg-loader',
       options: {
         svgo: false
       }
     }
-  ];
+  ]
 
-  if (config.name === "client") {
-    vueSvgLoader.unshift({
-      loader: "babel-loader",
-      options: {
-        presets: ["@nuxt/babel-preset-app"],
-        plugins: ["@babel/plugin-proposal-object-rest-spread"]
-      }
-    });
+  if (config.name === 'client') {
+    const jsxRule = config.module.rules.find(r => r.test.test('.jsx'))
+    const babelLoader = jsxRule.use[jsxRule.use.length - 1]
+    vueSvgLoader.unshift(babelLoader)
   }
 
   // Create the custom SVG rule
@@ -61,15 +57,15 @@ function setup(config) {
       },
       {
         resourceQuery: /data/,
-        loader: "url-loader"
+        loader: 'url-loader'
       },
       {
-        loader: "file-loader" // By default, always use file-loader
+        loader: 'file-loader' // By default, always use file-loader
       }
     ]
-  };
+  }
 
-  rules.push(rule); // Actually add the rule
+  rules.push(rule) // Actually add the rule
 }
 
-module.exports.meta = require("./package.json");
+module.exports.meta = require('../package.json')