problems with babel-polyfill

[arnonuem]

• 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

[arnonuem]

Thank you very much i will check this out!

[JeroenVinke]

@arnonuem did you get this working?

[arnonuem]

Oh sorry for not coming back on this. Yes it worked. Thank you! This issue can be closed. It was just that the error message is wierd for not having d3 dependency installed.

[JeroenVinke]

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