{"action":"created","issue":{"url":"https://api.github.com/repos/jshcrowthe/wc-i18n/issues/6","repository_url":"https://api.github.com/repos/jshcrowthe/wc-i18n","labels_url":"https://api.github.com/repos/jshcrowthe/wc-i18n/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/jshcrowthe/wc-i18n/issues/6/comments","events_url":"https://api.github.com/repos/jshcrowthe/wc-i18n/issues/6/events","html_url":"https://github.com/jshcrowthe/wc-i18n/pull/6","id":177914134,"number":6,"title":"Version 2.0","user":{"login":"jshcrowthe","id":5588878,"avatar_url":"https://avatars.githubusercontent.com/u/5588878?v=3","gravatar_id":"","url":"https://api.github.com/users/jshcrowthe","html_url":"https://github.com/jshcrowthe","followers_url":"https://api.github.com/users/jshcrowthe/followers","following_url":"https://api.github.com/users/jshcrowthe/following{/other_user}","gists_url":"https://api.github.com/users/jshcrowthe/gists{/gist_id}","starred_url":"https://api.github.com/users/jshcrowthe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jshcrowthe/subscriptions","organizations_url":"https://api.github.com/users/jshcrowthe/orgs","repos_url":"https://api.github.com/users/jshcrowthe/repos","events_url":"https://api.github.com/users/jshcrowthe/events{/privacy}","received_events_url":"https://api.github.com/users/jshcrowthe/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-09-19T22:23:46Z","updated_at":"2016-10-09T00:05:06Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/jshcrowthe/wc-i18n/pulls/6","html_url":"https://github.com/jshcrowthe/wc-i18n/pull/6","diff_url":"https://github.com/jshcrowthe/wc-i18n/pull/6.diff","patch_url":"https://github.com/jshcrowthe/wc-i18n/pull/6.patch"},"body":"# Version 2.0 Release\r\n\r\nI have decided to approach the problem a little differently. In doing so I have made some breaking changes but have simplified the API drastically.\r\n\r\n## Breaking Changes\r\n\r\nLets get these out of the way up front. Lots of changes:\r\n\r\n- No longer exposes the elements `wc-i18n` or `wc-i18n-src`\r\n- Refactored behavior name from `WCI18nBehavior` -> `WCI18n`\r\n- Behavior is now a function instead of just an object, (you must call the function)\r\n- Temporarily removed the mapping function `_localeMapper` (This will be added in `v2.1`)\r\n- Languages are now set on a page level via `WCI18n.setLocale`\r\n\r\n## The new API\r\n\r\nBefore the API required **way** to much boilerplate to actually get functioning well. This refactor has eliminated a lot of that and simplified it to three things. Consider the component below:\r\n\r\n```html\r\n<link rel=\"import\" href=\"../polymer/polymer.html\">\r\n<link rel=\"import\" href=\"../wc-i18n/wc-i18n.html\">\r\n\r\n<dom-module id=\"v2-comp\">\r\n  <template>\r\n    <style>\r\n      :host {\r\n        display: block;\r\n      }\r\n    </style>\r\n    <h1>[[_i18n.KEY_NAME]]</h1>\r\n  </template>\r\n  <script>\r\n    Polymer({\r\n      is: 'v2-comp',\r\n      behaviors: [\r\n        WCI18n('v2-comp')\r\n      ]\r\n    });\r\n  </script>\r\n</dom-module>\r\n```\r\n\r\nThere are 3 keys to using this component:\r\n- `<link rel=\"import\" href=\"../wc-i18n/wc-i18n.html\">`\r\n- `WCI18n('v2-comp')`\r\n- `[[_i18n.KEY_NAME]]`\r\n\r\nThe first two points are the only boilerplate required to bootstrap your component's translations. The first is pretty self explanatory, HTML import `wc-i18n.html` into your application. The second is the inclusion of the `WCI18n` behavior. This is a function that must be called with the name of your component (the same value that is set as the `is` attribute). It will then, for local dev, look in the `locales` directory for the locales as before.\r\n\r\nAfter those two steps, you simply use the `_i18n` object provided to you as a part of the behavior. You are also given 3 methods that you can use:\r\n\r\n- `setLocales(lang, locales)`: This method will allow you to override the locales for a given component. NOTE: This will modify **all** instances of this component throughout the app.\r\n- `getLocales(lang)`: This method fetches the locales for a given language and returns them as an object.\r\n- `translate(string, lang)`: This method translates a given string to the passed language.\r\n\r\n_NOTE: In all instances, the language, if not passed, defaults to `WCI18n.getLocale()`_\r\n\r\nMost people will use the `_i18n` object and data bind to it inside of their applications.\r\n\r\n## Prod Use\r\n\r\nThere is a [PR on gulp-wc-i18n](https://github.com/jshcrowthe/gulp-wc-i18n/pull/1) to support this change. See the docs there on inlining translations for production usage."},"comment":{"url":"https://api.github.com/repos/jshcrowthe/wc-i18n/issues/comments/252455319","html_url":"https://github.com/jshcrowthe/wc-i18n/pull/6#issuecomment-252455319","issue_url":"https://api.github.com/repos/jshcrowthe/wc-i18n/issues/6","id":252455319,"user":{"login":"jshcrowthe","id":5588878,"avatar_url":"https://avatars.githubusercontent.com/u/5588878?v=3","gravatar_id":"","url":"https://api.github.com/users/jshcrowthe","html_url":"https://github.com/jshcrowthe","followers_url":"https://api.github.com/users/jshcrowthe/followers","following_url":"https://api.github.com/users/jshcrowthe/following{/other_user}","gists_url":"https://api.github.com/users/jshcrowthe/gists{/gist_id}","starred_url":"https://api.github.com/users/jshcrowthe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jshcrowthe/subscriptions","organizations_url":"https://api.github.com/users/jshcrowthe/orgs","repos_url":"https://api.github.com/users/jshcrowthe/repos","events_url":"https://api.github.com/users/jshcrowthe/events{/privacy}","received_events_url":"https://api.github.com/users/jshcrowthe/received_events","type":"User","site_admin":false},"created_at":"2016-10-09T00:05:06Z","updated_at":"2016-10-09T00:05:06Z","body":"@marcelklehr the translations are being loaded in two different ways (depending on the environment):\r\n\r\n### Dev\r\nThe files are loaded via `AJAX` (in my implementation I use `fetch` instead of `XMLHttpRequest`). Based on which language is currently set for the application (ATM v2 of`wc-i18n` only allows 1).\r\n\r\n### Prod\r\nYou would either inline your resources (similar to how it is done in https://github.com/PolymerElements/app-localize-behavior) at dev time **or** you can use a tool like https://github.com/jshcrowthe/gulp-wc-i18n to inline them for you at build time. Either way, you don't want to have a network request, per component, to render text to the screen (that can get costly real fast).\r\n\r\nAgain, app-localize-behavior handles this by letting you pass a `resources` prop or by specifying the location of 1 large locale file. This file gets cached so using `AJAX` to load it (which IMO isn't optimal due to the network request), totally works because the request is really only made once.\r\n\r\n### Customizing locale loading\r\nSo, to your point. We could definitely allow the extension of the loading behavior for and look for an optional function `loadLocales` function (or similar) that returns a `Promise`. \r\nThat promise would then just need to resolve with an object formatted as follows:\r\n\r\n```javascript\r\n{\r\n  en: {\r\n    key: 'value'\r\n  },\r\n  fr: {\r\n    key: 'valeur'\r\n  }\r\n}\r\n```\r\n\r\nThat could totally work. Thoughts?\r\n\r\nI had originally defined the loading behavior in the `v1` iteration of this as a component called `wc-i18n-src`. However it required a large amount of boilerplate just to get it working which I thought was sub-optimal. `v2` gets us to a place I feel is much cleaner (the whole piece of functionality implemented as a behavior), and reduces the boilerplate significantly."}}
{"actor":{"display_login":"jshcrowthe"}}