Properly reference a (javascript) jquery plugin inside my typescript file

Question

I would like to use a jquery plugin inside a typescript page of my Aurelia SPA. This plugin is called morelines

Here is my current solution so far:

my typescript file: post.ts

import './jquery.morelines'
export class Post {
    attached() {
            $('.card__description--details').moreLines({
                linecount: 6,
                baseclass: 'b-description',
                basejsclass: 'js-description',
                classspecific: '_readmore',
                buttontxtmore: "",
                buttontxtless: "",
                animationspeed: 400
            });
    }
}

the plugin jquery.morelines.js

Code visible here on github

(function ( $ ) {
    $.fn.moreLines = function (options) {
      ...
    }
 }(jQuery));

my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "amd",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "baseUrl": "src"
  },
  "include": [
    "./src/**/*.ts",
    "./test/**/*.ts"
  ],
  "atom": {
    "rewriteTsconfig": false
  }
}

It works at runtime but I got errors when bundling ( au build)

How to get rid of these errors ? How to properly reference this javascript jquery plugin inside my typescript file ?

Have you read the docs on how to instgrate old libs? aurelia.io/docs/cli/cli-bundler/dependency-management#prepend — Arne Deruwe
– Arne Deruwe, Commented Oct 25, 2019 at 10:02

Bronzato · Accepted Answer · 2019-10-25 13:12:05Z

1

Ok I got it by simply adding a reference to my jquery plugin like below:

aurelia.json

"dependencies": [
    ...
    ...
    {
        "name": "jquery.morelines",
        "path": "../javascript",
        "main": "jquery.morelines",
        "deps": [
          "jquery"
        ]
    }
]

No need to add any import in my typescript page.

posts.ts

    ...
    (<any>$('.card__description--details')).moreLines({
      linecount: 6,
      baseclass: 'b-description',
      basejsclass: 'js-description',
      classspecific: '_readmore',
      buttontxtmore: "",
      buttontxtless: "",
      animationspeed: 400
    });

answered Oct 25, 2019 at 13:12

Bronzato

9,41630 gold badges128 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Properly reference a (javascript) jquery plugin inside my typescript file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related