Browse Source

Add section on decorators, update Babel to version 7, bump version

tags/v0.13.0^0
Peter J. Jones 1 year ago
parent
commit
d31c198f3a
Signed by: Peter Jones <pjones@devalot.com> GPG Key ID: 9DAFAA8D01941E49

+ 1
- 0
.gitignore View File

@@ -3,3 +3,4 @@
**/node_modules
src/www/js/tools/webpack/dist
src/www/js/alternatives/typescript/**/*.js
/src/babel-out/

+ 23
- 0
content/js/changes/esnext/decorators/basics.md View File

@@ -0,0 +1,23 @@
### What are Decorators? ###

Decorators provide an official mechanism in JavaScript for
metaprogramming. In other words, they add the ability for run-time
code generation.

* Functions that generate code

* Are given an object that fully describes the code from which they
were invoked

* Are invoked by using `@` in front of their name, and placed before
classes, methods, properties, etc.

### Example Decorator ###

~~~ {.javascript insert="../../../../../src/babel/esNEXT/decorators.js" token="deco"}
~~~

### Using the Decorator ###

~~~ {.javascript insert="../../../../../src/babel/esNEXT/decorators.js" token="class"}
~~~

+ 4
- 0
content/js/changes/esnext/decorators/index.md View File

@@ -0,0 +1,4 @@
Decorators
----------

<<(basics.md)

+ 1
- 0
courses/javascript-intermediate.md View File

@@ -92,6 +92,7 @@ Web Application Development
===========================

<<(../content/js/apis/components/index.md)
<<(../content/js/changes/esnext/decorators/index.md)
<<(../content/js/apis/websockets/index.md)
<<(../content/js/apis/webstorage/index.md)
<<(../content/js/apis/serviceworkers/index.md)

+ 2
- 0
courses/targeted-topics.md View File

@@ -216,6 +216,8 @@ the following features:
<<(../content/js/changes/es2016-features.md)
<<(../content/js/changes/es2017-features.md)
<<(../content/js/changes/es2018-features.md)
<<(../content/js/changes/esnext/decorators/basics.md)
<<(../content/js/changes/esnext/observable/basics.md)

Important Browser APIs
----------------------

+ 1
- 1
default.nix View File

@@ -16,7 +16,7 @@ in

edify.mkDerivation rec {
name = "webdev-${version}";
version = "0.12";
version = "0.13";
src = builtins.fetchGit ./.;

# Extra files to include in the zip archive:

+ 1
- 6
nix/node/default.nix View File

@@ -49,12 +49,7 @@ let
${concatMapStrings installModules nodeNixFiles}

# Run some files through Babel:
( cd $dest/src
node node_modules/.bin/babel -d babel/es2015-es5 babel/es2015

# Broken:
# node node_modules/.bin/babel -d babel/es2018-es5 babel/es2018
)
( cd $dest/src && npm run babel )

# Prepare the Webpack demo app:
( cd "$dest/src/www/js/tools/webpack"

+ 3
- 0
nix/node/typescript/package.json View File

@@ -8,5 +8,8 @@
"license": "BSD-2-Clause",
"dependencies": {
"typescript": "^3.1.5"
},
"scripts": {
"build": "tsc --build tsconfig.json"
}
}

+ 1708
- 885
nix/node/webdev/node-packages.nix
File diff suppressed because it is too large
View File


+ 2058
- 1023
nix/node/webdev/package-lock.json
File diff suppressed because it is too large
View File


+ 6
- 3
nix/node/webdev/package.json View File

@@ -7,13 +7,16 @@
"author": "Peter J. Jones",
"license": "BSD-2-Clause",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"@babel/polyfill": "^7.0.0",
"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0",
"@babel/plugin-proposal-decorators": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"mockapie": "git://github.com/pjones/mockapie.git",
"nightwatch": "^0.9.8"
},
"scripts": {
"babel": "babel -d babel/es2015-es5 --presets=env babel/es2015"
"babel": "babel babel --out-dir babel-out --presets=@babel/env"
},
"repository": {
"type": "git",

+ 24
- 0
src/babel.config.js View File

@@ -0,0 +1,24 @@
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];


const plugins = [
["@babel/plugin-proposal-decorators", {
legacy: false,
decoratorsBeforeExport: true,
}],
];

module.exports = { presets, plugins };

+ 0
- 33
src/babel/es2015-es5/arrow.js View File

@@ -1,33 +0,0 @@
"use strict";

(function () {

var users = [{ id: 1, username: "caiva", age: 30 }, { id: 2, username: "ahxae", age: 17 }, { id: 3, username: "i4tie", age: 42 }, { id: 4, username: "bvu7F", age: 19 }];

// Print out usernames.
console.log(users.map(function (u) {
return u.username;
}));

// Filter out minors.
console.log(users.filter(function (u) {
return u.age > 18;
}));

// Using forEach (and more than one argument):
users.forEach(function (u, i) {
console.log(u.id, i);
});

function test() {
var _arguments = arguments,
_this = this;

var a = [1, 2, 3];

a.map(function (e) {
console.log(_arguments, _this);
return e + 1;
});
}
})();

+ 0
- 7
src/babel/es2015-es5/assign.js View File

@@ -1,7 +0,0 @@
"use strict";

var o1 = { a: 1, b: 2, c: 3 };
var o2 = {};

Object.assign(o2, o1);
console.log(o2);

+ 0
- 35
src/babel/es2015-es5/class-static.js View File

@@ -1,35 +0,0 @@
"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/******************************************************************************/
// <<: static
var Rectangle = function () {
function Rectangle(width, height) {
_classCallCheck(this, Rectangle);

this.width = width;
this.height = height;
}

_createClass(Rectangle, [{
key: "area",
value: function area() {
return this.width * this.height;
}
}], [{
key: "withWidth",
value: function withWidth(width) {
return new Rectangle(width, width);
}
}]);

return Rectangle;
}();

var rect = Rectangle.withWidth(10);
rect.area(); // 100
// :>>
console.assert(rect.area() === 100);

+ 0
- 174
src/babel/es2015-es5/class.js View File

@@ -1,174 +0,0 @@
"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/******************************************************************************/
// <<: rec
var Rectangle = function () {
function Rectangle(width, height) {
_classCallCheck(this, Rectangle);

this.width = width;
this.height = height;
}

_createClass(Rectangle, [{
key: "area",
value: function area() {
return this.width * this.height;
}
}]);

return Rectangle;
}();
// :>>

// <<: rec-new


var rect = new Rectangle(10, 20);
rect.area(); // 200
// :>>
console.log(rect.area());

/******************************************************************************/
// <<: sq

var Square = function (_Rectangle) {
_inherits(Square, _Rectangle);

function Square(width) {
_classCallCheck(this, Square);

return _possibleConstructorReturn(this, (Square.__proto__ || Object.getPrototypeOf(Square)).call(this, width, width));
}

_createClass(Square, [{
key: "sideSize",
value: function sideSize() {
return this.width;
}
}]);

return Square;
}(Rectangle);
// :>>

// <<: sq-new


var sq = new Square(10);
sq.area(); // 100
// :>>
console.log(sq.area());

/******************************************************************************/
// <<: Base class.

var Person = function () {
function Person(name) {
_classCallCheck(this, Person);

this.name = name;
}

_createClass(Person, [{
key: "sayName",
value: function sayName() {
console.log(this.name);
}
}]);

return Person;
}();

var peter = new Person("Peter");
peter.sayName();
// :>>

/******************************************************************************/
// <<: Derived class.

var Child = function (_Person) {
_inherits(Child, _Person);

function Child(name) {
_classCallCheck(this, Child);

var _this2 = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name));

_this2.minor = true;
return _this2;
}

_createClass(Child, [{
key: "isMinor",
value: function isMinor() {
return this.minor;
}
}]);

return Child;
}(Person);

var abi = new Child("Abi");
abi.sayName();
console.log(abi.isMinor());
// :>>

/******************************************************************************/
// <<: Class-static methods.

var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
}

_createClass(Foo, null, [{
key: "sayHello",
value: function sayHello() {
console.log("Hello from Foo");
}
}]);

return Foo;
}();

Foo.sayHello();
// :>>

/******************************************************************************/
// <<: get-set

var Car = function () {
function Car() {
_classCallCheck(this, Car);

this._speed = 0;
}

_createClass(Car, [{
key: "speed",
get: function get() {
return this._speed;
},
set: function set(x) {
if (x < 0 || x > 100) throw "I don't think so";
this._speed = x;
}
}]);

return Car;
}();

var toyota = new Car();
toyota.speed = 55; // Calls the `set speed' function.
// :>>

console.assert(toyota.speed === 55);

+ 0
- 34
src/babel/es2015-es5/const.js View File

@@ -1,34 +0,0 @@
"use strict";

(function () {

/****************************************************************************/
// <<: The for..of statement.
var list = ["Lambda", "Curry", "Church"];

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
for (var _iterator = list[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var name = _step.value;

console.log(name);
}
// :>>
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
})();

+ 0
- 12
src/babel/es2015-es5/defaults.js View File

@@ -1,12 +0,0 @@
"use strict";

/******************************************************************************/
// <<: Default argument values.
function add(x) {
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;

return x + y;
}

add(1); // 3
// :>>

+ 0
- 25
src/babel/es2015-es5/destructuring.js View File

@@ -1,25 +0,0 @@
"use strict";

function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }

// <<: array
var firstPrimes = function firstPrimes() {
return [2, 3, 5, 7];
};

var x = void 0,
y = void 0,
rest = void 0;

// :>>

var _firstPrimes = firstPrimes();

var _firstPrimes2 = _toArray(_firstPrimes);

x = _firstPrimes2[0];
y = _firstPrimes2[1];
rest = _firstPrimes2.slice(2);
console.log("console.log(x); //", x);
console.log("console.log(y); //", y);
console.log("console.log(rest); //", rest);

+ 0
- 28
src/babel/es2015-es5/forof.js View File

@@ -1,28 +0,0 @@
"use strict";

var anything = [1, 2, 3];

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
for (var _iterator = anything[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var x = _step.value;

console.log(x);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}

+ 0
- 58
src/babel/es2015-es5/generator.js View File

@@ -1,58 +0,0 @@
"use strict";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var something = _defineProperty({}, Symbol.iterator, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var i;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
i = 0;

case 1:
if (!(i < 10)) {
_context.next = 7;
break;
}

_context.next = 4;
return i;

case 4:
++i;
_context.next = 1;
break;

case 7:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
for (var _iterator = something[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var x = _step.value;

console.log(x);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}

+ 0
- 9
src/babel/es2015-es5/import.js View File

@@ -1,9 +0,0 @@
'use strict';

var _module = require('./module.js');

var _module2 = _interopRequireDefault(_module);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _module2.default)();

+ 0
- 38
src/babel/es2015-es5/iterator.js View File

@@ -1,38 +0,0 @@
"use strict";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var something = _defineProperty({}, Symbol.iterator, function () {
var n = 0;

return {
next: function next() {
return { value: n, done: n++ >= 10 };
}
};
});

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
for (var _iterator = something[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var x = _step.value;

console.log(x);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}

+ 0
- 16
src/babel/es2015-es5/let.js View File

@@ -1,16 +0,0 @@
"use strict";

(function () {
var _loop = function _loop(i) {
setTimeout(function () {
console.log(i);
}, i * 1000);
};

/****************************************************************************/
// <<: Does this look familiar?
for (var i = 0; i < 3; ++i) {
_loop(i);
}
// :>>
})();

+ 0
- 9
src/babel/es2015-es5/map.js View File

@@ -1,9 +0,0 @@
"use strict";

var characters = new Map();

characters.set("Ripley", "Alien");
characters.set("Watney", "The Martian");

characters.has("Ripley"); // true
characters.get("Ripley"); // "Alien"

+ 0
- 12
src/babel/es2015-es5/module.js View File

@@ -1,12 +0,0 @@
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
var magicNumber = 42;

function sayMagicNumber() {
console.log(magicNumber);
}

exports.sayMagicNumber = sayMagicNumber;

+ 0
- 29
src/babel/es2015-es5/parameters.js View File

@@ -1,29 +0,0 @@
"use strict";

// <<: default
var add = function add(x) {
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

return x + y;
};
// :>>

console.log("add(2); //", add(2));

// <<: rest
var last = function last(x, y) {
return arguments.length <= 2 ? 0 : arguments.length - 2;
};
// :>>

console.log("last(1, 2, 3, 4); //", last(1, 2, 3, 4));

// <<: spread
var max = function max(x, y) {
return x > y ? x : y;
};

var ns = [42, 99];
// :>>

console.log("max(...ns); //", max.apply(undefined, ns));

+ 0
- 22
src/babel/es2015-es5/spread.js View File

@@ -1,22 +0,0 @@
"use strict";

/******************************************************************************/
// <<: Calling a function.
function sum(a, b, c, d) {
return a + b + c + d;
}

var values = [1, 2, 3, 4],
result = sum.apply(undefined, values);

console.log(result); // 10
// :>>

/******************************************************************************/
// <<: In arguments.
function sum2(x) {
return x + (arguments.length <= 1 ? undefined : arguments[1]);
}

console.log(sum2(1, 2, 3, 4)); // 3
// :>>

+ 22
- 0
src/babel/esNEXT/decorators.js View File

@@ -0,0 +1,22 @@
// <<: deco
function final(descriptor) {
let { kind } = descriptor;
console.assert(kind === "class");

function finisher(klass) {
Object.freeze(klass);
Object.freeze(klass.prototype);
}

return { ...descriptor, finisher };
}
// :>>

// <<: class
@final
class Hello {
say() { console.log("Hello!") };
}
// :>>

console.assert(Object.isFrozen(Hello));

+ 2058
- 1023
src/package-lock.json
File diff suppressed because it is too large
View File


+ 6
- 3
src/package.json View File

@@ -7,13 +7,16 @@
"author": "Peter J. Jones",
"license": "BSD-2-Clause",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"@babel/polyfill": "^7.0.0",
"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0",
"@babel/plugin-proposal-decorators": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"mockapie": "git://github.com/pjones/mockapie.git",
"nightwatch": "^0.9.8"
},
"scripts": {
"babel": "babel -d babel/es2015-es5 --presets=env babel/es2015"
"babel": "babel babel --out-dir babel-out --presets=@babel/env"
},
"repository": {
"type": "git",

Loading…
Cancel
Save