problems with babel-polyfill

• Library Version: 0.27.0

• Operating System: Windows 7 Professional

• Node Version: 7.7.2

• NPM Version: 4.4.4

This is more or less a question, i had no response on gitter or stackoverflow.

I have an cli generated project where i added kotojs using npm and then imported it using au import. Kotojs itself depends on babel-polyfill so i added it using npm and au import. The relevant part of my aurelia.json file looks like this:

{
  "name": "babel-polyfill",
  "main": "dist/polyfill.js",
  "path": "../node_modules/babel-polyfill",
  "resources": []
},
{
  "name": "koto",
  "main": "dist/koto.js",
  "path": "../node_modules/koto",
  "deps": [
     "babel-polyfill"
   ],
   "resources": []
}

As soon i have added babel polyfill like this, the main.js is not working as intended. The problem in the main.js is this:

Promise.config({
  warnings: {
    wForgottenReturn: false
  }
});

I get the following error: TypeError: Promise.config is not a function

Could there be any conflict between bluebird-promise and babel-polyfill-promise since the babel-polyfill also includes a promise implementation (corejs)?

I really don’t understand what is going on and whether i did something wrong or whether there is an issue with the cli generated project.

I found out that Promise.config is not standard. Maybe its a better idea to use standardized versions of promises or wrap away such non standard deviations.

Any help is very appreciated since i use Aurelia for a production project at work.

[JeroenVinke]

Hey @arnonuem

I gave this a shot, and used your config initially. When building it tried to find d3 which wasn’t configured, so I installed it with au install d3. This resulted in the following configuration:

          {
            "name": "babel-polyfill",
            "main": "dist/polyfill.js",
            "path": "../node_modules/babel-polyfill",
            "resources": []
          },
          {
            "name": "koto",
            "main": "dist/koto.js",
            "path": "../node_modules/koto",
            "deps": [
              "babel-polyfill"
            ],
            "resources": []
          },
          {
            "name": "d3",
            "main": "build/d3",
            "path": "../node_modules/d3",
            "resources": []
          }

It took a lot of code to get a chart rendered. Here we go:

import * as Koto from 'koto';
import * as d3 from 'd3';

class MyChartName extends Koto.default {
  constructor(selection) {
    super(selection);

    // Setup
    var chart = this;

    // define configs
    this.configs = {
      height: {
        name: 'height',
        description: 'The height of the chart.',
        value: 500,
        type: 'number',
        units: 'px',
        category: 'Size',
        getter: function (){
          // get value
          return this.value;
        },
        setter: function (newValue){
          // Set value
          return newValue;
        }
      },
      width: {
        name: 'width',
        description: 'The widthj of the chart.',
        value: 800,
        units: 'px',
        type: 'number',
        category: 'Size'
      }
    };

    // Scales
    this.x = d3.scaleLinear()
      .range([0, this.config('width')]);

    this.y = d3.scaleLinear()
      .domain([0, 100])
      .rangeRound([0, this.config('height')]);

    // add a layer
    this.layer('bars', this.base.append('g'), {
      // destructuring ftw
      dataBind(data) {
        return this.selectAll('rect')
          .data(data, d => d.time);
      },
      insert() {
        return this.append('rect');
      }
    })
    // lifecycle events (Arrow function syntax)
    .on('enter', selection => {
      var length = this._length = selection.data().length;
      selection.attr('x', (d, i) => this.x(i + 1) - 0.5 )
        .attr('y', (d) => this.config('height') - this.y(d.value) - 0.5)
        .attr('width', this.config('width') / length)
        .style('fill', 'steelBlue')
        .attr('height', d => this.y(d.value));
    })
    .on('merge:transition', selection => {
      selection.duration(1000)
        .attr('x', (d, i) => this.x(i) - 0.5);
    })
    .on('exit:transition', selection => {
      selection.duration(1000)
        .attr('x', (d, i) => this.x(i - 1) - 0.5)
        .remove();
    });

    // add another layer 
    this.layer('labels', this.base.append('g'), {
      dataBind(data) {
        return this.selectAll('text')
          .data(data, d => d.time);
      },
      insert() {
        return this.append('text');
      }
    })
    // non arrow function syntax
    .on('enter', function() {
      var length = this.data().length;
      this
        .attr('x', (d, i) => chart.x(i + 1) + ((chart.config('width') / length) / 2))
        .attr('y', d => chart.config('height') - chart.y(d.value) - 15)
        .style('fill', 'steelBlue')
        .style('text-anchor', 'middle')
        .text(d => d.value);
    })
    .on('merge:transition', function() {
      this.duration(1000)
        .attr('x', (d, i) => chart.x(i) + ((chart.config('width') / chart._length) / 2));
    })
    .on('exit:transition', function() {
      this.duration(1000)
        .attr('x', (d, i) => chart.x(i - 1) - 0.5)
        .remove();
    });
  }

  //override methods
  preDraw(data) {
    this.x.domain([0, data.length]);
  }
}

// we attach everything to the global `koto` variable
Koto.MyChartName = MyChartName;


class DataSrc {
  constructor() {
    this.time = 1297110663; // start time (seconds since epoch)
    this.value = 70;
    this.data = d3.range(33).map(() => { return this.next(); });
  }

  next() {
    this.time += 1;
    this.value = ~~Math.max(10, Math.min(90, this.value + 10 * (Math.random() - .5)));
    return {
      time: this.time,
      value: this.value
    };
  }

  fetch() {
    this.data.shift();
    this.data.push(this.next());
  }
}

export class App {
  constructor() {
    this.message = 'Hello World!';
  }

  attached() {
    let dataSrc = new DataSrc();
    let barChart = new Koto.MyChartName(d3.select('#test'));
    barChart.draw(dataSrc.data);
    setInterval(function() {
      dataSrc.fetch();
      barChart.draw(dataSrc.data);
    }, 1500);
  }
}

And when running the app I got a chart:

Pushed the app here so you can compare setups.

I used aurelia-cli 0.28.0

[JeroenVinke]

Yeah that’s a weird one. Glad you got it working