Broken TypeScript typings.

[wujekbogdan]

When I import trucate-html using:

import * as truncate from "truncate-html";

Then I'm not able to call truncate("<p>my-html</p>") because TypeScript compiler complains that:

Cannot invoke an expression whose type lacks a call signature.

I'm also not able to call truncate.setup().

When I import trucate-html using:

import truncate from "truncate-html";

Then TypeScript compiler doesn't complain, but there are runtime errors after compilation because truncate is undefined when imported this way.

[Saiya]

This lib should be import via the second way. I run test this lib from scratch, just found that, you may need to update your tsconfig.json by adding "esModuleInterop": true to the compilerOptions.

check Typescript 2.7(just search esModuleInterop) for more details.

Here is the complete tsconfig.json I used to test for you to refer.

{
  "compilerOptions": {
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["es7"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": false,
    "allowSyntheticDefaultImports": true,
    "suppressImplicitAnyIndexErrors": true,
    "strictFunctionTypes": false,
    "esModuleInterop": true,
    "allowJs": true,
    "baseUrl": "."
  },
  "exclude": ["node_modules"]
}

[Saiya]

This lib exports both commonjs and es6 files, but commonjs file will be required by default , So you may need to add this option"esModuleInterop": true if your building tools don't support es6 module.

https://github.com/evecalm/truncate-html/blob/master/package.json#L5-L7

[wujekbogdan]

Setting esModuleInterop to true solves the problem, but it also breaks other modules' imports. For example: days. I used to import it like import * as dayjs from "dayjs";, now I have to import it like import dayjs from "dayjs";. It happens because when esModuleInterop is set to true then it enables allowSyntheticDefaultImports under the hood.

From docs:

Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.

[Saiya]

I'm a little confused, if set allowSyntheticDefaultImports to true, you will be able to keep using this style import * as dayjs from "dayjs"

check the code of this lib:

https://github.com/evecalm/truncate-html/blob/master/src/truncate.ts#L1

https://github.com/evecalm/truncate-html/blob/master/tsconfig.json#L2-L19

[Saiya]

close it, I assume you solved this problem.

Feel free to reopen it if you have any further questions.

[wujekbogdan]

@evecalm

I solved the problem differently. I use const truncate = require("truncate-html"); as a workaround to import the module because I don't want to change tsconfig settings. Such a change would affect all my existing codebase. The dayjs module is not the only one that would be affected. I gave it just an example.

[Saiya]

It should works in my way.

You may try it your self by following steps:

git clone https://github.com/evecalm/truncate-html.git
cd truncate-html
yarn add dayjs

then edit test/demo.ts by adding code:

import dayjs from 'dayjs'
console.log('test dayjs', dayjs.isDayjs())

run the code to test: yarn run dev