smarter inference of what kind of spec is being passed, add warning

Author: mathisonian

README.md

@@ -26,4 +26,42 @@ In your Idyll markup,
 
 ```
 
+To use with a `vega` specification, set the mode to `vega` and do not pass the
+data as a separate parameter:
+
+```
+[IdyllVegaLite mode:"vega" spec:`{
+   ...
+   ...
+}` /]
+```
+
 See https://idyll-lang.github.io/examples/csv/ for example usage.
+
+
+## Troubleshooting
+
+Depending on your environment, you may see errors when trying to compile an Idyll document
+that depends on this library. In this case, you can compile using the `compileLibs` option
+to apply all code transformations to the vega dependencies as well, which will make them
+compatible with the rest of the build system:
+
+```
+$ idyll --compileLibs
+```
+
+or specify in `package.json` with:
+
+```
+"idyll": {
+  "compileLibs": true
+}
+```
+
+This option will cause the initial compile time to be slower, but after the first run
+the results are cached and so it should be quicker on subsequent compilation.
+
+## Contributors
+
+- Matthew Conlen (https://github.com/mathisonian)
+- Dan Marshall (https://github.com/danmarshall)

index.js

@@ -14,6 +14,10 @@ class IdyllVegaLite extends React.Component {
     }
   }
 
+  isVegaSpec() {
+    return this.props.mode === 'vega' || (this.props.spec.$schema && this.props.spec.$schema.startsWith("https://vega.github.io/schema/vega/"))
+  }
+
   componentDidMount() {
     const { Handler } = require('vega-tooltip')
     this.setState({
@@ -25,8 +29,11 @@ class IdyllVegaLite extends React.Component {
     let adjustedSpec = spec;
 
     let Runtime = VegaLite;
-    if (this.props.mode === 'vega') {
+    if (this.isVegaSpec()) {
       Runtime = Vega;
+      if (!adjustedSpec.data) {
+        console.warn('If passing a vega spec you must provide a data object in the spec.');
+      }
     } else {
       //vega-lite spec. Modify the spec if data was passed.
       if (data) {