Import destroys build about p5-typescript-starter HOT 8 CLOSED

Since your using p5 in instanced mode. You can delete the global.d.ts file and then add this to the top of your sketch.ts file

import * as p5 from "p5";

from p5-typescript-starter.

This previous issue #4 may help.

Looks like they ended up using parcel to ommit the tsconfig file and package the application for the browser.

from p5-typescript-starter.

Thank you, that works for me :)
Now it compiles just fine, but it still doesn't work somehow. I changed my sketch.ts to this:

import Carcassonne from './game'

let game = new carcasonne()

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
  fill(255);
  rect(10, 10, 50, 50);
}

I abandoned the instance-mode because I thought it would fix my error before, but even in instance mode, the sketch doesn't work when I import my module. In both modes I just get a white screen in the browser :[ Can you tell my how I can make it work?

from p5-typescript-starter.

Are there any errors in the console? If no errors I think you can run.

new p5();

In the console. That will tell you if p5 opened in global mode (I believe if it sees draw() or setup() it runs in global mode)

from p5-typescript-starter.

There are no errors, and it also doesn't work with new p5() :/
It's pretty weird when I import my module setup() and draw() gray out and I get the hint " 'setup' is declared but its value is never read." Do you have any idea why that might happen ?

from p5-typescript-starter.

Working example here:
https://github.com/Gaweph/p5-typescript-starter/tree/import_example

You are probably going to need some sort of bundler if you are going to start importing modules. I used rollup in this small example, which appears to bundle everything into a single self loaded js file.

Heres an article if you want to go more in depth into this stuff:
https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364

Basically, I'm targetting ES2015 module type in tsconfig. I removed the global.d.ts file and also this needs to run in instanced mode (I kept getting white screen you mentioned otherwise) and then told index.html to point to bundle.js

Good luck sir.

from p5-typescript-starter.

It's a little annoying to put p5 in front of everything, especially when setting it as a class-variable so it turns to 'this.p5', but hey, it works now :) Thanks a lot for helping ! When I find a solution that works in global mode too I'll make a pull-request :)

from p5-typescript-starter.

I ended up passing a variable called 'p' of type p5 around in instanced mode. Which seems to work nicely.

Maybe this starter should be changed to use a bundler and instanced mode out of the box. I wanted it to reflect the documentation of the p5 main site. Which is in global mode with sketch file.

Good luck with your project.

from p5-typescript-starter.