camera-controls does not export its types

[merwaaan]

Describe the bug

Unless I'm mistaken, it seems that the library only exports the CameraControls class from its index.ts file.

How to import all the other types?

For instance, I would like to configure the mouse buttons in Typescript, but the ACTION type is not exported so I cannot do things like:

import { ACTION } from "camera-controls";

To Reproduce

Write import { ACTION } from "camera-controls";

It does not work.

Code

No response

Live example

No response

Expected behavior

The various types should be exported.

Screenshots or Video

No response

Device

No response

OS

No response

Browser

No response

[yomotsu]

@merwaaan

Sorry for the delay. The camera-controls npm package comes bundled with several d.ts files. This might be a workaround for you. import { ACTION } from 'camera-controls/dist/types';

[AlexanderProd]

@yomotsu I'm getting a Module not found: Error: Can't resolve 'camera-controls/dist/types' error when doing it that way.

[yomotsu]

I think that should work though. ACTION is exported from https://cdn.jsdelivr.net/npm/[email protected]/dist/types.d.ts

[AlexanderProd]

Yeah I thought so too, but I didn't get it too work. VSCode recognized but I couldn't build the bundle. Using create-react-app.

[yomotsu]

Would you mind checking your build setting? (Without any reproducible code, it is a bit raw to digest. My answers will be as precise as you describe the problem, unfortunately.

[AlexanderProd]

Sure thing.

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

and this is the file where I used it.

import { CameraControls } from "@react-three/drei";
import { ACTION } from "camera-controls/dist/types";

export const toggleCameraControlsUserInput = (
  cameraControls: CameraControls,
  enable: boolean,
) => {
  if (!enable) {
    cameraControls.mouseButtons.left = ACTION.NONE;
    cameraControls.mouseButtons.middle = ACTION.NONE;
    cameraControls.mouseButtons.right = ACTION.NONE;
    cameraControls.mouseButtons.wheel = ACTION.NONE;
    cameraControls.touches.one = ACTION.NONE;
    cameraControls.touches.two = ACTION.NONE;
    cameraControls.touches.three = ACTION.NONE;
  } else {
    cameraControls.mouseButtons.left = ACTION.ROTATE;
    cameraControls.mouseButtons.middle = ACTION.DOLLY;
    cameraControls.mouseButtons.right = ACTION.TRUCK;
    cameraControls.mouseButtons.wheel = ACTION.DOLLY;
    cameraControls.touches.one = ACTION.TOUCH_ROTATE;
    cameraControls.touches.two = ACTION.TOUCH_DOLLY_TRUCK;
    cameraControls.touches.three = ACTION.TOUCH_TRUCK;
  }
};

[yomotsu]

camera-controls/dist/types.d.ts exports only the types. not a JS module. That is intended behavior.

use the static value called CameraControls.ACTION