Create Typescript definition

BobBDE commented 3 years ago

Hello,

I'm currently working to add the typescript definition for the package :)

I created a PR in the DefinitelyTyped repository. To be merge, the PR need to be reviewed by another person.

Can someone do this review ? Here is the link to the PR : https://github.com/DefinitelyTyped/DefinitelyTyped/pull/51271/files

Also if someone want to be a co-owner of the PR (not sure how this really works) but it says that is a good idea because multiple person would be able to update the typing.

Thank you

raph74 commented 3 years ago

Hello

Would that make this library usable while working on Angular2? I currently have a project running on PrimeNg and would like to include Drawflow as this look like the best library to do flowgraph.

If yes, what steps do I need to take in order to include and use your typescript definition in my project?

Also think that it would be great if this was included inside the library by default.

Thanks in advance!

jerosoler commented 3 years ago

Hello @BobBDE

Good Job!!

I have played very little with typescript. I can't help on that. And I don't have much time. ( #9 )

You could create a fork with project typescript.

Let's see if an expert, I can review-it.

Hello @raph74

Even if it's not in typescript, it should work the same, since it's vanilla javascript.

Jero

BobBDE commented 3 years ago

@jerosoler We won't need to do a fork, once the pull request is accepted by DefinitelyTyped repository, an npm package @types/drawflow will automatically be created and developer will be able to import it to have type for drawflow :)

Another option will be recode the library in typescript (which i recommend because it improves stability). This should not be too long because you can do it incrementally, and the lib is quite small. And once built the library would be plain vanilla so it would still be usable in pure js project (I think). But I would understand if you prefer to keep it in pure js.

BobBDE commented 3 years ago

Hello @raph74 ,

Yes you can use this lib in angular project (i'm doing it). There are 2 options :

wait for the PR i'm talking about to be accepted, then the @types/drawflow package will be available and you should be able to use drawflow easily :)
if you want it now you can add the typings manually

Here are the steps :

at the root of your angular project (in the same level a tsconfig.json) create a file decs.d.ts with this content : https://gist.github.com/BobBDE/e90a792f0be7af96f53b488f92263b29
add "include": ["decs.d.ts"] to you config.json to make typescript aware of the new file
that's it, you'll be able to use the lib with imports like this : import Drawflow, {ConnectionEvent, ConnectionStartEvent} from 'drawflow';

raph74 commented 3 years ago

Thanks to both of you for quick answers and awesome plugins! I think I got the library installed and the definition ready to use in typescript. However I am having a javascript error "ERROR TypeError: this.container.classList is undefined".

Here is what my html looks like (easy...): <div #drawflowDiv> </div>

And here is how I retrieve the div inside typescript: @ViewChild('drawflowDiv') drawflowDiv: HTMLElement;

And finaly how I setup my my ngOnInit() to instantiate the Drawflow: ngOnInit(): void { const editor = new drawflow(this.drawflowDiv); editor.reroute = true; editor.drawflow = {"drawflow":{"Home":{.....}}}; editor.start(); }

I basically just copy/pasted the example given in doc folder.

If any of you have ideas on what am I doing wrong, I would be grateful!

BobBDE commented 3 years ago

Hi @raph74 I think you drawflow div is null on ngOnInit. Can you can on debug ? You might need to add the {static: true} to the view child.

Anyway, I don't think this is a place for this kind of talk. Stackoverflow would be more adapter, I could answer you there.

BobBDE commented 3 years ago

Hello @jerosoler ,

Good news ! 🍾🍾🍾

The typescript type package is available !! https://www.npmjs.com/package/@types/drawflow

So if someone wants to use drawflow in a TS project he just need to add the @types/drawflow package in his dev dependencies !

npm install -D @types/drawflow

Is it possible to add it to the documentation ? Just the npm install command and it should work directly (TS developpers knows how it works ;) )

I tested it and it works ! It really simplify the use of drawflow in TS project.

jerosoler commented 3 years ago

WoW!

Good Joob! @BobBDE

I will add it to the documentation. 🎉🎉

raph74 commented 3 years ago

@BobBDE Good job! I did include the definitions using the npm install and removed my manual installation.

Still got the same issue but I think you're right, I did create a stackoverflow so it's easier to discuss about it.

Post is here: https://stackoverflow.com/questions/66267792/drawflow-library-on-typescript

jerosoler commented 3 years ago

Added to doc: https://github.com/jerosoler/Drawflow/commit/da5ad145b182635a1c2b0c8f0b5033197791d0b0

BobBDE commented 3 years ago

Great, thanks !

GodSpeedXI commented 3 years ago

Is this should return array of numbers not void ? @BobBDE 2021-03-05_08-56-20

update: I have opened PR for this issue.

BobBDE commented 3 years ago

@GodSpeedXI Hi, thanks for the PR, I merged it ! :)

OrlandoYero commented 3 years ago

Hey guys, I need help, someone know, how to export the data?... I couldn't find the export function in the typescript definition. I only see the export event.

Note: The removeModule function does not exist.

itpropro commented 2 years ago

Hey @jerosoler, do you already know when you will rewrite it in TypeScript or add some tests with high coverage for stability?

jerosoler / Drawflow

Create Typescript definition #119