Merge pull request #90 from fabscale/fn/locales-import

Update locale import to be more Embroider compatible

Author: mydea

README.md

@@ -106,9 +106,11 @@ ember gettext:convert --locale=de
 
 This project is basically a fork of [ember-l10n](https://github.com/Cropster/ember-l10n). It is _mostly_ compatible with it, and can be migrated with some minor steps:
 
-0. Run `yarn remove ember-l10n && yarn add @ember-gettext/ember-l10n @ember-gettext/gettext-parser --dev --tilde`
+0. Run `yarn remove ember-l10n && yarn add @ember-gettext/ember-l10n @ember-gettext/gettext-parser --dev --tilde && ember generate ember-l10n`
 1. Replace the `ember-l10n` key in your `config/environment.js` with `@ember-gettext/ember-l10n`
 2. Replace usage of `<GetText>` with `<L10nMessage>`
 3. Replace usage of `{{pt}}` with `{{t}}` with an additional argument, as well as `{{pn}}` with `{{n}}`
-4. Move your locale .json files from `public/assets/locales` to `translations`
-5. Use the new streamlined `ember gettext:extract` and `ember gettext:convert` commands instead of `ember l10n:XXX`
+4. Move your .po & .pot files to `./translations` folder
+5. Remove locale .json files from `public/assets/locales`
+6. Use the new streamlined `ember gettext:extract` and `ember gettext:convert` commands instead of `ember l10n:XXX`
+7. Run `ember gettext:convert` to convert all .po files to locale .json files to get started

packages/ember-l10n/README.md

@@ -8,10 +8,13 @@ In the ember-l10n workflow, you use the `t`, and `n` helpers and `l10n.t()` / `l
 
 ## Compatibility
 
+- **Embroider only!!**
 - Ember.js v3.25 or above
 - Ember CLI v3.20 or above
 - Node.js v12 or above
 
+This addon is optimized for Embroider. It is probably possible to also use it without Embroider, but you'll need to adjust the generated import map yourself.
+
 ## Installation
 
 ```
@@ -33,9 +36,18 @@ let ENV = {
 };
 ```
 
+In order to ensure the locales are lazy loaded, you'll need to add this to your `ember-cli-build.js` file:
+
+```js
+return require('@embroider/compat').compatBuild(app, Webpack, {
+  // Ensure `locales` are considered static & lazy loaded
+  staticAppPaths: ['locales'],
+});
+```
+
 ## Usage
 
-Translations are provided as `.json` files under `/translations`, e.g. `/translations/de.json`.
+Translations are provided as `.json` files under `/app/locales`, e.g. `/app/locales/de.json`.
 They can be generated with the separate parser addon.
 
 To use translations in your app, you can use either the provided helpers, a contextual component or a service:
@@ -180,11 +192,7 @@ will be available as `{{text}}` to the named block.
 
 Locale files can be generated with [gettext-parser](./../gettext-parser).
 
-ember-l10n expects properly formatted .json files (e.g. `de.json`, `en.json`) in the `./translations` folder of your app.
-These files will be automatically be moved to `assets/locales` at build time, e.g. `assets/locales/en.json`.
-
-You will have to make sure to either let them be fingerprinted (which happens automatically by broccoli-asset-rev)
-or otherwise handle cache invalidation of these files yourself.
+ember-l10n expects properly formatted .json files (e.g. `de.json`, `en.json`) , by default in the `./app.locales` folder of your app.
 
 ### Locale detection
 
@@ -204,6 +212,10 @@ export default class ApplicationRoute extends Route {
 
 This will pick the first matching locale from the available locales for you.
 
+## Updating from older versions
+
+When updating from versions before 1.x, please run `ember generate ember-l10n` once to generate the required boilerplate files for you.
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

packages/ember-l10n/addon/services/l10n.js

@@ -9,16 +9,12 @@ import {
   getMessages,
   getPluralMessage,
 } from '@ember-gettext/ember-l10n/utils/message-utils';
-import fetch from 'fetch';
 import { detectLocale } from '@ember-gettext/ember-l10n/utils/detect-locale';
 import { PluralFactory } from '@ember-gettext/ember-l10n/utils/plural-factory';
 import { buildWaiter } from '@ember/test-waiters';
 
 const waiter = buildWaiter('ember-l10n:l10n');
 
-// We cache locales - this is useful to avoid re-fetching the locale files e.g. in acceptance tests
-const LOCALE_CACHE = {};
-
 export default class L10nService extends Service {
   @tracked locale;
   @tracked l10nTranslations;
@@ -29,12 +25,18 @@ export default class L10nService extends Service {
   availableLocales = ['en'];
   defaultPluralFactory;
 
-  // This will be replaced at build time via a babel plugin with the actual asset map
-  _staticAssetMap;
+  localeLoadingMap;
 
   constructor() {
     super(...arguments);
 
+    this.localeLoadingMap = getOwner(this).lookup('ember-l10n:locales');
+    assert(
+      `It seems the locale map could not be loaded. 
+Please run \`ember generate ember-l10n\` once to create the required boilerplate.`,
+      this.localeLoadingMap
+    );
+
     let config = getOwner(this).resolveRegistration('config:environment');
     let l10nConfig = config['@ember-gettext/ember-l10n'];
     this._loadConfig(l10nConfig);
@@ -122,7 +124,7 @@ export default class L10nService extends Service {
       this.availableLocales.includes(locale)
     );
 
-    await this._loadLocaleFile(locale);
+    await this._loadLocale(locale);
 
     this.locale = locale;
 
@@ -159,26 +161,20 @@ export default class L10nService extends Service {
     }
   }
 
-  async _loadLocaleFile(locale) {
-    if (LOCALE_CACHE[locale]) {
-      this.pluralFactory = new PluralFactory(locale);
-      this.l10nTranslations = LOCALE_CACHE[locale];
-      return;
-    }
-
+  async _loadLocale(locale) {
     let localeData;
 
-    let localePath = this._staticAssetMap[locale];
+    let loadFn = this.localeLoadingMap[locale];
 
     assert(
-      `ember-l10n: Cannot find locale file path for locale "${locale}"`,
-      Boolean(localePath)
+      `ember-l10n: Cannot find locale file for locale "${locale}"`,
+      Boolean(loadFn)
     );
 
     let token = waiter.beginAsync();
 
     try {
-      localeData = await this._fetch(localePath);
+      localeData = await loadFn();
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(`ember-l10n: Error trying to fetch locale ${locale}`);
@@ -193,27 +189,13 @@ export default class L10nService extends Service {
     this.l10nTranslations = l10nTranslations;
     this.pluralFactory = new PluralFactory(locale);
 
-    LOCALE_CACHE[locale] = l10nTranslations;
-
     waiter.endAsync(token);
   }
 
-  async _fetch(localePath) {
-    let response = await fetch(localePath);
-    return response.json();
-  }
-
   _validateLocales() {
     assert(
       `ember-l10n: Do not use the locale zh, as it is not a valid locale. Instead, use dedicated locales for traditional & simplified Chinese.`,
       !this.availableLocales.some((locale) => locale === 'zh')
     );
   }
 }
-
-// This is mostly relevant for tests - normally you shouldn't have to ever use this
-export function clearLocaleCache() {
-  for (let k in LOCALE_CACHE) {
-    delete LOCALE_CACHE[k];
-  }
-}

packages/ember-l10n/blueprints/ember-l10n/files/app/instance-initializers/ember-l10n.js

@@ -0,0 +1,9 @@
+import localeMap from '<%= dasherizedPackageName %>/locales/index';
+
+export function initialize(appInstance) {
+  appInstance.register('ember-l10n:locales', localeMap, { instantiate: false });
+}
+
+export default {
+  initialize,
+};

packages/ember-l10n/blueprints/ember-l10n/files/app/locales/index.js

@@ -0,0 +1,3 @@
+const localeMap = {};
+
+export default localeMap;

packages/ember-l10n/config/ember-try.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const getChannelURL = require('ember-source-channel-url');
-const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
 
 module.exports = async function () {
   return {
@@ -39,36 +38,6 @@ module.exports = async function () {
           },
         },
       },
-      {
-        name: 'ember-default-with-jquery',
-        env: {
-          EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'jquery-integration': true,
-          }),
-        },
-        npm: {
-          devDependencies: {
-            '@ember/jquery': '^1.1.0',
-          },
-        },
-      },
-      {
-        name: 'ember-classic',
-        env: {
-          EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'application-template-wrapper': true,
-            'default-async-observers': false,
-            'template-only-glimmer-components': false,
-          }),
-        },
-        npm: {
-          ember: {
-            edition: 'classic',
-          },
-        },
-      },
-      embroiderSafe(),
-      embroiderOptimized(),
     ],
   };
 };

packages/ember-l10n/ember-cli-build.js

@@ -3,14 +3,7 @@
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function (defaults) {
-  let app = new EmberAddon(defaults, {
-    'ember-fetch': {
-      preferNative: true,
-    },
-    fingerprint: {
-      extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'json'],
-    },
-  });
+  let app = new EmberAddon(defaults, {});
 
   /*
     This build file specifies the options for the dummy test app of this
@@ -19,12 +12,8 @@ module.exports = function (defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
-  const { maybeEmbroider } = require('@embroider/test-setup');
-  return maybeEmbroider(app, {
-    skipBabel: [
-      {
-        package: 'qunit',
-      },
-    ],
+  const { Webpack } = require('@embroider/webpack');
+  return require('@embroider/compat').compatBuild(app, Webpack, {
+    staticAppPaths: ['locales'],
   });
 };

packages/ember-l10n/index.js

@@ -1,86 +1,5 @@
 'use strict';
-const funnel = require('broccoli-funnel');
-const CreateLocaleAssetMap = require('./lib/create-locale-asset-map');
-
-const DEST_DIR = 'assets/locales';
 
 module.exports = {
   name: require('./package').name,
-
-  included() {
-    this._super.included.apply(this, arguments);
-
-    this._fixFingerprintingSettings();
-  },
-
-  treeForPublic() {
-    let localeTree = funnel(this._getTranslationsFolder(), {
-      destDir: DEST_DIR,
-      include: ['*.json'],
-    });
-
-    return localeTree;
-  },
-
-  setupPreprocessorRegistry(type, registry) {
-    if (type !== 'self') {
-      return;
-    }
-
-    let translationsFolder = this._getTranslationsFolder();
-    registry.add('js', new CreateLocaleAssetMap({ translationsFolder }));
-  },
-
-  _fixFingerprintingSettings() {
-    let app = this._findHost();
-
-    // Fix fingerprinting options to work
-    if (
-      app.options?.fingerprint?.enabled !== false &&
-      app.project.findAddonByName('broccoli-asset-rev')
-    ) {
-      let fingerprintOptions = app.options.fingerprint;
-
-      let infoMessages = [];
-
-      // Ensure .json files are fingerprinted
-      if (!fingerprintOptions.extensions) {
-        // eslint-disable-next-line node/no-unpublished-require
-        let opts = require('broccoli-asset-rev/lib/default-options');
-
-        let extensions = opts.extensions.slice().concat(['json']);
-
-        infoMessages.push(
-          `set fingerprint.extensions = ${JSON.stringify(extensions)}`
-        );
-      } else if (!fingerprintOptions.extensions.includes('json')) {
-        fingerprintOptions.extensions.push('json');
-        infoMessages.push("added 'json' to fingerprint.extensions");
-      }
-
-      if (app.project.findAddonByName('ember-cli-fastboot')) {
-        // Ensure package.json is NOT fingerprinted (this is added by fastboot)
-        let excluded = fingerprintOptions.exclude || [];
-        fingerprintOptions.exclude = excluded;
-
-        if (!excluded.includes('package.json')) {
-          excluded.push('package.json');
-          infoMessages.push("added 'package.json' to fingerprint.exclude");
-        }
-      }
-
-      if (infoMessages.length > 0) {
-        this.ui.writeLine('');
-        this.ui.writeLine(
-          'ember-l10n automatically adjusted the fingerprinting settings to work properly:'
-        );
-        infoMessages.forEach((message) => this.ui.writeLine(`* ${message}`));
-        this.ui.writeLine('');
-      }
-    }
-  },
-
-  _getTranslationsFolder() {
-    return `${this.project.root}/translations`;
-  },
 };