xjsx

A jsx shorthand middleware library.
q and if props are added to make coding easy.
It is compatible to Fresh projects.

setup

In deno.json, add the following configurations.

  "imports": {
    ... (other imports),
    "xjsx/jsx-runtime": "https://deno.land/x/xjsx@0.1.1/jsx-runtime.ts",
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "xjsx"
  },

q props

You can use q props as an alternative to class props

  <div q="foo" />

is equivalent to

  <div class="foo" />

multiple class names

Props q accepts an array of class values

  <div q={["foo", "bar", "buzz"]} />

q props for function component

  const Foo = () => <div>hoge<div>
  <Foo q="foo">

Any function components accept q props, then the specified class name is applied to the root dom element of the component.

if props

There is if props added for conditional rendering. It is similar to ngIf in angular or v-if in vue.

  <div if={someCondition}>hello</div>

it results equivalent to

  {someCondition && <div>hello</div> }

Happy Coding!!

License

MIT