npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-adaptive-components

v0.0.5

Published

Give users a great experience best suited to their device and network constraints

Downloads

7

Readme

Vue Adaptive Loading Components & Utilities

CircleCI codecov

Deliver experiences best suited to a user's device and network constraints (experimental)

This is a suite of Vue Components and utilities for adaptive loading based on a user's:

It can be used to add patterns for adaptive resource loading, data-fetching, code-splitting and capability toggling.

Objective

Make it easier to target low-end devices while progressively adding high-end-only features on top. Using these hooks and utilities can help you give users a great experience best suited to their device and network constraints.

Installation

npm i vue-adaptive-components --save or yarn add vue-adaptive-components

Usage

You can import the components you wish to use as follows:

import VueAdaptiveNetwork from 'vue-adaptive-components/network';
import VueAdaptiveSaveData from 'vue-adaptive-components/save-data';
import VueAdaptiveMemory from 'vue-adaptive-components/hardware-concurrency';
import VueAdaptiveHardwareConcurrency from 'vue-adaptive-components/memory';

and then use them in your components. Examples for each component and utility can be found below:

Network

VueAdaptiveNetwork Vue component for getting network status (effective connection type)

<template>
  <vue-adaptive-network>
    <template v-slot="{ effectiveConnectionType }">
      <img v-if="effectiveConnectionType === 'slow-2g'" src='...' alt='low resolution' />
      <img v-else-if="effectiveConnectionType === '2g'" src='...' alt='medium resolution' />
      <img v-else-if="effectiveConnectionType === '3g'" src='...' alt='high resolution' />
      <video v-else-if="effectiveConnectionType === '4g'" muted="" controls="">...</video>
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-network>
</template>

<script>
import VueAdaptiveNetwork from 'vue-adaptive-components/network'

export default {
  components: {
    VueAdaptiveNetwork
  }
}
</script>

effectiveConnectionType values can be slow-2g, 2g, 3g, or 4g.

This component accepts an optional initial-effective-connection-type string attribute, which can be used to provide a effectiveConnectionType state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass an ECT Client Hint to detect the effective network connection type.

<!-- Inside of a Vue component -->
<template>
  <vue-adaptive-network :initial-effective-connection-type="4g">
    ...
  </vue-adaptive-network>
</template>

Save Data

VueAdaptiveSaveData Utility for getting Save Data whether it's Lite mode enabled or not

<template>
  <vue-adaptive-save-data>
    <template v-slot="{ saveData }">
      <img v-if="saveData" src='...' />
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-save-data>
</template>

<script>
import VueAdaptiveSaveData from 'vue-adaptive-components/save-data'

export default {
  components: {
    VueAdaptiveSaveData
  }
}
</script>

saveData values can be true or false.

This component accepts an optional initial-save-data-status boolean attribute, which can be used to provide a saveData state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Save-Data Client Hint that has been converted to a boolean to detect the user's data saving preference.

// Inside of a Vue component
<template>
  <vue-adaptive-save-data :initial-save-data-status="false">
    ...
  </vue-adaptive-save-data>
</template>

CPU Cores / Hardware Concurrency

VueAdaptiveHardwareConcurrency Utility for getting the number of logical CPU processor cores of the user's device

<template>
  <vue-adaptive-hardware-concurrency>
    <template v-slot="{ numberOfLogicalProcessors }">
      <img v-if="numberOfLogicalProcessors <= 4" src='...' />
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-hardware-concurrency>
</template>

<script>
import VueAdaptiveHardwareConcurrency from 'vue-adaptive-components/hardware-concurrency'

export default {
  components: {
    VueAdaptiveHardwareConcurrency
  }
}
</script>

Memory

VueAdaptiveMemoryStatus Utility for getting memory status of the device

<template>
  <vue-adaptive-memory-status>
    <template v-slot="{ deviceMemory }">
      <img v-if="deviceMemory < 4" src='...' />
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-memory-status>
</template>

<script>
import VueAdaptiveMemoryStatus from 'vue-adaptive-components/memory'

export default {
  components: {
    VueAdaptiveMemoryStatus
  }
}
</script>

deviceMemory values can be the approximate amount of device memory in gigabytes.

This component accepts an optional initial-memory-status object attribute, which can be used to provide a deviceMemory state value when the user's browser does not support the relevant DeviceMemory API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Device-Memory Client Hint to detect the memory capacity of the user's device.

// Inside of a Vue component
<template>
  <vue-adaptive-memory :initial-memory-status="{ deviceMemory: 4 }">
    ...
  </vue-adaptive-memory>
</template>

Adaptive Code-loading & Code-splitting

Code-loading

Deliver a light, interactive core experience to users and progressively add high-end-only features on top, if a users hardware can handle it. Below is an example using the Network Status component:

<template>
  <vue-adaptive-network>
    <template v-slot="{ effectiveConnectionType }">
      <vue-full v-if="effectiveConnectionType === '4g'"/>
      <vue-light v-else="" />
    </template>
  </vue-adaptive-network>
</template>

<script>
import VueAdaptiveNetwork from 'vue-adaptive-components/network'

export default {
  components: {
    VueAdaptiveNetwork,
    VueFull: () => import(/* webpackChunkName: "full" */'./vue-full'),
    VueLight: () => import(/* webpackChunkName: "light" */'./vue-light)
  }
}
</script>

vue-light.vue:

<template functional>
  <img :src="props.imageUrl" alt='product' />
</template>

vue-full.vue:

<template>
  <vue-magnifier :src="imageUrl" :src-large="imageLargeUrl" alt='product' />
</template>

<script>
import VueMagnifier from 'vue-magnifier'

export default {
  components: {
    VueMagnifier
  }
}
</script>

Browser Support

Demos

Network

Save Data

CPU Cores / Hardware Concurrency

Memory

Hybrid

References

License

Licensed under the Apache-2.0 license.

Team

This project is brought to you by Addy Osmani and Anton Karlovskiy.

Ported to Vue by jefrydco.