‚̧Neat Paraskavedekatriaphobia's Meaning
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    vue-local-scope
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    vue-local-scope Build Status npm package coverage thanks

    ūüĖá Generate local scopes in templates to compute data from other scoped slots

    Installation

    npm install vue-local-scope

    Usage

    Vue Local Scope exports two things:

    • LocalScope: a functional component that pass down any prop into a scoped slot
    • createLocalScope a function that returns a regular components with computed properties provided as a scoped slot

    LocalScope

    LocalScope doesn't render any element by itself, it renders whatever is passed as a scoped slot. You can pass any prop to it, usually applying some kind of transformation, like a map or a reduce, that transformation is only applied once everytime the template renders, and it allows you to have a local variable based on anything that exists in the template. This is useful for data coming from a slot-scope:

    <template>
      <div>
        <DataProvider>
        <template slot-scope="items">
          <LocalScope :names="items.map(i => i.name)" :ids="items.map(i => i.id)">
            <template slot-scope="{ names, ids }">
              <!-- we are able to use the mapped names three times but we only run map once -->
              <DisplayNames :names="names" @handle-change="updateNames(ids, names)" />
              <p>{{ names }}</p>
              <p>{{ ids }}</p>
            </template>
          </LocalScope>
        </template>
      </div>
    </template>
     
    <script>
    import { LocalScope } from 'vue-local-scope'
     
    export default {
      // other options
      components: { LocalScope }
    }
    </script>

    Because LocalScope is a functional component, you can return any amount of elements but it will call map everytime something in the same template changes.

    createLocalScope

    createLocalScope generates a stateful component and requires you to provide an object that maps props to new values. The generated component will use computed properties to benefit from ther caching strategy and give you back the data in a scoped-slot.

    <template>
      <div>
        <DataProvider>
        <template slot-scope="{ items, others }">
          <NamesAndIdsScope :items="items" :others="others">
            <div slot-scope="{ names, ids, others }">
              <DisplayNames :names="names" @handle-change="updateNames(ids, names)" />
              <p>{{ names }}</p>
              <p>{{ ids }}</p>
              <p>{{ others }}</p>
            </div>
          </NamesAndIdsScope>
        </template>
      </div>
    </template>
     
    <script>
    import { createLocalScope } from 'vue-local-scope'
     
    const NamesAndIdsScope = createLocalScope({
      names: ({ items }) => items.map(i => i.name),
      ids: ({ items }) => items.map(i => i.id),
      // we don't need to transform items but we need it as a prop
      items: false,
      // we can also override a value directly
      // others is a prop and will appear in the `slot-scope` as `others`
      others: ({ others }) => others.filter(o => !o.skip)
    })
     
    export default {
      // other options
      components: { NamesAndIdsScope }
    }
    </script>

    In this case we do get the benefit from computed properties caching but we need to provide a root element (the div with the slot-scope)

    API

    createLocalScope(computed, propsOptions?): Component

    • computed: object of transformations applied to props
    • propsOptions optional object to define propOptions for each key in computed

    Related

    License

    MIT

    Install

    npm i vue-local-scope

    DownloadsWeekly Downloads

    124

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar