p5.EasyCam icon indicating copy to clipboard operation
p5.EasyCam copied to clipboard

Support module bundling, and support dynamic p5 runtime contexts

Open JackWH opened this issue 1 year ago • 1 comments

Further to the discussion in #26, this PR does two things:

  1. Wrap the EasyCam code in a UMD module. EasyCam can now be imported and used in modular projects. This allows tools like Webpack or Vite to bundle code which relies on it.
  2. Allows the p5 context to be set dynamically. The code previously expected p5 to be available globally, which won't always be the case if p5 is aliased or bundled.

Example code demonstrating these changes:

import * as mySketch from "p5";
import EasyCam from "p5.easycam";

// ...

mySketch.setup = () => {
  // Tell EasyCam to use the "mySketch" context:
  EasyCam.setContext(mySketch);

  // Create a camera
  cam = mySketch.createEasyCam();
};

// ...

The traditional <script src="..." /> approach still works as before. I've checked all the examples, and everything seems to be backwards-compatible.

The only bit I'm unsure about is whether the TypeScript definitions need changing, now the code's wrapped in a module. I understand the types are a work-in-progress so perhaps someone can advise on that.

JackWH avatar Apr 21 '23 19:04 JackWH