feat(typegen): generate declaration files auto-magically

pmndrs · Apr 5, 2019 · 6773b52 · 6773b52
1 parent c1739a6
commit 6773b52
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "build": "rollup -c",
     "prepare": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "typecheck": "tsc --noEmit --jsx react src/*"
+    "typecheck": "tsc --noEmit --jsx react src/*",
+    "typegen": "tsc  --jsx react --emitDeclarationOnly -d --declarationDir types src/*"
   },
   "husky": {
     "hooks": {

diff --git a/src/canvas.tsx b/src/canvas.tsx
@@ -4,12 +4,44 @@ import { useRef, useEffect, useState, useCallback } from 'react'
 import ResizeObserver from 'resize-observer-polyfill'
 import { invalidate, applyProps, render, unmountComponentAtNode } from './reconciler'
 
-type Measure = [
+export type CanvasContext = {
+  canvas?: React.MutableRefObject<any>,
+  subscribers: Array<Function>,
+  frames: 0,
+  aspect: 0,
+  gl?: THREE.WebGLRenderer,
+  camera?: THREE.Camera,
+  scene?: THREE.Scene,
+  canvasRect?: DOMRectReadOnly,
+  viewport?: { width: number, height: number },
+  size?: { left: number, top: number, width: number, height: number },
+  ready: boolean,
+  manual: boolean,
+  active: boolean,
+  captured: boolean,
+  invalidateFrameloop: boolean,
+  subscribe?: (callback: Function, main: any) => () => any,
+  setManual: (takeOverRenderloop: boolean) => any,
+  setDefaultCamera: (camera: THREE.Camera) => any,
+  invalidate: () => any,
+}
+
+export type CanvasProps = {
+  children: React.ReactNode;
+  gl: THREE.WebGLRenderer;
+  camera?: THREE.Camera;
+  style?: React.CSSProperties;
+  pixelRatio?: number;
+  invalidateFrameloop?: boolean;
+  onCreated: Function;
+}
+
+export type Measure = [
   { ref: React.MutableRefObject<any> },
   { left: number, top: number, width: number, height: number }
 ]
 
-type IntersectObject = Event & THREE.Intersection & {
+export type IntersectObject = Event & THREE.Intersection & {
   ray: THREE.Raycaster;
   stopped: { current: boolean };
   uuid: string;
@@ -19,16 +51,6 @@ type IntersectObject = Event & THREE.Intersection & {
   };
 }
 
-type CanvasProps = {
-  children: React.ReactNode;
-  gl: THREE.WebGLRenderer;
-  camera?: THREE.Camera;
-  style?: React.CSSProperties;
-  pixelRatio?: number;
-  invalidateFrameloop?: boolean;
-  onCreated: Function;
-}
-
 const defaultRef = {
   ready: false,
   subscribers: [],

diff --git a/src/hooks.tsx b/src/hooks.tsx
@@ -1,13 +1,16 @@
 import { useRef, useContext, useEffect, useMemo, useState } from 'react'
 import { stateContext } from './canvas'
 
-export function useRender(fn, takeOverRenderloop) {
+export function useRender(fn: Function, takeOverRenderloop: boolean): any {
   const { subscribe, setManual } = useContext(stateContext)
+
   // This calls into the host to inform it whether the render-loop is manual or not
   useMemo(() => takeOverRenderloop && setManual(true), [takeOverRenderloop])
+
   useEffect(() => {
     // Subscribe to the render-loop
     const unsubscribe = subscribe(fn, takeOverRenderloop)
+
     return () => {
       // Call subscription off on unmount
       unsubscribe()
@@ -21,21 +24,29 @@ export function useThree() {
   return props
 }
 
-export function useUpdate(callback, dependents, optionalRef) {
+export function useUpdate(
+  callback: Function,
+  dependents: [],
+  optionalRef: React.MutableRefObject<any>
+): React.MutableRefObject<any> {
   const { invalidate } = useContext(stateContext)
-  let ref = useRef()
-  if (optionalRef) ref = optionalRef
+  const ref = optionalRef ? optionalRef : useRef()
+
   useEffect(() => {
     callback(ref.current)
     invalidate()
   }, dependents)
+
   return ref
 }
 
-export function useResource(optionalRef) {
-  let ref = useRef()
-  if (optionalRef) ref = optionalRef
+export function useResource(
+  optionalRef: React.MutableRefObject<any>
+): React.MutableRefObject<any> {
   const [resource, set] = useState()
+  const ref = optionalRef ? optionalRef : useRef()
+
   useEffect(() => void set(ref.current), [ref.current])
+
   return resource
 }
diff --git a/types/canvas.d.ts b/types/canvas.d.ts
@@ -0,0 +1,81 @@
+import * as THREE from 'three';
+import * as React from 'react';
+export declare type CanvasContext = {
+    canvas?: React.MutableRefObject<any>;
+    subscribers: Array<Function>;
+    frames: 0;
+    aspect: 0;
+    gl?: THREE.WebGLRenderer;
+    camera?: THREE.Camera;
+    scene?: THREE.Scene;
+    canvasRect?: DOMRectReadOnly;
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    size?: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    ready: boolean;
+    manual: boolean;
+    active: boolean;
+    captured: boolean;
+    invalidateFrameloop: boolean;
+    subscribe?: (callback: Function, main: any) => () => any;
+    setManual: (takeOverRenderloop: boolean) => any;
+    setDefaultCamera: (camera: THREE.Camera) => any;
+    invalidate: () => any;
+};
+export declare type CanvasProps = {
+    children: React.ReactNode;
+    gl: THREE.WebGLRenderer;
+    camera?: THREE.Camera;
+    style?: React.CSSProperties;
+    pixelRatio?: number;
+    invalidateFrameloop?: boolean;
+    onCreated: Function;
+};
+export declare type Measure = [{
+    ref: React.MutableRefObject<any>;
+}, {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}];
+export declare type IntersectObject = Event & THREE.Intersection & {
+    ray: THREE.Raycaster;
+    stopped: {
+        current: boolean;
+    };
+    uuid: string;
+    transform: {
+        x: Function;
+        y: Function;
+    };
+};
+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, style, pixelRatio, invalidateFrameloop, onCreated, ...rest }: CanvasProps) => JSX.Element>;
diff --git a/types/hooks.d.ts b/types/hooks.d.ts
@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare function useRender(fn: Function, takeOverRenderloop: boolean): any;
+export declare function useThree(): {
+    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>;
diff --git a/types/index.d.ts b/types/index.d.ts
diff --git a/types/reconciler.d.ts b/types/reconciler.d.ts
@@ -0,0 +1,8 @@
+export declare function addEffect(callback: any): void;
+export declare function invalidate(state: any, frames?: number): void;
+export declare const apply: (objects: any) => any;
+export declare function applyProps(instance: any, newProps: any, oldProps?: {}, interpolateArray?: boolean, container?: {
+    __interaction: any;
+}): void;
+export declare function render(element: any, container: any, state: any): any;
+export declare function unmountComponentAtNode(container: any): void;