Sigfried/.gitignore

## .gitignore
/node_modules/
bundle.js

## README.txt

Webpack seems to mess up objects of classes that
extend Array. This should work, I believe, and it
does work in node and in jsfiddle:
https://jsfiddle.net/sigfried/n2pab49q/

Install and run:

     git clone https://gist.github.com/Sigfried/5c96b880d7986776e541
     cd 5c96b880d7986776e541
     npm install
     npm run build

Then point your browser at http://localhost:8080/webpack-dev-server/
and open the console.

To see it working on node:

     node index.js

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack ES6 Array Extend Bug Example</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="bundle.js"></script>
  </body>
</html>

## index.js
"use strict";

class ThingArray extends Array {
    constructor(data, parentThing) {
        super(data);
        console.log(`sending a [${this.constructor.toString().replace(/.\n[\w\W]*$/,'')}] to thing.method`);
        //debugger; // in browser console, type this.constructor, it shows
                  // ThingArray, but the console.log above shows Array
        test(this);
    }
}

function test(ta) {
      console.log(`I'm expecting a ThingArray, and what I'm getting is a [${ta.constructor.toString().replace(/.\n[\w\W]*$/,'')}]`);
      console.log(`Is it a ThingArray? The answer is ${!!(ta instanceof ThingArray)}`);
}

let twothings = new ThingArray(['baz',42]);
console.log(twothings);

if (typeof window !== "undefined") {
    var div = document.getElementById('example');
    div.innerHTML = `<h2>${twothings.toString()}</h2>`;
}

## package.json
{
  "name": "array-extend-bug",
  "version": "0.0.1",
  "description": "problem with webpack handling array extensions",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git@gist.github.com:5c96b880d7986776e541.git"
  },
  "keywords": [
    "webpack",
    "es6",
    "bug"
  ],
  "author": "Sigfried Gold",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": "^6.0.12",
    "babel-loader": "^6.0.1",
    "babel-plugin-transform-builtin-extend": "^1.1.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.0.12",
    "babel-preset-stage-0": "^6.3.13",
    "webpack": "^1.12.10",
    "webpack-dev-server": "^1.14.1"
  }
}

## webpack.config.js
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './index.js',
  ],
  output: {
      filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015'],
          plugins: [
            ["babel-plugin-transform-builtin-extend", {
              globals: ["Array"],
            }]
          ]
        }
      },
    ]
  },
}

	Webpack seems to mess up objects of classes that
	extend Array. This should work, I believe, and it
	does work in node and in jsfiddle:
	https://jsfiddle.net/sigfried/n2pab49q/

	Install and run:

	git clone https://gist.github.com/Sigfried/5c96b880d7986776e541
	cd 5c96b880d7986776e541
	npm install
	npm run build

	Then point your browser at http://localhost:8080/webpack-dev-server/
	and open the console.

	To see it working on node:

	node index.js
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Webpack ES6 Array Extend Bug Example</title>
	</head>
	<body>
	<div id="example"></div>
	<script src="bundle.js"></script>
	</body>
	</html>
	"use strict";

	class ThingArray extends Array {
	constructor(data, parentThing) {
	super(data);
	console.log(`sending a [${this.constructor.toString().replace(/.\n[\w\W]*$/,'')}] to thing.method`);
	//debugger; // in browser console, type this.constructor, it shows
	// ThingArray, but the console.log above shows Array
	test(this);
	}
	}

	function test(ta) {
	console.log(`I'm expecting a ThingArray, and what I'm getting is a [${ta.constructor.toString().replace(/.\n[\w\W]*$/,'')}]`);
	console.log(`Is it a ThingArray? The answer is ${!!(ta instanceof ThingArray)}`);
	}

	let twothings = new ThingArray(['baz',42]);
	console.log(twothings);

	if (typeof window !== "undefined") {
	var div = document.getElementById('example');
	div.innerHTML = `<h2>${twothings.toString()}</h2>`;
	}
	{
	"name": "array-extend-bug",
	"version": "0.0.1",
	"description": "problem with webpack handling array extensions",
	"main": "index.js",
	"scripts": {
	"build": "webpack-dev-server"
	},
	"repository": {
	"type": "git",
	"url": "git@gist.github.com:5c96b880d7986776e541.git"
	},
	"keywords": [
	"webpack",
	"es6",
	"bug"
	],
	"author": "Sigfried Gold",
	"license": "MIT",
	"dependencies": {},
	"devDependencies": {
	"babel": "^6.3.26",
	"babel-core": "^6.0.12",
	"babel-loader": "^6.0.1",
	"babel-plugin-transform-builtin-extend": "^1.1.0",
	"babel-polyfill": "^6.3.14",
	"babel-preset-es2015": "^6.0.12",
	"babel-preset-stage-0": "^6.3.13",
	"webpack": "^1.12.10",
	"webpack-dev-server": "^1.14.1"
	}
	}
	var webpack = require('webpack');

	module.exports = {
	entry: [
	'babel-polyfill',
	'./index.js',
	],
	output: {
	filename: 'bundle.js'
	},
	module: {
	loaders: [
	{
	test: /\.js$/,
	loader: 'babel',
	exclude: /node_modules/,
	query: {
	presets: ['es2015'],
	plugins: [
	["babel-plugin-transform-builtin-extend", {
	globals: ["Array"],
	}]
	]
	}
	},
	]
	},
	}