Add GLSL assets support (#831)

Author: vladbat00

package.json

@@ -71,6 +71,8 @@
     "coffeescript": "^2.0.3",
     "cross-env": "^5.1.1",
     "eslint": "^4.13.0",
+    "glslify-bundle": "^5.0.0",
+    "glslify-deps": "^1.3.0",
     "graphql": "^0.11.7",
     "graphql-tag": "^2.6.0",
     "husky": "^0.14.3",

src/Parser.js

@@ -38,6 +38,10 @@ class Parser {
 
     this.registerExtension('webmanifest', './assets/WebManifestAsset');
 
+    this.registerExtension('glsl', './assets/GLSLAsset');
+    this.registerExtension('vert', './assets/GLSLAsset');
+    this.registerExtension('frag', './assets/GLSLAsset');
+
     let extensions = options.extensions || {};
     for (let ext in extensions) {
       this.registerExtension(ext, extensions[ext]);

src/Resolver.js

@@ -41,7 +41,10 @@ class Resolver {
     }
 
     // Get file extensions to search
-    let extensions = Object.keys(this.options.extensions);
+    let extensions = Array.isArray(this.options.extensions)
+      ? this.options.extensions.slice()
+      : Object.keys(this.options.extensions);
+
     if (parent) {
       // parent's extension given high priority
       const parentExt = path.extname(parent);

src/assets/GLSLAsset.js

@@ -0,0 +1,62 @@
+const Asset = require('../Asset');
+const localRequire = require('../utils/localRequire');
+const path = require('path');
+const promisify = require('../utils/promisify');
+const Resolver = require('../Resolver');
+
+class GLSLAsset extends Asset {
+  constructor(name, pkg, options) {
+    super(name, pkg, options);
+    this.type = 'js';
+  }
+
+  async parse() {
+    const glslifyDeps = await localRequire('glslify-deps', this.name);
+
+    // Use the Parcel resolver rather than the default glslify one.
+    // This adds support for parcel features like alises, and tilde paths.
+    const resolver = new Resolver({
+      extensions: ['.glsl', '.vert', '.frag'],
+      rootDir: this.options.rootDir
+    });
+
+    // Parse and collect dependencies with glslify-deps
+    let cwd = path.dirname(this.name);
+    let depper = glslifyDeps({
+      cwd,
+      resolve: async (target, opts, next) => {
+        try {
+          let res = await resolver.resolve(
+            target,
+            path.join(opts.basedir, 'index')
+          );
+          next(null, res.path);
+        } catch (err) {
+          next(err);
+        }
+      }
+    });
+
+    return await promisify(depper.inline.bind(depper))(this.contents, cwd);
+  }
+
+  collectDependencies() {
+    for (let dep of this.ast) {
+      if (!dep.entry) {
+        this.addDependency(dep.file, {includedInParent: true});
+      }
+    }
+  }
+
+  async generate() {
+    // Generate the bundled glsl file
+    const glslifyBundle = await localRequire('glslify-bundle', this.name);
+    let glsl = glslifyBundle(this.ast);
+
+    return {
+      js: `module.exports=${JSON.stringify(glsl)};`
+    };
+  }
+}
+
+module.exports = GLSLAsset;

test/glsl.js

@@ -0,0 +1,32 @@
+const assert = require('assert');
+const fs = require('fs');
+const {bundle, run, assertBundleTree} = require('./utils');
+
+describe('glsl', function() {
+  it('should support requiring GLSL files via glslify', async function() {
+    let b = await bundle(__dirname + '/integration/glsl/index.js');
+
+    assertBundleTree(b, {
+      name: 'index.js',
+      assets: ['index.js', 'local.glsl', 'local.vert', 'local.frag'],
+      childBundles: [
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let shader = fs.readFileSync(
+      __dirname + '/integration/glsl/compiled.glsl',
+      'utf8'
+    );
+
+    let output = run(b);
+    assert.equal(typeof output, 'function');
+    assert.ok(
+      output().reduce((acc, requiredShader) => {
+        return acc && shader === requiredShader;
+      }, true)
+    );
+  });
+});

test/integration/glsl/compiled.glsl

@@ -0,0 +1,11 @@
+#version 300 es
+
+void someUniqFunction() {
+}
+
+precision mediump float;
+#define GLSLIFY 1
+
+void main() {
+  someUniqFunction();
+}

test/integration/glsl/index.js

@@ -0,0 +1,9 @@
+const shaders = [
+  require('./local.glsl'),
+  require('./local.vert'),
+  require('./local.frag'),
+];
+
+module.exports = function () {
+  return shaders;
+};

test/integration/glsl/lib.glsl

@@ -0,0 +1,4 @@
+void someUniqFunction() {
+}
+
+#pragma glslify: export(someUniqFunction)

test/integration/glsl/local.frag

@@ -0,0 +1,9 @@
+#version 300 es
+
+#pragma glslify: test = require('./lib')
+
+precision mediump float;
+
+void main() {
+  test();
+}

test/integration/glsl/local.glsl

@@ -0,0 +1,9 @@
+#version 300 es
+
+#pragma glslify: test = require('./lib.glsl')
+
+precision mediump float;
+
+void main() {
+  test();
+}