How to import code packages in the JavaScript column

Ask for Help
1

The JavaScript column already includes lodash, which provides a value named _ with many useful utility functions. lodash is the most popular JavaScript library in the world, so we included it by default even if you do not use it.

@Jeff_Hager recently requested mathjs support in the JavaScript column. mathjs is another top JavaScript library, but including it by default means that every app that uses the JavaScript column would load this library as well, even though very few people need it.

Today I discovered how you can load any JavaScript package within the JavaScript column using skypack.dev and a newer JavaScript feature called async import.

Example: Load mathjs to evaluate a complex expression:

// Use await import to load the package:
const mathjs = await import("https://cdn.skypack.dev/mathjs");

// Use any function in the package:
return mathjs.evaluate("sin(45 deg) ^ 2");

Alternatively, you could use JavaScript object destructuring syntax to import evaluate more specifically:

const { evaluate } = await import("https://cdn.skypack.dev/mathjs");
return evaluate("sin(45 deg) ^ 2");

Instead of evaluating a constant string, pass a parameter to give your app calculation superpowers!

const { evaluate } = await import("https://cdn.skypack.dev/mathjs");
const result = evaluate(p1);
return typeof result === 'number' ? result : result.toString();

image
image1688×720 67.4 KB

You can search for thousands of popular packages on skypack and import them in this way.

Please share any interesting things you do with this power!

20 Likes
3

Suddenly I’m feeling like less than an expert 😵‍💫

Time to learn me some JavaScript!

10 Likes
4

https://getmimo.com/ is a good start. I used it after I had my daughter to learn the basics in between sleepless nights and diapers :woozy_face:

10 Likes
5

I could do this for hours on end… :rofl:

3 Likes
6

Ya great potential! :vulcan_salute:t3: :sunglasses:

7

Is there a place where we can see our code? Or … does the Glide team ever consider adding low code to the no-code platform for anyone who would like to tweak some code …?

1 Like
8

Thank you for finding this. I’ve been playing with this and its working great. One of my uses it to calculate the bearing between two sets of coordinates.

image

const math = await import("https://cdn.skypack.dev/mathjs");

var LatA = p1.split(',')[0]
var LonA = p1.split(',')[1]
var LatB = p2.split(',')[0]
var LonB = p2.split(',')[1]


var Bearing = math.round(math.mod(math.atan2(

math.sin((LonB-LonA)*math.pi/180)* math.cos(LatB*math.pi/180)
,
math.cos(LatA*math.pi/180)* math.sin(LatB*math.pi/180)-
math.sin(LatA*math.pi/180)* math.cos(LatB*math.pi/180)* math.cos((LonB-LonA)*math.pi/180)

)*180/math.pi+360,360),0)

if (Bearing <=11.25) {return Bearing + '° ⇑ N';}
if (Bearing <=33.75) {return Bearing + '° ⇗ NNE';}
if (Bearing <=56.25) {return Bearing + '° ⇗ NE';}
if (Bearing <=78.75) {return Bearing + '° ⇗ ENE';}
if (Bearing <=101.25) {return Bearing + '° ⇒ E';}
if (Bearing <=123.75) {return Bearing + '° ⇘ ESE';}
if (Bearing <=146.25) {return Bearing + '° ⇘ SE';}
if (Bearing <=168.75) {return Bearing + '° ⇘ SSE';}
if (Bearing <=191.25) {return Bearing + '° ⇓ S';}
if (Bearing <=213.75) {return Bearing + '° ⇙ SSW';}
if (Bearing <=236.25) {return Bearing + '° ⇙ SW';}
if (Bearing <=258.75) {return Bearing + '° ⇙ WSW';}
if (Bearing <=281.25) {return Bearing + '° ⇐ W';}
if (Bearing <=303.75) {return Bearing + '° ⇖ WNW';}
if (Bearing <=326.25) {return Bearing + '° ⇖ NW';}
if (Bearing <=348.75) {return Bearing + '° ⇖ NNW';}


return Bearing + '° ⇑ N';
4 Likes
9

Looks good! But aren’t all of those math functions built into the JavaScript Math class? You don’t need mathjs if so.

1 Like
10

If they are built in, I haven’t been able to figure it out. At most I could only do add/subtract/multiply/divide. Everything I searched for seemed to refer to math.js or math.xxx functions.

11

Check this out: Math - JavaScript | MDN

Math (e.g. Math.PI, Math.atan2) is built into JavaScript as a standard feature.

3 Likes
12

:man_facepalming: I just realized why I had trouble. The elusive case sensitivity of javascript. I knew about it, but it didn’t click. Big difference between math.xxx and Math.xxx. Probably saw a bunch of examples with the lowercase ‘m’ and it wasn’t working. I’m more accustomed to the more forgiving languages or IDE’s with autocomplete.

Sorry I rose a stink over this, but I’m glad you found a way to import.

2 Likes
13

Skypack is really powerful! On the topic of importing external code packages, I did make some charts in Replit using Chart.js and Amcharts’ packages.

Jesus tweeted about it:

13 Likes
14

You should write a how-to post!

9 Likes
15

I love the elintero’s tweet!!! It would be great make this charts in our apps! I tried pie version, but I would like use line and bar charts. I can’t wait to see it! :heart_eyes:

2 Likes
16

@ThinhDinh this is next level. A tutorial would be appreciated for sure!

2 Likes
17

so we can use Javascript in Glide ??
Can we load for example an audio player written in Javascript or is it for things like node.js?

18

That’s cool. I’m guessing the main advantage is not to rely on the Experimental code for simple code samples? Right now, I’m using the package manager in Replit.

19

For simple JS, I usually write it straight in the JavaScript code column. For advance use cases, I host it on GitHub.

Yes, we have been able to for a while.

Regarding your audio player, it depends on how you write it. What exactly do you want to achieve?

1 Like
20

For example if i want to add something like this https://codepen.io/mattgreenberg/pen/EKQoEy

can i without the html?