How we made Elm and Google Translate work together

Show and Tell
1

Just published: “How we made Elm and Google Translate work together”

29 Likes
2

What does this do when the UI changes? Does Chrome continue to translate new text when Elm makes changes?

1 Like
3

Yes! The way Google Translate seems to work is that it listens for new text nodes added to the page and translates them as it finds them (you can see a quick flash of the original language as new stuff appears on the page). I suspect they use the <font> tags partly to keep track of what has already been translated.

4

Double like, fantastic!

5

Unfortunately this doesn’t seem to work without errors. When I use this and start scrolling on a long page I get:

TypeError: Cannot read property 'childNodes' of undefined
_VirtualDom_addDomNodesHelp
src/.../elm/Main.elm:3661
  3658 | // tag must be 1 or 2 at this point
  3659 | 
  3660 | var vKids = vNode.e;
> 3661 | var childNodes = domNode.childNodes;
  3662 | for (var j = 0; j < vKids.length; j++)
  3663 | {
  3664 | 	low++;

Anyone else seeing this?

How I use Google Translate: it’s installed as a browser extension, so open it, then click “translate page”.

1 Like
6

I have only tested the built-in Google Translate. That’s a different error. My guess is that something has been inserted into <body> that throws Elm’s patches off. Can you link to the extension you use?

7

Have not taken a deep dive into this solution but since I added translate=no and the other “fixes” just the other day I am very interested. :slight_smile:

First look at it makes me wonder. Could this not be added to the compiler output? Why not?

1 Like
8

The extension is offered by Google itself.

I’m running this in Incognito, just to avoid any other extension running.

9

That’s a way of not breaking the page too, yes. For us, we wanted to still allow customers to use Google Translate if possible, since it helps them understand our page.

I would be surprised if Elm modified global objects. But instead of domNode.replaceData() it could do something like if (domNode instanceof Text) { domNode.replaceData() } else { domNode.parentNode.replaceChild(document.createTextNode(), domNode) }, I guess. But my guess is that Evan would like to solve it in a completely general way – this is not the only problematic DOM update.

Thanks!

That extension works a little bit differently compared to the built-in Google Translate. It adds a bar at the top (inserted at the beginning of <body>), and it can also add a little popup when you select text (inserted at the end of <body> it seems like). For this case, you need something like jinjor’s patch.

It seems like very few of our customers use that extension compared to the built-in Google Translate, judging from the big drop in “replaceData” errors in our error reporting service.

1 Like
10

Yeah, haven’t been able to integrate that with my create-elm-app stack, especially during the hot loading phase.

11

I actually struggled with exactly that the other day, and came up with an alternate patch that works even with hot loading, and doesn’t require an extra wrapper <div>. I don’t have it in a shareable form yet, though.

12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.