Rewrite Readme, add tests, add webpack 4 support

.gitignore

@@ -1,4 +1,24 @@
+# Editors
+.idea
+.vscode
+
+# Node / Yarn / Npm
 node_modules
+npm-debug.log*
+yarn.lock
+package-lock.json
+
+# Logs and Temporary files
+.tmp
+logs
 *.log
+
+# MacOS
 .DS_Store
-bundle.js
+.AppleDouble
+.LSOverride
+Icon
+._*
+
+# Misc
+coverage

README.md

@@ -1,48 +1,74 @@
 # glslify-loader
 
-[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)
-
 [glslify](http://github.com/stackgl/glslify) loader module for [webpack](http://webpack.github.io/).
 
 ## Installation
+```sh
+npm install glslify-loader
+```
 
-Generally, you'll want to use this alongside webpack's
-`raw-loader` module:
-
-``` bash
-npm install --save glslify-loader raw-loader
+Generally, you'll want to use this alongside webpack's [raw-loader](https://github.com/webpack-contrib/raw-loader) module:
+```sh
+npm install raw-loader
 ```
 
 ## Usage
 
-[![NPM](https://nodei.co/npm/glslify-loader.png)](https://nodei.co/npm/glslify-loader/)
+[Documentation: Using Loaders in Webpack](https://webpack.js.org/concepts/loaders/#configuration)
 
-[Documentation: Using Loaders](http://webpack.github.io/docs/using-loaders.html)
+##### Configuration file
 
-Once installed, you should be able to require your shaders
-like so to have them bundled at build time:
-
-``` javascript
-var source = require('glslify!raw!./my-shader.glsl')
+```js
+module.exports = {
+  rules: [
+    {
+      test: /\.(glsl|vs|fs|vert|frag)$/,
+      exclude: /node_modules/,
+      use: [
+        'raw-loader',
+        'glslify-loader'
+      ]
+    }
+  ]
+}
 ```
 
-### Configuration
+##### Inline
+
+```js
+// Using require
+const source = require('raw-loader!glslify-loader!./my-shader.glsl')
 
-Alternatively, you may apply these loaders automatically
-to all `.glsl`, `.frag` and `.vert` files by adding some
-additional configuration:
+// Using ES6 import statement
+import source from 'raw-loader!glslify-loader!./my-shader.glsl'
+```
 
-``` javascript
+##### Speficy source transforms
+See [Glslify Source Transforms](https://github.com/glslify/glslify#source-transforms) for details.
+
+```js
 module.exports = {
-  module: {
-    loaders: [
-      { test: /\.(glsl|frag|vert)$/, loader: 'raw', exclude: /node_modules/ },
-      { test: /\.(glsl|frag|vert)$/, loader: 'glslify', exclude: /node_modules/ }
-    ]
-  }
+  rules: [
+    {
+      test: /\.(glsl|frag|vert)$/,
+      exclude: /node_modules/,
+      use: [
+        'raw-loader',
+        {
+          loader: 'glslify-loader'
+          options: {
+            transform: [
+              ['glslify-hex', { 'option-1': true, 'option-2': 42 }]
+            ]
+          }
+        }
+      ]
+    }
+  ]
 }
 ```
 
+
 ## Contributing
 
 See [stackgl/contributing](https://github.com/stackgl/contributing) for details.

glslify-loader.js

@@ -0,0 +1,60 @@
+const path = require('path')
+const loaderUtils = require('loader-utils')
+const resolve = require('resolve')
+const deps = require('glslify-deps')
+const bundle = require('glslify-bundle')
+
+module.exports = function glslifyLoader (content) {
+  this.cacheable && this.cacheable()
+
+  const depper = deps()
+  const callback = this.async()
+
+  // Setup options
+  const options = Object.assign({
+    basedir: path.dirname(this.resourcePath),
+    transform: []
+  }, loaderUtils.getOptions(this))
+
+  // Handle transforms from options
+  const transforms = Array.isArray(options.transform) ? options.transform : []
+  const postTransforms = []
+  transforms.forEach(transform => {
+    if (!Array.isArray(transform)) transform = [String(transform)]
+    const name = transform[0]
+    const opts = transform[1] || {}
+    // Keep post-transforms for later
+    if (opts.post) postTransforms.push({ name, opts })
+    else depper.transform(name, opts)
+  })
+
+  // Build the dependency graph
+  depper.inline(content, options.basedir, (err, tree) => {
+    if (err) return error(err)
+    // Make webpack watch each subdependencies
+    tree && tree.forEach(file => !file.entry && this.addDependency(file.file))
+    // Bundle the glsl output
+    const output = String(bundle(tree))
+    // Start applying post transforms
+    nextPostTransform(null, output)
+  })
+
+  // Iterate over each post transforms
+  function nextPostTransform (err, output) {
+    if (err) return error(err)
+    const transform = postTransforms.shift()
+    if (!transform) return done(output)
+    resolve(transform.name, { basedir: options.basedir }, (err, target) => {
+      if (err) return error(err)
+      require(target)(null, output, transform.opts, nextPostTransform)
+    })
+  }
+
+  function error (err) {
+    callback(err, null)
+  }
+
+  function done (output) {
+    callback(null, output)
+  }
+}