November 25, 2019

Understanding Solid: JSX

JSX was introduced by Facebook for complementing React in javascript. It is a misconception that JSX is somehow coupled with React or its siblings like React Native, Preact, Inferno etc. But JSX is an extension to javascript and can be used in other places beside React.

Solid uses JSX to render vanilla DOM elements. In React the <div /> compiles to React.createElement('div') but in Solid you could say it compiles to document.createElement('div') (actually it uses HTML templates, more on this ahead).

Hello World component:

function HelloWorld() {
  return (
    <div>
      Hello World
    </div>
  );
}

This will (conceptually) compile to:

function HelloWorld() {
  const el$ = document.createElement('div');
  
  el$.innerText = 'Hello World';
  
  return el$;
}

Actually solid uses HTML template element because it is more performant for creating new instances from same template.

So it actually compiles to this:

function _$template(str) {
  const t = document.createElement('template');
  t.innerHTML = str;
  return t.content.firstChild;
}

const _tmpl$ = _$template(`<div>Hello World</div>`);

function HelloWorld() {
  return _tmpl$.cloneNode(true);
}

From the previous post we know how solid is tracking dependencies. We’ll use it here now by creating a counter.

function Counter() {
  const [state, setState] = createState({ counter: 0 });
  
  setInterval(() => {
    setState({ counter: state.counter + 1 });
  });
  
  return (
    <div>
      {state.counter}
    </div>
  );
}

This will compile to:

const _tmpl$ = _$template(`<div></div>`);

function Counter() {
  const [state, setState] = createState({
    counter: 0
  });
  setInterval(() => {
    setState({
      counter: state.counter + 1
    });
  });
  return function () {
    const _el$ = _tmpl$.cloneNode(true);

    createEffect(() => {
      _el$.innerText = state.counter;
    });

    return _el$;
  }(); // NOTE: this is an iife!
}

Note that the string passed to _$template does not have the part where we had the dynamic value {state.counter}. It will be added later in createEffect.

Now whenever we update the counter, the createEffect block runs which updates the innerText of _el$.

JSX with nesting:

function Counter() {
  const [state, setState] = createState({ counter: 0 });
  
  setInterval(() => {
    setState({ counter: state.counter + 1 });
  });
  
  return (
    <div>
      <div>Counter:</div>
      <div>{state.counter}</div>
    </div>
  );
}

Compiles to:

const _tmpl$ = _$template(`<div><div>Counter:</div><div></div></div>`);

function Counter() {
  const [state, setState] = createState({
    counter: 0
  });
  setInterval(() => {
    setState({
      counter: state.counter + 1
    });
  });
  return function () {
    const _el$ = _tmpl$.cloneNode(true),
          _el$2 = _el$.firstChild,
          _el$3 = _el$2.nextSibling;

    createEffect(() => {
      _el$3.innerText = state.counter;
    });

    return _el$;
  }();
}

Note that the static part string: Counter: is left inside the template string passed to _$template We refer to the nested elements by using combination of firstChild, nextSibling etc.

And this is in short how Solid works. Effectively these two parts: dependency tracking and JSX provide the best of both worlds. We get the best performance by executing only the minimal code which is needed and with JSX we get to keep the mental model introduced by React which keeps us more productive.

reactive solid-js react javascript
November 19, 2019

Using iTerm triggers

iTerm triggers can be used for converting text in your terminal to URLs and make them clickable. This is useful for creating JIRA issue links whenever there is a JIRA-1234 like pattern.

Steps:

Go to iTerm -> Preferences -> Profiles -> Advanced -> Triggers Edit

iterm preference

Add an entry in the table

Regular Expression: (?i)JIRA-\d+
Action:             Make Hyperlink
Parameters:         https://jira.yourhost.com/jira/browse/\0¯

table

Now whenever there is a pattern with JIRA-1234, it will become a clickable hyperlink.

iterm productivity