How to use jspanel with typescript ionic 3.

[Flyer53]

I didn't do anything with typescript yet and didn't look into it either so far. So I can't help you with this topic, sorry.

[RobertoMalatesta]

@vangoo

Easiest way:

just do a npm i @types/jquery and then just put a:

jsPanel: any;

just after the interface JQueryStatic in the declaration. (index.d.ts of jQuery).

interface JQueryStatic<TElement extends Node = HTMLElement> {
    jsPanel :any;

TS won't whine anymore. Then you can do this in your ts file(s);

import * as $ from 'jquery';
let jsPanel = $.jsPanel

BTW: if you use es5 as a target like me this could help (tsconfig.json):

`

 "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
      "dom",
      "es2015",
      "es5",
      "es6"
    ],

You won't get autocompletion until some pious soul will write a ts definition file, but given the super documentation the author of this project wrote, you' won't miss it too much. :smile_cat:

--R

[Flyer53]

@RobertoMalatesta Thanks a lot for your help on this Rob 😄

[vangoo]

when i add css

import "jspanel3/source/jquery.jspanel.css";

i have this error. Undefined variable: "$mdl-grey100".

ionic webpack config:

const webpackConfig = require('@ionic/app-scripts/config/webpack.config');
const webpack = require('webpack');
var path = require('path');

webpackConfig.dev.plugins.push(
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
  })
);
webpackConfig.dev.module.loaders.push(
  {
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    loader: 'url-loader?limit=100000'
  },
  {
    test:  /\.(scss|sass)$/,
    include: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'node_modules/jspanel3/source/_themes_mdl_styles.sass'),
    ],
    loaders: [
      'css-loader',
      'style-loader',
      'sass-loader'
    ]
  },
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  }
);
webpackConfig.dev.resolve.extensions = [".tsx", ".ts", ".js", ".json", ".css", "png", "eot", "svg", "ttf", "woff", "woff2"];

[Flyer53]

@vangoo You seem to use an old jsPanel version. Current is 3.11.0 and there is no directory source since 3.7.0. The variable in question is in _themes_mdl_styles.sass which is only used to build jquery.jspanel.css which in turn is the only css file you should use.

[vangoo]

@Flyer53 Thank you for your help. I added following code in variables.scss ;

//Jspanel Variables
@import "../../node_modules/jspanel3/source/themes_mdl_styles";