John Cowen 74070c0955
ui: Add intl debug helpers (#10513)
This commit adds a couple of debug utilities to help us to continue slowly adding i18n support:

- We've added a CONSUL_INTL_DEBUG env/cookie variable to turn off variable interpolation within the t helper so you can see which variables are being interpolated.
- We've added a CONSUL_INTL_LOCALE env/cookie which currently supports two 'pseudo-locales' - la-fk (fake latin) and - (just dashes) either of which will make it easier to see what has not been localized until we can add prettier rules to prevent adding any copy into templates at all. I would guess if we ever translated the app we would use this for looking at things whilst developing also - but as yet I've not adding anything for that here seeing as we don't translate anything.
Both variables are dev-time only and all code for this is removed from the production build.
2021-07-06 17:01:08 +01:00

93 lines
2.6 KiB
JavaScript

import ApplicationRoute from '../routes/application';
import { I18nService, formatOptionsSymbol } from './i18n';
import ucfirst from 'consul-ui/utils/ucfirst';
import faker from 'faker';
let isDebugRoute = false;
const routeChange = function(transition) {
isDebugRoute = transition.to.name.startsWith('docs');
};
const DebugRoute = class extends ApplicationRoute {
constructor(owner) {
super(...arguments);
this.router = owner.lookup('service:router');
this.router.on('routeWillChange', routeChange);
}
renderTemplate() {
if (isDebugRoute) {
this.render('debug');
} else {
super.renderTemplate(...arguments);
}
}
willDestroy() {
this.router.off('routeWillChange', routeChange);
super.willDestroy(...arguments);
}
};
// we currently use HTML in translations, so anything 'word-like' with these
// chars won't get translated
const translator = cb => item => (!['<', '>', '='].includes(item) ? cb(item) : item);
class DebugI18nService extends I18nService {
formatMessage(value, formatOptions) {
const text = super.formatMessage(...arguments);
let locale = this.env.var('CONSUL_INTL_LOCALE');
if (locale) {
switch (this.env.var('CONSUL_INTL_LOCALE')) {
case '-':
return text
.split(' ')
.map(
translator(item =>
item
.split('')
.map(item => '-')
.join('')
)
)
.join(' ');
case 'la-fk':
locale = 'en';
// fallsthrough
default:
faker.locale = locale;
return text
.split(' ')
.map(
translator(item => {
const word = faker.lorem.word();
return item.charAt(0) === item.charAt(0).toUpperCase() ? ucfirst(word) : word;
})
)
.join(' ');
}
}
return text;
}
[formatOptionsSymbol]() {
const formatOptions = super[formatOptionsSymbol](...arguments);
if (this.env.var('CONSUL_INTL_DEBUG')) {
return Object.fromEntries(
// skip ember-intl special props like htmlSafe and default
Object.entries(formatOptions).map(([key, value]) =>
!['htmlSafe', 'default'].includes(key) ? [key, `{${key}}`] : [key, value]
)
);
}
return formatOptions;
}
}
export default {
name: 'debug',
after: 'i18n',
initialize(application) {
application.register('route:application', DebugRoute);
application.register('service:intl', DebugI18nService);
},
};