Improve Approach to Escaping

[rglover]

See feedback here: https://news.ycombinator.com/item?id=42333925.

The problem is that right now, because we don't do any escaping on the client, it's 100% up to the developer on the server to ensure that content is properly escaped.

This creates the potential for chaos as, if they don't escape on the server, they could accidentally render malicious data. At the same time, if they do escape on the server but want to render the data raw on the client, you'd have a double-escaping bug/issue.

Proposed solution: implement some basic escaping when text is rendered in a literal, but provide some additional render methods for handling special cases.

Some example code we could use as a starting point:

const Example = joystick.component({
  render: ({ data, raw, markdown }) => {
    return `
      <div>
        <!-- This would be auto-escaped by Joystick -->
        <p>${data?.user?.profile}</p>
        <!-- This would just render the raw, unescaped text -->
        <p>${raw(data?.user?.profile)}</p>
        <!-- This would safely parse and render markdown text -->
        <p>${markdown(data?.user?.profile)}</p>
      </div>
    `;
  },
});

I think this would be ideal, with the existing server-side approach being flagged as "available, but not recommended."