# 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:** 1\
**Showing post:** 14

<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

---

_[View the full topic](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927)._