How do I make component re-render when the component itself isn't an observer?

[ibejoeb]

First 30 minutes of trying Sinuous. I need a component that takes an object and displays a property. I'm able to use an observable directly, but I'm struggling to pass the underlying data to the component. The intention here is to have a reusable to which I can pass data from an arbitrary source. Can anyone point me in the right direction? Thanks!

CodeSandbox

import { o, html } from "sinuous";

type Data = {
  foo: string;
  baz: number;
};

// initial state
const data = o<Data | undefined>(undefined);

// stub getting data from elsewhere
const getData = () =>
  new Promise<Data>((resolve) => {
    setTimeout(() => resolve({ foo: "bar", baz: Math.random() }), 2500);
  });

// should be just a "dumb" component because it will be
// used to display data in many other observables
const DataViewer = ({ d }: { d?: Data }) => {
  // nope
  // return html` <div>Data baz: ${d?.baz}</div> `;

  // nope
  // return html` <div>Data baz: ${() => d?.baz}</div> `;

  return html` <div>Data baz: ${() => d?.baz}</div> `;
};

const App = () => html`
  <div>
    <h1>App</h1>
    <${DataViewer} d=${() => data()} />
  </div>
`;

document.body.append(App());

// now we fetch some data
(async () => {
  const d = await getData();
  console.log(d);
  data(await getData());
})();

[luwes]

I created a fork with the solution https://codesandbox.io/s/little-leaf-44o2c3?file=/src/index.ts

The issue was that the observable is still a function and to get the contents aka the object with foo, baz it still needs to be expanded manually. If these were single observables each with a primitive the template wouldn't need to expand them like that because Sinuous knows how to expand observables in a template automatically. aka

const foo = o<string | undefined>(undefined);
const baz = o<number | undefined>(undefined);

return html` <div>Data baz: ${baz}</div> `;

[ibejoeb]

I can't change the signature of DataViewer because it is used elsewhere. How do you recommend using DataViewer as-is?

[ibejoeb]

https://codesandbox.io/s/stupefied-minsky-sk12rv?file=/src/index.ts