webreflection / uhooks Goto Github PK

import { hooked, useState } from 'uhooks';
import { render, html } from 'lit-html';

const useReactive = (objects) => {
  const values = {};
  const keys = Object.keys(objects);
  for (const key of keys) {
    const [value, set] = useState(objects[key]);
    Object.defineProperty(values, key, {
      enumerable: true,
      get: () => value,
      set,
    });
  }
  return values;
};

const callback = (initial) => {
  const state = useReactive(initial);

  const onClick = () => {
    state.name = '1212';
    /// this doesnt update the new value
    /// but the UI updates
    console.log(state.name);
  };

  render(
    html`<button @click=${onClick}>Click Me ${state.name}</button>`,
    document.getElementById('app')
  );
};

const element = hooked(callback);

element({ name: 'Joe' });