Add isSupported property

Author: flekschas

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Next
 
+## v1.3.2
+
+- Add `scatterplot.isSupported` and `renderer.isSupported` as read-only properties to expose if all GL extensions are supported and enabled in the user's browser (#90)
+- Add `checkSupport()` as a globally exported function for users to check if their browser supports and has enabled all required GL extensions (#90)
+
 ## v1.3.1
 
 - Add a missing `select` event name to the type definition (#87)

src/index.js

@@ -2981,6 +2981,9 @@ const createScatterplot = (
   init();
 
   return {
+    get isSupported() {
+      return renderer.isSupported;
+    },
     clear: withDraw(clear),
     createTextureFromUrl: (/** @type {string} */ url) =>
       createTextureFromUrl(renderer.regl, url),
@@ -3004,3 +3007,5 @@ const createScatterplot = (
 export default createScatterplot;
 
 export { createRegl, createRenderer, createTextureFromUrl };
+
+export { checkReglExtensions as checkSupport } from './utils';

src/renderer.js

@@ -8,13 +8,13 @@ export const createRenderer = (options = {}) => {
     gamma = DEFAULT_GAMMA,
   } = options;
 
-  checkReglExtensions(regl);
-
   // Same as regl ||= createRegl(canvas) but avoids having to rely on
   // https://babeljs.io/docs/en/babel-plugin-proposal-logical-assignment-operators
   // eslint-disable-next-line no-unused-expressions
   regl || (regl = createRegl(canvas));
 
+  const isSupportingAllGlExtensions = checkReglExtensions(regl);
+
   const fboRes = [canvas.width, canvas.height];
   const fbo = regl.framebuffer({
     width: fboRes[0],
@@ -167,6 +167,9 @@ export const createRenderer = (options = {}) => {
     set gamma(newGamma) {
       gamma = +newGamma;
     },
+    get isSupported() {
+      return isSupportingAllGlExtensions;
+    },
     render,
     onFrame,
     refresh,

tests/index.js

@@ -12,7 +12,9 @@ import createScatterplot, {
   createRegl,
   createRenderer,
   createTextureFromUrl,
+  checkSupport,
 } from '../src';
+
 import {
   DEFAULT_COLOR_NORMAL,
   DEFAULT_COLOR_ACTIVE,
@@ -1864,6 +1866,31 @@ test('hover() with columnar data', async (t) => {
   scatterplot.destroy();
 });
 
+test('isSupported', (t) => {
+  const scatterplot = createScatterplot({ canvas: createCanvas() });
+  const renderer = scatterplot.get('renderer');
+
+  t.ok(
+    Object.prototype.hasOwnProperty.call(scatterplot, 'isSupported'),
+    'scatter plot instance should have `isSupported` property'
+  );
+
+  t.ok(
+    Object.prototype.hasOwnProperty.call(renderer, 'isSupported'),
+    'renderer instance should have `isSupported` property'
+  );
+
+  t.ok(
+    scatterplot.isSupported === true || scatterplot.isSupported === false,
+    '`isSupported` should return a Boolean value'
+  );
+
+  t.ok(
+    renderer.isSupported === true || renderer.isSupported === false,
+    '`isSupported` should return a Boolean value'
+  );
+});
+
 /* --------------------------------- Utils ---------------------------------- */
 
 test('isNormFloatArray()', async (t) => {
@@ -1949,3 +1976,10 @@ test('toRgba()', async (t) => {
     'should leave normalized RGBA unchanged'
   );
 });
+
+test('checkSupport()', (t) => {
+  t.ok(
+    checkSupport() === true || checkSupport() === false,
+    'should return a Boolean value'
+  );
+});