Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n params attribute doesn't work in globally registered custom elements #305

Open
peitschie opened this issue Jul 5, 2019 · 6 comments
Labels

Comments

@peitschie
Copy link

I'm submitting a bug report

  • Library Version:
    aurelia-i18n 3.0.0-beta.7

  • Webpack AND Version
    webpack 4.27.0
    webpack-cli 3.3.5

  • Browser:
    all

  • Language:
    TypeScript 3.1.2

Current behavior:
image
Repro code at https://github.com/peitschie/bug-repro-aurelia-i18n-alias.
This is somewhat similar to #206.

In this screenshot, the first two lines show i18n parameter binding working for both non-aliased (t-params.bind) and aliased (i18n-params.bind) bindings.
These are then copied into a global resource, where it can be seen that the aliased binding (i18n-params.bind) does not function, hence the blank space on the 3rd line.

Expected/desired behavior:
I am expecting all these combinations to behave identically.

@zewa666 zewa666 added the bug label Jul 5, 2019
@zewa666
Copy link
Member

zewa666 commented Jul 5, 2019

Thx for the repro I'll take a look. Clearly it looks like a bug as I cant see anything wrong in the sample

@zewa666
Copy link
Member

zewa666 commented Jul 10, 2019

I think I found the issue, yet I don't really know why it happens.

In your main.ts, if you comment out the following:

// .feature(PLATFORM.moduleName('resources/index'))
// .globalResources(PLATFORM.moduleName('resources/message/message'));

and instead require the message custom element right before it's use

<require from="./resources/message/message"></require>
<message></message>

all seems to work. So it must be a timing issue with registration, as that the features are registered before the plugin so we're too late to the story.

@khuongduybui
Copy link

I tried to fix the "timing issue with registration" as following but could not fix the issue.

export function configure(aurelia: Aurelia) {
  aurelia.use.standardConfiguration();

  aurelia.use.plugin('aurelia-i18n', (plugin) => {
    // ...
  });

  aurelia.use.feature('resources');
  // ...
}

@bigopon
Copy link
Member

bigopon commented Aug 17, 2019

Doing the following:

    .feature(PLATFORM.moduleName('resources/index'))
    .plugin(PLATFORM.moduleName('aurelia-i18n'), (instance: any) => {

means load all resources inside resources/index and then load aurelia-i18n. Which means any resources loaded before i18n will have their template parsed without the knowledge of aurelia-i18n attributes, value converters, binding behaviors.
I think this can simply be solved by ensuring this plugin will be registered before any app resources:

    .plugin(PLATFORM.moduleName('aurelia-i18n'), (instance: any) => {/*....*/})
    ...
    .feature(PLATFORM.moduleName('resources/index'))

@zewa666
Copy link
Member

zewa666 commented Aug 17, 2019

Nope not going to work since i18n is lazily initialized via callback

@khuongduybui
Copy link

Nope not going to work since i18n is lazily initialized via callback

Can we force it to behave differently?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants