完善 useSpeech useSlider 文档和示例

Author: niqingyang

docs/useSlider.md

@@ -8,7 +8,7 @@ Vue UI hook that provides slide behavior over any HTML element. Supports both mo
 import {useSlider, useRef} from 'vue-next-use';
 
 const Demo = () => {
-  const ref = React.useRef(null);
+  const ref = useRef(null);
   const {isSliding, value, pos, length} = useSlider(ref);
 
   return (

docs/useSpeech.md

@@ -0,0 +1,23 @@
+# `useSpeech`
+
+Vue UI hook that synthesizes human voice that speaks a given string.
+
+
+## Usage
+
+```jsx
+import {useSpeech} from 'vue-next-use';
+
+const Demo = {
+    setup(props) {
+
+        const voices = window.speechSynthesis.getVoices();
+
+        const state = useSpeech('Hello world!', {rate: 0.8, pitch: 0.5, voice: voices[0]});
+
+        return () => (
+            <pre>{JSON.stringify(state, null, 2)}</pre>
+        );
+    }
+};
+```

src/index.ts

@@ -45,7 +45,7 @@ export {default as useIntersection} from './useIntersection';
 export {default as useKeyPress} from './useKeyPress';
 export {default as useKeyPressEvent} from './useKeyPressEvent';
 export {default as useKeyboardJs} from './useKeyboardJs';
-export {default as useMount} from './useMount';
+export {default as useMounted} from './useMounted';
 export {default as useLocation} from './useLocation';
 export {default as useLongPress} from './useLongPress';
 export {default as useBattery} from './useBattery';

src/useMount.ts renamed to src/useMounted.ts

@@ -1,6 +1,6 @@
 import {onMounted} from "vue";
 
-export default function useMount(fn: () => void) {
+export default function useMounted(fn: () => void) {
     onMounted(() => {
         fn();
     })

src/useSpeech.ts

@@ -1,7 +1,5 @@
-import {Ref, ref, onMounted} from "vue";
-import {useEffect, useState, useSetState} from "./index";
+import {useEffect, useReadonly, useRef, useMounted} from "./index";
 import {isBrowser} from './misc/util';
-import {watch} from "rollup";
 
 export interface SpeechState {
     isPlaying: boolean;
@@ -22,8 +20,8 @@ export interface SpeechOptions {
 
 const voices = isBrowser && typeof window.speechSynthesis === 'object' ? window.speechSynthesis.getVoices() : [];
 
-const useSpeech = (text: string, opts: SpeechOptions = {}): Ref<SpeechState> => {
-    const [state, setState] = useSetState<SpeechState>({
+const useSpeech = (text: string, opts: SpeechOptions = {}): SpeechState => {
+    const [state, setState] = useReadonly<SpeechState>({
         isPlaying: false,
         lang: opts.lang || 'default',
         voice: opts.voice || voices[0],
@@ -32,20 +30,22 @@ const useSpeech = (text: string, opts: SpeechOptions = {}): Ref<SpeechState> =>
         volume: opts.volume || 1,
     });
 
-    const utteranceRef = ref<SpeechSynthesisUtterance | null>(null);
-
-    const utterance = new SpeechSynthesisUtterance(text);
-    opts.lang && (utterance.lang = opts.lang);
-    opts.voice && (utterance.voice = opts.voice);
-    utterance.rate = opts.rate || 1;
-    utterance.pitch = opts.pitch || 1;
-    utterance.volume = opts.volume || 1;
-    utterance.onstart = () => setState({isPlaying: true});
-    utterance.onresume = () => setState({isPlaying: true});
-    utterance.onend = () => setState({isPlaying: false});
-    utterance.onpause = () => setState({isPlaying: false});
-    utteranceRef.value = utterance;
-    window.speechSynthesis.speak(utteranceRef.value);
+    const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
+
+    useMounted(() => {
+        const utterance = new SpeechSynthesisUtterance(text);
+        opts.lang && (utterance.lang = opts.lang);
+        opts.voice && (utterance.voice = opts.voice);
+        utterance.rate = opts.rate || 1;
+        utterance.pitch = opts.pitch || 1;
+        utterance.volume = opts.volume || 1;
+        utterance.onstart = () => setState({isPlaying: true});
+        utterance.onresume = () => setState({isPlaying: true});
+        utterance.onend = () => setState({isPlaying: false});
+        utterance.onpause = () => setState({isPlaying: false});
+        utteranceRef.value = utterance;
+        window.speechSynthesis.speak(utteranceRef.value);
+    });
 
     return state;
 };

stories/useSpeech.stories.js

@@ -0,0 +1,23 @@
+import {useSpeech} from "../src/index";
+import {ShowDemo, ShowDocs} from './util/index';
+
+export default {
+    title: 'UI/useSpeech',
+    argTypes: {},
+};
+
+export const Docs = ShowDocs(require('../docs/useSpeech.md'));
+
+export const Demo = ShowDemo({
+    setup(props) {
+
+        const voices = window.speechSynthesis.getVoices();
+
+        const state = useSpeech('Hello world!', {rate: 0.8, pitch: 0.5, voice: voices[0]});
+
+        return () => (
+            <pre>{JSON.stringify(state, null, 2)}</pre>
+        );
+    }
+});
+