Resolve injected properties after the props initialization

What problem does this feature solve?

It’s said in the API reference that below the version 2.2.1 injected properties actually were resolved after the props initialization. So it seems like I’m asking for a regression.

I tried to find what formed the basis for making such a decision (to resolve them before props and data) but I haven’t been able to find any related issue.

I have a component <tree-view> that renders another component called <tree-item> inside. The tree-item may itself recursively render one or more tree-views.

The tree-view accepts a number of options that I pass to it as props (let it be a sole option called “mode” for the sake of brevity):

<tree-view
    mode="folders"
>
    ...
</tree-view>

The tree-view accepts it as a prop:

props: {
    mode: {
        default: "all",
        validator: ...
    }
}

And I want to provide it to all the nested tree-view’s, so that I don’t have to pass this option to the nested tree-item so that only from there it can be passed to the nested tree-view. But I can’t do so because the props since 2.2.1 are initialized after the injected properties.

What does the proposed API look like?

That is what I’m trying to achieve

props: {
    mode: {
        default: "all"
    }
},

provide() {
    return {
        /*
            This one works OK, this.mode is taken from the `props`
        */
        mode: this.mode
    }
},

inject: {
    mode: {
        /*
            But this one doesn't since the `props` are not yet initialized
        */
        default: this.mode
    }
}

My point is that the root tree-view isn’t provided with the mode injected property (because it’s the root one obviously) so the warning “Injection “mode” not found” is thrown for each root tree-view. But all the nested tree-view’s are provided with the injected property “mode” so the provided value is taken instead of the default one.

May be (I’m not sure, just a guess) the proposed API will need to like something like

inject() {
}

That’s that the injected property can accept a function as its value instead of just an array or an object.

[LinusBorg]

props: ['mode'],
inject: {
  injectedMode: {
    from: 'mode',
    default: null
  }
},
data() {
  return {
    mode: this.injectedMode || this.mode
  }
}

I posted this already, but in two pieces, essentially. Above you find the whole thing.

Default the inject to null, then construct a local data (or computed) from either her injected or, (if that’s null) the prop.

Result: no warnings, like you want to.

[smellyshovel]

@LinusBorg Yes, finally it works! Though there’s the error in your code: the prop must be of another name (bacause it can’t be named as the data property). So I changed the prop name to be propMode and it actually does finally work! Thank you!

UPD: The only drawback I see in your approach is that I now have to pass propMode="value" instead of mode="value" to the tree-view. However I believe I can fix that. Or even if not I can live with this.

Btw, have you considered my demo? I guess it’s much cleaner, except for the warning. Once again, props don’t warn if they’re not provided with any value. Why do so for injected? Maybe get rid of them?