tarektouati / vue-use-web Goto Github PK

This is a suggestion based on a similar useFetch() implementation from project vue-async-function.

Instead of just invoking fetch() in component mounted lifecycle hook, you could make useFetch(url) support a reactive wrapper for url argument, so it could watch() for URL changes and trigger another fetch(url) call whenever url changes. This could be useful e.g. in search boxes, when url changes based on the text to be searched.

Hi,

The device motion fails silently in ios as the permission is not requested, could this be added as outlinedHere ?

This is a suggestion based on a similar useFetch() implementation from project vue-async-function.

Please add a generic type signature to useFetch() to define e.g. the proper type of the returned JSON output.

For the moment each new version of vue-use-web is published manually.
Let's take advantage of Github Action to automatically publish on the NPM registry when there's a new release.

This API should track the language preference of the user.

Should look like this:

const languages = usePreferredLanguages();

// language is an array of language codes, like ['en-US', 'ar']

Hint: Check the navigator object for useful properties and event listeners.

Don't forget to add docs for it as well!

Please expose missing Response properties in useFetch(), like status, statusText, headers, type etc.

It would be similar to the useWebsocket API, as it is only concerned with calling the web worker API and providing wrapping for sending and react to incoming data.

const { message, post, terminate } = useWorker('path/to/worker.js');

watch(message, (value) => {
  console.log('Worker says: ', value);
}, { lazy: true });

// send a message from the main script.
post('hello from main script!');

terminate(); // cleans up the worker

It would be useful to add the hardware concurrency information in a composition function, something like this:

const { numberOfProcessors } = useHardwareConcurrency();

I see you're using the Script DOM Element approach to script tag injection in the Script example. While that's good and well it feels a bit kludgy given Fetch hasn't implemented yet and, using Fetch, you could handle a more general use case covering both Script and Styles with additional control and without the need to promisfy the synchronous code written.

Given many of the other APIs exposed in this project are highly UA dependent (e.g. Battery Status) and likely to be unreliable – surprisingly given the website suggests "graceful degradation" and I can't use the clipboard on known working devices – please consider reworking Script to use Fetch Injection to support Style injection in addition to adding extensibility using modern standards under a more declarative approach. Cheers.

Instead of just returning all res.blob(), res.text(), res.json() alternative outputs from useFetch() at once, you could just return a single output, properly parsed based on the value of Content-Type response header:

• if it's application/json, return res.json()
• if it's another text-based MIME type, return res.text()
• if it's a binary MIME type, return res.blob()

A draft of this API looks like this:

import { useWebSocket } from 'vue-use-web';
import { watch, ref } from 'vue';

const { data, state, close, send } = useWebSocket("ws://mysocketurl.com");

// `data` can be watched to respond to incoming data.
const messages = ref([]);
watch(data, (message) => {
  messages.push(message);
}, { lazy: true });

// status represents the 4 states of web sockets:
// OPEN, CLOSING, CLOSED, CONNECTING.
console.log(state); 

// data can be sent
send('Hello there!');

// WebSocket can be gracefully closed.
close();

The connection should be initiated on mounted lifecycle to ensure it runs on the client-side.

No need to implement a reconnect mechanism but that would be great as well.

hi,

would be nice if the dependency on @vue/composition-api could be dropped for a new vue3 version of the package!

Hello! I have a project very similar to yours, and I found yours very interesting.
How about adding the camera api too?
Here in my repository I have the example I did: https://github.com/patrickmonteiro/quasar-web-apis

You can view a demo online: https://quasar-web-apis.surge.sh/

The menu links to https://logaretm.github.io/vue-use-web/examples/, but the gh-pages branch does not contain a examples folder.

Thanks for a nice library. I have an issue with useClipboard when used in a component.

Problem:
Does not capture copies in other tabs or applications because it is only listening to copy events in its own tab.

Suggestion:
Expose read and write functions so that the clipboard is read on each access.

export function useClipboard() {
  async function read() {
    return await navigator.clipboard.readText()
  }

  function write(txt: string): void {
    navigator.clipboard.writeText(txt)
  }

  return {
    write,
    read
  }
}

Hello, I'm trying to use this to get acceleration values but when trying to use the code in the sample

<template>
  <div>
    <h2>acceleration is:</h2>
    <p>x:{{ acceleration.x }}</p>
    <p>y:{{ acceleration.y }}</p>
    <p>z:{{ acceleration.z }}</p>
    <h2>rotation rate is:</h2>
    <p>alpha:{{ rotationRate.alpha }}</p>
    <p>beta:{{ rotationRate.beta }}</p>
    <p>gamma:{{ rotationRate.gamma }}</p>
  </div>
</template

<script>
import { useDeviceMotion } from "vue-use-web";

export default {
  setup() {
    const { acceleration, rotationRate } = useDeviceMotion();

    return { acceleration, rotationRate };
  }
};
</script>

The app breaks when trying to use {{ acceleration.x }}

On desktop console I am getting

[Vue warn]: Property or method "acceleration" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at src/App.vue

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'x' of undefined"

found in

--->

This is what my App.vue looks like

<template
  <div id="app">
    <div>
      <img alt="Vue logo" src="./assets/logo.png">
    </div>

    <div>
      <p>{{ acceleration.x }}</p>
    </div>
  </div>
</template>

<script>
import { useDeviceMotion } from "vue-use-web";

export default {
  name: 'app',

  setup(){
    const { acceleration } = useDeviceMotion();
    return { acceleration };
  }
}
</script>

This API should track color scheme preference of the user.

Should look like this:

const theme = usePreferredColorScheme();

// theme can be either "dark", "light" or "no-preference".

Hint: Check the window.matchMedia function.

Don't forget to add docs for it as well!

Hi, thanks for library! Going to use it for sure.

I just noticed that TypeScript types are perhaps not published in npm package, therefore getting error: Could not find a declaration file for module 'vue-use-web'.

Could you make sure to publish .d.ts files as well?

Edit: Just running npm run ts:defs inside node_modules/vue-use-web fixed the error, so you probably just need to include that in your publish workflow.

I think adding the Page Visibility API would be a good new feature.

const isPageVisible = usePageVisibility()

I could also open a Pull Request on this if it's wanted.

We already have usePreferredColorScheme scheme that uses media queries API.

Having a raw useMediaQuery function would be really cool for components that need MQ info, we could also refactor usePreferredColorScheme to use this function instead.

const matches = useMedia('(max-width: 600px)');

This should allow users to watch arbitrary media queries, for example:

const isPhone = useMedia('(max-width: 480px)');
const isTablet = useMedia('(max-width: 1080)');
const isDesktop = useMedia('(max-width: 2160)');

Hint: take a look at usePreferredColorScheme implementation, and window.matchMedia.

The type of useFetch() does not match the real implementation:

type distributed with the package:

import { Ref } from '@vue/composition-api';
export declare function useFetch(url: RequestInfo, options: RequestInit): {
    blob: Ref<Blob | null>;
    json: Ref<any>;
    text: Ref<string>;
    status: Ref<number | undefined>;
    statusText: Ref<string>;
    headers: Ref<Record<string, string>>;
    isLoading: Ref<boolean>;
    cancelled: Ref<boolean>;
    error: Ref<boolean>;
    success: Ref<boolean>;
    cancel: () => void;
    execute: () => Promise<void>;
};

Type in the implementation

This cause Webstorm not to recognise the "response" element of the returned object as well as complaining about a missing argument when useFetch is only called with its first argument (useFetch("/api/work")).

This composition function should use the navigator.deviceMemory. Here the MDN

It's likely it won't have any listeners or anything like that, so it's just a simple wrapper for the API call.

const { deviceMemory } = useMemoryStatus();

There are additional memory properties that exist on performance namespace, It's a non-standard though and only available in chrome.