# Autocomplete and documentation for "imported" p5js

**URL:** <https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927>\
**Category:** Beginners\
**Created:** [August 25, 2021, 9:09pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927 "2021-08-25T21:09:01Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [August 25, 2021, 9:09pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/1 "2021-08-25T21:09:01Z")

</div>

I spent countless hours to get my editor (VSC) to autocomplete P5JS.  
This worked only after adding this line to the main script:

```auto
import "./p5"

```

Now everything is accessible only if prefixed by `p5`, and the editor autocompletion and online documentation finally work.

Also, I’ve read that this importing method is not recommended for some reason, but it’s the only way to get a reasonable coding environment, so I guess I should change it? But then, how do I get the documentation and autocompletion to work?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [August 25, 2021, 9:30pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/2 "2021-08-25T21:30:09Z")

</div>

Hi @atcold,

Welcome to the forum! 😉

Since you are on VSCode, have you seen this p5js extension?

> **[p5.vscode - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=samplavigne.p5-vscode)**
>
> Extension for Visual Studio Code - Create and manage p5.js projects.

It says:

> p5.vscode helps you create p5.js projects in Visual Studio Code. It also includes **autocompletion** , a simple tool to browse and install third-party p5 libraries, and the `Live Server` extension.

Also check this GitHub issue:

> <https://github.com/processing/p5.js/issues/1339>
>
> Hi ,
> 
> First of all I would like to say that P5 editor is great and easy to use. …The only one thing I am missing in P5 editor is intellisense. So, I try to run P5 project using Visual Studio Code. In VS Code for intellisense we need type script file i.e. tsd file for the js file for which we need intellisense. Since I couldn't found any P5 tsd files it is not helping much. Can you please look into this issue?

And also this:

> [@One-click p5js environment with intellisense](https://discourse.processing.org/t/one-click-p5js-environment-with-intellisense/13814):
>
> Hi all, I’m a teacher introducing p5 to beginning programmers. I didn’t want to walk students through a complicated editor setup, but I was finding myself a bit frustrated with the web editor and openprocessing editor because I’ve gotten very used to Intellisense (from Visual Studio Code) in my own p5 coding (I use p5 in typescript mode myself). If you don’t know what Intellisense is, it’s essentially a way to get documentation about functions and auto-completion automatically in an editor (I’m…

> **[@types/p5](https://www.npmjs.com/package/@types/p5)**
>
> TypeScript definitions for p5. Latest version: 1.7.4, last published: 21 days ago. Start using @types/p5 in your project by running \`npm i @types/p5\`. There are 36 other projects in the npm registry using @types/p5.

---

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [August 25, 2021, 9:52pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/3 "2021-08-25T21:52:04Z")

</div>

Thank you for your answer.

I did install the `p5.vscode` extension, and things are much better. _I.e._ documentation and autocompletion do work for P5JS.

In my current project I’m also using `https://unpkg.com/ml-matrix@6.8.0/matrix.umd.js`. In order to get Intellisense to work, I believe I need to use some sort of

```auto
/// <reference path="…"

```

syntax, where I’m passing a `TS` file. Now, I have no idea where to get that.  
I’m extremely new to JS and extremely lost.

Edit  
Okay, the file lives here `https://unpkg.com/ml-matrix@6.8.0/matrix.d.ts`. But nothing works. The frustration grows, LOL.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [August 25, 2021, 10:08pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/4 "2021-08-25T22:08:31Z")

</div>

> [@atcold](#):
>
> In my current project I’m also using `https://unpkg.com/ml-matrix@6.8.0/matrix.umd.js`

If you are using multiple libraries in your project, it’s strongly recommended to use a package manager like NPM (which is a standard in web development).

A quick example of npm (assuming you are on Linux):

```bash
$ mkdir p5js-test # creates a new project folder
$ cd p5js-test
$ npm init -y # creates a new project using npm, -y yes to all
$ npm install ml-matrix # install package
$ code . # open VSCode

```

With that I have instant autocompletion in VSCode because all the packages are located inside a `node_modules` folder.

---

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [August 25, 2021, 10:26pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/5 "2021-08-25T22:26:12Z")

</div>

Isn’t this used for server-side code?  
I’m really a newbie…

I’m putting together [this demo](https://editor.p5js.org/Atcold/sketches/4IOPDUBOG), which is using a numerical external library, which is not going to be installed on the client.  
I would like to be able to access to autocompletion and documentation within the editor (like I’m used to when I’m coding anything in Python).

Thank you again for helping out.

Edit  
I’ve downloaded `https://unpkg.com/ml-matrix@6.8.0/matrix.d.ts` in side the `libraries` folder and added the following line to the beginning of my script

```auto
const mlMatrix = require("./libraries/matrix");

```

Now VSC autocompletion and documentation work.  
I only need to comment out the line before saving, so it does not break the execution.

I’m back using the online interface (without autocompletion or documentation), at least I don’t need to fight VSC. The only thing that’s scary is that I cannot use Git in the online editor.

Edit 2  
I’ll try again tomorrow. Today I was too irrational to get it to work.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [August 26, 2021, 8:32am UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/6 "2021-08-26T08:32:59Z")

</div>

> [@atcold](#):
>
> Isn’t this used for server-side code?

Yes you’re mostly right. NPM installs the packages in a node\_modules folder and therefore not adapted to use within a `<script>` tag in an HTML page. You need to use a bundler (webpack, browserify, grunt…) that packs all the code into js, css and html files.

This guide explains it very well:

> **[npm for Beginners: A Guide for Front-end Developers](https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/)**
>
> If you're new to using npm to install JavaScript and other front-end packages, this npm tutorial for beginners should get you up and running.

But if it’s a small project, don’t bother using npm and webpack for example since it’s quite a setup.

---

<div class="post-metadata">

**Author:** ![Jonathan\_Sum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jonathan_sum/32/14303_2.png) [@Jonathan\_Sum](https://discourse.processing.org/u/Jonathan_Sum)\
**Post date:** [August 26, 2021, 1:10pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/7 "2021-08-26T13:10:22Z")

</div>

You can check out this Reactjs example

npm install is just a pip install. npm install it at the local folder in default.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/054e30731012f2f818e42d36671aa47534176b91.png)

[https://jonathansum.github.io/ml-matrix\_Reactjs\_Example/](https://jonathansum.github.io/ml-matrix_Reactjs_Example/)

Code: [GitHub - JonathanSum/ml-matrix\_Reactjs\_Example](https://github.com/JonathanSum/ml-matrix_Reactjs_Example)

Some of the code is from your example.

---

<div class="post-metadata">

**Author:** ![Jonathan\_Sum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jonathan_sum/32/14303_2.png) [@Jonathan\_Sum](https://discourse.processing.org/u/Jonathan_Sum)\
**Post date:** [August 26, 2021, 1:47pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/8 "2021-08-26T13:47:41Z")

</div>

```auto
import { Matrix } from 'ml-matrix';

let V = []
let U = []
let clicked = []
let e_values = [1, 1]
// 2 bases, 2 left-singular vectors, 2 e'evectors
let locked = [false, false, false, false, false, false]
let N = 16
let A = []
const bases = [0, 12]
const norm = 50
let s_values = [[norm, 0], [0, -norm]]
let svd

const red = '#fb8072'
const green = '#b3de69'
const orange = '#fdb462'
const blue = '#80b1d3'
const blue_orange = [blue, orange]

const draw = (ctx,) => {

    const w = ctx.width
    const h = ctx.height

    const cx = w / 2;
    const cy = h / 2;
    for (let n = 0; n < N; n++) {
        V[n] = [];
        V[n][0] = norm * Math.cos(n * 2 * Math.PI / N);
        V[n][1] = norm * Math.sin(n * 2 * Math.PI / N);
        U[n] = [...V[n]];
    }
    A[0] = [1, 0]
    A[1] = [0, 1]

    // compute_singular_vectors()

    ctx.beginPath()
    const color_matrix = Matrix.ones(6, 6);

    // vanilla javascript 
    console.log("Starting")
    for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
            // console.log(i + " " + j);
            // console.log(m1.data[i][j])
            color_matrix.data[i][j] = Math.floor(255 - 42.5 * i)
            ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
                Math.floor(255 - 42.5 * j) + ', 0)';
            ctx.fillRect(j * 25, i * 25, 25, 25);
        }
    }

    // ml-matrix javascript example

    ctx.moveTo(300, 300);
    ctx.font = "30px Arial";

    for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
            ctx.fillText(color_matrix.data[i][j], j * 200 + 200, i * 200 + 200);
        }
    }

}

```

> <https://github.com/JonathanSum/ml-matrix_Reactjs_Example/blob/master/src/component/p5.js>

80% done. The missing is the button setting.

---

<div class="post-metadata">

**Author:** ![Jonathan\_Sum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jonathan_sum/32/14303_2.png) [@Jonathan\_Sum](https://discourse.processing.org/u/Jonathan_Sum)\
**Post date:** [August 26, 2021, 3:37pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/9 "2021-08-26T15:37:43Z")

</div>

svd = new mlMatrix.SVD(A)

I don’t see the document allows us to use it in this way.

Do you know how to use it in this way npm that “npm library”?

---

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [August 26, 2021, 10:09pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/10 "2021-08-26T22:09:22Z")

</div>

I followed these instructions, but the autocompletion and documentation do not show up.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b9a63c198b12be0b8e63e423eaaca5ab329df1b3.png)  
[image|538x195](https://discourse.processing.org/uploads/short-url/5NG1FLgM6h8SeZcA5LuuIEUKOkt.png)  
[image|619x500](https://discourse.processing.org/uploads/short-url/tUIkKUBL6smIfcATHcmnAWaxI2K.png)

I get it to work only if I add `import * as mlMatrix from "ml-matrix"`.

[image|690x162](upload://db0gzczBerFrI4Fgsz7FbBXwGpM.png

Of course, if I try to save with line 1 uncommented, then it does not run.

[image|690x286](upload://yVVvFgz34iWX5bgEVKgiyJPNJ4c.png  
_Alt-text: script.js:1 Uncaught SyntaxError: Cannot use import statement outside a module._

So, it seems like I need to keep toggling back and forth line 1. This seems a little crazy.  
Am I doing anything wrong? Shall I post this question on, say, StackOverflow, since it’s not Processing related?

P.S. Only one image is allowed for new users… If a moderator can add a `!` in front we can all see the pictures. Also, up to two links. Jeez… Plz, add two missing `)`…

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [August 27, 2021, 8:13am UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/11 "2021-08-27T08:13:01Z")

</div>

> [@atcold](#):
>
> I get it to work only if I add `import * as mlMatrix from "ml-matrix"` .

Check this thread:

> <https://stackoverflow.com/questions/47607295/how-do-i-make-intellisense-in-vscode-show-completion-from-other-files>

Most of the time, when you use npm packages they come with TypeScript types definitions and therefore you get auto completion and other neat features.

For the `ml-matrix` library, you need to download the `.d.ts` declaration file and put the path to it at the top of your source file:

```auto
///<reference path=" put the filename with path here "/>

```

---

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [September 1, 2021, 8:52pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/12 "2021-09-01T20:52:08Z")

</div>

I did that, but then it works only if I don’t prepend `mlMatrix.` to all instructions.  
I think it’s a lost cause.

When importing via `<script src>` the package add itself under the name `mlMatrix`, but the IDE has no clue about this.  
Adding `import * as mlMatrix from "ml-matrix"` makes it work, but breaks the code, if not commented out.

I’ll create an issue on Stack Overflow, since this is not related to Processing.  
Thank you again for your time.  
I’ll post here the solution if there is any.

---

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [September 2, 2021, 5:00am UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/13 "2021-09-02T05:00:03Z")

</div>

I’ve created [this issue](https://stackoverflow.com/questions/69020620/autocompletion-for-vscode-for-a-module-imported-via-script-src) on StackOverflow. Let’s see if there’s a solution.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 4, 2021, 9:33pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/14 "2021-09-04T21:33:09Z")

</div>

> [@atcold](#):
>
> I get it to work only if I add `import * as mlMatrix from "ml-matrix"` .

> [@atcold](#):
>
> So, it seems like I need to keep toggling back and forth line 1. This seems a little crazy.

When we use `import` in JS 2 things happen:

1. The file becomes a JS module and it needs a `<script type=module>` to load inside the HTML.
2. JS checks the `import` line if a file w/ that exactly path & name exists so it can load it as a module.

As we can note the file “ml-matrix” doesn’t exist.  
Instead there are “matrix.js” & “matrix.umd.js”.  
However neither is a JS module but just vanilla JS code.

The library’s types is called “matrix.d.ts”.  
But to make things worse “matrix.umd.js” is exposed as namespace mlMatrix, while “matrix.d.ts” exposes its main class as Matrix.

It doesn’t seem very feasible to have at the same time types when coding & auto deployment w/o the trouble of manually commenting & uncommenting the line w/ `import`.  
Unless you code some script which automatically do that toggling magic for you.

Anyways, I’ve found a workaround for it.  
However you’re gonna need to switch to TypeScript in order to pull that out.

TypeScript automatically skips any `import` statements when transpiling our code to JavaScript as long as we just use those imports as datatypes and never as the actual thing.

The main workaround are these few lines below:

```auto
import * as p5 from "p5";
import {} from "p5/global";

import * as mlmtx from "ml-matrix";

declare var mlMatrix: typeof mlmtx;

```

After those lines we can freely use mlMatrix as a namespace for the whole “ML-Matrix” library.

And none of those lines will show up at the transpiled JS file!

Check the simple example online at this link:  
[GoToLoop.GitHub.io/ML-Matrix-P5JS-Template](http://GoToLoop.GitHub.io/ML-Matrix-P5JS-Template)

And visit the repo to download the whole code release:

> **[Releases · GoToLoop/ML-Matrix-P5JS-Template](https://github.com/GoToLoop/ML-Matrix-P5JS-Template/releases)**
>
> Sorta template to have types for browser-loaded libs. - GoToLoop/ML-Matrix-P5JS-Template

---

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [September 14, 2021, 7:47pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/15 "2021-09-14T19:47:20Z")

</div>

_Breaking links because new users cannot post links… Moderator, plz, edit my posts (this and my previous one)._

Hi @GoToLoo, thank you very much for your extensive reply. Let me see if I understand what you’re saying (I think I am still missing a few bits of info).

> [@GoToLoop](#):
>
> When we use `import` in JS 2 things happen:
> 
> 1. The file becomes a JS module and it needs a `<script type=module>` to load inside the HTML.
> 2. JS checks the `import` line if a file w/ that exactly path & name exists so it can load it as a module.
> 
> As we can note the file “ml-matrix” doesn’t exist.

Still

> [@atcold](#):
>
> I get it to work only if I add `import * as mlMatrix from "ml-matrix"` .

So, how is that `ml-matrix` does not exist, yet it fixes autocompletion and documentation?

> [@GoToLoop](#):
>
> Instead there are “matrix.js” & “matrix.umd.js”.  
> However neither is a JS module but just vanilla JS code.
> 
> The library’s types is called “matrix.d.ts”.

So, there are three major files (how do we know this? I see _many_ files in [this repo](https://github.com/mljs/matrix/)).

1. [`matrix.js`](https://github.com/mljs/matrix/blob/c10ea73a917ac1a93df1abff0cb99422f5c94485/src/matrix.js) defines the library functions;
2. [`matrix.umd.js`](https://github.com/mljs/matrix/blob/455569de23e2395c0b89d71daa8ab97e45aa5ac0/rollup.config.js#L19) contains the automatically generated _Universal Module Definition_ (whatever that means);
3. [`matrix.d.ts`](https://github.com/mljs/matrix/blob/c10ea73a917ac1a93df1abff0cb99422f5c94485/matrix.d.ts) seems to contain the documentation.

> [@GoToLoop](#):
>
> But to make things worse “matrix.umd.js” is exposed as namespace mlMatrix, while “matrix.d.ts” exposes its main class as Matrix.

How do we learn this? I tried reading that file, but it’s machine generated.

> [@GoToLoop](#):
>
> However you’re gonna need to switch to TypeScript in order to pull that out.

This implies that I will have to…?

> [@GoToLoop](#):
>
> TypeScript automatically skips any `import` statements when transpiling our code to JavaScript as long as we just use those imports as datatypes and never as the actual thing.
> 
> The main workaround are these few lines below:
> 
> ```auto
> import * as p5 from "p5";
> import {} from "p5/global";
> 
> import * as mlmtx from "ml-matrix";
> 
> declare var mlMatrix: typeof mlmtx;
> 
> ```
> 
> After those lines we can freely use mlMatrix as a namespace for the whole “ML-Matrix” library.
> 
> And none of those lines will show up at the transpiled JS file!

I’m not entirely sure what using TypeScript implies.  
But I understand that it’s a workaround to get the IDE to read the documentation.

> [@GoToLoop](#):
>
> And visit the repo to download the whole code release:
> 
> [Releases · GoToLoop/ML-Matrix-P5JS-Template · GitHub](http://GitHub.com/GoToLoop/ML-Matrix-P5JS-Template/releases)

So, if I understand correctly, you created the file `sketch.ts`, which gets transpiled into `sketch.js`.  
The latter is using P5JS as a module, and uses `globalThis.setup` and `globalThis.draw`.  
Why not simply using P5JS as a module to begin with? Why is this transpilation necessary?  
How is everyone else coding anything in JavaScript? It seems like rather hacky.

Finally, this is your `script.ts`

```js
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://cdn.JsDelivr.net/npm/ml-matrix></script>
<script type=module src=sketch.js></script>

```

I don’t see `<HTML>`, `<HEAD>`, nor `<BODY>`. How is this a legal page?  
Also, you include `ml-matrix` and not `matrix.umd.js` or `matrix.d.ts`. How is this working?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 15, 2021, 3:18pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/16 "2021-09-15T15:18:42Z")

</div>

> [@atcold](#):
>
> The latter is using P5JS as a module,

> [@atcold](#):
>
> Why not simply using P5JS as a module to begin with?

File “p5.js” (and “matrix.umd.js” as well) isn’t a built-in JS module:  
[ExploringJS.com/es6/ch\_modules.html](http://ExploringJS.com/es6/ch_modules.html)

([16. Modules](https://exploringjs.com/es6/ch_modules.html#sec_overview-modules))

> JavaScript has had modules for a long time. However, they were implemented via libraries, not built into the language. ES6 is the first time that JavaScript has built-in modules.

> [@atcold](#):
>
> , and uses `globalThis.setup` and `globalThis.draw` .

That’s a workaround to place both **setup()** & **draw()** callbacks in the global context so the library “p5.js” can find & invoke them.

The reason why something like `function setup() {}` won’t work is b/c file “sketch.js” is a JS module.

JS modules got their own global context separated from the browser’s global context!

> [@atcold](#):
>
> I don’t see `<HTML>` , `<HEAD>` , nor `<BODY>` . How is this a legal page?

Formally that’s an illegal HTML file. However browsers have always been very lenient about rules.

But if you care to inspect the generated page of that “Index.html” file you’ll find those missing elements are automatically inserted.

The reason I code such minimum runnable HTML files is for easier reading w/o unnecessary distractions of having so many `<tags>` all over the place.

Obviously when the time comes to deploy any project for the final users you’d want a legal HTML file.

> [@atcold](#):
>
> Also, you include `ml-matrix` and not `matrix.umd.js` or `matrix.d.ts` . How is this working?

[https://cdn.JsDelivr.net/npm/ml-matrix](https://cdn.JsDelivr.net/npm/ml-matrix) is a CDN service link:

> **[Top 4 CDN services for hosting open source libraries](https://opensource.com/article/17/4/top-cdn-services)**
>
> Get an introduction to four popular content delivery networks for open source libraries to accelerate your website's images, CSS files, JS files, and other static content.

“ml-matrix” isn’t the name of the file which is actually loaded!

In order to know which file is actually grabbed we have to inspect its “package.json”, given it’s originally hosted as a [NodeJS](https://www.npmjs.com/) library:  
[cdn.JsDelivr.net/npm/ml-matrix/package.json](http://cdn.JsDelivr.net/npm/ml-matrix/package.json)

By default the entry “main” determines the downloadable file:

```auto
"main": "matrix.js",

```

However that particular “package.json” file also contains these 2 additional entries:

```auto
  "jsdelivr": "matrix.umd.js",
  "unpkg": "matrix.umd.js",

```

So JsDelivr CDN ends up getting file “matrix.umd.js” when we go to:  
[https://cdn.JsDelivr.net/npm/ml-matrix](https://cdn.JsDelivr.net/npm/ml-matrix)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 15, 2021, 8:46pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/17 "2021-09-15T20:46:42Z")

</div>

> [@atcold](#):
>
> So, how is that `ml-matrix` does not exist, yet it fixes autocompletion and documentation?

- Auto-completion & type inference are IDE features.
- A smart IDE can infer that “matrix.d.ts” is the TS definition file for the folder named “ml-matrix”.
- However, “ml-matrix” is just that, a folder name, not an actual file to be imported.
- When that JS file is actually run by a browser that `import` statement fails!

> [@atcold](#):
>
> So, there are three major files (how do we know this?

By looking at its “package.json” file:  
[cdn.JsDelivr.net/npm/ml-matrix/package.json](http://cdn.JsDelivr.net/npm/ml-matrix/package.json)

```auto
{
  "name": "ml-matrix",
  "version": "6.8.0",
  "description": "Matrix manipulation and computation library",
  "main": "matrix.js",
  "module": "src/index.js",
  "jsdelivr": "matrix.umd.js",
  "unpkg": "matrix.umd.js",
  "types": "matrix.d.ts",
  "sideEffects": false,
  "files": [
    "matrix.d.ts",
    "matrix.js",
    "matrix.umd.js",
    "src"
  ],

```

1. “matrix.umd.js” is the library’s browser version:

> **[Asynchronous module definition](https://en.wikipedia.org/wiki/Asynchronous_module_definition)**
>
> Asynchronous module definition (AMD) is a specification for the programming language JavaScript. It defines an application programming interface (API) that defines code modules and their dependencies, and loads them asynchronously if desired. Implementations of AMD provide the following benefits:
> In addition to loading multiple JavaScript files at runtime, AMD implementations allow developers to encapsulate code in smaller, more logically-organized files, in a way similar to other programming la...

1. “matrix.js” is the NodeJS module version:

> **[CommonJS](https://en.wikipedia.org/wiki/CommonJS)**
>
> CommonJS is a project to standardize the module ecosystem for JavaScript outside of web browsers (e.g. on web servers or native desktop applications).
> CommonJS's specification of how modules should work is widely used today for server-side JavaScript with Node.js. It is also used for browser-side JavaScript, but that code must be packaged with a transpiler since browsers don't support CommonJS. The other major module specification in use is the ECMAScript (ES) modules specification (ES6 modules ...

1. “matrix.d.ts” is the TypeScript definition file for “matrix.js”:

> **[TypeScript | Declaration files](https://en.wikipedia.org/wiki/TypeScript#Declaration_files)**
>
> When a TypeScript script gets compiled there is an option to generate a declaration file (with the extension .d.ts) that functions as an interface to the components in the compiled JavaScript. In the process the compiler strips away all function and method bodies and preserves only the signatures of the types that are exported. The resulting declaration file can then be used to describe the exported virtual TypeScript types of a JavaScript library or module when a third-party developer consumes i...

> [@atcold](#):
>
> I tried reading that file, but it’s machine generated.

“matrix.d.ts” isn’t a runnable file but merely describes the type definitions for a JS file.

> [@atcold](#):
>
> This implies that I will have to…?

> [@atcold](#):
>
> I’m not entirely sure what using TypeScript implies.

TypeScript is a JS superset language which has to be transpiled to JS in order to run:

> **[JavaScript With Syntax For Types.](https://www.typescriptlang.org)**
>
> TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

As you’ve already noticed, if you keep using JS for your current project, you’ll have to comment out back & forth the `import` statement so the code is valid to run in a browser.

On the other hand we need a “tsconfig.json” for calling “tsc” to compile the TS files to JS:

- [TypeScriptLang.org/tsconfig](http://TypeScriptLang.org/tsconfig)

> <https://github.com/GoToLoop/ML-Matrix-P5JS-Template/blob/main/tsconfig.json>

In my Atom IDE I have an addon which auto-compiles when I save a TS file.

But I bet Visual Studio should have some addon for that as well.

Although TS has its fill of advanced stuff, coding in it basically involves adding a colon `:` followed by a datatype when the IDE can’t auto-infer it:

> <https://github.com/GoToLoop/ML-Matrix-P5JS-Template/blob/v1.0.4/sketch.ts#L41-L42>

Above parameter _matrix_ was declared as datatype mlmtx.Matrix.  
Alternatively we can just say its datatype is `any` if we’re feeling lazy:  
`function displayMatrix(matrix: any) {`

We can test TypeScript on this link below:

- [TypeScriptLang.org/play](http://TypeScriptLang.org/play)

---

<div class="post-metadata">

**Author:** ![atcold](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atcold/32/14295_2.png) [@atcold](https://discourse.processing.org/u/atcold)\
**Post date:** [September 20, 2021, 11:57pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/18 "2021-09-20T23:57:11Z")

</div>

Thank you, @GoToLoop.  
I’m in disbelief developing in JS is so painful.