No declaration files in NPM package

[Roman]

Describe the bug
No typing in the latest npm release. The error message is

Could not find a declaration file for module 'deepstream.io'.

To Reproduce
Steps to reproduce the behavior:

1. Initialize new package.json
2. Run npm install deepstream.io
3. import { Deepstream } from 'deepstream.io'

Expected behavior
Types should be included as this server is written in TypeScript

NPM package version
3.2.5

[jaime echegaray zipper]

HI, where did you saw that it should be installed as npm install deepstream.io ? Please let me know in order to change it. That's the old package name for server version 3, not written in TS.

The TS version starts with server v4. Now we are on v6. you should install as npm install @deepstream/server

[Roman]

Thank you! This solved the issue.

As a new user I was really confused when it came to installing client aswell. So there are 2 packages: @deepstream/client and deepstream.io-client-js. I assume that @deepstream/client and @deepstream/server are for the latest version (v6), right?

The documentation for this library is the best i've seen, but it is really not clear what packages to install or how to get types working for the browser version as well (because it needs to be imported on window).

[jaime echegaray zipper]

If you're working on a nodejs environment for developing your client (using webpack, babel, etc) check out https://deepstreamio.github.io/docs/tutorials/install/nodejs, there you will get type definitions.

and yes the packages named deepstream.io are the older version 3, that uses a different message protocol. Some people still use them, thats why they're still available. But only the latest packages named @deepstream are maintained.

Feel free to ask questions if you have any!

[Roman]

Yes I have a question but it is regarding the browser use of this library. I have encountered this issue with every other javascript web-socket library (which use ws). This is probably due to browserify and weird internal imports which allow usage in both node and the browser.

I am not using a bundler and instead use a "modern" way of developing my application. Its a generator of a @web/dev-server (link). In short, it allows to develop a web-component app without bundling, and production builds can be created with nicely configured roll-up. Very fast and supports hot reloading too.

I am unable to import DeepstreamClient from my typescript files and I had to resolve to jankiness. It was painful getting it to work, and its frustrating since there seems to be no other way. Plain imports do not work, this is an example of the error:

Uncaught SyntaxError: The requested module './../../node_modules/@deepstream/client/dist/src/deepstream.js' does not provide an export named 'DeepstreamClient'

because of

import { DeepstreamClient } from '@deepstream/client';
const client = new DeepstreamClient("<url>");

How I have temporarily solved the issue

• Add dist tag into index.html into head of the document

<script type="text/javascript" src="/node_modules/@deepstream/client/dist/bundle/ds.min.js"></script>

• Now import it within my application like this

import type { DeepstreamClient as DCType } from '@deepstream/client';
import type { JSONObject } from '@deepstream/client/dist/src/constants'; 
import type { Record } from '@deepstream/client/dist/src/record/record'; // not nice
const { DeepstreamClient } = (window as any).DeepstreamClient;

• And initialize

    this.client = new DeepstreamClient(uri) as DCType;

As you can see this is really subpar, especially that the final application will need to be embeddable as a single web-component. How would you go about developing a browser only application with typescript and imports? (I really dislike require syntax)

[jaime echegaray zipper]

Hi, great question. The client is bundled as a umd module, the modern-web docs present a couple options one can take to use them: https://modern-web.dev/guides/going-buildless/es-modules/#commonjs-modules

Regarding the type imports according to my experience the sole import of import type { DeepstreamClient as DCType } from '@deepstream/client'; and declaring the client as you did is enough to get all type definitions and cheks on the IDE and for the TS compiler

In summary, I think what your doing is the way to go, but I don't see the necessity of importing all the types as you did.

And thanks for the issue because I found a bug in the record type definitions that I hope to fix soon.

Let me know if it helps, thanks

[Roman]

I was able to finally resolve this issue by switching to vite. Will post here in case someone has the same issue.

How to get this working:

1.) Scaffold new project via npm create vite@latest my-vite-app
2.) Edit vite.config.ts to this:

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: "src/my-element.ts",
      formats: ["es"],
    },
    rollupOptions: {
      input: {
        main: "./index.html",
      },
    },
  },
  resolve: {
    alias: {
      "@deepstream/client": "@deepstream/client/dist/bundle/ds.min.js",
    },
  },
});

3.) Use deepstream normally

import { DeepstreamClient } from "@deepstream/client";
const client = new DeepstreamClient("localhost:6020");

[jaime echegaray zipper]

awesome thanks!