fix(canvas): more typescript fixes

.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "dist/index.js": {
-    "bundled": 25725,
-    "minified": 12271,
-    "gzipped": 4374,
+    "bundled": 25479,
+    "minified": 12132,
+    "gzipped": 4371,
     "treeshaked": {
       "rollup": {
-        "code": 10038,
+        "code": 9895,
         "import_statements": 660
       },
       "webpack": {
-        "code": 11642
+        "code": 11489
       }
     }
   },
   "dist/index.cjs.js": {
-    "bundled": 28683,
-    "minified": 13899,
+    "bundled": 28437,
+    "minified": 13760,
     "gzipped": 4571
   }
 }

package.json

@@ -7,7 +7,7 @@
   "sideEffects": false,
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "rollup -c",
+    "build": "rollup -c && npm run typegen",
     "prepare": "npm run build",
     "eslint": "eslint ./src",
     "test": "echo \"Error: no test specified\" && exit 1",

src/canvas.tsx

@@ -124,19 +124,7 @@ export const Canvas = React.memo(
 
     // Public state
     const state = useRef({
-      ready: false,
-      subscribers: [],
-      manual: false,
-      active: true,
-      canvas: undefined,
-      gl: undefined,
-      camera: undefined,
-      scene: undefined,
-      size: undefined,
-      canvasRect: undefined,
-      frames: 0,
-      viewport: undefined,
-      captured: undefined,
+      ...defaultRef,
       subscribe: (fn, main) => {
         state.current.subscribers.push(fn)
         return () => (state.current.subscribers = state.current.subscribers.filter(s => s !== fn))
@@ -260,10 +248,10 @@ export const Canvas = React.memo(
     const intersect = useCallback((event, prepare = true) => {
       if (prepare) prepareRay(event)
       return defaultRaycaster.intersectObjects(state.current.scene.__interaction, true).filter(h => h.object.__handlers)
-    })
+    }, [])
 
     /**  Handles intersections by forwarding them to handlers */
-    const handleIntersects = useCallback((event, fn) => {
+    const handleIntersects = useCallback((event: React.PointerEvent<any>, fn) => {
       prepareRay(event)
       // If the interaction is captured, take the last known hit instead of raycasting again
       const hits =
@@ -280,6 +268,7 @@ export const Canvas = React.memo(
 
         for (let hit of hits) {
           let stopped = { current: false }
+
           fn({
             ...Object.assign({}, event),
             ...hit,
@@ -289,6 +278,7 @@ export const Canvas = React.memo(
             // Hijack stopPropagation, which just sets a flag
             stopPropagation: () => (stopped.current = true),
           })
+
           if (stopped.current === true) break
         }
       }
@@ -308,7 +298,7 @@ export const Canvas = React.memo(
     )
 
     const hovered = useRef({})
-    const handlePointerMove = useCallback(event => {
+    const handlePointerMove = useCallback((event: React.PointerEvent<any>) => {
       if (!state.current.ready) return
       const hits = handleIntersects(event, data => {
         const object = data.object
@@ -340,7 +330,7 @@ export const Canvas = React.memo(
       handlePointerCancel(event, hits)
     }, [])
 
-    const handlePointerCancel = useCallback((event, hits) => {
+    const handlePointerCancel = useCallback((event: React.PointerEvent<any>, hits?: []) => {
       if (!hits) hits = handleIntersects(event, () => null)
       Object.values(hovered.current).forEach(data => {
         if (!hits.length || !hits.find(i => i.object === data.object)) {

types/canvas.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import React from 'react';
+import * as React from 'react';
 export declare type CanvasContext = {
     canvas?: React.MutableRefObject<any>;
     subscribers: Array<Function>;
@@ -59,5 +59,25 @@ export declare type IntersectObject = Event & THREE.Intersection & {
         y: Function;
     };
 };
-export declare const stateContext: any;
-export declare const Canvas: any;
+export declare const stateContext: React.Context<{
+    ready: boolean;
+    subscribers: any[];
+    manual: boolean;
+    active: boolean;
+    canvas: any;
+    gl: any;
+    camera: any;
+    scene: any;
+    size: any;
+    canvasRect: any;
+    frames: number;
+    aspect: number;
+    viewport: any;
+    captured: any;
+    invalidateFrameloop: boolean;
+    subscribe: (fn: any, main: any) => () => void;
+    setManual: (takeOverRenderloop: any) => void;
+    setDefaultCamera: (cam: any) => void;
+    invalidate: () => void;
+}>;
+export declare const Canvas: React.MemoExoticComponent<({ children, gl, camera, orthographic, raycaster, style, pixelRatio, invalidateFrameloop, onCreated, ...rest }: CanvasProps) => JSX.Element>;

types/hooks.d.ts

@@ -1,7 +1,24 @@
 /// <reference types="react" />
 export declare function useRender(fn: Function, takeOverRenderloop: boolean): any;
 export declare function useThree(): {
-    [x: string]: any;
+    ready: boolean;
+    subscribers: any[];
+    manual: boolean;
+    active: boolean;
+    canvas: any;
+    gl: any;
+    camera: any;
+    scene: any;
+    size: any;
+    canvasRect: any;
+    frames: number;
+    aspect: number;
+    viewport: any;
+    captured: any;
+    invalidateFrameloop: boolean;
+    setManual: (takeOverRenderloop: any) => void;
+    setDefaultCamera: (cam: any) => void;
+    invalidate: () => void;
 };
 export declare function useUpdate(callback: Function, dependents: [], optionalRef: React.MutableRefObject<any>): React.MutableRefObject<any>;
 export declare function useResource(optionalRef: React.MutableRefObject<any>): React.MutableRefObject<any>;