Using lib-http-client with tsup starter

Help
1

Enonic version: 7.13.5

Good Morning,

can anyone tell me how to use the http-client in a tsup-starter project ?

Thomas

2

You should be able to use it “the regular way”.

And if you want TypeScript-support, you can add the @item-enonic-types/lib-http-client npm-package.

We also have TypeScript-types for these other XP-libraries:

  • CacheLibrary
  • CronLibrary
  • ExplorerLibrary
  • FreemarkerLibrary
  • GraphQLLibrary
  • GuillotineLibrary
  • MenuLibrary
  • MustacheLibrary
  • NotificationsLibrary
  • QRCodeLibrary
  • RecaptchaLibrary
  • RouterLibrary
  • SqlLibrary
  • StaticLibrary
  • TestingLibrary
  • TextEncodingLibrary
  • ThymeleafLibrary
  • XsltLibrary

Good luck!

– Tom Arild

1 Like
3

@tom Hi Tom, hope you are doing well !

What do you mean with “the regular way” ?
const httpClient = require("/lib/http-client"); or
import {request, HttpResponse} from "/lib/http-client"

Both result in a build error during :npmCheck

in case of require I get
error Require statement not part of import statement @typescript-eslint/no-var-requires

and in casse of import I do not get error-details, only warnings

4

I use the import syntax:

import {request, type HttpResponse} from "/lib/http-client"

You can try to run the npm-command manually to get better error messages. Try running this and share the error messages you get:

npm run check:types

Did you update your tsconfig.json file, to tell TypeScript where to find the types for XP-libs?

Here are some of the changes I’ve done to my tsconfig.json:

{
  "compilerOptions": {
    
    ...

    "rootDirs": [
      "./src/main/resources",
      "./.xp-codegen"
    ],

    "paths": {
      "/lib/*": ["./src/main/resources/lib/*", "./node_modules/@item-enonic-types/lib-*"],
      "/lib/xp/*": ["node_modules/@enonic-types/lib-*"],
      "/site/*": ["./src/main/resources/site/*" ,"./.xp-codegen/site/*"]
    },

– Tom Arild

PS: If you are not using xp-codegen-plugin with TypeScript, you are really missing out! It has become really good, and gives you a lot for free!

PPS: lib-time is also really good with TypeScript, for working with dates.

5

That is really strange:

src/main/resources/lib/browserSync.ts:7:1 - error TS2578: Unused '@ts-expect-error' directive.

7 // @ts-expect-error TS2307: Cannot find module '/lib/http-client' or its corresponding type declarations.
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

One of the files in the starter also used lib-http-client. I removed it, and then it worked.
When I use the same directive in my task-file - I get an build error as well :man_shrugging:

6 
// @ts-expect-error TS2307: Cannot find module '/lib/http-client' or its corresponding type declarations.
import { request as httpClientRequest } from '/lib/http-client';

The purpose of using @ts-expect-error as shown above is to suppress the error which will otherwise be given due to the lack of type definitions for ‘/lib/http-client’. If you started using @item-enonic-types/lib-http-client as suggested by Tom Arild, you will no longer get the error and then you’ll get the “unused ‘@ts-expect-error’ error”:

src/main/resources/lib/browserSync.ts:7:1 - error TS2578: Unused '@ts-expect-error' directive.

which means “I expected the specific error here but didn’t get it, so I’ll produce an error because there’s no error”.

In that case you can simply remove the line with @ts-expect-error above the line with import of lib/http-client.

7

@ase Thank you for explanation.
But why do I get an error when I use the same directive in my task-file. That is confusing me !

8

Yea, it can be a bit tricky some times. I’ve spent my share of hours going in circles.

Did you figure out your problems? If not, maybe you can share the code that is troubling?

9

Yes, for now everything ist working. I am using your TypeScript-Types and removed the dircetive from browserSync.ts

I guess the next hurdle is waiting: using a lib I have developed and currently hosting locally :angry:

10

There is actually a nice and quick solution for that.

Example:

Lets say you have an external library that has JavaScript file at /lib/foo/bar.js with the following contents:

exports.cleanString = function(params) {
   ...
  return str;
}

You can just create a TypeScript definition file in your project in the location where the library files ends up (in the finished jar-file).

So for my example above you would create a file /lib/foo/bar.d.ts in your project (the project that uses the lib) with the contents:

export declare function cleanString(params: CleanStringParams): string;

export type CleanStringParams = {
  str: string;
  doTrim: boolean;
}

Then from another TypeScript-file in my project I can do:

import { cleanString, type CleanStringParams } from "/lib/foo/bar";

I hope this was useful!

Good luck,
– Tom Arild

3 Likes