Character truncation of an <img> tag in the compiled version.

[romefeller]

I have the following snippet:

connectPlot :: (DomBuilder t m, Prerender t m) => String -> m ()
connectPlot svg = do
  prerender_ blank $ do
    postBuild <- getPostBuild
    logEvent (svg <$ postBuild)
    elAttr "div" ("style" =: "width: 100%; height: 100%;") $
      elAttr "img" ("src" =: T.pack svg <> "style" =: "width: 100%; height: auto;") blank

When running with `ob run`, the image renders correctly.
However, when compiled, the <img> element only displays the first character of the src, which is "d"
(from the Base64 URI starting with "data:image/svg+xml;base64,...").

The `logEvent` function logs the full value to the browser console correctly, for example:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2Zy...

But the rendered output in the browser becomes:

<img src="d" ...>

Any ideas on what’s causing this issue in the compiled version (nix-build -A exe)?

@alexfmpe @ali-abrar

[alexfmpe]

Bizarre. Some wild guesses:

Is this with a very old obelisk by any chance? Years ago there was a bug of string mangling in ghcjs.

The closest thing I saw was the internal representation of ghcjs thunks being serialised directly instead of evaluated and then serialised. Does anything change if you force the value with T.pack $! svg or the combination of !t = T.pack svg and "src" =: t ?

Does the truncation also happen on other DOM uses of this String ? As in, text $ T.pack svg ? What if you never go through String and always use Text from origin ? Does print show the correct value on the console or the broken one?

Does compiling with -O0 change anything?

[romefeller]

@alexfmpe None of these solutions worked. When I use console.log, everything is fine, but the image source still gets truncated.

I also tried the following:

createImg :: Text -> JSM ()
createImg src = do
    doc <- jsg (t_ "document")
    container <- doc ^. js1 (t_ "querySelector") (t_ "#divImg")
    img <- doc ^. js1 (t_ "createElement") (t_ "img")
    void $ img ^. js2 (t_ "setAttribute") (t_ "src") (val src)
    void $ img ^. js2 (t_ "setAttribute") (t_ "style") (t_ "width: 99%; height: auto;")
    void $ container ^. js1 (t_ "appendChild") (val img)

createImgEvent :: (MonadWidget t m) => Event t String -> m ()
createImgEvent ev = void $ performEvent $ ffor ev $ \src ->
    liftJSM (createImg $ pack src)

However, the src attribute still truncates.

Below is what I used for console.log:

logConsole :: Text -> JSM ()
logConsole msg = do
    console <- jsg (t_ "console")
    void $ console ^. js1 (t_ "log") (val msg)

logEvent :: (MonadWidget t m, Show a) => Event t a -> m ()
logEvent ev = void $ performEvent $ ffor ev $ \val ->
    liftJSM $ logConsole (pack (show val))

[romefeller]

It appears that using pack on the compiled version causes information loss. When I use show, the image source is rendered, but incorrectly—with extra quotes, of course, resulting in something like <img src=""...">. However, if I don't use show, the source attribute gets truncated. I adjusted the quotations and everything went fine. A weird thing, indeed.