Using typescript for dash_clientside callback files

Dash Python
1

I am trying to hack my way around getting all of my clientside callback code and other clientside javascript into TypeScript. And then hooking up the TypeScript compiler to watch my source folder and the build and output javascript to the assets folder.

Has anyone tried this? Am I going down a dark endless road?

Trying to get it to compile with SystemJS and then add this to my app

Here is my tsconfig.json

{
 "compilerOptions": {
   "strict": true,
   "module": "System",
   "esModuleInterop": true,
   "sourceMap": true,
   "allowJs": true,
   "lib": ["es2016", "dom", "es2017"],
   "target": "es6",
   "outDir": "./assets/dist",
   "outFile": "./assets/dist/mex.js",
   "rootDir": "./clientside_src",
   "typeRoots": ["./node_modules/@types", "./clientside_src/types"]
 },
 "include": ["./clientside_src"],
 "exclude": ["node_modules", "assets/dist"]
}

app.py

app.config.external_scripts = [
    "https://unpkg.com/systemjs@6.11.0/dist/s.js",
    "https://unpkg.com/systemjs@6.11.0/dist/extras/named-register.min.js"
]

Any ideas?

1 Like
2

hi @dales
my colleague, @Philippe , doesn’t think we support System. He’ll try to reply with more technical reasoning a little later.

3

Hi @adamschroeder

I was kinda getting there with SystemJS, but getting stuck quite close to the end. Wasnt sure if the dash renderer was being affected or not.

The application we are developing has quite a lot of front end code besides callbacks. And even with just the callbacks it would be a lot easier to be able to specify the interface types that the callback receives.

I started creating a typescript type file for the dash_clientside object on the window just to help with autocomplete.
And having the ability to have Plotly autocomplete is also just magic.

So unless you say its a renderer issue…I’m gonna try to my best to get a working hack for this :slight_smile:

MicrosoftTeams-image (1)
MicrosoftTeams-image (1)1116×317 37.9 KB

4

I was thinking of the component typescript compiler that wouldn’t work with systemjs as target, a regular js file should be fine in the assets.

The typescript compiler alone may not be enough, you could use webpack and ts-loader to export the module to the window then you can use it in clientside callbacks.