Meteor + SolidJS demo

edemaine · January 19, 2022, 4:16pm

One more addition: edemaine:solid-template-helper allows you to embed SolidJS components within Blaze, just like react-template-helper. This makes it easier to transition from Blaze to Solid incrementally (as I need to do myself).

Given Solid’s first-class recognition of Meteor reactive data, just like Blaze, I think this transition is a natural one! As an exercise, here is the equivalent SolidJS code from a portion of Step 5 of the Blaze tutorial:

function mainContainer(props) {
  const tasks = createFind(() =>
    TasksCollection.find({}, { sort: { createdAt: -1 } }));
  return (
    <div class="app">
      <div class="main">
        <ul class="tasks">
          <For each={tasks()}>{task =>
            <Task task={task}/>
          }</For>
        </ul>
      </div>
    </div>
  );

function Task(props) {
  function toggleChecked() {
    TasksCollection.update(props.task._id, {
      $set: { isChecked: !props.task.isChecked },
    });
  }
  function delete() {
    TasksCollection.remove(props.task._id);
  }
  return (
    <li>
      <input type="checkbox" checked={props.task.isChecked} onClick={toggleChecked} />
      <span>{props.task.text}</span>
      <button onClick={delete}>&times;</button>
    </li>
  );
}

Here’s the simplified Step 5 Blaze code that I translated:

<template name="mainContainer">
  <div class="app">
    <div class="main">
      <ul class="tasks">
        {{#each tasks}}
          {{> task}}
        {{/each}}
      </ul>
    </div>
  </div>
</template>

<template name="task">
  <li>
    <input type="checkbox" checked="{{isChecked}}" class="toggle-checked" />
    <span>{{text}}</span>
    <button class="delete">&times;</button>
  </li>
</template>

Template.mainContainer.helpers({
  tasks() {
    return TasksCollection.find({}, { sort: { createdAt: -1 } });
  },
});

Template.task.events({
  'click .toggle-checked'() {
    TasksCollection.update(this._id, {
      $set: { isChecked: !this.isChecked },
    });
  },
  'click .delete'() {
    TasksCollection.remove(this._id);
  },
});

I find the notation quite close, and I like the ability to integrate the HTML and JavaScript together. And the meaning (in terms of reactivity) is quite similar, but even more fine-grained in Solid. For example, if a task’s text changes, then in Solid only that <span> will get updated, whereas in Blaze the helpers of the entire template will rerun to see if they changed.