Publish types - Githubissues

Trias commented 4 years ago

Thanks for rewriting d3-dag in typescript! I'm starting to use your lib & it looks very promising!

It would be helpful to publish types, so users of the lib can get ide support.

Here is a guide: https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

Thank you :)

erikbrinkman commented 4 years ago

This is my first typescript library, and the interoperability between all the different javascript flavors is not super obvious to me, but if you're consuming typescript, I intended you to use the modularized format, e.g. instead of import { dagConnect } from "d3-dag" I intended you to use import { connect } from "d3-dag/src/dag/connect".

I tested this (now), and it seems to mostly work, however, I had to patch in types for two external libraries, and it's not clear exactly how to pass those shims along. They're currently not even packaged, so that's clearly an issue, but I'm not actually sure of the best way to actually include them is. e.g. if you can point to more specific information, that'd be very helpful!

Trias commented 4 years ago

Well, I'm not an expert myself. I hope you would ;). I guess we are all learners.

First thing I learned: i'm apparently using your library the wrong (or old way). Basically it looked like this: import * as d3core from "d3"; import * as d3dag from "d3-dag"; const d3 = Object.assign({}, d3core, d3dag);

which is based on the examples. I realize, after looking at the source that you can import functions from d3-dag directly.

still, it gives me an error in vscode as it can't find the right types:

I tested @jordyLangen PR by manually compiling and copying. I had to add "types": "./typings/index.d.ts" to get it working. Still it does not seem complete, as it only exports typings for the main module:

It does work when you import the src directory as you described but i guess thats uncommon

what did work as I expected was using https://www.npmjs.com/package/npm-dts it generates an index.d.ts with all types and start-import and deep import worked as expected. I added the index.d.ts: index.d.ts.zip

I honestly don't know what the best way is. they all seem in some way cumbersome.

Xylez01 commented 4 years ago

Well, I'm not an expert myself. I hope you would ;). I guess we are all learners.

I've never published a package to npm before, so sadly not hehe. I did something similar to you, I checked out the source code locally and generated the typings.

From what I understood, having a types or typings dir in the root directory of your npm module should do the trick.

"types": "./typings/index.d.ts"

You added this locally in your project, referencing the generated index.d.ts?

Trias commented 4 years ago

You added this locally in your project, referencing the generated index.d.ts?

no i added it to the package.json of d3-dag

I found the following tutorial which i think looks good: https://hackernoon.com/building-and-publishing-a-module-with-typescript-and-rollup-js-faa778c85396

Some things that I found out:

a lib should include a "main" entry point (for common.js aka "require()") and a "module" (for ecmascript-modules aka "import")
~~with a module entry point you cannot require source files directly, meaning you have to define the public interface (including types) in your index.js~~ only when you specify "exports", see https://nodejs.org/api/packages.html#packages_package_entry_points
if you want multiple entrypoints in your es-module, you can define it in the package.json like described here: https://stackoverflow.com/questions/63058081/package-json-with-multiple-entrypoints (with "exports")

It kind of works the way you describe with requiring "d3-dag/src/..." but that's because the typescript files are included in the package and typescript includes them in its build.

This may become a problem when the settings are different and forces every consumer to redeclare the typings you declared in /types. Also I'm currently getting 236 errors when using a "vanilla-ts"-project (tsc --init), because you need compatible "lib" and "target" settings in your tsconfig.json.

I'v added a pull request which publishes an esm build and types, so you import the from the file at "dist/.." and not "src/.." this way typescript only looks at the .d.ts for its typings and you don't need compatible settings and/or transitive typings.

hadrienk commented 4 years ago

Looking forward to this. I'm writing a React component that wraps your lib and it will allow to enforce correct types in props.

natrayanp commented 4 years ago

Previously D3-DAG worked well in angular but now the build fails with error. May you consider this in the fix so it works with Angular as well

Angular Package Format (https://goo.gl/jB3GVv).

Angular ERROR DETAILS BELOW:

ERROR in ./node_modules/d3-dag/src/index.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: /home/projects/ETL/newdrawnode/node_modules/d3-dag/src/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (/home/projects/ETL/newdrawnode/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:949:23) at plugin.done.then (/home/projects/ETL/newdrawnode/node_modules/@ngtools/webpack/src/loader.js:43:31) at process._tickCallback (internal/process/next_tick.js:68:7)

erikbrinkman commented 4 years ago

Just updated a version with hopefully better support for types. There were a number of people with different issues, and I want to make sure that those different issues are resolved before closing this out.

natrayanp commented 4 years ago

Just updated a version with hopefully better support for types. There were a number of people with different issues, and I want to make sure that those different issues are resolved before closing this out.

Thank you. Build successful with 0.4.6 version (in Angular 10).

cllu commented 3 years ago

Hi @erikbrinkman, great work on adding type support. I'm wondering if it's ok to export the types in src/dag/node, such as LayoutChildLink and DagNode. The DagNode would be essential to create custom data class in my use case. I have tested locally and add export * from "./dag/node"; to the src/index.ts file is enough to get all types exported in the build.