Allowing style-spec to work as a separate package in browser

[lamuertepeluda]

So far it is impossible to import the style-spec package as a standalone module. Typical use case is using the featureFilter library in order to filter some GeoJSON data outside a map, e.g. in a list or some other component, using the same powerful filter syntax.
From my investigations, this is caused by the way the style-spec package is built using browserify.

Expected behavior

Typical example of importing featureFilter (should be the same for other modules of style-spec), for instance using webpack or similar bundlers.

// CommonJS/RequireJS
const featureFilter = require('@mapbox/mapbox-gl-style-spec').featureFilter;
// ES6 import
import { featureFilter } from '@mapbox/mapbox-gl-style-spec';

For usage see #5862 or the featureFilter library README

Actual Behavior

This sadly ends up with this error (current master branch):

Uncaught Error: Cannot find module 'util'
    at s (index.js?fd90:1)
    at eval (index.js?fd90:1)
    at Object.4.util (index.js?fd90:461)
    at s (index.js?fd90:1)
    at eval (index.js?fd90:1)
    at Object.52../composite (index.js?fd90:11034)
    at s (index.js?fd90:1)
    at e (index.js?fd90:1)
    at eval (index.js?fd90:1)
    at eval (index.js?fd90:1)

Suggested solution

I recently found out (see #5502 ) that changing the build script flags in the package.json file of style-spec resolves this issue for the browser, but I'm not able to tell if it could introduce side-effects for Node.js.

-    "build": "../../node_modules/.bin/browserify style-spec.js --no-builtins --insert-global-vars=\"__filename,__dirname\" --standalone=mapboxGlStyleSpecification | ../../node_modules/.bin/derequire > dist/index.js",
+    "build": "../../node_modules/.bin/browserify style-spec.js --standalone=mapboxGlStyleSpecification | ../../node_modules/.bin/derequire > dist/index.js",

This is the way I tried it in my application and now it works as expected.

cd <path-to/style-spec-source>
npm run build && npm pack
cp mapbox-mapbox-gl-style-spec-10.1.0.tgz ../../../style-spec-build
z my-project
npm i <path-to/style-spec-source>/mapbox-mapbox-gl-style-spec-10.1.0.tgz

Hope you guys can fix this behavior using my suggested solution and and release a 10.1.1 package soon... 😄