[Feature request] Native browser support

KaKi87 commented 2 years ago

Hello,

The following boilerplate :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>template-vue3-cdn</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="module">
            import { createApp } from 'https://unpkg.com/vue@3.2.11/dist/vue.esm-browser.js';
            import { TolgeeProvider, T } from 'https://unpkg.com/@tolgee/vue@4.4.0/dist/tolgee-vue.esm.min.js';

            const app = createApp({
                components: {
                    TolgeeProvider,
                    T
                },
                data: () => ({
                    tolgeeConfig: {
                        apiUrl: 'https://i18n.kaki87.net',
                        apiKey: 'e5maf9tso8dk6nf1clcv71sk97'
                    }
                }),
                template: `
                    <TolgeeProvider
                        :config="tolgeeConfig"
                    >
                        <T
                            keyName="hello_world"
                            defaultValue="helloworld"
                        ></T>
                    </TolgeeProvider>
                `
            });

            document.addEventListener('DOMContentLoaded', () => app.mount('.app'));
        </script>
    </head>
    <body class="app"></body>
</html>

Outputs the following error :

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Which can currently only be fixed using the following import code :

import Tolgee from 'https://dev.jspm.io/npm:@tolgee/vue@4.4.0/dist/tolgee-vue.cjs.min.js';
const { TolgeeProvider, T } = Tolgee;

Indicating that Tolgee JS doesn't provide native browser support, thus the need of JSPM, which converts CJS into browser-compatible ESM.

Demo on JSFiddle

Thanks

stepan662 commented 11 months ago

This is solved in version 5: https://tolgee.io/js-sdk/installation

KaKi87 commented 11 months ago

Actually, the very same error occurs when using the following :

import { Tolgee, TolgeeProvider, T, VueTolgee } from 'https://cdn.jsdelivr.net/npm/@tolgee/vue/dist/tolgee-vue.esm.min.mjs';

Demo on JSFiddle

Thanks

stepan662 commented 11 months ago

Ah, you are right, sorry

stepan662 commented 11 months ago

I was able to make it work like this:

        <script type="importmap">
          {
            "imports": {
              "vue": "https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.esm-browser.js",
              "@tolgee/web": "https://cdn.jsdelivr.net/npm/@tolgee/web@5.8.4/dist/tolgee-web.production.esm.min.mjs",
              "@tolgee/vue": "https://cdn.jsdelivr.net/npm/@tolgee/vue@5.8.4/dist/tolgee-vue.esm.min.js"
            }
          }
        </script>

        <script type="module">
            import { createApp } from 'vue';
            import { Tolgee, TolgeeProvider, T, VueTolgee } from '@tolgee/vue';

       ...

I think you need an importmap for this - @toglee/vue is dependant on @tolgee/web and vue, so it needs to be clear where to get them.

KaKi87 commented 11 months ago

Firefox and Safari have only been supporting <script type="importmap"> since a few months ago, which makes this solution currently unusable in production.

stepan662 commented 11 months ago

I don't know if we can solve this differently.

KaKi87 commented 1 week ago

Hello, Was this solved ? Thanks

stepan662 commented 1 week ago

Hey, no, I think we'd have to put everything into one package, which I don't really like.

stepan662 commented 1 week ago

However, I think you can use the umd imports though

KaKi87 commented 1 week ago

How opinionated.

stepan662 commented 1 week ago

I don't see a solution how to provide the support for this when our package has a dependency on a vue package. If you have a solution, feel free to provide it 🙂

KaKi87 commented 1 week ago

a vue package

If you mean the Vue package, then Vue could be passed in tolgeeConfig.

If you mean a Vue package as in @vue/something then it should be bundled with Tolgee.

Thanks

stepan662 commented 1 week ago

Could you maybe explain a bit more the usecase for this. It feels like in order to make this work, it would require a special case of bundling the vue package and I don't see very big value in it. If this is something important, could you clarify that?

I'm unfortunately not so experienced with vue ecosystem, so maybe thats why I don't understand the value.

KaKi87 commented 1 week ago

It feels like in order to make this work, it would require a special case of bundling the vue package

As I mentioned, if it's the Vue package, then don't bundle it, but allow the user to pass it in tolgeeConfig.

If this is something important, could you clarify that?

Vue is usable both with and without bundler.

Meanwhile, Tolgee is currently only usable with bundler.

stepan662 commented 1 week ago

Ok, I think I'll leave the issue open for potential contributors, as I don't see this as a priority fix, but more like "make it better for vue ecosystem" thing.

tolgee / tolgee-js

[Feature request] Native browser support #2427