How to use the vega-lite.compile function in vega-lite

// backing dataset should actually be (source, aggregate, etc.).
  (spec.data as InlineData).values = dsUtils.output(dsId);

  // Supply custom cell width/heights to be able to differentiate hardcoded
  // scale ranges generated by Vega-Lite.
  spec.config.view = {
    width: CELLW,
    height: CELLH
  };

  // Force marks to be filled, if we're binding to the fill color property.
  spec.config.mark = {filled: property === 'fill'};

  return {
    input: spec,
    output: vlCompile(spec).spec
  } as CompiledBinding;
}

//       {"a": "F", "b": 53},
    //       {"a": "G", "b": 19},
    //       {"a": "H", "b": 87},
    //       {"a": "I", "b": 52}
    //     ]
    //   },
    //   "mark": "bar",
    //   "encoding": {
    //     "x": {"field": "a", "type": "quantitative"},
    //     "y": {"field": "b", "type": "quantitative"}
    //   }
    // };
    const {logger} = this.props;
    const vlSpec = this.props.spec;
    try {
      const spec = vl.compile(vlSpec, logger).spec;
      const runtime = vega.parse(spec, vlSpec.config);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(this.refs[CHART_REF] as any)
        .renderer(this.props.renderer || 'canvas')
        .hover();
      vegaTooltip.vega(this.view);
      this.bindData();
    } catch (err) {
      logger.error(err);
    }
  }

update() {
    const {spec, format, filePath, renderer} = this.props;
    if (spec) {
      let vegaSpec;

      if (format === FORMAT.VEGA_LITE) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          this.showError(`Invalid vega-lite spec: ${error.message}`);
          return;
        }
      } else if (format === FORMAT.UNKNOWN) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          vegaSpec = spec;
        }
      } else {
        vegaSpec = spec;
      }

      // Clear existing view
      if (this.view) {

update() {
    const {spec, format, filePath, renderer} = this.props;
    if (spec) {
      let vegaSpec;

      if (format === FORMAT.VEGA_LITE) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          this.showError(`Invalid vega-lite spec: ${error.message}`);
          return;
        }
      } else if (format === FORMAT.UNKNOWN) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          vegaSpec = spec;
        }
      } else {
        vegaSpec = spec;
      }

      // Clear existing view
      if (this.view) {
        this.view.finalize();
      }

      this.container.innerHTML = '';

      try {
        const runtime = vg.parse(vegaSpec);

if (spec.datasets) {
      throw new Error('Datasets should not be passed as part of the spec')
    }

    const datasets = getDataSets(el)

    if (datasets) {
      if (!spec.data) {
        throw new Error(
          'Must specify "data" field when using "dataset"')
      }
      spec.datasets = datasets
    }

    const vgSpec = vl.compile(spec).spec

    // Heuristic to determine the default dataset name.
    const datasetNames = datasets ? Object.keys(datasets) : []
    if (datasetNames.length === 1) {
      this.defaultDataName = datasetNames[0]
    } else if (datasetNames.length === 0 && vgSpec.data) {
      this.defaultDataName = vgSpec.data[0].name
    }

    const runtime = vega.parse(vgSpec)
    const view = new vega.View(runtime, {
      logLevel:  vega.Warn,
      render: 'canvas',
      container: this.element,
    })

addSpec(spec){
        this.bubbleOpts = {
            showAllFields: true,
        };

        if (typeof(spec) === 'string') {
            spec = JSON.parse(spec);
        }
        // If size is not specified, default to our default window size, 720x550
        if (!spec.width && !spec.height) {
            spec.width = 720;
            spec.height = 550;
        }
        if (spec['$schema'].startsWith('https://vega.github.io/schema/vega-lite/')) {
            spec = vl.compile(spec).spec;
        }

        this.vega_json = spec;
        this.vega_json.autosize = {"type": "fit", "resize": true, "contains": "padding"};

        if(this.vega_json["metadata"] != null){
            if(this.vega_json["metadata"]["bubbleOpts"] != null){
                this.bubbleOpts = this.vega_json["metadata"]["bubbleOpts"];
            }
        }

        this.vegaLoading = true;
        this.vegaView = new vega.View(vega.parse(this.vega_json), {'renderer': 'svg'})
                                .initialize(this.vega_container)
                                .hover()
                                .run();

filenames.forEach(src => {
    const conversion: Conversion = { src, outputs: [] };
    conversions.push(conversion);
    const json = fs.readFileSync(path.join(base, 'input', src), 'utf8');
    let vegaLiteSpec: TopLevelUnitSpec;
    try {
        vegaLiteSpec = JSON.parse(json);
    }
    catch (e) {
        process.stderr.write(e);
    }
    if (vegaLiteSpec) {
        const output = VegaLite.compile(vegaLiteSpec);
        const spec = output.spec as Vega.Spec;
        switch (vegaLiteSpec.mark) {
            case 'bar': {
                const unitStyles = aggregateToUnitStyles(vegaLiteSpec.encoding);
                unitStyles.forEach(unitStyle => {
                    const outputSpec = JSON.parse(JSON.stringify(spec));
                    unitizeBar(vegaLiteSpec, outputSpec, unitStyle);
                    const dest = `${unitStyle}-${src.replace('.vl.', '.vg.')}`;
                    conversion.outputs.push(dest);
                    out(dest, outputSpec);
                });
            }
        }
    }
});

_resizeContent (spec, size) {
    if (spec.spec) {
      spec.spec.width = size.width;
      spec.spec.height = size.height;
    } else {
      spec.width = size.width;
      spec.height = size.height;
    }
    let vegaSpec = spec;
    if (spec.$schema && schemaParser(spec.$schema).library === 'vega-lite') {
      vegaSpec = vegaLiteCompile(spec).spec;
    }
    let handler = new Handler();
    this.view = new View(parse(vegaSpec))
      .renderer(this.options.renderer || 'canvas')
      .tooltip(handler.call)
      .initialize(this.content)
      .hover()
      .run();

    return {
      width: window.parseInt(this.content.firstChild.getAttribute('width')),
      height: window.parseInt(this.content.firstChild.getAttribute('height'))
    };
  }

getDownloadUrl={() => {
            return urlFromObject(
              require('vega-lite').compile(
                store.config.getSpecWithMinimumAmountOfData(getData())
              ).spec
            )
          }}
          href="##"