Is it possible to get intelliSense for variables in petite/vue?

[ivanjeremic]

Is it technically possible to get intelliSense between javascript variables and functions in the script tag and the variables used in the html?

<script type="module">
      import { createApp, reactive } from "https://unpkg.com/petite-vue?module";

      const store = reactive({
        count: 0,
        inc() {
          this.count++;
        },
      });

      // manipulate it here
      store.inc();

      createApp({
        // share it with app scopes
        store,
      }).mount();
    </script>

    <div v-scope="{ localCount: 0 }">
      <p>{{ store.count }}</p>
      <button @click="store.inc">increment</button>
    </div>

When I hover in my p tag over store is it technically possible to get some feedback when hovering over as we would in an js file or .vue file?

[johnsoncodehk]

You need config { "include": ["XXX/**/*.html"] } in tsconfig to enable intellisense for petite-vue in .html for now, but it may change, I'm thinking of adding an explicit setting for this.

[ivanjeremic]

You need config { "include": ["XXX/**/*.html"] } in tsconfig to enable intellisense for petite-vue in .html for now, but it may change, I'm thinking of adding an explicit setting for this.

That config and adding lang="ts" to my script tag solved this thank you for that, one remaining issue is typesccript inside script tags, as crazy as it may sound the way I plan to use petite/vue is the html will run trough a self made compiler which will strip types out of the html file. that way people who like using petite/vue still can take advantage of ts inside tags, I heard of different solutions like type="text/typescript" or type="tsm" but both seem not to work together with Volar's lang="ts"

[johnsoncodehk]

If it can't working without lang="ts", you may missing "allowJs": true in tsconfig.

I can't say anything about the typescript support in .html, I'm not familiar with it. Technically volar can check type="text/typescript" or type="tsm" instead of lang="ts", but it may not change until the community agrees on the approach.

[ivanjeremic]

I guess I will for now create a fork of Volar and explore which changes need to be made for petite/vue & alpine people to have full TS support inside script tags. I would need to change exactly two things,

First: Allow TypeScript inside script tags,

Second: Even with lang="ts" I get completion in my html markup only from petite-vue functions like reactive but not from functions and variable I create myself or import from some other library.

<script lang="ts">
  import { createApp, reactive } from "https://unpkg.com/petite-vue?module";

  let name = "Mike";

  const store = reactive({
    count: 0,
    inc() {
      this.count++;
    },
  });

  // manipulate it here
  store.inc();

  function handler() {
    console.log("hi")
  }

  createApp({
    // share it with app scopes
    store,
  }).mount();
</script>

 // intelliSense works fine.
<button @click="store.inc">{{store.count}}</button>

// with function variables not related to petite-vue I have no intelliSense
<button @click="handler">{{name}}</button>

Especially the last button example is giving me headages, for now only petite-vue functions have intelliSense inside markup I would really appreciate a quick link to some related repo file where I can then dig myself into the codebase and make the changes. Thanks

[johnsoncodehk]

First: Allow TypeScript inside script tags,

Do you mean allow use TypeScript without lang="ts"? You can change default script tag langauge by replace ?? 'js' to ?? 'ts' here: https://github.com/johnsoncodehk/volar/blob/d2d3aa2cd53bc3c3ab1010a8f16db7ec153719e0/packages/vue-typescript/src/sourceFile.ts#L676

Second: Even with lang="ts" I get completion in my html markup only from petite-vue functions like reactive but not from functions and variable I create myself or import from some other library.

This is intentional, I just don't know we can bypass createApp to access variables because I have not working on a real petite-vue project, maybe you can add tests for your expected behaviors to https://github.com/johnsoncodehk/volar/tree/master/packages/vue-test-workspace/typeChecks, so I can reference it to fix.

[ivanjeremic]

Do you mean allow use TypeScript without lang="ts"? You can change default script tag langauge by replace ?? 'js' to ?? 'ts' here:

No, lang="ts" is fine, the problem is it does not allow us to write typescript inside .html script tags.

[johnsoncodehk]

No, lang="ts" is fine, the problem is it does not allow us to write typescript inside .html script tags.

It sounds like this is not something volar handles, volar only does type-checking, typescript compile needs to do on the petite-vue side.

[ivanjeremic]

No, lang="ts" is fine, the problem is it does not allow us to write typescript inside .html script tags.

It sounds like this is not something volar handles, volar only does type-checking, typescript compile needs to do on the petite-vue side.

Right, I don't even need to compile, I have my own version of petite(forked) which includes a custom compiler just made to remove typescript from .html files. All I need is allow writing TypeScript inside .html with lang="ts" would this be possible somehow?

[johnsoncodehk]

@ivanjeremic Okay I see you problem now, don't know can't write typescript in script tag with lang="ts" I misunderstood it already can. Will try to fix in next version.

[ivanjeremic]

Thanks, that would be awesome. If there is any chance to also autocomplete functions and variables inside my html for non petite-vue related code it would be very helpful too.

I will try to help with this repo as much as I can in the future because it solves my problems too.

[johnsoncodehk]

Please try v0.38.1 and let me know if something not working to you.

[johnsoncodehk]

TS error with lang="ts" should be from VSCode built-in vscode.html-language-features plugin and volar can't fix. You may need to consider disable vscode.html-language-features and let volar takeover language support for .html.

[ivanjeremic]

vscode.html-language-features

Thanks, I was now googeling around an was able to disable vscode.html-language-features which got rid of the error which is good now, but of course all the native autosuggestions for native attributes is now gone, is there any particular step I can take to bring them back trough Volar, or does it need to be reimplemented inside the Volar codebase?

[johnsoncodehk]

Thanks, I was now googeling around an was able to disable vscode.html-language-features which got rid of the error which is good now, but of course all the native autosuggestions for native attributes is now gone, is there any particular step I can take to bring them back trough Volar, or does it need to be reimplemented inside the Volar codebase?

It should be supported in 0.38.3, please let me know if anything not working.

[ivanjeremic]

It should be supported in 0.38.3, please let me know if anything not working.

TS is working fine now thanks! :) What I noticed is when I need a function inside my @click the autocomplete does not kick in

<script lang="ts">
 type HProps = {
   name: string;
 };

 function handler({ name: string }: HProps) {
   console.log(string);
 }
</script>

<button @click="handler({name:'foo'})">Click</button>

writing handler(...) inside @click does not suggest me handler.

[johnsoncodehk]

This is a known issue, please track #1284.

[ivanjeremic]

I think we should re-open this issue because of this discord Discussion. https://discord.com/channels/793943652350427136/899997357649821716/1017470344090624064

[terryaney]

Is the Discord linked above still open? I tried to access it and couldn't reach the page. I looking to find some documentation on how to setup VS Code so that I can get intellisense inside my html markup for all v-* directives (if that is even possible).

[friuns2]

does not work, even this didn't help
"vue.server.petiteVue.supportHtmlFile": true,