locize 3.2.5 → 4.0.0

package/src/parser.js

@@ -1,7 +1,12 @@
-import { unwrap, containsHiddenMeta, containsHiddenStartMarker } from 'i18next-subliminal'
+import {
+  unwrap,
+  containsHiddenMeta,
+  containsHiddenStartMarker
+} from 'i18next-subliminal'
 import { store } from './store.js'
 import { uninstrumentedStore } from './uninstrumentedStore.js'
-import { validAttributes } from './vars.js'
+import { validAttributes, ignoreElements } from './vars.js'
+import { getI18nMetaFromNode } from './utils'
 
 import './shims/uniqueID.js'
 
@@ -15,27 +20,44 @@ export function setImplementation (impl) {
 
 function walk (node, func) {
   if (node.dataset && node.dataset.i18nextEditorElement === 'true') return
+
+  // parse node
   func(node)
 
-  const children = node.childNodes
+  // check if it is is any store - if so remove parent from uninstrumented
+  // this avoids situations where a div has inner text (not instrumented) and some children that are instrumented showing a big box around all
+  const instr = store.get(node.uniqueID)
+  const uninstr = uninstrumentedStore.get(node.uniqueID)
+
+  if (instr || uninstr) {
+    const id = node.parentElement?.uniqueID
+    uninstrumentedStore.remove(id, node.parentElement)
+  }
 
+  // parse children
+  const children = node.childNodes
   for (
     let i = 0;
     i < children.length;
     i++ // Children are siblings to each other
-  ) { walk(children[i], func) }
+  ) {
+    walk(children[i], func)
+  }
 }
 
-function extractMeta (id, type, meta, children) {
+function extractHiddenMeta (id, type, meta, children) {
   const { invisibleMeta, text } = meta
   if (!invisibleMeta || !invisibleMeta.key || !invisibleMeta.ns) return
 
-  if (!currentSourceLng) currentSourceLng = i18n?.getSourceLng()
+  if (!currentSourceLng) currentSourceLng = i18n.getSourceLng()
 
   return {
     eleUniqueID: id,
     textType: type,
-    children: children ? children.map(c => c.childIndex).join(',') : null,
+    children:
+      children && children.map
+        ? children.map(c => c.childIndex).join(',')
+        : null,
     qualifiedKey: `${invisibleMeta.ns}:${invisibleMeta.key}`,
     ...invisibleMeta,
     extractedText: text,
@@ -44,11 +66,57 @@ function extractMeta (id, type, meta, children) {
     i18nRawText: {
       [`${invisibleMeta.lng}`]:
         invisibleMeta.source === 'translation' && i18n
-          ? i18n.getResource(invisibleMeta.lng, invisibleMeta.ns, invisibleMeta.key)
+          ? i18n?.getResource(
+              invisibleMeta.lng,
+              invisibleMeta.ns,
+              invisibleMeta.key
+            )
           : null,
       [`${currentSourceLng}`]:
         invisibleMeta.source === 'translation' && i18n
-          ? i18n.getResource(currentSourceLng, invisibleMeta.ns, invisibleMeta.key)
+          ? i18n?.getResource(
+              currentSourceLng,
+              invisibleMeta.ns,
+              invisibleMeta.key
+            )
+          : null
+    }
+  }
+}
+
+export function extractNodeMeta (id, type, nodeMeta = {}, text, children) {
+  const meta = nodeMeta[type]
+  if (!meta) return
+
+  if (!currentSourceLng) currentSourceLng = i18n.getSourceLng()
+  const i18nTargetLng = i18n.getLng()
+
+  // console.warn('lng', i18nTargetLng)
+
+  return {
+    eleUniqueID: id,
+    textType: type,
+    children:
+      children && children.map
+        ? children.map(c => c.childIndex).join(',')
+        : null,
+    qualifiedKey:
+      meta.key && (meta.ns || i18n?.getDefaultNS())
+        ? `${meta.ns || i18n?.getDefaultNS()}:${meta.key}`
+        : null,
+    key: meta.key,
+    ns: meta.ns || i18n?.getDefaultNS(),
+    extractedText: text,
+    i18nTargetLng,
+    i18nSourceLng: currentSourceLng,
+    i18nRawText: {
+      [`${i18nTargetLng}`]:
+        i18n && meta.ns && meta.key
+          ? i18n?.getResource(i18nTargetLng, meta.ns, meta.key) || text
+          : text,
+      [`${currentSourceLng}`]:
+        i18n && meta.ns && meta.key
+          ? i18n?.getResource(currentSourceLng, meta.ns, meta.key)
           : null
     }
   }
@@ -58,40 +126,79 @@ function containsOnlySpaces (str) {
   return /^\s*$/.test(str)
 }
 
+function storeIfQualifiedKey (
+  id,
+  subliminal,
+  type,
+  nodeI18nMeta,
+  node,
+  children,
+  txt
+) {
+  // if we got some key, ns from locize and stored that - reuse it on this run
+  const stored = store.get(id)
+  const storedMeta = (stored && stored.keys[`${type}`]) || {}
+  const typeMeta = nodeI18nMeta[`${type}`] || {}
+
+  if (!typeMeta.key && storedMeta.key) typeMeta.key = storedMeta.key
+  if (!typeMeta.ns && storedMeta.ns) typeMeta.ns = storedMeta.ns
+  nodeI18nMeta[`${type}`] = typeMeta
+
+  // extract metas
+  const meta = extractNodeMeta(id, type, nodeI18nMeta, txt, children)
+
+  // if we can 100% identify that ns:key store - else uninstrumented
+  if (meta.qualifiedKey) {
+    store.save(id, null, type, meta, node, children)
+    uninstrumentedStore.removeKey(i, type, node)
+  } else {
+    uninstrumentedStore.save(id, type, node, txt)
+  }
+}
+
 function handleNode (node) {
+  if (ignoreElements.indexOf(node.nodeName) > -1) return
+
+  const nodeI18nMeta = getI18nMetaFromNode(node)
+  let usedSubliminalForText = false
+
   // test for inner text - but ignore text for elements merged to html containing translation
   if (node.childNodes && !ignoreMergedEleUniqueIds.includes(node.uniqueID)) {
     let merge = []
+
     node.childNodes.forEach((child, i) => {
       if (merge.length && child.nodeName !== '#text') {
         ignoreMergedEleUniqueIds.push(child.uniqueID)
         merge.push({ childIndex: i, child })
       }
-      if (child.nodeName !== '#text') return
 
+      if (child.nodeName !== '#text') return
       const txt = child.textContent
       if (containsOnlySpaces(txt)) return
 
       const hasHiddenMeta = containsHiddenMeta(txt)
       const hasHiddenStartMarker = containsHiddenStartMarker(txt)
 
+      if (hasHiddenMeta) usedSubliminalForText = true
+
       // console.warn(
       //   'child',
       //   child,
       //   child.nodeName,
       //   child.innerText,
       //   hasHiddenStartMarker,
-      //   hasHiddenMeta,
-      // );
+      //   hasHiddenMeta
+      // )
 
       if (hasHiddenStartMarker && hasHiddenMeta) {
         const meta = unwrap(txt)
 
+        uninstrumentedStore.remove(node.uniqueID, node) // might be instrumented later and already in uninstrumentedStore - so remove it there first
         store.save(
           node.uniqueID,
           meta.invisibleMeta,
           'text',
-          extractMeta(node.uniqueID, 'text', meta),
+          extractHiddenMeta(node.uniqueID, 'text', meta),
           node
         )
       } else if (hasHiddenStartMarker) {
@@ -107,21 +214,87 @@ function handleNode (node) {
           }, '')
         )
 
+        uninstrumentedStore.removeKey(node.uniqueID, 'html', node, txt) // might be instrumented later and already in uninstrumentedStore - so remove it there first
         store.save(
           node.uniqueID,
           meta.invisibleMeta,
           'html',
-          extractMeta(node.uniqueID, 'html', meta, merge),
+          extractHiddenMeta(node.uniqueID, 'html', meta, merge),
           node,
           merge
         )
 
         // reset
         merge = []
-      } else if (txt) {
-        uninstrumentedStore.save(node.uniqueID, 'text', node)
       }
     })
+
+    // no subliminal in text
+    if (!usedSubliminalForText) {
+      node.childNodes.forEach((child, i) => {
+        if (merge.length && child.nodeName !== '#text') {
+          ignoreMergedEleUniqueIds.push(child.uniqueID)
+          // merge.push({ childIndex: i, child }) // will be pushed regular below with txt
+        }
+
+        // if (child.nodeName !== '#text') return
+        const txt = child.textContent
+        // if (containsOnlySpaces(txt)) return
+
+        // merge and add data-i18n=[html]key
+        if (
+          nodeI18nMeta &&
+          nodeI18nMeta['html'] &&
+          i < node.childNodes.length - 1
+        ) {
+          merge.push({ childIndex: i, child, text: txt })
+        } else if (
+          nodeI18nMeta &&
+          nodeI18nMeta['html'] &&
+          i === node.childNodes.length - 1
+        ) {
+          merge.push({ childIndex: i, child, text: txt })
+
+          storeIfQualifiedKey(
+            node.uniqueID,
+            null,
+            'html',
+            nodeI18nMeta,
+            node,
+            merge,
+            node.innerHTML
+          )
+
+          // reset
+          merge = []
+        } else if (txt) {
+          // console.warn(
+          //   'nodeI18nMeta',
+          //   txt,
+          //   nodeI18nMeta,
+          //   hasHiddenMeta,
+          //   hasHiddenStartMarker
+          // )
+
+          // add data-i18n=key (inner text)
+          if (nodeI18nMeta && nodeI18nMeta['text']) {
+            storeIfQualifiedKey(
+              node.uniqueID,
+              null,
+              'text',
+              nodeI18nMeta,
+              node,
+              undefined,
+              txt
+            )
+          } else if (child.nodeName === '#text' && !containsOnlySpaces(txt)) {
+            // if no metas at all and is a text node that is not just some spaces (html indent)
+            // add to uninstrumented for a lookup (locize search)
+            uninstrumentedStore.save(node.uniqueID, 'text', node, txt)
+          }
+        }
+      })
+    }
   }
 
   // test attibutes
@@ -132,18 +305,33 @@ function handleNode (node) {
     if (containsHiddenMeta(txt)) {
       const meta = unwrap(txt)
 
+      uninstrumentedStore.removeKey(node.uniqueID, attr, node) // might be instrumented later and already in uninstrumentedStore - so remove it there first
       store.save(
         node.uniqueID,
         meta.invisibleMeta,
-        `attr:${attr}`,
-        extractMeta(node.uniqueID, `attr:${attr}`, meta),
+        attr,
+        extractHiddenMeta(node.uniqueID, `${attr}`, meta),
         node
       )
     } else if (txt) {
-      uninstrumentedStore.save(node.uniqueID, `attr:${attr}`, node)
+      if (nodeI18nMeta && nodeI18nMeta[attr]) {
+        storeIfQualifiedKey(
+          node.uniqueID,
+          null,
+          attr,
+          nodeI18nMeta,
+          node,
+          undefined,
+          txt
+        )
+      } else {
+        uninstrumentedStore.save(node.uniqueID, attr, node, txt)
+      }
     }
   })
 
+  // console.warn('store', store)
+
   // TODO: how to handle react Trans things?!?
 }
 

package/src/process.js

@@ -5,17 +5,34 @@ import { initDragElement, initResizeElement } from './ui/popup.js'
 import { Popup, popupId } from './ui/elements/popup.js'
 import { getIframeUrl } from './vars.js'
 import { api } from './api/index.js'
+import { getQsParameterByName } from './utils.js'
+import * as implementations from './implementations/index.js'
+
+const dummyImplementation = implementations.dummy.getImplementation()
+
+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) {}
 
 // eslint-disable-next-line no-unused-vars
 let data = []
 
-export function start (implementation = {}) {
+export function start (
+  implementation = dummyImplementation,
+  opt = { show: false, qsProp: 'incontext' }
+) {
   if (typeof document === 'undefined') return
+
+  const showInContext = opt.show || getQsParameterByName(opt.qsProp) === 'true'
+
   // get locize id, version
   const scriptEle = document.getElementById('locize')
 
-  let config = {};
-  ['projectId', 'version'].forEach(attr => {
+  let config = {}
+  ;['projectId', 'version'].forEach(attr => {
     if (!scriptEle) return
     let value =
       scriptEle.getAttribute(attr.toLowerCase()) ||
@@ -24,9 +41,10 @@ export function start (implementation = {}) {
     if (value === 'false') value = false
     if (value !== undefined && value !== null) config[attr] = value
   })
-  config = { ...implementation.getLocizeDetails(), ...config }
+  config = { ...implementation.getLocizeDetails(), ...config, ...opt }
 
   // init stuff
+  api.config = config
   api.init(implementation)
   setImplementation(implementation)
 
@@ -36,6 +54,9 @@ export function start (implementation = {}) {
   })
 
   function continueToStart () {
+    // don't show if not in iframe and no qs
+    if (!isInIframe && !showInContext) return
+
     const observer = createObserver(document.body, eles => {
       eles.forEach(ele => {
         data = parseTree(ele)
@@ -47,7 +68,7 @@ export function start (implementation = {}) {
     startMouseTracking(observer)
 
     // append popup
-    if (!document.getElementById(popupId)) {
+    if (!isInIframe && !document.getElementById(popupId)) {
       document.body.append(
         Popup(getIframeUrl(), () => {
           api.requestInitialize(config)
@@ -56,6 +77,32 @@ export function start (implementation = {}) {
       initDragElement()
       initResizeElement()
     }
+
+    // propagate url changes
+    if (typeof window !== 'undefined') {
+      let oldHref = window.document.location.href
+      api.sendHrefchanged(oldHref)
+
+      const bodyList = window.document.querySelector('body')
+
+      const observer = new window.MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (oldHref !== window.document.location.href) {
+            // console.warn('url changed', oldHref, document.location.href);
+            oldHref = window.document.location.href
+
+            api.sendHrefchanged(oldHref)
+          }
+        })
+      })
+
+      const config = {
+        childList: true,
+        subtree: true
+      }
+
+      observer.observe(bodyList, config)
+    }
   }
 
   if (document.body) return continueToStart()

package/src/startStandalone.js

@@ -1,21 +1,8 @@
-import { startLegacy } from './processLegacy.js'
+import { start } from './process.js'
 
-export function startStandalone () {
-  startLegacy({
-    getLocizeDetails: () => {
-      return {}
-    },
-    getLng: () => {
-      return undefined
-    },
-    setResource: () => {},
-    triggerRerender: () => {},
-    getResourceBundle: () => {
-      return {}
-    },
-    bindMissingKeyHandler: () => {},
-    bindLanguageChange: () => {}
-  })
+export function startStandalone (options) {
+  const { implementation, ...rest } = options
+  start(implementation, rest)
 }
 
 if (typeof window !== 'undefined')

package/src/store.js

@@ -22,6 +22,8 @@ function save (id, subliminal, type, meta, node, children) {
     }
   }
 
+  if (subliminal) data[id].subliminal = subliminal
+
   data[id].keys = {
     ...data[id].keys,
     [`${type}`]: meta

package/src/ui/elements/highlightBox.js

@@ -0,0 +1,17 @@
+export function HighlightBox (ele, borderColor, shadowColor) {
+  const rect = ele.getBoundingClientRect()
+
+  const box = document.createElement('div')
+  box.style = `position: absolute; top: ${
+    rect.top - 2 + window.scrollY
+  }px; left: ${rect.left - 2 + window.scrollX}px; height: ${
+    rect.height + 4
+  }px; width: ${
+    rect.width + 4
+  }px; border: 1px solid ${borderColor}; border-radius: 2px; ${
+    shadowColor ? `box-shadow: 0 0 20px 0 ${shadowColor};` : ''
+  }`
+  box.setAttribute('data-i18next-editor-element', 'true')
+
+  return box
+}

package/src/ui/elements/popup.js

@@ -95,7 +95,7 @@ function Ribbon (popupEle, onMaximize) {
   background-color:  rgba(249, 249, 249, 0.2);
   backdrop-filter: blur(3px);
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-  border-radius: 50%
+  border-radius: 50%;
   `
 
   ribbon.onclick = () => {
@@ -155,8 +155,8 @@ export function Popup (url, cb) {
   min-width: 300px;
   --i18next-editor-popup-width: 400px;
   width: var(--i18next-editor-popup-width);
-  max-height: 600px;
-  max-width: 800px;
+  max-height: 800px;
+  max-width: 1000px;
 
   position: fixed;
   --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);
@@ -205,7 +205,7 @@ export function Popup (url, cb) {
   iframe.style = `
     z-index: 100;
     width: 100%;
-    height: calc(100% - 28px);
+    height: calc(100% - 32px);
     border: none;
     background: #fff;
   `

package/src/ui/elements/ribbonBox.js

@@ -2,18 +2,18 @@ import { colors } from '../../vars.js'
 import { sheet } from '../stylesheet.js'
 import { api } from '../../api/index.js'
 
-import { RibbonLogo, EditIcon } from './icons.js'
+import { EditIcon } from './icons.js'
 
 if (sheet) {
   sheet.insertRule(
-    '.i18next-editor-button:hover { background-color: rgba(38, 166, 154, 1) !important; }'
+    '.i18next-editor-button:hover { background-color: rgba(21, 65, 154, 1) !important; }'
   )
 }
 export function RibbonButton (text, attrTitle, onClick) {
   const btn = document.createElement('button')
 
   btn.style =
-    'font-family: Arial; position: relative; backdrop-filter: blur(3px); cursor: pointer; padding: 2px 10px 2px 20px; font-size: 15px; font-weight: 300; text-transform: uppercase; color: #fff; background-color: rgba(38, 166, 154, 0.8); border: none; border-radius: 12px'
+    'font-family: Arial; position: relative; backdrop-filter: blur(3px); cursor: pointer; padding: 2px 10px 2px 20px; font-size: 15px; font-weight: 300; text-transform: uppercase; color: #fff; background-color: rgba(25, 118, 210, 0.8); border: none; border-radius: 12px; z-index: 99999;'
   btn.classList.add('i18next-editor-button')
   btn.setAttribute('data-i18next-editor-element', 'true')
   btn.setAttribute('title', attrTitle)
@@ -53,8 +53,8 @@ export function RibbonBox (keys = {}) {
     `
   box.appendChild(arrow)
 
-  const logo = RibbonLogo()
-  box.appendChild(logo)
+  // const logo = RibbonLogo()
+  // box.appendChild(logo)
 
   const btnbox = document.createElement('div')
   btnbox.style =
@@ -63,9 +63,13 @@ export function RibbonBox (keys = {}) {
   Object.keys(keys).forEach(k => {
     const data = keys[k]
 
-    const btn = RibbonButton(k.replace('attr:', ''), `${data.ns}:${data.key}`, () => {
-      api.selectKey(data)
-    })
+    const btn = RibbonButton(
+      k.replace('attr:', ''),
+      `${data.ns}:${data.key}`,
+      () => {
+        api.selectKey(data)
+      }
+    )
     btn.style.marginBottom = '2px'
     btnbox.appendChild(btn)
   })