preact signals react transform playground

Settings:Transform componentsTransform macrosOptimize macros

1

2

3

4

5

6

7

8

9

10

11

12

13

import { $state } from '@preact-signals/utils/macro'
let text = $state('')
function App() {
  return (
    <div>
      <input value={text} onInput={(e) => (text = e.target.value)} />
      <p>{text}</p>
    </div>
  )
}

1

2

3

4

5

6

7

8

import { deepSignal as _deepSignal } from "@preact-signals/utils";
let text = _deepSignal('');
function App() {
  return <div>
      <input value={text.value} onInput={e => text.value = e.target.value} />
      <p>{text}</p>
    </div>;
}