Awesome Open Source
Awesome Open Source

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

Why?

When using scoped slots you often get access to data only in the template. But sometimes, you still need to apply transformation to that data, like calling a map on an array or a filter. Here is an example using Vue Promised to fetch information from an API endpoint:

<template>
  <Promised :promise="usersPromise" v-slot="users">
    <div>
      <Autocomplete v-model="selectedUsers" :items="users.map(user => ({ value: user.id, label: user.name })) /">
      <SelectedUsers :users="selectedUsers.map(user => users.find(u => u.id === user.value))" />
    </div>
  </Promised>
</template>

This approach has multiple issues:

  • The map functions are called everytime the component renders even if the array users didn't change
  • If you need the mapped version of users in multiple places you will duplicate the code and calls of map
  • There is too much code written in the template, it should definitely go in the script section

Vue Local Scope solve these problems with components and scoped slots.

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 generate any DOM node by itself, it renders whatever is passed as a scoped slot. It allows you to not duplicate your code but still present the first and third problem discussed in the Why section. 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 v-slot:

<template>
  <div>
    <DataProvider v-slot="items">
      <LocalScope
        :names="items.map(i => i.name)"
        :ids="items.map(i => i.id)"
        v-slot="{ 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>
      </LocalScope>
    </DataProvider>
  </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 is a function that generates a component to hold computed properties and provide them in a scoped slot. It is less convenient than LocalScope but because it generates a stateful component it benefits from caching in computed properties. It also exposes the data through a scoped slot:

<template>
  <div>
    <!-- Here we are intentionally using the same variable name `others` to shadow the variable inside NamesAndIdsScope -->
    <DataProvider v-slot="{ items, others }">
      <NamesAndIdsScope :items="items" :others="others" v-slot="{ name, ids, others }">
        <DisplayNames :names="names" @handle-change="updateNames(ids, names)" />
        <p>{{ names }}</p>
        <p>{{ ids }}</p>
        <p>{{ others }}</p>
      </NamesAndIdsScope>
    </DataProvider>
  </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 `v-slot` variable 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 NamesAndIdsScope creates a root element to group the content under it.

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,779) 
vue (4,132) 
props (26) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210