Hacking JSX pragma for fun and profit

React Nexus 2023

👋 Hey there!
I'm Akash Hamirwasia

Writing code @Razorpay. Love building products on the web, trying out new technologies and contributing to open-source.

⚡️ Blaze

🔎 UnTab

🔌 Diode

Slant it

Let's connect

Twitter: @blenderskool

GitHub: @blenderskool

Website: akashhamirwasia.com

akashhamirwasia.com

React Nexus 2023

What is JSX?

It's that HTML like thing you write in JavaScript files to define your UI!

const App = () => (
  <Container className="bg-red-500">
    <h1>Welcome to React Nexus!</h1>
    <p>This is an example of JSX code.</p>
  </Container>
);

It's not something exclusive to React!
Supported by React, Preact, Solid, Qwik, Vue, etc.

akashhamirwasia.com

React Nexus 2023

What is pragma?

Compiler directive.
How a compiler should handle the contents of a file.
Examples:
Enable strict mode in JavaScript:
```
"use strict";
```
Declare client component in Next.js:
```
"use client";
```

akashhamirwasia.com

React Nexus 2023

Browsers and JSX

Browsers don't understand JSX, they understand JavaScript.
Compiler replaces JSX code with calls to a special function.
Compilers – Babel, SWC, TypeScript.

akashhamirwasia.com

React Nexus 2023

Browsers and JSX

<Container className="bg-red-500">
  <h1>Welcome to React Nexus!</h1>
  <p>This is an example of JSX code.</p>
</Container>


import { jsx, jsxs } from 'react/jsx-runtime';
jsxs(Container, {
  className: 'bg-red-500',
  children: [
    jsx('h1', { children: 'Welcome to React Nexus!' }),
    jsx('p', { children: 'This is an example of JSX code.' }),
  ],
});

akashhamirwasia.com

React Nexus 2023

Browsers and JSX

<Container className="bg-red-500">
  <h1>Welcome to React Nexus!</h1>
  <p>This is an example of JSX code.</p>
</Container>


import React from 'react';
React.createElement(
  Container,
  { className: 'bg-red-500' },
  React.createElement('h1', null, 'Welcome to React Nexus!'),
  React.createElement('p', null, 'This is an example of JSX code.')
);

akashhamirwasia.com

React Nexus 2023

What is JSX pragma?

"JSX pragma" is a directive that tell the compiler which function to use for this replacement.


/** @jsx myJSX */
function myJSX() {...}
<Container className="bg-red-500">
  <h1>Welcome to React Nexus!</h1>
</Container>

function myJSX() {...}
myJSX(
  Container,
  { className: 'bg-red-500' },
  myJSX('h1', null, 'Welcome to React Nexus!')
);

akashhamirwasia.com

React Nexus 2023

Why use a custom JSX function?

1
function App() {
2
  return (
3
    <div className="container">
4
      Hello React Nexus!
5
    </div>
6
  );
7
}

Hello React Nexus!

akashhamirwasia.com

React Nexus 2023

Why use a custom JSX function?


1
/** @jsx myJSX */
2
3
function myJSX(...args) {
4
  console.log(...args);
5
}
6
7
function App() {
8
  return (
9
    <div className="container">
10
      Hello React Nexus!
11
    </div>
12
  );
13
}

Console

div {className: "container"}Hello React Nexus!

akashhamirwasia.com

React Nexus 2023

Why use a custom JSX function?

1
/** @jsx myJSX */
2
import React from 'react';
3
4
function myJSX(...args) {
5
  console.log(...args);
6
  return React.createElement(...args);
7
}
8
9
function App() {
10
  return (
11
    <div className="container">
12
      Hello React Nexus!
13
    </div>
14
  );
15
}

Hello React Nexus!

Console

div {className: "container"}Hello React Nexus!

akashhamirwasia.com

React Nexus 2023

Why use a custom JSX function?

1
/** @jsx myJSX */
2
import React from 'react';
3
4
function myJSX(...args) {
5
  console.log(...args);
6
  return React.createElement(...args);
7
}
8
9
function App() {
10
  return (
11
    <div className="container">
12
      Hello React Nexus!
13
    </div>
14
  );
15
}

What if we inject some useful code here?

Code that is repetitive in every component?

Leads to improved developer experience?

akashhamirwasia.com

React Nexus 2023

Let's look at some practical examples of custom JSX functions

akashhamirwasia.com

React Nexus 2023

Dynamic class binding is a hassle right?


1
const Button = ({ isPrimary, isLarge }) => (
2
  <button className={`
3
    rounded
4
    ${isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-800'}
5
    ${isLarge ? 'py-4 px-8 text-xl' : ''}
6
  `}>
7
    Click Me
8
  </button>
9
);

akashhamirwasia.com

React Nexus 2023

`classnames` package to the rescue!


1
import cx from 'classnames';
2
3
const Button = ({ isPrimary, isLarge }) => (
4
  <button className={cx('rounded',
5
    {
6
      'bg-blue-500 text-white': isPrimary,
7
      'bg-gray-300 text-gray-800': !isPrimary,
8
      'py-4 px-8 text-xl': isLarge,
9
    }
10
  )}>
11
    Click Me
12
  </button>
13
);

akashhamirwasia.com

React Nexus 2023

With custom JSX function using `classnames`


1
/** @jsx myJSX */
2
import React from 'react';
3
import cx from 'classnames';
4
5
function myJSX(element, props, ...children) {
6
  return React.createElement(element, props, ...children);
7
}
8
9
...

akashhamirwasia.com

React Nexus 2023

With custom JSX function using `classnames`

1
/** @jsx myJSX */
2
import React from 'react';
3
import cx from 'classnames';
4
5
function myJSX(element, props, ...children) {
6
  if (props && 'className' in props) {
7
    props.className = cx(props.className);
8
  }
9
10
  return React.createElement(element, props, ...children);
11
}
12
13
...

akashhamirwasia.com

React Nexus 2023

With custom JSX function using `classnames`

1
/** @jsx myJSX */
2
function myJSX(element, props, ...children) { ... }
3
4
const Button = ({ isPrimary, isLarge }) => (
5
  <button className={['rounded',
6
    {
7
      'bg-blue-500 text-white': isPrimary,
8
      'bg-gray-300 text-gray-800': !isPrimary,
9
      'py-4 px-8 text-xl': isLarge,
10
    }
11
  )]}>
12
    Click Me
13
  </button>
14
);

akashhamirwasia.com

React Nexus 2023

With custom JSX function using `classnames`

1
/** @jsx myJSX */
2
function myJSX(element, props, ...children) { ... }
3
4
const Button = ({ isPrimary, isLarge }) => (
5
  <button className={['rounded',
6
    {
7
      'bg-blue-500 text-white': isPrimary,
8
      'bg-gray-300 text-gray-800': !isPrimary,
9
      'py-4 px-8 text-xl': isLarge,
10
    }
11
  )]}>
12
    Click Me
13
  </button>
14
);

classnames available everywhere!

Don't have to think of imports

It just works!

akashhamirwasia.com

React Nexus 2023

You can also introduce a new prop!

feat. css prop from Emotion CSS (Similar in Glamor, Theme UI)

1
import Emotion, { createEmotionProps } from './emotion-element';
2
3
function jsx(element, props, ...children) {
4
  if (props == null || !Object.hasOwn(props, 'css')) {
5
    return React.createElement(element, props, ...children);
6
  }
7
8
  return React.createElement(
9
    Emotion,
10
    createEmotionProps(element, props),
11
    ...children
12
  );
13
}

akashhamirwasia.com

React Nexus 2023

Or crazier things like runtime prop validation

1
import { z } from 'zod';
2
3
function jsx(element, props, ...children) {
4
  if (element.schema) element.schema.parse(props);
5
6
  return React.createElement(element, props, ...children);
7
}

throws an error if validation fails

akashhamirwasia.com

React Nexus 2023

Or crazier things like runtime prop validation

1
import { z } from 'zod';
2
3
function jsx(element, props, ...children) {
4
  if (element.schema) element.schema.parse(props);  
5
  return React.createElement(element, props, ...children);
6
}
7
8
function Profile({ user, onEdit }) { ... }
9
10
Profile.schema = z.object({
11
  user: z.object({
12
    name: z.string(),
13
    age: z.number(),
14
  })
15
})

akashhamirwasia.com

React Nexus 2023

Or crazier things like runtime prop validation

1
function Profile({ user, onEdit }) { ... }
2
3
Profile.schema = z.object({
4
  user: z.object({
5
    name: z.string(),
6
    age: z.number(),
7
  })
8
});
9
10
<ErrorBoundary fallback={<p>Shit, I made a mistake!</p>}>
11
  <Profile user={userData} onEdit={...} />
12
</ErrorBoundary>

akashhamirwasia.com

React Nexus 2023

Summary

JSX pragmas are used to modify how the compiler treats your JSX code.
Think of them as global middlewares that surgically change the data React sees.
Using custom JSX functions can be beneficial ✨

Add new capabilities to the JSX syntax.
Avoid repetitive / complex code.
Improve developer experience.

But use it safely! 🦺

They deviate from natural understanding, might look like magic!
May add runtime oveheads.

Thank you! 💙

Don't hesitate to reach out or ask questions,
I'm eager to connect with you all!

Let's connect

Twitter: @blenderskool

GitHub: @blenderskool

Website: akashhamirwasia.com