synacor / preact-i18n

Simple localization for Preact.
BSD 3-Clause "New" or "Revised" License
205 stars 18 forks source link

Use with UMD/no-build #57

Closed carderne closed 3 years ago

carderne commented 3 years ago

Hi,

I'm trying to incorporate this into a simple UMD/no-build app but not having any luck. I get the following error:

Uncaught TypeError: l is undefined

Has anyone managed to make this work? For now I'm just pre-bundling the requirements and it works that way, but would be great to get it working in the UMD ecosystem!

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="//unpkg.com/preact@10.5.13/dist/preact.umd.js"></script>
        <script src="//unpkg.com/htm@3.0.4/dist/htm.umd.js"></script>
        <script src="//unpkg.com/preact-i18n@2.4.0-preactx/dist/preact-i18n.umd.js"></script>
    </head>
    <body>
        <script type="module" src="./main.js"></script>
    </body>
</html>

main.js

const { h, render } = preact;
const { IntlProvider, Text } = preactLocalize;
const html = htm.bind(h);

const definition = { foo: 'Le Feux' };

render(
  html`
    <${IntlProvider} definition=${definition}>
      <div>Normal text</div>
      <${Text} id="foo">Backup<//>
    <//>
  `,
  document.body
);
pl12133 commented 3 years ago

You most likely need to include the dlv package before including preact-i18n, since that is one of it's dependencies.

You can check out https://jsfiddle.net/xyL04bzm/1/ for an example of running the project as UMD.

carderne commented 3 years ago

Stupid me. Thanks @pl12133!