Code Monkey home page Code Monkey logo

i18n's Introduction

Aurelia

License: MIT npm version CircleCI TypeScript Twitter

Backers on Open Collective Sponsors on Open Collective Discord Chat

Aurelia 2

This is the Aurelia 2 monorepo, containing core and plugin packages, examples, benchmarks, and documentation for the upcoming major version of everybody's favorite modern JavaScript framework, Aurelia.

Introduction

Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. ๐Ÿ˜‰

Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.

//app.js
export class App {
  welcome = "Welcome to Aurelia";

  quests = [
    "To seek the holy grail",
    "To take the ring to Mordor",
    "To rescue princess Leia"
  ];
}
<!-- app.html -->
<form>
  <label>
    <span>What is your name?</span>
    <input value.bind="name & debounce:500">
  </label>

  <label>
    <span>What is your quest?</span>
    <select value.bind="quest">
      <option></option>
      <option repeat.for="q of quests">${q}</option>
    </select>
  </label>
</form>

<p if.bind="name">${welcome}, ${name}!</p>
<p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p>

This example shows you some of the powerful features of the aurelia binding syntax. To learn further, please see our documentation.

Feeling excited? Check out how to use makes to get started in the next section.

Note: Please keep in mind that Aurelia 2 is still in beta. A number of features and use cases around the public API are still untested and there will be a few more breaking changes.

Getting Started

First, ensure that you have Node.js v8.9.0 or above installed on your system. Next, using npx, a tool distributed as part of Node.js, we'll create a new Aurelia 2 app. At a command prompt, run the following command:

npx makes aurelia

This will cause npx to download the makes scaffolding tool, along with the aurelia generator, which it will use to guide you through the setup process. Once complete, you'll have a new Aurelia 2 project ready to run. For more information on Aurelia's use of makes, see here. If you aren't interested in taking our preferred approach to generating a project, you can also see the examples folder in this repo for pure JIT setups (no conventions) with various loaders and bundlers.

Documentation

You can read the documentation on Aurelia 2 here. Our new docs are currently a work-in-progress, so the most complete documentation is available in our getting started section. If you've never used Aurelia before, you'll want to begin with our Quick Start Guide.

Contributing

If you are interested in contributing to Aurelia, please see our contributor documentation for more information. You'll learn how to build the code and run tests, how best to engage in our social channels, how to submit PRs, and even how to contribute to our documentation. We welcome you and thank you in advance for joining with us in this endeavor.

Staying Up-to-Date

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, have a look around our Discourse forum. For chat on Aurelia 2, join our new Aurelia 2 community on Discord. If you'd like to join the growing list of Aurelia sponsors, please back us on Open Collective.

License

Aurelia is MIT licensed. You can find out more and read the license document here.

i18n's People

Contributors

arabsight avatar bigopon avatar davismj avatar doktordirk avatar droda59 avatar eisenbergeffect avatar erikschierboom avatar fabioluz avatar hirano-satoshi avatar jenselme avatar jeroenvinke avatar johnraz avatar josundt avatar k2s avatar lcetinapta avatar manuel-guilbault avatar masterpoi avatar mcginkel avatar mordred avatar plwalters avatar ry8806 avatar sayan751 avatar tarpsvo avatar thegr8nik avatar thesmallbang avatar timbailey99 avatar timfish avatar veikkoeeva avatar zakjan avatar zewa666 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

i18n's Issues

setTimeout in TCustomAttribute causes annoying 'blink' in browser

My view is first rendered with initial texts, then (one tick later) texts are replaced by i18n texts. This causes a visible 'jump' of content in the browser, because elements might need less or more space.

The reason is the usage of setTimeout in https://github.com/aurelia/i18n/blob/master/src/t.js line 50 and 62. QUESTION: Why are these timeouts there?

Using i18n in text-nodes instead of attributes does not have the setTimeout issue, and would of course be a solution to my problem. Extending the view with BaseI18N also solves the problem because i18n.updateTranslations is called. But it requires a lot of extra setup code for my view-models.

It would be nice if translating via html attributes worked out of the box.

Using namespaces

I do have following setup:

instance.setup({
        resGetPath: 'locale/__lng__/__ns__.json',
        lng: 'de-DE',
        attributes: ['t', 'i18n'],
        getAsync: true,
        sendMissing: false,
        fallbackLng: 'en',
        debug: false
      });

I have default translation.json and nav.json
Default namespace works fine:

tr('myProp'); // => 'fine'
tr('translation:myProp'); // => 'fine'

but nav namespace do not:

tr('nav:myProp'); // => 'nav:myProp'

Have checked the log, but nav.json is never loaded.

Applying a Value Converter to a Translated value.

I want to apply a value converter (simple converter to append a ":" to the end of the field) to a translated field.

If I do this:

<td t.bind="label | labelFormat"></td>

As one would expect the converter is applied to the label before the translation occurs, therefore it doesn't find the key in the translation table.

Any suggestions as to how to apply the converter (in HTML, not the viewmodel) to the value after it has been translated?

I am currently doing it this way:

<td t="[prepend]${label}">:</td>

But would prefer to use the converter.

Intl and i18next lookup issue with JSPM > 0.16.15

# jspm install aurelia-i18n
     Updating registry cache...
     Looking up npm:aurelia-i18n
     Looking up npm:Intl.js@intl
     Looking up npm:aurelia-binding
     Looking up npm:aurelia-event-aggregator
     Looking up npm:aurelia-loader
     Looking up npm:aurelia-templating
     Looking up npm:aurelia-templating-resources
     Looking up npm:aurelia-metadata
     Looking up npm:aurelia-pal
     Looking up npm:aurelia-task-queue
     Looking up npm:core-js
     Looking up npm:aurelia-logging
     Looking up npm:aurelia-path
     Looking up npm:aurelia-dependency-injection

err  Repo npm:Intl.js@intl not found!

warn Installation changes not saved.

this installs correctly: jspm install [email protected]

i18n:js 74 Uncaught TypeError: Cannot read property 'localeMatcher' of null

Fresh installed skeleton 0.18.1 and this plugin. When using nf Value Converter in HTML markup, the error occurs if no options supplied, like in this example:

<li class="list-group-item">
    Numberformat with default locale/format:
    ${ 1234567.890 | nf : undefined : selectedLocale}
</li>

This works:

<li class="list-group-item">
    Numberformat with different locale/format:
    ${ 1234567.890 | nf : { style: 'currency', currency: 'EUR' } : selectedLocale}
</li>

Bundled translation files

Hello,

It looks like aurelia-i18n doesn't use bundled translation files. I have it registered using the text plugin.

Translate input placeholders

Why not to create an attribute binding for translate input placeholders?

Something like:

<input type="text" placeholder.i18n="form.input.username">

Options could be passed with a syntax like:

<input type="text" placeholder.i18n="form.input.username | defaultValue: 'Username'">

How to refresh translated view when using converters?

Switching locale doesn't affect the view when I use TValueConverter, but values translated with t='myProp' do change.

this.ea.subscribe('i18n:locale:changed', payload => {
  i18n.updateTranslations(element);
});

How to trigger translation with converters?

Problem with ArrayObserver

Hey guys,

It seems for me that the ArrayObserver has a bug by observing the splice method. If I run the following code with splice the Error below is thrown. If I use the push instead it works pretty fine.

addType(payload) {
this.listselected.splice(payload.pos, 0,{_id:payload.id,properties:{name:payload.name}});
//this.listselected.push({_id:payload.id,properties:{name:payload.name}});
}

Uncaught TypeError: Cannot read property 'overrideContext' of undefined
updateOverrideContexts @ collection-strategy.js:45
handleChanges @ array-collection-strategy.js:66
handleCollectionChanges @ repeat.js:172
call @ repeat.js:62
callSubscribers @ aurelia-binding.js:219
call @ aurelia-binding.js:715
flushMicroTaskQueue @ aurelia-task-queue.js:110
(anonymous function) @ aurelia-task-queue.js:60

Position of t-params.bind in HTML code

It might be a coincidence but since the last update the replacement of variables with t-params.bind will only work with the correct order of t-params and t. Since HTML usually has no order in its attributes this might be the root for unexpected problems:

This will work

<h3 t-params.bind="params" t="LogoutTitle">Are you done?</h3>

This will fail

<h3 t="LogoutTitle" t-params.bind="params">Are you done?</h3>

Informations about this plugin

I'm working on a SPA which requires I18N support, and I'm looking at polyglot.js, Jed and i18next libraries. Since I'm using the Aurelia framework, I found this repository and I wonder if an official I18N plugin for Aurelia is coming in the next few weeks!

Error: Error invoking TaskQueue. Check the inner error for details.

hope you can help direct me. i am trying to write an Aurelia app, with i18n. I follow the instructions, but any time I add I18N to the initialization, i get a long, weird exception:

Unhandled promise rejection Error: Error invoking TaskQueue. Check the inner error for details.

inner error: makeRequestFlushFromMutationObserver@http://localhost:8000/jspm_packages/npm/[email protected]/aurelia-task-queue.js:13:20
TaskQueue@http://localhost:8000/jspm_packages/npm/[email protected]/aurelia-task-queue.js:59:41
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:334:14
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:309:155
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:557:16
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:145:27
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:488:18
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:354:23
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:309:155
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:557:16
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:145:27
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:488:18
initialize@http://localhost:8000/jspm_packages/npm/[email protected]/aurelia-templating.js:3154:30
initialize@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2337:7
initialize@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2256:9
importViewResources/<@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2617:11
l/</h@http://localhost:8000/jspm_packages/npm/[email protected]/client/shim.min.js:1773:66
l/<@http://localhost:8000/jspm_packages/npm/[email protected]/client/shim.min.js:1778:19
e@http://localhost:8000/jspm_packages/npm/[email protected]/client/shim.min.js:1958:55

Stack trace:
AggregateError@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-pal.js:20:13
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:559:15
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:145:27
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:488:18
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:354:23
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:309:155
invoke@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:557:16
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:145:27
get@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:488:18
initialize@http://localhost:8000/jspm_packages/npm/[email protected]/aurelia-templating.js:3154:30
initialize@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2337:7
initialize@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2256:9
importViewResources/<@http://localhost:8000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2617:11
l/</h@http://localhost:8000/jspm_packages/npm/[email protected]/client/shim.min.js:1773:66
l/<@http://localhost:8000/jspm_packages/npm/[email protected]/client/shim.min.js:1778:19
e@http://localhost:8000/jspm_packages/npm/[email protected]/client/shim.min.js:1958:55
shim.min.js:1786:54

my code:

main.js:

import 'semantic-ui';
import {I18N} from 'aurelia-i18n';

export function configure(aurelia, I18N) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-i18n', (instance) => {
      // adapt options to your needs (see http://i18next.com/pages/doc_init.html)
      instance.setup({
        resGetPath : 'locale/__lng__/__ns__.json',
        lng : 'en',
        attributes : ['t','i18n'],
        getAsync : false,
        sendMissing : false,
        fallbackLng : 'en',
        debug : true,
        ns: {
          namespaces: ['translation','nav'],
          defaultNs: 'translation'
        }
      });
    });


  //Uncomment the line below to enable animation.
  aurelia.use.plugin('aurelia-animator-css');

  //Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
  // aurelia.use.plugin('aurelia-html-import-template-loader')

  aurelia.start().then(a => a.setRoot());
}

index.html:

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" href="styles/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>```

TypeError: undefined is not an object (evaluating 'new this.Intl.DateTimeFormat') in Safari and IE

Getting this error in Safari (osx) and Internet Explorer (windows). Firefox and Chrome are OK.
Looks like Intl polyfill not working, it would be nice to have some warning and default handler, but not exception, because it breaks code execution

In https://github.com/andyearnshaw/Intl.js/blob/v0.1.4/Intl.complete.js#L29
Intl is added as global.Intl, not window.Intl as in aurelia/i18n https://github.com/aurelia/i18n/search?q=this.Intl.DateTimeFormat&type=Code&utf8=โœ“

Also there is a new version of Intl, so it could be upgraded.

typedefinition error: i18n no default export

After downloading latest with d.ts file provided I've been having the following error:

 Module ''i18next'' has no default export.

By changing this:
import i18n from 'i18next'; to import * as i18n from 'i18next'; within the aurelia-i18n.d.ts (line#2) file works fine though.
Not sure how to fix it since its automatically generated by babel.

Its quite critical since it doesn't even build as it is. Any clues?

Plugin cannot be used without installed babel-runtime

After i have sucessfully installed this plugin i findout that i could not use it.
For some reason almost all files requires babel-runtime but this module isn't between jspm dependecies but only in devDependencies section.

I am thinking that build process is somehow wrong or definition of required dependencies for jspm needs update requirements of this plugin.

error upgrading from 0.2.3 to 0.2.4

After upgrading aurelia-i18n from 0.2.2 to 0.2.4, I am getting this error.
Unhandled promise rejection TypeError: this.lazyParams is not a function
If I downgrade it from 0.2.4 to 0.2.3, it works just fine.

Override i18next ajax loader to use systemjs loader

i18next uses ajax to fetch the translations. This is causing some path resolving issues. If you add aurelia-i18n to any plugin using this config:

instance.setup({
      resGetPath : 'resources/__lng__.json',
      lng : ValidationConfig.defaults.getValue('locale'),
      attributes : [],
      getAsync : true,
      sendMissing : false,
      fallbackLng : 'en-US',
      debug : false
    });

and if you then install the plugin, the browser will look for the .json file in localhost:9000/resources/en-US.json instead of localhost:9000/jspm_packages/github/aurelia/[email protected]/resources/en-US.json. i18next allows for an override of the fetching mechanism (here). Perhaps aurelia-i18n can override this to use the systemjs loader? I think it would be nice if any aurelia plugin could implement aurelia-i18n.

Error installing current update 0.4.7

Hi there,

when trying to update to the current version of aurelia-i18n (0.4.7), jspm reports the following error:

warn Error on processPackageConfig
     Package.json dependency Intl.js set to github:andyearnshaw/Intl.js@^0.1.4, 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 processing package config for npm:aurelia-i18n.

The package is not updated.

Please have a look at it.

Many thanks,
Chris

What is the purpose/status of this repository?

Hi, from the name i'd guess that it has smth to do with internationalization, but there are only 3 commits and none of them seems to be related to i18n.

What is the purpose/status of this repository?

application doesn't start with plugin.

After adding plugin to main.js application doesn't start
Config (main.js) looks like this:

import 'bootstrap';
import {I18N} from 'aurelia-i18n';
export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-i18n', (instance) => {
            // adapt options to your needs (see http://i18next.com/pages/doc_init.html)
            instance.setup({
                resGetPath : 'locale/__lng__/__ns__.json',
                lng : 'en',
                attributes : ['t','i18n'],
                getAsync : true,
                sendMissing : false,
                fallbackLng : 'pl',
                debug : true
            });
        });

    aurelia.start().then(a => a.setRoot());
}

and exception looks like this:

Error: _aureliaPal.DOM.createTemplateFromMarkup is not a function
    Error loading http://localhost:8080/dist/app.html!template-registry-entry

loadTemplate/<@http://localhost:8080/jspm_packages/npm/[email protected]/aurelia-loader-default.js:18:26
run@http://localhost:8080/jspm_packages/npm/[email protected]/modules/es6.promise.js:91:43
notify/<@http://localhost:8080/jspm_packages/npm/[email protected]/modules/es6.promise.js:105:11
module.exports@http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.invoke.js:6:25
@http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.task.js:40:9
run@http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.task.js:27:7
listner@http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.task.js:31:5

Error injecting i18n unit test

Hi,

I'm experiencing issues while using aurelia-i18n with unit tests.
I'm injecting I18N in my classes and the test fails at :

var i18nName = loader.normalizeSync('aurelia-i18n'); from file i18n.js
When the app pass this line, loader is undefined, as all parameters of the constructor.

image

this is how I launch my test :
image

My class TranslationService injects i18n

If i remove I18N from my class, my tests that do not use it don't fail.

t - customAttribute and params

It is possible to somehow pass parameters to translation when using attribute?

E.g.:

<span t="[html]translation.with.params" t-params.bind="params">

Setup d.ts generation

Be sure that d.ts files are being generated from the source using our babel plugin. You can see how to set this up by looking at the build tasks from any core repo. Along with this, set up the doc generation. This can be seen by looking at the doc task from any core repo. Setting up the docs along side this will ensure that the generated d.ts files are correct because the docs infrastructure uses the TS compiler to validate the generated d.ts when generating the docs.

error after updating aurelia mid-october 2015

Hi,

After updating Aurelia to latest (Mid-October 2015), I've been getting errors caused by unsubscribe, this is due to a breaking change in Aurelia as specified.

The EventAggregator now returns a subscription object from its subscribe method. The subscription has a dispose method to unsubscribe from the original event.
http://blog.durandal.io/2015/10/13/aurelia-mid-october-2015-releases-performance-and-portable-javascript/

So any event aggregator subscription has to be disposed by this.subscription.dispose(); instead of this.subscription();

i18n/src/t.js

Line 75 in b3fdc4a

this.subscription();

Intl.js 404 Not Found

Hi

When running the a bundled version of my application I get the following error in Safari:

[Debug] DEBUG [aurelia] โ€“ "Loading plugin aurelia-i18n." (example.com, line 9)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) ([email protected], line 0)

Here is some parts of my config.js (I have exluded the parts I meant to be irrelevant in this case):

map: {
    ...
    "npm:[email protected]": {
      "Intl.js": "github:andyearnshaw/[email protected]",
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-event-aggregator": "npm:[email protected]",
      "aurelia-loader-default": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]",
      "aurelia-templating-resources": "npm:[email protected]",
      "i18next": "github:i18next/[email protected]"
    },
    ...
},
bundles: {
    "aurelia": [
      "github:components/[email protected]",
      "github:components/[email protected]/jquery",
      "github:i18next/[email protected]",
      "github:i18next/[email protected]/i18next",
      "github:jspm/[email protected]",
      "github:jspm/[email protected]/index",
      "github:twbs/[email protected]",
      "github:twbs/[email protected]/css/bootstrap.css!github:systemjs/[email protected]",
      "github:twbs/[email protected]/js/bootstrap",
      ...
      "npm:[email protected]",
      "npm:[email protected]/aurelia-i18n",
      "npm:[email protected]/base-i18n",
      "npm:[email protected]/defaultTranslations/relative.time",
      "npm:[email protected]/df",
      "npm:[email protected]/i18n",
      "npm:[email protected]/nf",
      "npm:[email protected]/relativeTime",
      "npm:[email protected]/rt",
      "npm:[email protected]/t",
      "npm:[email protected]/utils",
      ...
   ]
}

Can you help me solve this?

Errors with aurelia pre-beta release

After upgrading to Aurelia pre-beta release, I get this error on plugin initialization:

Unhandled promise rejection TypeError: resources.getAttribute is not a function
    at http://localhost:9000/jspm/github/aurelia/[email protected]/index.js:87:44
    at next (http://localhost:9000/jspm/github/aurelia/[email protected]/aurelia-framework.js:19:32)
    at run (http://localhost:9000/jspm/npm/[email protected]/modules/es6.promise.js:107:49)
    at http://localhost:9000/jspm/npm/[email protected]/modules/es6.promise.js:121:9
    at MutationObserver.flush (http://localhost:9000/jspm/npm/[email protected]/modules/$.microtask.js:25:7)(anonymous function) @ es6.promise.js:138
es6.promise.js:138 Unhandled promise rejection TypeError: resources.getAttribute is not a function
    at http://localhost:9000/jspm/github/aurelia/[email protected]/index.js:87:44
    at next (http://localhost:9000/jspm/github/aurelia/[email protected]/aurelia-framework.js:19:32)
    at run (http://localhost:9000/jspm/npm/[email protected]/modules/es6.promise.js:107:49)
    at http://localhost:9000/jspm/npm/[email protected]/modules/es6.promise.js:121:9
    at MutationObserver.flush (http://localhost:9000/jspm/npm/[email protected]/modules/$.microtask.js:25:7)(anonymous function) @ es6.promise.js:138

referring to the getAttribute method here:

    frameworkConfig.postTask(function () {
      var resources = frameworkConfig.container.get(_aureliaTemplating.ViewResources);
      var htmlBehaviorResource = resources.getAttribute('t');
      // ...

Intl and i18next not found doing jspm update

We have one of our jspm dependencies on aurelia-i18n
"aurelia-i18n": "npm:aurelia-i18n@^0.4.1",

today it pulled down version 0.4.8 and the .jspm.json had both Intl and i18next without github prefixes and "registry": "npm".

causing the following errors:

warn Error on lookup for github:i18next/i18next@^1.9.0, retrying (1).
     Error: fatal: unable to access 'i18next/[email protected]/': The requested URL returned error: 400
warn Error on lookup for github:andyearnshaw/Intl.js@^0.1.4, retrying (1).
     Error: fatal: unable to access 'andyearnshaw/[email protected]/': The requested URL returned error: 400

as a test removing the registry entry (both of them) from .jspm.json fixed my issue. As best I can tell - without using the specific registry prefix it will use the value of the registry set by the registry property in the package.json. I don't think either of those packages are registered with npm or jspm? Maybe that's the issue. Locking into 4.6 for now.

One other weird thing was the listing in .jspm.json for those entries looks like the below - has an extra @* at the end

 "dependencies": {
    "Intl.js": "github:andyearnshaw/Intl.js@^0.1.4@*",
    "i18next": "github:i18next/i18next@^1.9.0@*",
    "aurelia-binding": "aurelia-binding@^1.0.0-beta.1.1.0",
    "aurelia-dependency-injection": "aurelia-dependency-injection@^1.0.0-beta.1.1.2",
    "aurelia-event-aggregator": "aurelia-event-aggregator@^1.0.0-beta.1.1.0",
    "aurelia-loader-default": "aurelia-loader-default@^1.0.0-beta.1.1.1",
    "aurelia-pal": "aurelia-pal@^1.0.0-beta.1.1.1",
    "aurelia-templating": "aurelia-templating@^1.0.0-beta.1.1.0",
    "aurelia-templating-resources": "aurelia-templating-resources@^1.0.0-beta.1.1.0"
  }

Interpolation with subobjects doesn't work

If we want to interpolate with some sub-object values the resulting string is wrong.

Example:
translation.json

{
  "test": {
    "test_string": "This __foo.bar__ is wrong!"
  }
}

foobar.js

test_string = i18n.tr('test.test_string', {foo:{bar:'correct'}});

I tried to find out what is the problem and I found it!
At line 75 of the i18n.js file https://github.com/aurelia/i18n/blob/master/src/i18n.js#L75
the subobjects are converted in object values:

{
  foo: {
    bar: 'correct'
  }
}

// is converted in
{
  foo.bar: 'correct'
}

But if we give a look to the i18next source code of the master branch https://github.com/i18next/i18next/blob/master/src/i18next.translate.js#L19-L23 we see that when it find a replacement with a keyseparator symbol inside (the dot in the most of cases) it try to search the sub object key property recursively.

The solution is to convert the line 75 of the i18n.js file from

return this.i18next.t(key, assignObjectToKeys('', fullOptions));

to

return this.i18next.t(key, fullOptions);

Router.Title translations for the title of the page

In the router configuration you can give a title to the route:

config.map([ { route: ['xy'], name: 'xy', moduleId: 'xy', title: 'MenuXy' } ... ]

This route can be translated by i18n in the HTML code - for example for a nav bar

<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a href.bind="row.href" t="${row.title}">${row.title}</a>
</li>

However the browser title of the tab/page will still be 'MenuXy'. Aurelia should adjust the behaviour of the title such that it will be translated too. Perhaps some sort of mechanism like t="MenuXy" can be implemented for the title too. In my scenario it is no option to directly translate in the config phase because the language can be switched dynamically by the user. Thanks.

escape characters in input placeholder translation

hi,

on an input field i want to put translation with special characters. How to do ?

I tried this

<input t="[placeholder][html]firstname" type="text">

and this

<input placeholder="${'[html]firstname' | t" type="text">

I'm using aurelia-i18n 0.2.6

thanks
Felix

Setup Linting

Set up eslint to follow the same rules as the core repos and resolve all lint errors. You can see how to do this by looking at the lint task of any sore repo along with its .eslintrc file.

Support locale in route paths

A common way to handle language selection in a site is to use the first component in the URL path to set the locale. Aaike implemented this in aaike/router@83891160c2c116c388517b344ed91d972089a911 with the following rules:

  • if the current locale is the sites default locale the URL is not changed
  • if the current locale is not the site default locale the URL path is changed to /${locale}<normal route path>
  • if the locale is changed the URL path is automatically updated

His changes work fine, and we have a site in production that relies on this behaviour. Unfortunately our use of Aaike's router fork means we can not upgrade to a recent Aurelia version.

In hindsight I am not so sure about the magic no-prefix-for-default-locale rule. This feels a bit risky since it will break for paths that happen to match a locale name: for example /my/settings could be both "my settings" or "settings in Burmese", and requires you to have a default locale concept which might not be necessary for anything else.

The discussion in zewa666/aurelia-i18next#10 also relates to this topic.

't-params' attribute cannot be renamed

I don't want to use the 't' attribute for i18n, so have specified I18N.setup({ attributes:['i18n'] }); in my aurelia plugin initialisation.

However, if I want to use the 'attribute param' syntax, I can only currently use 't-params', e.g.
<div i18n="token" t-params="value" />
I want to be able to do
<div i18n="token" i18n-params="value" />

This seems pretty simple to add, just an extra registerAttribute in I18N.configure.
For example: https://github.com/RichTeaTime/i18n
and would make the behaviour consistent when specifying custom attribute names.

i18n plugin fail to load in latest aurelia framework 0.16.0 release

When starting the app, I get the following errors:

Unhandled promise rejection Error: Cannot read property 'querySelectorAll' of undefined
    Error loading http://localhost:54866/jspm_packages/github/aurelia/[email protected]/dialog.html!template-registry-entry
    at TemplateRegistryEntry.setTemplate (http://localhost:54866/jspm_packages/github/aurelia/[email protected]/aurelia-loader.js:38:38)
    at http://localhost:54866/jspm_packages/github/aurelia/[email protected]/aurelia-loader-default.js:22:15
    at run (http://localhost:54866/jspm_packages/npm/[email protected]/modules/es6.promise.js:91:43)
    at http://localhost:54866/jspm_packages/npm/[email protected]/modules/es6.promise.js:105:11
    at module.exports (http://localhost:54866/jspm_packages/npm/[email protected]/modules/$.invoke.js:6:25)
    at queue.(anonymous function) (http://localhost:54866/jspm_packages/npm/[email protected]/modules/$.task.js:40:9)
    at Number.run (http://localhost:54866/jspm_packages/npm/[email protected]/modules/$.task.js:27:7)
    at listner (http://localhost:54866/jspm_packages/npm/[email protected]/modules/$.task.js:31:9)

Please note, this is after manually altering the "github:aurelia/[email protected]" section in jspm's config.js to match the latest framework components.

i18n stopped working

After pre beta update loading i18n cause that whole application is not being bootstrap.
I'm getting this error in console

Unhandled promise rejection TypeError: resources.getAttribute is not a function(โ€ฆ)(anonymous function) @ es6.promise.js:138 es6.promise.js:138 Unhandled promise rejection TypeError: resources.getAttribute is not a function(โ€ฆ)(anonymous function) @ es6.promise.js:138

When I remove from main.js file

aurelia.use
.plugin('aurelia-i18n', (instance) => {
        // adapt options to your needs (see http://i18next.com/pages/doc_init.html)
        instance.setup({
          resGetPath : 'locale/__lng__/__ns__.json',
          lng : 'de',
          attributes : ['t','i18n'],
          getAsync : true,
          sendMissing : false,
          fallbackLng : 'en',
          debug : false
        });
      });

everything is working fine.

i18n flattens passed in objects where i18next expects full objects

translation.json
{myKey: "alert for __property.name__"}

my code looks something like this:
this.alertHeader = this.i18n.tr('myKey', {property: this.property});

i18n.tr makes this call
this.i18next.t(key, (0, _utils.assignObjectToKeys)('', fullOptions))

which flattens out a hierarchy {property: {name:'prop1", type:'string', foo:{bar:1}}} so that would end up being:

{
  property.name: 'prop1',
  property.type: 'string',
  property.foo.bar: 1
}

which looks like what you would want but the i18next expects the object and not a flattened list.

checkout i18next.js

function applyReplacement(str, replacementHash, nestedKey, options) {
     ....
     // Check for recursive matches of object
     <code here>
     ...
}

Uncaught TypeError: Cannot read property 'dispose' of undefined

After updating to beta-1 I got in Chrome

Uncaught TypeError: Cannot read property 'dispose' of undefined
unbind @ t.js:102
unbind @ aurelia-templating.js:2767
unbind @ aurelia-templating.js:883
unbind @ if.js:68
unbind @ aurelia-templating.js:2767
unbind @ aurelia-templating.js:883
unbind @ aurelia-templating.js:2763
unbind @ aurelia-templating.js:883
(anonymous function) @ if.js:40
flushMicroTaskQueue @ aurelia-task-queue.js:110
(anonymous function) @ aurelia-task-queue.js:60

In Firefox I have TypeError: this.subscription is undefined

The error occurs when changing merchantState.selector

// somewhere in app-subcomponent.html
<span if.bind="merchantState.selector != 'single'" data-toggle="dropdown" href="#" class="dropdown-toggle" style="cursor: pointer;">
     <span if.bind="merchantState.merchant">${merchantState.merchant.user.companyname</span>
     <span show.bind="!merchantState.merchant" t="merchant-selector.undefined"></span>
</span>

I change merchantState.selector during navigation in auth step, and app-subcomponent is removed at that moment with if.bind="..." from the DOM.

Just got some idea to override the problem. That html works with no error.

<span if.bind="merchantState.selector != 'single'" data-toggle="dropdown" href="#" class="dropdown-toggle" style="cursor: pointer;">
     <span if.bind="merchantState.merchant">${merchantState.merchant.user.companyname}</span>
     <template show.bind="!merchantState.merchant">
         <span t="merchant-selector.undefined"></span>
     </template>
</span>

@zewa666 tried

<span t="merchant-selector.undefined" show.bind="!merchantState.merchant"></span>

but error is still there, and the error trace is the same

Getting translation error when using t signals

The message that appears instead of translation is key 'translation:... (de)' returned an object instead of string.

There are no plunker with the latest i18n, so I will try to describe it here.

Somewhere in my app I have:

<template repeat.for="item of items">
    <compose containerless view="item.html"></compose>
</template>
<!-- item.html -->
<template>
  <require from="custom-component"></require>
  <custom-component prop1="${'somens:str1' & t}" prop2="${'somens:str2' & t}"></custom-component>
</template>

inside custom-component prop1 and prop2 are shown as ${prop1} and ${prop2}

I have two items inside items
First item is rendered fine, shows correct translation for somens:str1 and somens:str2, but second item shows only somens:str1 and instead of somens:str2 I see key 'translation:... (de)' returned an object instead of string.

When switching locale in first item that error message for prop2 is rendered too, but prop1 is still translated.

And everything is good if I use behaviour prop2="${'somens:str2' | t: {dummy: currentLocale}}"

Tested it in Chrome and Firefox on osx

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.