fix(react): Do not use new JSX transform https://github.com/pocka/figspec/issues/17

Changes

2 changed files (+29/-17)

• packages/react/src/index.tsx
  • @@ -6,6 +6,7 @@ FigspecFrameViewer as FigspecFrameViewerElement,
    FigspecFileViewer as FigspecFileViewerElement, } from "@figspec/components"; import { + createElement, forwardRef, useCallback, useEffect,
  • @@ -79,7 +80,9 @@ ...rest
    }, ref ) => { - const [refNode, setNode] = useState<FigspecFrameViewerElement | null>(null); + const [refNode, setNode] = useState< + (FigspecFrameViewerElement & HTMLElement) | null + >(null); useImperativeHandle<FigspecFrameViewerRef, FigspecFrameViewerRef>( ref,
  • @@ -87,14 +90,17 @@ () => refNode,
    [refNode] ); - const refCb = useCallback((node: FigspecFrameViewerElement | null) => { - if (node) { - setNode(node); + const refCb = useCallback( + (node: (FigspecFrameViewerElement & HTMLElement) | null) => { + if (node) { + setNode(node); - node.nodes = nodes; - node.renderedImage = renderedImage; - } - }, []); + node.nodes = nodes; + node.renderedImage = renderedImage; + } + }, + [] + ); useEffect(() => { if (!refNode) return;
  • @@ -185,7 +191,9 @@ ...rest
    }, ref ) => { - const [refNode, setNode] = useState<FigspecFileViewerElement | null>(null); + const [refNode, setNode] = useState< + (FigspecFileViewerElement & HTMLElement) | null + >(null); useImperativeHandle<FigspecFileViewerRef, FigspecFileViewerRef>( ref,
  • @@ -193,14 +201,17 @@ () => refNode,
    [refNode] ); - const refCb = useCallback((node: FigspecFileViewerElement | null) => { - if (node) { - setNode(node); + const refCb = useCallback( + (node: (FigspecFileViewerElement & HTMLElement) | null) => { + if (node) { + setNode(node); - node.documentNode = documentNode; - node.renderedImages = renderedImages; - } - }, []); + node.documentNode = documentNode; + node.renderedImages = renderedImages; + } + }, + [] + ); useEffect(() => { if (!refNode) return;
• packages/react/tsconfig.json
  • @@ -3,7 +3,8 @@ "compilerOptions": {
    "target": "ES2015", "module": "ESNext", "declaration": true, - "jsx": "react-jsx", + "jsx": "react", + "jsxFactory": "createElement", "lib": ["ESNext", "DOM"], "strict": true, "moduleResolution": "Node"