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

default for provide/inject either is no longer a function, or no longer automatically called #2050

Closed
Haroenv opened this issue Sep 4, 2020 · 1 comment

Comments

@Haroenv
Copy link

Haroenv commented Sep 4, 2020

Version

3.0.0-rc.10

Reproduction link

workaround in v2: https://codesandbox.io/s/focused-villani-tpb93?file=/src/components/Consumer.js
workaround in v3: https://codesandbox.io/s/modest-wozniak-bf9gb?file=/src/Consumer.js (sorry, I couldn't make an RC config on code sandbox)

Steps to reproduce

Run this:

import { h } from 'vue';

const Provider = {
  provide() {
    return {
      $_provided: () => 'provided data',
    };
  },
  render() {
    return h(
      'div',
      {},
      this.$slots.default()
    );
  },
};

const Consumer = {
  inject: {
    something: {
      from: '$_provided',
      default() {
        return () => 'default data';
      },
    },
  },
  render() {
    let data = this.something();
    return h('div', {}, data);
  },
};

render it like this:

<template>
  <div id="app">
    <Provider>
      <Consumer/>
    </Provider>
    <Consumer/>
  </div>
</template>

What is expected?

output would be:

provided data
default data

What is actually happening?

output is:

provided data

(since the default is a function)


I'm trying to make a library compatible with v2 & v3 at the same time, but did not see in the options (here: https://v3.vuejs.org/api/options-composition.html#provide-inject) or in the docs (here: https://v3.vuejs.org/guide/component-provide-inject.html#working-with-reactivity).

It even seems like the options is also using default() and not calling it, but just reading?

Workaround I found:

import { h } from "vue";

export default {
  inject: {
    something: {
      from: "$_provided",
      default() {
        return () => "default data";
      }
    }
  },
  render(localH) {
    let data = this.something();
    // in v3 `default` seems to not be a function?
    if (typeof data === "function") {
      data = data();
    }
    return (h || localH)("div", {}, data);
  }
};
@Haroenv
Copy link
Author

Haroenv commented Sep 4, 2020

thanks for fixing @yyx990803 :)

@github-actions github-actions bot locked and limited conversation to collaborators Nov 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant