locize 3.3.0 → 4.0.0

package/src/api/postMessage.js

@@ -1,5 +1,7 @@
 import { getIframeUrl } from '../vars.js'
 import { store } from '../store.js'
+import { uninstrumentedStore } from '../uninstrumentedStore.js'
+import { debounce } from '../utils.js'
 
 const legacyEventMapping = {
   committed: 'commitKeys'
@@ -13,32 +15,23 @@ export function addLocizeSavedHandler (handler) {
   api.locizeSavedHandler = handler
 }
 
-export function turnOn () {
-  api.scriptTurnedOff = false // unlock
-
-  api.turnOn()
-  return api.scriptTurnedOff
-}
-
-export function turnOff () {
-  api.turnOff()
-
-  api.scriptTurnedOff = true // lock
-  return api.scriptTurnedOff
-}
-
 export function setEditorLng (lng) {
   api.sendCurrentTargetLanguage(lng)
 }
 
 let pendingMsgs = []
+const allowedActionsBeforeInit = ['locizeIsEnabled', 'requestInitialize']
 export function sendMessage (action, payload) {
   if (!api.source) {
     api.source = document.getElementById('i18next-editor-iframe')?.contentWindow
   }
   if (!api.origin) api.origin = getIframeUrl()
 
-  if (!api.source || !api.source.postMessage) {
+  if (
+    !api.source ||
+    !api.source.postMessage ||
+    (!api.initialized && allowedActionsBeforeInit.indexOf(action) < 0)
+  ) {
     // console.warn('out nok queuing - ', api.source, api.origin, action, payload);
     pendingMsgs.push({ action, payload })
     return
@@ -55,11 +48,11 @@ export function sendMessage (action, payload) {
     api.source.postMessage(
       {
         sender: 'i18next-editor',
-        senderAPIVersion: 'v1',
+        senderAPIVersion: 'v2',
         action,
         message: action,
         payload
-      }, // message for legacy
+      },
       api.origin
     )
   }
@@ -72,6 +65,23 @@ export function sendMessage (action, payload) {
   })
 }
 
+const sendCurrentParsedContentDebounced = () => {
+  sendMessage('sendCurrentParsedContent', {
+    content: Object.values(store.data).map(item => {
+      return {
+        id: item.id,
+        keys: item.keys
+      }
+    }),
+    uninstrumented: Object.values(uninstrumentedStore.data).map(item => {
+      return {
+        id: item.id,
+        keys: item.keys
+      }
+    })
+  })
+}
+
 const handlers = {}
 let repeat = 5
 export const api = {
@@ -92,7 +102,7 @@ export const api = {
         clearInterval(api.initInterval)
         delete api.initInterval
       }
-    }, 1000)
+    }, 2000)
   },
 
   selectKey: meta => {
@@ -103,17 +113,7 @@ export const api = {
     sendMessage('confirmResourceBundle', payload)
   },
 
-  sendCurrentParsedContent: () => {
-    sendMessage('sendCurrentParsedContent', {
-      content: Object.values(store.data).map(item => {
-        return {
-          id: item.id,
-          // subliminal: item.subliminal,
-          keys: item.keys
-        }
-      })
-    })
-  },
+  sendCurrentParsedContent: debounce(sendCurrentParsedContentDebounced, 500),
 
   sendCurrentTargetLanguage: lng => {
     sendMessage('sendCurrentTargetLanguage', {
@@ -121,34 +121,17 @@ export const api = {
     })
   },
 
+  sendHrefchanged: href => {
+    sendMessage('hrefChanged', { href })
+  },
+
   addHandler: (action, fc) => {
     if (!handlers[action]) handlers[action] = []
     handlers[action].push(fc)
   },
 
-  // legacy
-  sendLocizeIsEnabled: () => {
-    sendMessage('locizeIsEnabled', { enabled: true })
-  },
-
-  turnOn: () => {
-    if (api.scriptTurnedOff) return sendMessage('forcedOff')
-
-    if (!api.clickInterceptionEnabled) {
-      window.document.body.addEventListener('click', api.clickHandler, true)
-    }
-    api.clickInterceptionEnabled = true
-    sendMessage('turnedOn')
-  },
-
-  turnOff: () => {
-    if (api.scriptTurnedOff) return sendMessage('forcedOff')
-
-    if (api.clickInterceptionEnabled) {
-      window.document.body.removeEventListener('click', api.clickHandler, true)
-    }
-    api.clickInterceptionEnabled = false
-    sendMessage('turnedOff')
+  sendLocizeIsEnabled: payload => {
+    sendMessage('locizeIsEnabled', { ...payload, enabled: true })
   },
 
   onAddedKey: (lng, ns, key, value) => {
@@ -166,6 +149,7 @@ export const api = {
 if (typeof window !== 'undefined') {
   window.addEventListener('message', e => {
     const { sender, /* senderAPIVersion, */ action, message, payload } = e.data
+    // console.warn(sender, action, message, payload)
 
     if (message) {
       const usedEventName = getMappedLegacyEvent(message)
@@ -177,7 +161,7 @@ if (typeof window !== 'undefined') {
     } else if (sender === 'i18next-editor-frame' && handlers[action]) {
       // console.warn('ok in', action, payload);
       handlers[action].forEach(fc => {
-        fc(payload)
+        fc(payload, e)
       })
     }
   })

package/src/implementations/dummyImplementation.js

@@ -0,0 +1,29 @@
+export function getImplementation () {
+  const impl = {
+    getResource: (lng, ns, key) => {
+      return {}
+    },
+    setResource: (lng, ns, key, value) => {
+      return
+    },
+    getResourceBundle: (lng, ns, cb) => {
+      cb({})
+    },
+    getDefaultNS: () => {
+      return
+    },
+    getLng: () => {
+      return
+    },
+    getSourceLng: () => {
+      return
+    },
+    getLocizeDetails: () => {
+      return {}
+    },
+    bindLanguageChange: cb => {},
+    bindMissingKeyHandler: cb => {},
+    triggerRerender: () => {}
+  }
+  return impl
+}

package/src/implementations/i18nextImplementation.js

@@ -0,0 +1,114 @@
+export function getImplementation (i18n) {
+  const impl = {
+    getResource: (lng, ns, key) => {
+      return i18n.getResource && i18n.getResource(lng, ns, key)
+    },
+    setResource: (lng, ns, key, value) => {
+      return i18n.addResource(lng, ns, key, value, { silent: true })
+    },
+    getResourceBundle: (lng, ns, cb) => {
+      i18n.loadNamespaces(ns, () => {
+        cb(i18n.getResourceBundle(lng, ns))
+      })
+    },
+    getDefaultNS: () => {
+      return i18n.options.defaultNS
+    },
+    getLng: () => {
+      return (
+        i18n.resolvedLanguage ||
+        (i18n.languages && i18n.languages[0]) ||
+        i18n.options.lng
+      )
+    },
+    getSourceLng: () => {
+      const fallback = i18n.options.fallbackLng
+      if (typeof fallback === 'string') return fallback
+      if (Array.isArray(fallback)) return fallback[fallback.length - 1]
+
+      if (fallback && fallback.default) {
+        if (typeof fallback.default === 'string') return fallback
+        if (Array.isArray(fallback.default))
+          return fallback.default[fallback.default.length - 1]
+      }
+
+      if (typeof fallback === 'function') {
+        const res = fallback(i18n.resolvedLanguage)
+        if (typeof res === 'string') return res
+        if (Array.isArray(res)) return res[res.length - 1]
+      }
+
+      return 'dev'
+    },
+    getLocizeDetails: () => {
+      let backendName
+      if (
+        i18n.services.backendConnector.backend &&
+        i18n.services.backendConnector.backend.options &&
+        i18n.services.backendConnector.backend.options.loadPath &&
+        i18n.services.backendConnector.backend.options.loadPath.indexOf(
+          '.locize.'
+        ) > 0
+      ) {
+        backendName = 'I18nextLocizeBackend'
+      } else {
+        backendName = i18n.services.backendConnector.backend
+          ? i18n.services.backendConnector.backend.constructor.name
+          : 'options.resources'
+      }
+
+      const opts = {
+        backendName,
+        sourceLng: impl.getSourceLng(),
+        i18nFormat:
+          i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
+        i18nFramework: 'i18next',
+        isLocizify: i18n.options.isLocizify,
+        defaultNS: i18n.options.defaultNS,
+        targetLngs: [
+          ...new Set(
+            [].concat(i18n.options.preload, i18n.options.supportedLngs, [
+              impl.getLng()
+            ])
+          )
+        ].filter(
+          l =>
+            l !== 'cimode' &&
+            l !== false &&
+            l !== 'false' &&
+            l !== undefined &&
+            l !== impl.getSourceLng()
+        ),
+        ns: [
+          ...new Set(
+            [].concat(
+              i18n.options.ns,
+              i18n.options.fallbackNS,
+              i18n.options.defaultNS
+            )
+          )
+        ].filter(n => n !== false && n !== 'false')
+      }
+
+      if (!i18n.options.backend && !i18n.options.editor) return opts
+      const pickFrom = i18n.options.editor || i18n.options.backend
+      return {
+        ...opts,
+        projectId: pickFrom.projectId,
+        version: pickFrom.version
+      }
+    },
+    bindLanguageChange: cb => {
+      i18n.on('languageChanged', cb)
+    },
+    bindMissingKeyHandler: cb => {
+      i18n.options.missingKeyHandler = (lng, ns, k, val, isUpdate, opts) => {
+        if (!isUpdate) cb(lng, ns, k, val)
+      }
+    },
+    triggerRerender: () => {
+      i18n.emit('editorSaved')
+    }
+  }
+  return impl
+}

package/src/implementations/index.js

@@ -0,0 +1,2 @@
+export * as i18next from './i18nextImplementation'
+export * as dummy from './dummyImplementation'

package/src/index.js

@@ -1,7 +1,12 @@
 import { locizePlugin, locizeEditorPlugin } from './locizePlugin.js'
-import { startStandalone } from './startStandalone.js'
-import { addLocizeSavedHandler, turnOn, turnOff, setEditorLng } from './api/index.js'
-import { wrap, unwrap, containsHiddenMeta, PostProcessor } from 'i18next-subliminal'
+import { startStandalone } from './_startStandalone.js'
+import { addLocizeSavedHandler, setEditorLng } from './api/index.js'
+import {
+  wrap,
+  unwrap,
+  containsHiddenMeta,
+  PostProcessor
+} from 'i18next-subliminal'
 
 export {
   wrap,
@@ -11,8 +16,6 @@ export {
   locizePlugin,
   locizeEditorPlugin,
   addLocizeSavedHandler,
-  turnOn,
-  turnOff,
   setEditorLng,
   startStandalone
 }
@@ -25,8 +28,6 @@ export default {
   addLocizeSavedHandler,
   locizePlugin,
   locizeEditorPlugin,
-  turnOn,
-  turnOff,
   setEditorLng,
   startStandalone
 }

package/src/locizePlugin.js

@@ -1,14 +1,7 @@
 import { PostProcessor, unwrap } from 'i18next-subliminal'
 import { start } from './process.js'
-import { startLegacy } from './processLegacy.js'
-import { getQsParameterByName } from './utils.js'
 
-let isInIframe = typeof window !== 'undefined'
-try {
-  // eslint-disable-next-line no-undef, no-restricted-globals
-  isInIframe = self !== top
-  // eslint-disable-next-line no-empty
-} catch (e) {}
+import * as implementations from './implementations/index.js'
 
 function configurePostProcessor (i18next, options) {
   i18next.use(PostProcessor)
@@ -27,7 +20,7 @@ function configurePostProcessor (i18next, options) {
 function getImplementation (i18n) {
   const impl = {
     getResource: (lng, ns, key) => {
-      return i18n.getResource(lng, ns, key)
+      return i18n.getResource && i18n.getResource(lng, ns, key)
     },
     setResource: (lng, ns, key, value) => {
       return i18n.addResource(lng, ns, key, value, { silent: true })
@@ -37,8 +30,15 @@ function getImplementation (i18n) {
         cb(i18n.getResourceBundle(lng, ns))
       })
     },
+    getDefaultNS: () => {
+      return i18n.options.defaultNS
+    },
     getLng: () => {
-      return i18n.resolvedLanguage || i18n.languages[0]
+      return (
+        i18n.resolvedLanguage ||
+        (i18n.languages && i18n.languages[0]) ||
+        i18n.options.lng
+      )
     },
     getSourceLng: () => {
       const fallback = i18n.options.fallbackLng
@@ -47,7 +47,8 @@ function getImplementation (i18n) {
 
       if (fallback && fallback.default) {
         if (typeof fallback.default === 'string') return fallback
-        if (Array.isArray(fallback.default)) return fallback.default[fallback.default.length - 1]
+        if (Array.isArray(fallback.default))
+          return fallback.default[fallback.default.length - 1]
       }
 
       if (typeof fallback === 'function') {
@@ -60,8 +61,15 @@ function getImplementation (i18n) {
     },
     getLocizeDetails: () => {
       let backendName
-      if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
-        backendName = 'I18NextLocizeBackend'
+      if (
+        i18n.services.backendConnector.backend &&
+        i18n.services.backendConnector.backend.options &&
+        i18n.services.backendConnector.backend.options.loadPath &&
+        i18n.services.backendConnector.backend.options.loadPath.indexOf(
+          '.locize.'
+        ) > 0
+      ) {
+        backendName = 'I18nextLocizeBackend'
       } else {
         backendName = i18n.services.backendConnector.backend
           ? i18n.services.backendConnector.backend.constructor.name
@@ -71,14 +79,38 @@ function getImplementation (i18n) {
       const opts = {
         backendName,
         sourceLng: impl.getSourceLng(),
-        i18nFormat: i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
+        i18nFormat:
+          i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
         i18nFramework: 'i18next',
         isLocizify: i18n.options.isLocizify,
-        defaultNS: i18n.options.defaultNS
+        defaultNS: i18n.options.defaultNS,
+        targetLngs: [
+          ...new Set(
+            [].concat(i18n.options.preload, i18n.options.supportedLngs, [
+              impl.getLng()
+            ])
+          )
+        ].filter(
+          l =>
+            l !== 'cimode' &&
+            l !== false &&
+            l !== 'false' &&
+            l !== undefined &&
+            l !== impl.getSourceLng()
+        ),
+        ns: [
+          ...new Set(
+            [].concat(
+              i18n.options.ns,
+              i18n.options.fallbackNS,
+              i18n.options.defaultNS
+            )
+          )
+        ].filter(n => n !== false && n !== 'false')
       }
 
       if (!i18n.options.backend && !i18n.options.editor) return opts
-      const pickFrom = i18n.options.backend || i18n.options.editor
+      const pickFrom = i18n.options.editor || i18n.options.backend
       return {
         ...opts,
         projectId: pickFrom.projectId,
@@ -113,19 +145,10 @@ export const locizeEditorPlugin = (opt = {}) => {
       // store for later
       i18next = i18n
 
-      const showInContext = opt.show || getQsParameterByName(opt.qsProp) === 'true'
-
-      // add postProcessor and needed options now
-      if (!isInIframe && showInContext) configurePostProcessor(i18next, options)
+      const impl = implementations.i18next.getImplementation(i18n)
 
-      const impl = getImplementation(i18n)
-
-      // start process and expose some implementation functions
-      if (!isInIframe && showInContext) {
-        start(impl)
-      } else if (isInIframe) {
-        startLegacy(impl)
-      }
+      configurePostProcessor(i18next, options)
+      start(impl, opt) // we no longer show the legacy process but use the new way without popup opening
     }
   }
 }

package/src/observer.js

@@ -156,6 +156,7 @@ export function createObserver (ele, handle) {
         subtree: true
       }
     ) => {
+      handle([ele]) // handle initial content - might be we're not using i18next that triggers mutations on translation (think of static content)
       observer.observe(ele, observerConfig)
     },
     skipNext () {