update to docusaurus 3

.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

website/docs/best-practices.mdx

@@ -2,8 +2,6 @@
 sidebar_position: 3
 ---
 
-import WithClickCountExample from '@site/src/examples/with-click-count';
-
 # Best Practices
 
 If you are reading this documentation, it is probably because JSX Middlewares are a new concept for you. There may be some pitfalls that you may not be aware of. This section will help you to avoid them, and use JSX Middlewares in the best way possible.

website/docusaurus.config.js

@@ -1,8 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const { themes } = require('prism-react-renderer');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -70,8 +69,8 @@ const config = {
       },
       footer: {},
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: themes.light,
+        darkTheme: themes.dark,
         magicComments: [
           {
             className: 'theme-code-block-highlighted-line',

website/package.json

@@ -15,21 +15,21 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.0",
-    "@docusaurus/preset-classic": "2.4.0",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.4.0",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
+    "@docusaurus/core": "3.1.0",
+    "@docusaurus/preset-classic": "3.1.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.1.0",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.1.0",
     "jsx-middlewares": "link:..",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.0",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "@docusaurus/module-type-aliases": "3.1.0",
+    "@tsconfig/docusaurus": "^2.0.2",
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [

website/src/examples/if-directive/index.tsx

@@ -0,0 +1,24 @@
+/** @jsxImportSource . */
+
+import { useState } from 'react';
+import BrowserWindow from '../../components/BrowserWindow';
+
+function App() {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setShow(!show)}>Toggle</button>
+
+      <div $if={show}>Show 'em</div>
+    </div>
+  );
+}
+
+export default function IfDirectiveExample() {
+  return (
+    <BrowserWindow>
+      <App />
+    </BrowserWindow>
+  );
+}

website/src/examples/if-directive/jsx-runtime.tsx

@@ -0,0 +1,16 @@
+import { createLocalJsxContext } from '../setup';
+
+const ctx = createLocalJsxContext();
+export const { jsx, jsxDEV, jsxs } = ctx;
+
+function ifDirectiveMiddleware(next, type, props, key) {
+  if ('$if' in props) {
+    if (!props.$if) return null;
+    const { $if, ...rest } = props;
+    props = rest;
+  }
+
+  return next(type, props, key);
+}
+
+ctx.addMiddlewares(ifDirectiveMiddleware);

website/src/examples/intro/index.tsx

@@ -0,0 +1,20 @@
+/** @jsxImportSource . */
+
+import BrowserWindow from '../../components/BrowserWindow';
+
+function App() {
+  return (
+    <div>
+      <h1>Hello World</h1>
+      <p>This is a paragraph</p>
+    </div>
+  );
+}
+
+export default function IndexExample() {
+  return (
+    <BrowserWindow>
+      <App />
+    </BrowserWindow>
+  );
+}

website/src/examples/intro.tsx → website/src/examples/intro/jsx-runtime.tsx

@@ -1,10 +1,7 @@
-/** @jsx jsx */
-
-import BrowserWindow from '../components/BrowserWindow';
-import { createLocalJsxContext } from './setup';
+import { createLocalJsxContext } from '../setup';
 
 const ctx = createLocalJsxContext();
-const jsx = ctx.jsxClassic;
+export const { jsx, jsxDEV, jsxs } = ctx;
 
 ctx.addMiddlewares(function emojiMiddleware(next, type, props, key) {
   // Modify the props to add an emoji to the text
@@ -19,20 +16,3 @@ ctx.addMiddlewares(function emojiMiddleware(next, type, props, key) {
   // If there is no next middleware, it will call the original JSX renderer
   return next(type, props, key);
 });
-
-function App() {
-  return (
-    <div>
-      <h1>Hello World</h1>
-      <p>This is a paragraph</p>
-    </div>
-  );
-}
-
-export default function IndexExample() {
-  return (
-    <BrowserWindow>
-      <App />
-    </BrowserWindow>
-  );
-}

website/src/examples/onwheel-active/index.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource . */
+
+import BrowserWindow from '../../components/BrowserWindow';
+
+function App() {
+  return (
+    <div style={{ height: 100, overflow: 'auto' }}>
+      <div style={{ height: 200 }} $onWheelActive={(ev) => ev.preventDefault()}>
+        Try to scroll with the mouse wheel. You can't!
+      </div>
+    </div>
+  );
+}
+
+export default function OnWheelActiveExample() {
+  return (
+    <BrowserWindow>
+      <App />
+    </BrowserWindow>
+  );
+}

website/src/examples/onwheel-active.tsx → website/src/examples/onwheel-active/jsx-runtime.tsx

@@ -1,12 +1,9 @@
-/** @jsx jsx */
-
-import { cloneElement, forwardRef, useCallback, useRef } from 'react';
+import React, { cloneElement, forwardRef, useCallback, useRef } from 'react';
 import { isElement } from 'react-is';
-import BrowserWindow from '../components/BrowserWindow';
-import { createLocalJsxContext } from './setup';
+import { createLocalJsxContext } from '../setup';
 
 const ctx = createLocalJsxContext();
-const jsx = ctx.jsxClassic;
+export const { jsx, jsxDEV, jsxs } = ctx;
 
 export const WithOnWheelActive = forwardRef<HTMLElement, any>(function _WithOnWheelActive({ callback, children }, ref) {
   const cleanup = useRef<() => void>(undefined);
@@ -52,21 +49,3 @@ function onWheelActiveDirective(next, type, { $onWheelActive, ...props }, key) {
 }
 
 ctx.addMiddlewares(onWheelActiveDirective);
-
-function App() {
-  return (
-    <div style={{ height: 100, overflow: 'auto' }}>
-      <div style={{ height: 200 }} $onWheelActive={(ev) => ev.preventDefault()}>
-        Try to scroll with the mouse wheel. You can't!
-      </div>
-    </div>
-  );
-}
-
-export default function OnWheelActiveExample() {
-  return (
-    <BrowserWindow>
-      <App />
-    </BrowserWindow>
-  );
-}

website/src/examples/ripple/index.tsx

@@ -1,21 +1,6 @@
-/** @jsx jsx */
+/** @jsxImportSource . */
 
 import BrowserWindow from '../../components/BrowserWindow';
-import { createLocalJsxContext } from '../setup';
-import { Ripple } from './ripple';
-
-const ctx = createLocalJsxContext();
-const jsx = ctx.jsxClassic;
-
-function rippleMiddleware(next, type, { $ripple, ...props }, key) {
-  if ($ripple || (type === 'button' && $ripple !== false)) {
-    return <Ripple>{next(type, props, key)}</Ripple>;
-  }
-
-  return next(type, props, key);
-}
-
-ctx.addMiddlewares(rippleMiddleware);
 
 function App() {
   return (

website/src/examples/ripple/jsx-runtime.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createLocalJsxContext } from '../setup';
+import { Ripple } from './ripple';
+
+const ctx = createLocalJsxContext();
+export const { jsx, jsxDEV, jsxs } = ctx;
+
+function rippleMiddleware(next, type, { $ripple, ...props }, key) {
+  if ($ripple || (type === 'button' && $ripple !== false)) {
+    return <Ripple>{next(type, props, key)}</Ripple>;
+  }
+
+  return next(type, props, key);
+}
+
+ctx.addMiddlewares(rippleMiddleware);

website/src/examples/tooltip/index.tsx

@@ -1,26 +1,6 @@
-/** @jsx jsx */
+/** @jsxImportSource . */
 
 import BrowserWindow from '../../components/BrowserWindow';
-import { createLocalJsxContext } from '../setup';
-import styles from './index.module.css';
-
-const ctx = createLocalJsxContext();
-const jsx = ctx.jsxClassic;
-
-function tooltipMiddleware(next, type, { $tooltip, ...props }, key) {
-  if ($tooltip) {
-    return (
-      <div className={styles.tooltipContainer}>
-        {<div className={styles.tooltip}>{$tooltip}</div>}
-        {next(type, props, key)}
-      </div>
-    );
-  }
-
-  return next(type, props, key);
-}
-
-ctx.addMiddlewares(tooltipMiddleware);
 
 function App() {
   return (

website/src/examples/tooltip/jsx-runtime.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createLocalJsxContext } from '../setup';
+import styles from './index.module.css';
+
+const ctx = createLocalJsxContext();
+export const { jsx, jsxDEV, jsxs } = ctx;
+
+function tooltipMiddleware(next, type, { $tooltip, ...props }, key) {
+  if ($tooltip) {
+    return (
+      <div className={styles.tooltipContainer}>
+        {<div className={styles.tooltip}>{$tooltip}</div>}
+        {next(type, props, key)}
+      </div>
+    );
+  }
+
+  return next(type, props, key);
+}
+
+ctx.addMiddlewares(tooltipMiddleware);

website/src/examples/with-click-count/index.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource . */
+
+import BrowserWindow from '../../components/BrowserWindow';
+
+function App() {
+  return <button $withClickCount>Click me</button>;
+}
+
+export default function WithClickCountExample() {
+  return (
+    <BrowserWindow>
+      <App />
+    </BrowserWindow>
+  );
+}