antfu / reactivue

🙊 Use Vue Composition API in React components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

After hmr update, updates doesnt trigger rerender

sibbng opened this issue · comments

Steps to reproduce:

  1. Start server
  2. click reactivue counter, it works
  3. click react counter, it works
  4. go back editor and just save file to trigger hmr
  5. click reactivue counter, it doesnt rerender
  6. click react counter, it triggers rerender and updates reactivue counter as you click

Code: Vite 2.0 react-ts template, same issue occurs on preact template too

import React, { useState } from 'react'
import './App.css'
import { defineComponent, ref } from 'reactivue'

const Mouse = defineComponent(
  () => {
    const a = ref(0)
    const inc = () => a.value++
    return { inc, a }
  },
  ({ inc, a }) => {
    return (
      <div className="card" style={{marginBottom: '25px'}}>
        <p>reactivue counter</p>
        <button onClick={inc}>{a}</button>
      </div>
    )
  },
)

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Mouse/>
      <div>
        react counter
      </div>
      <button onClick={() => setCount((count) => count + 1)}>
        count is: {count}
      </button>
    </div>
  )
}

export default App