Reactivity seem to break when using modules

[Ombuweb]

Hi. I’m trying to modularize my code but reactivity breaks. What could i be doing wrong?

import * as Inputs from 'npm:@observablehq/inputs';
import { Generators } from 'npm:@observablehq/stdlib';
const newCostView = Inputs.number({
  label: 'Add new expense',
  value: 0,
});
const totalCostView = Inputs.number({
  label: 'Cummulative cost',
  value: 5000,
});
const getViewValue = async function* (view) {
  for await (const value of Generators.input(view)) {
    yield value;
  }
};

const getValue = async (view) => {
  const gen = getViewValue(view);
  const { value } = await gen.next();
  return value;
};

const createDate = (date) => (date ? new Date(date) : new Date());

const date = createDate().toISOString().slice(0, 10);
const carBuyDateView = Inputs.date({
  label: 'When did you buy the car?',
  value: date,
});

export const _view = (async () => {
  const carCost = await getValue(totalCostView);
  const newCost = await getValue(newCostView);
  const carTotalCost = carCost + newCost;
  const value = await getValue(newCostView);
  const carBuyDate = await getValue(carBuyDateView);
  const dateDiff = createDate() - createDate(carBuyDate);
  // the milliseconds difference in months
  const monthsDiff = dateDiff / (1000 * 60 * 60 * 24 * 30);
  const costPerMonth = carTotalCost / monthsDiff;

  const totalCostTable = Inputs.table(
    [
      {
        totalCostSoFar: carTotalCost,
        costPerMonth: costPerMonth.toFixed(2),
      },
    ],
    {
      header: {
        totalCostSoFar: 'Total cost so far',
        costPerMonth: 'Cost per month',
      },
    }
  );

  return {
    newCostView,
    totalCostView,
    carBuyDateView,
    totalCostTable,
    costPerMonth,
  };
})();

[mbostock]

Reactivity is only available as top-level variables in pages. It does not apply within modules, though you can define a generator function in a module, and then use it to declare a reactive top-level variable on a page.

https://observablehq.com/framework/reactivity#top-level-variables

[Ombuweb]

Thank you very much, @mbostock. Using a generator works perfectly. Now my code is cleaner. Where’s the best place to share Framework code samples with the community?

[mbostock]

You can use the show & tell discussions category.

[Ombuweb]

For anyone who may experience the same issue, attached is my solution. I hope it works for you too.

The JS module:

import { number, date } from '@observablehq/inputs';
import { Generators } from 'npm:@observablehq/stdlib';

const createNumberInput = (label, value, labelClass = '', extent = []) => {
  return number([...extent], {
    label,
    labelClass,
    value,
  });
};

const newExpenseInput = {
  input: createNumberInput('Add new TV expense', 0, '', [0]),
  generator() {
    return Generators.input(this.input);
  },
};

const currentExpenseInput = {
  input: createNumberInput('Current TV cost', 900, 'my-label', [0]),
  generator() {
    return Generators.input(this.input);
  },
};

const TODAY = new Date();

const purchaseDateInput = {
  input: date({
    label: 'TV purchase date',
    value: TODAY,
    max: TODAY,
  }),
  generator() {
    return Generators.input(this.input);
  },
};

// Table data structure
const costCalculationData = {
  data: [
    {
      totalCostSoFar: 0,
      costPerMonth: 0,
      monthsPassed: 0,
    },
  ],
  config: {
    header: {
      totalCostSoFar: 'Total cost (€)',
      costPerMonth: 'Cost per month (€)',
      monthsPassed: 'Months passed',
    },
  },
};

const MILLISECONDS_IN_A_MONTH = 1000 * 60 * 60 * 24 * 30;

function calculateCostPerMonth(purchaseDateInputVal, totalCostValue) {
  const dateDiff = TODAY - purchaseDateInputVal;
  const dateDiffInMonths = dateDiff / MILLISECONDS_IN_A_MONTH;
  const monthsPassed = Math.floor(dateDiffInMonths); // Allow 0 months if valid

  const costPerMonth =
    monthsPassed > 0 ? totalCostValue / monthsPassed : totalCostValue;

  costCalculationData.data[0] = {
    totalCostSoFar: totalCostValue.toFixed(2),
    costPerMonth: costPerMonth.toFixed(2),
    monthsPassed,
  };
}

// Generator function to yield table data
function* generateCostData(purchaseDateInputVal, totalCostValue) {
  calculateCostPerMonth(purchaseDateInputVal, totalCostValue);
  yield costCalculationData;
}

// Export view components
export const viewComponents = {
  newExpenseInput,
  currentExpenseInput,
  purchaseDateInput,
  generateCostData,
};

Then, you use the above code in a .md file as follows:

// import the module
import { viewComponents } from './components/carCostInputs.js';

Has our old TV been expensive for us?

Let's calculate it.

Context

We bought the TV for 500€. For the last 3 years, we spent 400€ for repairs and maintenance.

We're considering if buying a newer TV would be more cost-effective in the long run. For the newer TV, we would pay 20 - 30€ per month for 5 years.

TV Data

${viewComponents.purchaseDateInput.input}

${viewComponents.newExpenseInput.input} ${viewComponents.currentExpenseInput.input}

Total cost: ${totalCost} €

${Inputs.table(costCalculationData.data, costCalculationData.config, costCalculationData.monthsPassed)}

const currentExpense = viewComponents.currentExpenseInput.generator();
const newExpense = viewComponents.newExpenseInput.generator();
const purchaseDate = viewComponents.purchaseDateInput.generator();

const totalCost = currentExpense + newExpense;
const costCalculationData = viewComponents.generateCostData(
  purchaseDate,
  totalCost
);