Add GLSL assets support (#831)

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();
+}

test/integration/glsl/local.vert

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