The following custom element’s binding works if it is located in the application repo, but not if it is located in an npm package. Are there any example npm packages with working bindings I can look at? Or are there any known issues around this?
import {bindable, customElement} from 'aurelia';
@customElement({name: 'test-element3'})
export class TestElement3 {
@bindable testfield;
attached() {
console.log("bound value3 is: " + this.testfield);
}
}
@tsoiland did you see any errors? Can you paste it here? Also, what does the dist look like? Both html & js, or all in 1?
@bigopon no errors that I can find.
Dist of npm package has following files:
<template>
<input value.bind="testfield"/>
</template>
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['exports', 'aurelia'], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require('aurelia'));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.aurelia);
global.testElement3 = mod.exports;
}
})(this, function (exports, _aurelia) {
'use strict';
exports.__esModule = true;
exports.TestElement3 = undefined;
function _initDefineProp(target, property, descriptor, context) {
if (!descriptor) return;
Object.defineProperty(target, property, {
enumerable: descriptor.enumerable,
configurable: descriptor.configurable,
writable: descriptor.writable,
value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
});
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
var desc = {};
Object['ke' + 'ys'](descriptor).forEach(function (key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;
if ('value' in desc || desc.initializer) {
desc.writable = true;
}
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}
if (desc.initializer === void 0) {
Object['define' + 'Property'](target, property, desc);
desc = null;
}
return desc;
}
function _initializerWarningHelper(descriptor, context) {
throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}
var _dec, _class, _desc, _value, _class2, _descriptor;
var TestElement3 = exports.TestElement3 = (_dec = (0, _aurelia.customElement)({ name: 'test-element3' }), _dec(_class = (_class2 = function () {
function TestElement3() {
_classCallCheck(this, TestElement3);
_initDefineProp(this, 'testfield', _descriptor, this);
}
TestElement3.prototype.attached = function attached() {
console.log("bound value3 is: " + this.testfield);
};
return TestElement3;
}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'testfield', [_aurelia.bindable], {
enumerable: true,
initializer: null
})), _class2)) || _class);
});
//# sourceMappingURL=test-element3.js.map
An au2 plugin npm package needs to be pre-compiled just like the app.
The app only consumes pre-compiled npm package. We have not shipped skeleton to create au2 plugin yet.
We cannot compile html file inside npm package. This is actually designed to allow au2 plugin package to lock their compiling option (shadow-dom or css-module). So that user app’s compiling option would not affect how the au2 plugin is compiled, so that the plugin behaves same in app’s with various compiling options.
I will get some plugin skeleton up soon (in a day or two).
An early WIP plugin skeleton.
Update: it’s merged.
We built the plugin with webpack like the example, and that fixed the problem. Thank you 