Silence canvas source validation errors

src/source/canvas_source.js

@@ -116,7 +116,6 @@ class CanvasSource extends ImageSource {
                 this.options.canvas :
                 window.document.getElementById(this.options.canvas);
         }
-
         this.width = this.canvas.width;
         this.height = this.canvas.height;
 
@@ -220,7 +219,6 @@ class CanvasSource extends ImageSource {
     serialize(): Object {
         return {
             type: 'canvas',
-            canvas: this.canvas,
             coordinates: this.coordinates
         };
     }

src/style-spec/error/validation_error.js

@@ -1,17 +1,11 @@
 
 export default class ValidationError {
-    constructor(key, value, message) {
+    constructor(key, value, message, identifier) {
         this.message = (key ? `${key}: ` : '') + message;
+        if (identifier) this.identifier = identifier;
 
         if (value !== null && value !== undefined && value.__line__) {
             this.line = value.__line__;
         }
     }
 }
-
-export class ValidationWarning extends ValidationError {
-    constructor(key, value, message) {
-        super(key, value, message);
-        this.type = 'warning';
-    }
-}

src/style-spec/validate/validate_source.js

@@ -1,5 +1,5 @@
 
-import ValidationError, { ValidationWarning } from '../error/validation_error';
+import ValidationError from '../error/validation_error';
 import { unbundle } from '../util/unbundle_jsonlint';
 import validateObject from './validate_object';
 import validateEnum from './validate_enum';
@@ -65,14 +65,14 @@ export default function validateSource(options) {
         });
 
     case 'canvas':
-        errors.push(new ValidationWarning(key, null, `Please use runtime APIs to add canvas sources, rather than including them in stylesheets.`));
+        errors.push(new ValidationError(key, null, `Please use runtime APIs to add canvas sources, rather than including them in stylesheets.`, 'source.canvas'));
         return errors;
 
     default:
         return validateEnum({
             key: `${key}.type`,
             value: value.type,
-            valueSpec: {values: ['vector', 'raster', 'raster-dem', 'geojson', 'video', 'image', 'canvas']},
+            valueSpec: {values: ['vector', 'raster', 'raster-dem', 'geojson', 'video', 'image']},
             style: style,
             styleSpec: styleSpec
         });

src/style/style.js

@@ -15,7 +15,7 @@ import { getJSON, ResourceType } from '../util/ajax';
 import { isMapboxURL, normalizeStyleURL } from '../util/mapbox';
 import browser from '../util/browser';
 import Dispatcher from '../util/dispatcher';
-import { validateStyle, emitValidationErrors } from './validate_style';
+import { validateStyle, emitValidationErrors as _emitValidationErrors } from './validate_style';
 import {
     getType as getSourceType,
     setType as setSourceType
@@ -35,6 +35,11 @@ import PauseablePlacement from './pauseable_placement';
 import ZoomHistory from './zoom_history';
 import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index';
 
+// We're skipping validation errors with the `source.canvas` identifier in order
+// to continue to allow canvas sources to be added at runtime/updated in
+// smart setStyle (see https://github.com/mapbox/mapbox-gl-js/pull/6424):
+const emitValidationErrors = (evented, errors) => _emitValidationErrors(evented, errors, { 'source.canvas': true});
+
 import type Map from '../ui/map';
 import type Transform from '../geo/transform';
 import type {Source} from '../source/source';

src/style/validate_style.js

@@ -1,7 +1,6 @@
 // @flow
 import validateStyleMin from '../style-spec/validate_style.min';
-import { ErrorEvent, WarningEvent } from '../util/evented';
-import { ValidationWarning } from '../style-spec/error/validation_error';
+import { ErrorEvent } from '../util/evented';
 
 import type {Evented} from '../util/evented';
 
@@ -20,17 +19,14 @@ export const validateFilter = (validateStyleMin.filter: Validator);
 export const validatePaintProperty = (validateStyleMin.paintProperty: Validator);
 export const validateLayoutProperty = (validateStyleMin.layoutProperty: Validator);
 
-export function emitValidationErrors(emitter: Evented, errors: ?$ReadOnlyArray<{message: string}>): boolean {
+export function emitValidationErrors(emitter: Evented, errors: ?$ReadOnlyArray<{message: string}>, omit: ?{[string]: boolean}): boolean {
     let hasErrors = false;
     if (errors && errors.length) {
         for (const error of errors) {
-            const {message} = error;
-            if (error instanceof ValidationWarning) {
-                emitter.fire(new WarningEvent({warning: message}));
-            } else {
-                emitter.fire(new ErrorEvent(new Error(message)));
-                hasErrors = true;
-            }
+            if (error.identifier && omit && omit.hasOwnProperty(error.identifier)) continue;
+
+            emitter.fire(new ErrorEvent(new Error(error.message)));
+            hasErrors = true;
         }
     }
     return hasErrors;

src/util/evented.js

@@ -34,12 +34,6 @@ export class ErrorEvent extends Event {
     }
 }
 
-export class WarningEvent extends Event {
-    constructor(data: Object = {}) {
-        super('warning', data);
-    }
-}
-
 /**
  * Methods mixed in to other classes for event capabilities.
  *

test/unit/source/canvas_source.test.js

@@ -180,7 +180,6 @@ test('CanvasSource#serialize', (t) => {
 
     const serialized = source.serialize();
     t.equal(serialized.type, 'canvas');
-    t.ok(serialized.canvas);
     t.deepEqual(serialized.coordinates, [[0, 0], [1, 0], [1, 1], [0, 1]]);
 
     window.restore();

test/unit/style-spec/fixture/layers.output.json

@@ -63,4 +63,4 @@
     "message": "layers[13]: layer \"missing-source-layer\" must specify a \"source-layer\"",
     "line": 91
   }
-]
+]

test/unit/style-spec/fixture/properties.output.json

@@ -42,4 +42,4 @@
     "message": "layers[4].paint.fill-opacity: \"fill-opacity\" does not support interpolation syntax\nUse an identity property function instead: `{ \"type\": \"identity\", \"property\": \"opacity\" }`.",
     "line": 74
   }
-]
+]

test/unit/style-spec/fixture/sources.input.json

@@ -33,6 +33,13 @@
       "coordinates": [
         1, "2", [3, "4"], []
       ]
+    },
+    "canvas": {
+      "type": "canvas",
+      "canvas": "canvas",
+      "coordinates": [
+        [1, 2], [3, 4], [5, 6], [7, 8]
+      ]
     }
   },
   "layers": []

test/unit/style-spec/fixture/sources.output.json

@@ -4,7 +4,7 @@
     "line": 4
   },
   {
-    "message": "sources.invalid-type.type: expected one of [vector, raster, raster-dem, geojson, video, image, canvas], \"invalid\" found",
+    "message": "sources.invalid-type.type: expected one of [vector, raster, raster-dem, geojson, video, image], \"invalid\" found",
     "line": 7
   },
   {
@@ -34,5 +34,9 @@
   {
     "message": "sources.video-wrong-coordinates.coordinates[3]: array length 2 expected, length 0 found",
     "line": 34
+  },
+  {
+    "message": "sources.canvas: Please use runtime APIs to add canvas sources, rather than including them in stylesheets.",
+    "identifier": "source.canvas"
   }
-]
+]