Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature request] Native browser support #2427

Open
KaKi87 opened this issue Mar 30, 2022 · 15 comments
Open

[Feature request] Native browser support #2427

KaKi87 opened this issue Mar 30, 2022 · 15 comments
Assignees
Labels
enhancement New feature or request

Comments

@KaKi87
Copy link

KaKi87 commented Mar 30, 2022

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/[email protected]/dist/vue.esm-browser.js';
            import { TolgeeProvider, T } from 'https://unpkg.com/@tolgee/[email protected]/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/[email protected]/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

@JanCizmar JanCizmar added the bug Something isn't working label Apr 2, 2022
@stepan662
Copy link
Collaborator

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

@KaKi87
Copy link
Author

KaKi87 commented May 23, 2023

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
Copy link
Collaborator

Ah, you are right, sorry

@stepan662 stepan662 reopened this May 24, 2023
@stepan662
Copy link
Collaborator

I was able to make it work like this:

        <script type="importmap">
          {
            "imports": {
              "vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm-browser.js",
              "@tolgee/web": "https://cdn.jsdelivr.net/npm/@tolgee/[email protected]/dist/tolgee-web.production.esm.min.mjs",
              "@tolgee/vue": "https://cdn.jsdelivr.net/npm/@tolgee/[email protected]/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
Copy link
Author

KaKi87 commented May 24, 2023

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

@stepan662
Copy link
Collaborator

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

@KaKi87
Copy link
Author

KaKi87 commented Apr 22, 2024

Hello,
Was this solved ?
Thanks

@stepan662
Copy link
Collaborator

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

@stepan662
Copy link
Collaborator

However, I think you can use the umd imports though

@KaKi87
Copy link
Author

KaKi87 commented Apr 23, 2024

How opinionated.

@stepan662
Copy link
Collaborator

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
Copy link
Author

KaKi87 commented Apr 23, 2024

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
Copy link
Collaborator

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
Copy link
Author

KaKi87 commented Apr 23, 2024

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
Copy link
Collaborator

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.

@stepan662 stepan662 reopened this Apr 24, 2024
@stepan662 stepan662 added enhancement New feature or request and removed bug Something isn't working labels Apr 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants