jdanyow / aurelia-computed Goto Github PK
View Code? Open in Web Editor NEWA plugin for Aurelia to observe computed properties without dirty-checking
License: MIT License
A plugin for Aurelia to observe computed properties without dirty-checking
License: MIT License
This repository isn't updated for quite a while, and certain documentation mentions @computedFrom
to be imported from core Aurelia libraries. It's unclear whether this plugin is still required, or that it's functionality is in the mean time included in core Aurelia. Or does it still adds functionality?
For example, I (still) have the plugin enabled, including debug logging that's supposed to warn me if dirty checking is used. However, it doesn't log anything even though dirty checking is used for a lot of my complex getters.
For example
class VM {
get isValid() {
// var fullName = this.user.fullName
return this.user.isValid();
}
}
class User {
isValid() {
return this.fullName.length > 0;
}
}
isValid
is not updated. But if we uncomment var fullName
it is.
I suggest adding something like
@computedFrom('user.fullName')
get isValid() {
return this.user.isValid();
}
Hi
I'm opening an issue here, following up the issue aurelia/binding#252, to report a problem of the aurelia-computed plugin that impacts the aurelia binding engine.
I had an Aurelia project fully tested and working with October release, that included the following packages:
Made a copy and updated to latest Aurelia beta 1 release, including the latest release of aurelia-computed. The update has been done by wiping jspm_packages and reinstalling for scratch, just to be safe..
Since updating, the new codebase started to fail on some random bindings with the error TypeError: context is not a function
in binding.js.
First I removed every reference to the aureliaComputed
attribute, and relative imports. Same errors, probably the auto detection of dependants was kicking in and causing failures in the core binding engine.
Then I removed the aurelia-computed package from the project, and everything started to work flawlessly.. No more random errors in the binding engine.
There's definitely something wrong with the latest published aurelia-computed package, at least in combination with the latest aurelia-binding release.
Please see my comment here: aurelia/binding#252 (comment)
The error always come up from the last loop in the callSubscribers
function, as I stated in that comment.
I can't say for sure if it is a valid but edge case, that the core binding code doesn't handle correctly, or if it is the aurelia-computed code that generates invalid binding instructions...
I'm sure you will get to this eventually, but created an issue anyway for visibility 😄
Currently reporting is hard-coded with logger:
logger.debug(
Unable to observe '${propertyName}'. ${info.reason});
It would be nice to be able to replace it so i could for example throw error in dev mode and in production report it for example through Bugsnag or smth like that.
I have a simple getter like that:
export class App
{
firstName;
lastName;
get fullName()
{
console.log(new Date());
return this.firstName + " " + this.lastName;
}
}
then, when running the app I get:
DEBUG [aurelia-computed] Unable to observe 'fullName'. Unable to parse 'fullName' property's getter function.
function get() {
console.log(new Date());
return this.firstName + " " + this.lastName;
}
and then aurelia uses dirty checking
.
removing the console.log
lines make it work.
but I want to use this library for even more complex getters, and using functions inside the getter seems to break it.
This code:
get isValidated() {
return this.user && this.user.isValidated();
}
with this function in the user class:
isValidated() {
return true;
}
results in this error:
ERROR [app-router] TypeError: Cannot read property 'isValidated' of undefined
at ensureFunctionFromMap (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:2059:19)
at CallMember.evaluate (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:1369:14)
at CallMember.connect (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:1407:21)
at Binary.connect (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:1571:34)
at GetterObserver.subscribe (http://localhost:9000/jspm_packages/github/jdanyow/[email protected]/getter-observer.js:39:32)
at new CompositeObserver (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:877:46)
at Conditional.connect (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:1129:20)
at InterpolationBinding.connect (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating-binding.js:460:29)
at InterpolationBinding.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating-binding.js:403:14)
at View.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:725:21)
and the error is gone when you disable aurelia-computed (in main.js).
Test repo is here: https://github.com/JeroenVinke/aurelia-computed-bug
Is this something that can be fixed? My use-case involves breeze like this:
get isNew() {
return this.entity && this.entity.entityAspect.entityState.isAdded();
}
By now, to work with jspm 0.17 we need to overwrite the definition with -o {main:"aurelia-computed.js"}
.
I couldn't find this package in bower. Are there plans to support bower too?
Hi,
I'm trying to install this plugin with the webpack skeleton navigation app but it fails when I run npm run build
, it says 'Module not found: Error: cannot resolve module aurelia-computed'.
Aurelia is starting a universal registry of plugins for now - this contains a list of plugins and will be used by the CLI soon to install the plugins automatically for the developer.
https://github.com/aurelia/registry/blob/master/plugin-registry.json
(default copy / paste message)
I copied the skeleton app script and html files into a new project so that I could learn how to get everything(aurelia and tools) set up from scratch. Installing node, npm, jspm, gulp, etc. I managed to get the skeleton working all except for one thing. The fullName get call when bound in the html actually returns the literal '' in upper case.
HTML binding expression
${fullName | upper}
Output:
${THIS.FIRSTNAME} ${THIS.LASTNAME}
Instead of outputting:
JOHN DOE
If I change the html to:
${firstName | upper} ${lastName | upper}
It properly binds and outputs: JOHN DOE
I'm not sure what is happening. No errors in the console and it says it loaded and configured the plugin. Not sure where to look for issue.
I'm seeing an issue due to the order of aurelia plugin installation and the way in which this plugin installs itself.
In short, the ObserverLocator
is getting created before the aurelia-computed plugin is installed, and so the ObservationAdapter
the plugin installs isn't yet registered and the ObserverLocator
gets created without it included in the All.of(ObjectObservationAdapter)
ctor parameter.
I've traced it to creation of the SyntaxInterpreter
of templating-binding - the ObserverLocator
dependency being satisfied.
I feel like I must be doing something wrong, but not sure where to start looking? My configuration isn't particularly complicated....
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-computed')
.plugin('aurelia-animator-css')
.plugin('aurelia-validation', config => {
config.values.viewStrategy.searchFormGroup = ValidationCustomizations.searchFormGroup;
})
.plugin('aurelia-dialog')
.plugin('bootstrap')
.plugin('aurelia-widgets')
.feature('widgets/time-picker')
.feature('widgets/duration')
.feature('widgets/nav-bar')
.feature('widgets/spot-selector')
.feature('widgets/loading-indicator');
I can workaround with the following hack....
let adapter = new ComputedObservationAdapter(aurelia.container);
let observerLocator = aurelia.container.get(ObserverLocator);
observerLocator.observationAdapters.push(adapter);
Hi.
How to correctly observe arrays ?
srcipt.js:
/*jshint curly: true, es5: true, debug: true, esnext: true, moz: true, browser: true, devel: true*/
import {computedFrom} from 'aurelia-framework';
export class Welcome{
constructor (){
this.tablica = ["Ole1", "Ole2"];
}
get WezWartoscTablicy2() {
return this.tablica[1];
}
}
Html:
<template>
<div>Tutaj będe testował bind do tablicy statycznie:</div>
<br>
<div>nr1 ${tablica[0]}, a nr2 ma wartość: <span innerHTML.bind="WezWartoscTablicy2"></span></div>
<label>tablica[0]: </label><input value.bind="tablica[0]">
<label>tablica[1]: </label><input value.bind="tablica[1]">
</form>
</template>
Error:
TypeError: Cannot read property 'getObserver' of undefined at AccessKeyedObserver.updatePropertySubscription (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/access-keyed-observer.js:47:56) at new AccessKeyedObserver (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/access-keyed-observer.js:35:16) at AccessKeyed.connect (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/ast.js:471:26) at GetterObserver.subscribe (http://localhost:9000/jspm_packages/github/jdanyow/[email protected]/getter-observer.js:42:36) at Binding.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/binding-expression.js:73:53) at View.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view.js:63:25) at RouterView.swap (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/router-view.js:78:45) at http://localhost:9000/jspm_packages/github/aurelia/[email protected]/navigation-context.js:84:33 at Array.forEach (native) at http://localhost:9000/jspm_packages/github/aurelia/[email protected]/navigation-context.js:83:24
Installation using jspm install npm:aurelia-computed
fails with the following error:
Looking up npm:aurelia-computed
Updating registry cache...
Downloading npm:[email protected]
warn Error on processPackageConfig
Package.json dependency aurelia-binding set to npm:aurelia-binding@^1.0.0-beta.1, which is not a valid dependency format for npm.
It's advisable to publish jspm-style packages to GitHub or another registry so conventions are clear.
err Error: Error processing package config for npm:aurelia-computed.
at /Users/BBosman/Development/ExternalApps/Aurelia/node_modules/systemjs-builder/lib/builder.js:27:9
at Object.lib$rsvp$events$$default.trigger (/Users/BBosman/Development/ExternalApps/Aurelia/node_modules/rsvp/dist/rsvp.js:245:13)
at null._onTimeout (/Users/BBosman/Development/ExternalApps/Aurelia/node_modules/rsvp/dist/rsvp.js:779:47)
at Timer.listOnTimeout (timers.js:92:15)
err Error processing package config for npm:aurelia-computed.
warn Installation changes not saved.
DEBUG [templating] importing resources for http://localhost:8080/source/components/nav-bar.html []
index.js:38 DEBUG [aurelia-computed] Unable to observe 'href'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'href'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'href'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [templating] importing resources for http://localhost:8080/source/repo-creator/index.html []
index.js:38 DEBUG [templating] importing resources for http://localhost:8080/source/repo-creator/choose-repository.html []
index.js:38 DEBUG [aurelia-computed] Unable to observe 'disabled'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'hidden'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'disabled'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'disabled'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'disabled'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'disabled'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'disabled'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'disabled'. Unable to parse 'href' property's getter function.
function () { [native code] }
index.js:38 DEBUG [aurelia-computed] Unable to observe 'textContent'. Unable to parse 'href' property's getter function.
function () { [native code] }
The log message doesn't have any details on what is causing the message. I recognize it is just debug level, but it would be nice if it could be suppressed since it is so spammy and doesn't provide any actionable information.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.