bfanger / svelte-preprocess-react

Seamlessly use React components inside a Svelte app
MIT License
126 stars 6 forks source link

hooks silently doing nothing #28

Closed 152334H closed 1 year ago

152334H commented 1 year ago

not really sure if you should investigate this, but this project does not seem to work with https://github.com/chengsokdara/use-whisper, e.g.

<script lang="ts">
    import { hooks } from "svelte-preprocess-react";
    import { useWhisper } from '@chengsokdara/use-whisper'
    import { useState } from "react";

    const store = hooks(() => {
        const d = useWhisper({
            apiKey: OPENAI_API_TOKEN, // YOUR_OPEN_AI_TOKEN
        })
        const [count,setCount] = useState(0)
        const d2 = {...d, count, setCount}
        return d2
    });
    const dbg = (x) => {console.log(x); return x}
</script>

{#if $store}
    {@const {count, setCount} = $store}

    <div>Count: <span data-testid="count">{count}</span></div>
    <button data-testid="add" on:click={() => setCount(count + 1)}>+</button>
    <hr />

    {@const {recording, speaking, transcribing, transcript, pauseRecording, startRecording, stopRecording} = $store}
    {console.log(recording)}
    <div>
        <p>Recording: {recording}</p>
        <p>Speaking: {speaking}</p>
        <p>Transcribing: {transcribing}</p>
        <p>Transcribed Text: {transcript.text}</p>
        <button data-testid="wha3" on:click={() => dbg(startRecording())}>Start</button>
        <button data-testid="wha2" on:click={() => dbg(pauseRecording())}>Pause</button>
        <button data-testid="wha1" on:click={() => dbg(stopRecording())}>Stop</button>
    </div>
{/if}

the setcount button will work, but the startrecording button does not appear to start any recording

sorry i don't have an immediate separable PoC available

bfanger commented 1 year ago

That's not an issue in this library, useWhisper swallows errors like TypeError: Cannot read properties of undefined (reading 'RecordRTCPromisesHandler') .

The compiled code dist/chunk-32KRFHOA contains try catch blocks where instead of logging the error it does nothing. The catch (err) { console.log(err) } from src/useWhisper.ts is compiled to catch {} this is due to their tsup configuration:

 esbuildOptions: (options) => {
    options.drop = env === 'production' ? ['console', 'debugger'] : undefined
  },
152334H commented 1 year ago

Thanks for the help!