locize VS Svelte

import I18NextVue from 'i18next-vue' import i18next from 'i18next' import Backend from 'i18next-locize-backend' import LanguageDetector from 'i18next-browser-languagedetector' import LastUsed from 'locize-lastused' import { locizePlugin } from 'locize' const isProduction = process.env.NODE_ENV === 'production' const locizeOptions = { projectId: process.env.VUE_APP_LOCIZE_PROJECTID, apiKey: process.env.VUE_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!! version: process.env.VUE_APP_LOCIZE_VERSION } if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18next.use(LastUsed); } export const i18nextPromise = i18next // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: !isProduction, fallbackLng: 'en', saveMissing: !isProduction, backend: locizeOptions, locizeLastUsed: locizeOptions }) export default function (app) { app.use(I18NextVue, { i18next }) return app }

Let's install locize:

With the help of the locize plugin, you'll be able to use your app within the locize InContext Editor.

import { hydrate } from 'react-dom' import { RemixBrowser } from 'remix' import i18next from 'i18next' import LanguageDetector from 'i18next-browser-languagedetector' import { initReactI18next } from 'react-i18next' import Backend from 'i18next-locize-backend' import LastUsed from 'locize-lastused' import { locizePlugin } from 'locize' import i18nextOptions from './i18nextOptions' const isProduction = process.env.NODE_ENV === 'production' const locizeOptions = { projectId: 'f6d74b76-9677-4a0d-b400-86e1507397ab', apiKey: !isProduction ? '1c2bbc21-027d-4f41-995a-e8beb451cdef' : undefined, // YOU should not expose your apps API key to production!!! version: isProduction ? 'production' : 'latest' } if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18next.use(LastUsed) } // initialize i18next using initReactI18next and configuring it if (!i18next.isInitialized) { // prevent i18next to be initialized multiple times i18next // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ ...i18nextOptions, detection: { caches: ['cookie'], lookupCookie: 'i18next' }, backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: !isProduction // you should not use saveMissing in production }) .then(() => { // then hydrate your app wrapped in the RemixI18NextProvider return hydrate( , document ) }) }

const getGreetingTime = () => { const split_afternoon = 12; // 24hr time to split the afternoon const split_evening = 17; // 24hr time to split the evening const currentHour = moment().hour(); if (currentHour >= split_afternoon && currentHour <= split_evening) { return 'afternoon'; } else if (currentHour >= split_evening) { return 'evening'; } return 'morning'; } const rerender = () => { // start localizing, details: // https://github.com/i18next/jquery-i18next#usage-of-selector-function $('body').localize(); $('#footerMessage').localize({ context: getGreetingTime() }); $('title').text($.t('head.title')) $('meta[name=description]').attr('content', $.t('head.description')) } const locizeOptions = { projectId: '8d751621-323e-4bda-94c8-7d2368102e62', apiKey: '302aca54-2ea8-4b9f-b5f0-df1369c59427' // YOU should not expose your apps API key to production!!! }; i18next.on('editorSaved', rerender); // used for the inContext editor $(function () { const locizeBackend = new i18nextLocizeBackend(locizeOptions, (err, opts, lngs) => { if (err) return console.error(err); // use plugins and options as needed, for options, detail see // https://www.i18next.com i18next // locize-editor // InContext Editor of locize .use(locize.locizePlugin) // locize-lastused (do not use this in production) // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused .use(locizeLastUsed) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(locizeBackend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(i18nextBrowserLanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ ...opts, debug: true, fallbackLng: 'en', backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: true // interpolation: { // // legacy usage // format: (value, format, lng) => { // if (value instanceof Date) { // return moment(value).locale(lng).format(format); // } // return value; // } // } }, (err, t) => { if (err) return console.error(err); // new usage i18next.services.formatter.add('LLLL', (value, lng, options) => { return moment(value).locale(lng).format('LLLL'); }); // for options see // https://github.com/i18next/jquery-i18next#initialize-the-plugin jqueryI18next.init(i18next, $, { useOptionsAttr: true }); // fill language switcher Object.keys(lngs).map((lng) => { const opt = new Option(lngs[lng].nativeName, lng); if (lng === i18next.resolvedLanguage) { opt.setAttribute("selected", "selected"); } $('#languageSwitcher').append(opt); }); let languageChangedCounter = 0; $('#languageSwitcher').change((a, b, c) => { const chosenLng = $(this).find("option:selected").attr('value'); i18next.changeLanguage(chosenLng, () => { rerender(); // language changed message languageChangedCounter++; $('#languageChangedNotification').localize({ count: languageChangedCounter }) if (languageChangedCounter === 1) { $('#languageChangedNotification').show(); } }); }); rerender(); $('#loader').hide(); $('#content').show(); }); }); });

import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-locize-backend'; import LastUsed from 'locize-lastused'; import { locizePlugin } from 'locize'; import { DateTime } from 'luxon'; const isProduction = process.env.NODE_ENV === 'production'; const locizeOptions = { projectId: process.env.REACT_APP_LOCIZE_PROJECTID, apiKey: process.env.REACT_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!! referenceLng: process.env.REACT_APP_LOCIZE_REFLNG, version: process.env.REACT_APP_LOCIZE_VERSION }; if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18n.use(LastUsed); } i18n // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, // not needed for react as it escapes by default format: (value, format, lng) => { if (value instanceof Date) { return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format]) } return value; } }, backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: !isProduction // you should not use saveMissing in production }); export default i18n;

React has introduced measures like batching state updates, background concurrent rendering and memoization to tackle this. My opinion is that the best way to solve the problem is by improving their reactivity model. The app needs to be able to track the code that should be re-run on updating a given state variable and specifically update the UI corresponding to this update. Tools like solid.js and svelte work in this manner. It also eliminates the need for a virtual DOM and diffing.

Similarly to Promises/A+, this effort focuses on aligning the JavaScript ecosystem. If this alignment is successful, then a standard could emerge, based on that experience. Several framework authors are collaborating here on a common model which could back their reactivity core. The current draft is based on design input from the authors/maintainers of Angular, Bubble, Ember, FAST, MobX, Preact, Qwik, RxJS, Solid, Starbeam, Svelte, Vue, Wiz, and more…

Svelte is a powerful web framework that offers a fresh approach to building web applications. Its simplicity, reactivity model, and built-in features make it an excellent choice for developers looking to create efficient and maintainable applications. By following this guide, you should now have a good understanding of how to get started with Svelte and build your first components, routes, and transitions. You can read more about svelte on the official Svelte website.

Use .NET features (especially dotnet watch) as a setup for a client-side Svelte application, starting from a simple C# console app.

Volar originally was Vue3's language support tool for VScode (I don't know about other editors). By today, volar has become a language indipendent framework to create language tools. It might still be a bit early for the dev with skill issues like me to use it and build some tools, but astro and svelte already use Volar to create their language tools.