feature: JSX support

[ZachHaber]

I'd like to be able to use JSX in the body of the toasts, which will remove the need for sanitizing user input if displaying any content from users.

I'm still using Vue2, and I can put in a PR for this change (for v1) as it's pretty straightforward to add.

Add in a Node.js file that will be the bridge between JSX land and vue template land:

import Vue from "vue";
export default Vue.component("VNodes", {
    functional: true,
    props: ["node"],
    render(h, context) {
        return context.props.node;
    }
});

In Toast.vue:

Add a new computed property:

        isJSXBody() {
            const body = this.status.body;
            // basic duck-typing check for jsx VNode
            if (typeof body === "object" && body.tag != null) {
                return true;
            }
            return false;
        }

Change the vt-paragraph div to:

- <p class="vt-paragraph" v-html="status.body" />
+ <div v-if="isJSXBody" class="vt-paragraph">
+   <Node :node="status.body" />
+ </div>
+ <p v-else class="vt-paragraph" v-html="status.body" />

Would you be okay with this PR and cutting a new v1 release?

[nandi95]

@ZachHaber Please make this PR and I'll release it.

[ZachHaber]

It turned out to be a little more complex than I was expecting - the need to use a functional form wasn't needed in the test app in the repo, but came up the moment I tried to test it out in my own app.

Vue has some weird restrictions on JSX that I'm not used to coming from the React world.

@nandi95 I definitely appreciate you being willing to release it! I can also add the typescript definitions I set up to the PR, or create separate PR to do that if you prefer.

[nandi95]

@ZachHaber Excellent work, I'll review/release this today.

[nandi95]

@ZachHaber Released please report back if there are any issues.

[ZachHaber]

Looks like things are working well :) Thanks for the quick turnaround!