jdanyow / aurelia-computed Goto Github PK

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:

• aurelia-bootstrapper
• aurelia-breeze
• aurelia-computed
• aurelia-event-aggregator
• aurelia-framework
• aurelia-http-client
• aurelia-logging
• aurelia-router

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.