Declare Vue as peer dependency

[johannes-lindgren]

Describe the bug

Using @unleash/vue-proxy-client in the setup() function in a Vue component with options API gives type errors.

Vue is declared as a dependency and not a peerDependency. At runtime, this works fine because vue is declared as an external dependency in vite.config.ts. However, when using this library in an application, vue will still be installed a second time, and TypeScript will use the type declarations in this folder.

Vue's Ref utility type is defined as:

declare const RefSymbol: unique symbol;
declare const RawSymbol: unique symbol;
export interface Ref<T = any, S = T> {
    get value(): T;
    set value(_: S);
    /**
     * Type differentiator only.
     * We need this to be in public d.ts but don't want it to show up in IDE
     * autocomplete, so we use a private Symbol instead.
     */
    [RefSymbol]: true;
}

RefSymbol will be different for different versions of vue. Because it appears in Ref, this utility type becomes different from other vue installations. This means that if you write:

import { Ref } from 'vue'
const isFlagEnabled = useFlag('my-flag') as Ref<boolean>

You get a type error:

The issue is that if you use this in a component, Vue from the application is unable to unwrap the ref from @unleash/proxy-client-vue:

With options api

setup() {
  const isFlagEnabled = useFlag('my-flag')
  return { isFlagEnabled }
}

myFun(){
  const a = this.isFlagEnabled // Ref<boolean>, but should be boolean
}

Workaround

Right now, we can work around it by setting resolutions in package.json

"resolutions": {
  "vue": "^3.x"
},

Proposed solution

Declare vue as a peerDependency in package.json:

  "peerDependencies": {
    "vue": "^3.2.45"
  },

Steps to reproduce the bug

Write

import { Ref } from 'vue'
const isFlagEnabled = useFlag('my-flag') as Ref<boolean>

Expected behavior

There should be no type error

Logs, error output, etc.

Screenshots

Additional context

No response

Unleash version

0.1.4

Subscription type

Pro

Hosting type

Hosted by Unleash

SDK information (language and version)

@unleash/[email protected]

[nunogois]

Hi @johannes-lindgren,

Thank you for raising this issue and sharing your suggestion! It’s well thought out and structured, and we’d love to encourage you to take the credit by contributing directly to the SDK with a pull request.

Let us know if you have any questions. We appreciate your input and look forward to your contribution!