Skip to content
This repository has been archived by the owner on Feb 7, 2024. It is now read-only.

@PropLoop implementation - loopping your props to get rid of similar @Prop names #405

Open
synopss opened this issue Oct 24, 2021 · 0 comments

Comments

@synopss
Copy link

synopss commented Oct 24, 2021

Is your feature request related to a problem? Please describe.
The idea is to be able to loop creation of props using the @prop decorator.
Without decorator, it would be done like this:

props: {
  someProp: {
    type: [Boolean, String, Number],
    default: false,
  },
  ...loopableProp,
  someOtherProps: {
    type: [String, Number],
    default: null,
  }
}

With something like this:

const sufix = ['someSufix', 'anotherSufix', 'lastSufix']

const loopableProp = (() => {
  return sufix.reduce((props, val) => {
    props[val] = {
      type: Boolean,
      default: false,
    }
    return props
  }, {} as Record<string, PropOptions>)
})()

Describe the solution you'd like
We only want to rename the name of the prop while keeping all his property. This way, having something similar to this would be interesting:

@PropLoop({
  type: Boolean,
  default: false,
  names: sufix.map(sufix => `loopableProp${Common.upperFirst(sufix)}`)
})
loopableProp!: boolean

This would be similar to having the code below, but with less line of code, which is always nice for cleaner code / readibilty.

@Prop({
  type: Boolean,
  default: false
})
loopablePropSomeSufix!: boolean
@Prop({
  type: Boolean,
  default: false
})
loopablePropAnotherSufix!: boolean
@Prop({
  type: Boolean,
  default: false
})
loopablePropLastSufix!: boolean

Describe alternatives you've considered
Haven't found any yet, that's why I came here to describe my idea.

Additional context
I like Vue, but I found it way cleaner with the use of vue-class-component which makes this repository very useful. It would be nice to implement such a feature to fully get rid of the non-class component way of codding.

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