New UI, is this module deprecated?

[thisconnect]

💥 Regression Report

After upgrading from locize-editor 1.7.0 to 3.1.1 there is a message in the iframe

This old locize UI will be shut down soon!
A brand-new locize UI is here!

Check out what's new in our documentation and our blog post.

Switch to the new UI soon and let us know what you think about it!

There is a comment on https://docs.locize.com/more/incontext-editor/migrating-from-the-old-incontext-editor#1-replace-the-old-locize-editor that

If you are using the old locize-editor this guide will help you to migrate to the new approach.

this recommends to use https://github.com/locize/locize#with-i18next

but the README of that module doesn't have a lot documentation, what to do?

[jamuhl]

migration guide: https://docs.locize.com/more/incontext-editor/migrating-from-the-old-incontext-editor details about the new incontext view: https://docs.locize.com/different-views/incontext

Where do you struggle with the migration? Might be able add some more details based on your feedback.

[thisconnect]

Where do you struggle with the migration? Might be able add some more details based on your feedback.

If the locize module replaces locize-editor, I would look for some documentation on the options in locize readme, but I think I am missing something else.. I guess I am confused that for example locizeProjectID isnt documented in the readme. https://github.com/locize/locize#with-i18next

On https://docs.locize.com/more/incontext-editor/migrating-from-the-old-incontext-editor the only instruction is to replace locize-editor with locize, change the import and add an option.

Changing locize-editor from 1.7.0 to 3.1.1 did fix the iframe and shows the old UI.

But changing from locize-editor to locize, renders the app in split view but the righthand side is just empty (no iframe) and no JavaScript errors. Also tried to logout of locize.com, locize.app and locize.io (not sure which one is used)

diff --git a/frontends/web/package.json b/frontends/web/package.json
index 6c0d9a04..fb541c2b 100644
--- a/frontends/web/package.json
+++ b/frontends/web/package.json
@@ -33,7 +33,7 @@
     "i18next-locize-backend": "4.1.9",
     "lightweight-charts": "3.1.5",
     "linkstate": "1.1.1",
-    "locize-editor": "3.1.1",
+    "locize": "2.2.4",
     "preact": "8.5.3",
     "preact-compat": "3.19.0",
     "preact-router": "2.6.1",
diff --git a/frontends/web/src/i18n/i18n.js b/frontends/web/src/i18n/i18n.js
index 15484a73..eb060d84 100644
--- a/frontends/web/src/i18n/i18n.js
+++ b/frontends/web/src/i18n/i18n.js
@@ -32,7 +32,7 @@ import appTranslationsSL from '../locales/sl/app.json';
 import appTranslationsHE from '../locales/he/app.json';
 import languageFromConfig from './config';
 import Backend from 'i18next-locize-backend';
-import locizeEditor from 'locize-editor';
+import { locizePlugin } from 'locize';
 import { apiGet } from '../utils/request';
 import { setConfig } from '../utils/config';
 
@@ -50,7 +50,7 @@ let i18Init = i18n
 if (i18nEditorActive) {
     i18Init = i18Init
         .use(Backend)
-        .use(locizeEditor);
+        .use(locizePlugin);
 }
 i18Init.init({
     fallbackLng: 'en',
@@ -67,7 +67,8 @@ i18Init.init({
     },
 
     react: {
-        wait: true
+        bindI18n: 'languageChanged editorSaved',
+        wait: true,
     },
 
     backend: {
@@ -85,6 +86,9 @@ i18Init.init({
          * bodyStyle: 'margin-bottom: 205px;', */
         onEditorSaved: (lng, ns) => {
             i18n.reloadResources(lng, ns);
+            // // trigger an event on i18n which triggers a rerender
+            // // based on bindI18n below in react options
+            // i18n.emit('editorSaved');
         }
     },
 });

[thisconnect]

btw thanks for the quick response, and I hope I am not missing something obvious here

[jamuhl]

The new script currently has no options - this might change in future.

The point you miss - the new version does not show an iframe on your page but shows your site on an iframe on the incontext page on locize.app

[thisconnect]

The point you miss - the new version does not show an iframe on your page but shows your site on an iframe on the incontext page on locize.app

Ok makes more sense now, we actually don't have a website that can be iframed. Our app is bundled into a Qt webview desktop app. We used to make a special build for our translators that enables the locize editor in the.

The frontend is served from inside the qt app smth like qtr://public/index.html which is not accessible from the internet, not even on localhost.

[jamuhl]

I see. Currently, there is no plan to bring back an embeddable view. This might change in future.

[thisconnect]

Ok we stick with locize-editor for now, thanks for the feedback. Close this issue for now or keep it open?

[jamuhl]

just be aware...the old.locize.app will be shut down in close future...so that will stop working at some point...