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

HTML lang attribute gets updated #15010

Closed
vedranmviu opened this issue Nov 30, 2022 · 5 comments
Closed

HTML lang attribute gets updated #15010

vedranmviu opened this issue Nov 30, 2022 · 5 comments
Labels
area/cli bug/0-needs-info Need more info to reproduce flavour/vite-plugin Bugs related to Vite usage with Quasar kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@vedranmviu
Copy link

What happened?

I'm using Quasar with Vite and Vue 3 as a UI library. I don't need and don't want Quasar localizations.
I'm using translatable labels from the backend and need specific lang attributes set by the backend in my HTML lang attribute. How do I turn off the JS update of the lang attribute?
Why would a JS UI library change the lang attribute for the entire application and why is this considered in the first place as a good idea? Let me care about the languages of my app I don't want Quasar to do it for me.

What did you expect to happen?

To Quasar not change my HTML lang attribute.

Reproduction URL

http://google.com

How to reproduce?

Set the lang attribute to a random string and run a vue app with a quasar plugin.
The lang attribute gets overwritten.

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

@github-actions github-actions bot added area/cli bug/0-needs-info Need more info to reproduce flavour/vite-plugin Bugs related to Vite usage with Quasar labels Nov 30, 2022
@github-actions
Copy link

Hi @vedranmviu! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

@vedranmviu
Copy link
Author

Workaround - a stupid one, but a workaround nonetheless:

const lang = document.documentElement.lang;

// identify an element to observe
const elementToObserve = document.querySelector('html');

const observer = new MutationObserver(mutation => {
  mutation.forEach(item => {
    if (item.attributeName === 'lang') {
      observer.disconnect();
      document.documentElement.lang = lang;
    }
  })
});

observer.observe(elementToObserve, { attributes: true });

rstoenescu added a commit that referenced this issue Dec 27, 2022
@rstoenescu
Copy link
Member

Hi,

The feature will be available in Quasar v2.11.3.

Noticed your impatience on the social media and just want to point out that you need to be patient while your tickets get solved. It's how opens-source works. There were more critical stuff that we needed to take care before this request, but it doesn't mean that we ignore tickets.

Now on to the subject at hand. Quasar is not just a "UI components library", it's a framework. We want to help our devs far beyond empowering them to create a UI so we automatically take care of a lot of "boilerplating". However, should the need arise and devs fully understand the implications (hence adding the paragraph below to docs), we can disable a behavior like this one, so no need to worry.

Extract from docs (will be available on next deployment):

Disabling HTML attributes

By default, Quasar will add dir and lang HTML attributes to the <html> tag for you. The dir attribute is especially important to the way CSS is preprocesses with Sass when RTL is enabled.

If, for whatever reason you want this behavior disabled, then you can:

// Quasar CLI > quasar.config.js
framework: {
  config: {
    lang: {
      noHtmlAttrs: true // add this
    }
  }
}

// Vite plugin / Vue plugin / UMD
app.use(Quasar, {
  config: {
    lang: {
      noHtmlAttrs: true // add this
    }
  }
})

@vedranmviu
Copy link
Author

Hey,

It's not due to impatience, but frustration with the feature that caused me a headache in the real world. There's nothing wrong with the feature if it's used when you go all in with the Quasar. But if you use it just as a UI library, I don't see a reason for it to be automatic.

RTL is important for many people, but this is something that can be done manually or it can be stated in the docs - Hey guys, if you want to use RTL, this is important.

What confused me was the fact that I didn't know where it originally came from. And also en-US doesn't work for me because the backend controls the lang attribute value and it's just en. Don't get me wrong, I'd use myself en-US but it's not something controlled by me, and many other sources use the API I use.

So it's either disable this feature on the fronted app or change the API, change all the other apps that use the API, and redeploy them all.

I don't see a point in changing any HTML attributes on the client without a good reason. The margin for error is extremely high - not to mention the timings of when it happens and all the subsequent actions that require that attribute. And if it's done it needs to be clearly stated somewhere in the docs - maybe it is stated but I didn't find it initially and it was a surprise.

And I was honest on social media. This feature is a show-stopper for me. If I wasn't pressed with the deadline I would ditch Quasar and use another framework. If I knew this, I wouldn't use it at all.

I'm not saying this to diss you. You did a great job with the framework, but this HTML thing raised a red flag for me.

If I couldn't see this, what else am I missing? What other surprises will I encounter? I didn't encounter any other issues but, this caused unease with using Quasar.

With this in, I wouldn't recommend Quasar to anyone that works on multilingual apps. And it's a damn shame because I think it's great.

rstoenescu added a commit that referenced this issue Dec 27, 2022
@rstoenescu
Copy link
Member

Thank you for the honest feedback.

There is no reason to feel uneasy about Quasar because you can rest assured that there are no other "surprises" in place. I could elaborate much more on why this behavior is recommended (and enabled by default), but it can now be disabled so everyone can be happy. The reasoning behind everything that we do for Quasar is to make life easier, not harder. Of course we can disable automatic RTL too and so many other features, but why not have them all under the same roof while we ensure the most easy to use, efficient, performant and well-thought out system for our devs. And one place to complain about it, rather than a hundred teams working in isolation on each feature, each with their own roadmap and availability, which is guaranteed to not output the best possible results (which is what we strive for). But regardless of everything, we are here and we are taking feedback into account and we offer solutions so that each developer can be happy with their workflow and their specific needs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/cli bug/0-needs-info Need more info to reproduce flavour/vite-plugin Bugs related to Vite usage with Quasar kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

2 participants