react plugin and macro that lets you write the React APIs as if they were all globals
This:
/*eslint no-undef: 0 */
import React from "react.macro"; //optional if not using babel macro
const ctx = createContext(5);
export default function Timer() {
const [state, setState] = useState(0);
const myRef = React.useRef(0);
return <Suspense>{state}</Suspense>;
}Translates to:
/*eslint no-undef: 0 react/jsx-no-undef: 0*/
import React from "react";
const ctx = React.createContext(5);
export default function Timer() {
const [state, setState] = React.useState(0);
const myRef = React.useRef(0);
return <React.Suspense>{state}</React.Suspense>;
}Turning off the ESLint no undef warning is helpful for this.
Creation videos:
- writing the plugin: https://www.youtube.com/edit?ar=1&o=U&video_id=gNTejc1OLvU
- publishing plugin and macro: https://www.youtube.com/watch?v=rZxchMxj6KE
Others:
Codesandbox Demo: https://codesandbox.io/s/n5xp37z894
ASTExplorer histories and testing
- v0.12: change signature; won't fail if already injected. ASTexplorer
- v0.09: switch to no invocation needed
- v0.08: added ConcurrentMode and StrictMode
- v0.07: https://astexplorer.net/#/gist/ebdc9ffceac03882d325e601c28d87a8/62d9235c51bd3586e35a8df8fa9f5f1f61eeb561
- v0.06: https://astexplorer.net/#/gist/ebdc9ffceac03882d325e601c28d87a8/795d0a75132ec44476b1f6cc2460f6147f43b65a