[Aurelia 2] Can't use auto-accessors in view?

Help Requests
1

I have this class that uses an accessor in the controller:

export class MyApp {
  accessor message = 'Hello World!';
}

When used in view, I get an error saying can't access private field or method:

<div class="message">${message}</div>

It seems like it attempts to use the underlying #message generated by the accessor keyword instead of the getter function.

Is there a way to use auto-accessors in view?

2

are you using the template type checking feature? potentially cc you @Sayan751

3

Hello @bigopon, sorry, I am not aware of template type checking feature. I am new to Aurelia. I tried this in a new Aurelia project (the one generated with Typescript and Vite from npx makes aurelia) and I get the same error.

Anyways, I normally wouldn’t want to use the accessor keyword but I am currently working on migrating this Aurelia codebase (early Aurelia 2) from work into the latest Aurelia 2 version and there is a decorator there that kinda does what accessor does so I was just wondering if I could refactor the codebase to replace said decorator with accessor keyword instead.

I abandoned the idea now though :sweat_smile: but it would still be great to know if auto-accessors can be used in view.

4

Still an interesting case though.

Based on the description on the Typescript site (see what’s new 4.9), the accessor part can easily be rewritten to use getter/setter methods.

In (almost) the most simple form, I’ve tried to change this in the base application:

export class MyApp {
  //public accessor message = 'Hello World!';
  #__message = 'Hello World!';

  get message() {
    return this.#__message;
  }

  set message(value: string) {
    this.#__message = value;
  }
}

The accessor keyword indeed failed like described. But so did the example using the #. The name of the unreachable private property does not matter. The code fails on accessing this.#__message problably from another class.

I’ve tried debugging in the compiled code, but without really knowing where to look for it is kinda obscure.

image
image951×455 44.8 KB

The __decorateElement I think is an esbuild symbol, I was not able to find it anywhere within (uncompiled) code, only in the esbuild binary.

Step by step I reached the Aurelia part, in Main.ts. I stepped into the Aurelia.app(MyApp), and encountered this part:

image
image681×439 29.3 KB

I think this is provided to Aurelia from the compiled code itself. Notice how message is written here. And remember that my unaccessable private property was defined as #__message

I’ve tried to access message via the config object using console, but that failed:

image
image1097×266 14.8 KB

Conclusion #1

So, unless I’m mistaken, I think the actual issue already exists before reaching the Aurelia part. It might be esbuild…?

Right, so checking the package-lock.json for any discrepancies. And there actually are!
Latest version of esbuild is 0.24.2, whereas @aurelia/vite-plugin and vite-node both use 0.21.5.

I’ve tried to use npm overrides, forcing esbuild to the latest version for both these two modules, but this did not solve the issue.

No clue what other options to try… HTH

THE END

1 Like
5

Probably it makes sense to raise error via the type-checking infra when an auto accessor is seen, as the native private properties are not meant to be accessible outside the containing class.

6

Ofc! But that’s not the case here.

I would say that in the example message should be accessible from outside. The issue at hand is that even though <class>.message is requested, an error is thrown about the trying to access the private property. But that is not correct IMHO.

7

As the native private properties cannot be accessed outside the class, it cannot be observed. In that case, the observation pipeline can fall back to dirty-checking, I think.

1 Like