Can't add ms as library

I've verified the script is hosted at that url. If I manually copy-paste the script as a preloaded function and instead of the module export do window.ms = function ... then everything works as expected.

Why doesn't the library get added as expected?

1 Like

Could this be the reason?

Ah yeah I guess so. The docs actually say

Retool recommends using libraries that follow UMD

Whereas that post says that UMD is required - so I guess the docs are wrong? Linked docs also don't seem to mention anything about now allowing require in imported libraries. :person_shrugging:

Not sure @paymahn :frowning: Sorry! we've gone the route of creating a custom component for our specific use-case with it. but quite a it more cumbersome

Hi @paymahn

Doesn't look like vercel offers their ms library as a UMD anywhere :disappointed:

However you could try this alternative since its overall pretty easy to somewhat replicate the functionality

Add these lines to your Preloaded JS in App settings:

var RGX = /^(-?(?:\d+)?\.?\d+) *(m(?:illiseconds?|s(?:ecs?)?))?(s(?:ec(?:onds?|s)?)?)?(m(?:in(?:utes?|s)?)?)?(h(?:ours?|rs?)?)?(d(?:ays?)?)?(w(?:eeks?|ks?)?)?(y(?:ears?|rs?)?)?$/,
	SEC = 1e3,
	MIN = SEC * 60,
	HOUR = MIN * 60,
	DAY = HOUR * 24,
	YEAR = DAY * 365.25;

function parse(val) {
	var num, arr = val.toLowerCase().match(RGX);
	if (arr != null && (num = parseFloat(arr[1]))) {
		if (arr[3] != null) return num * SEC;
		if (arr[4] != null) return num * MIN;
		if (arr[5] != null) return num * HOUR;
		if (arr[6] != null) return num * DAY;
		if (arr[7] != null) return num * DAY * 7;
		if (arr[8] != null) return num * YEAR;
		return num;
	}
}

function fmt(val, pfx, str, long) {
	var num = (val | 0) === val ? val : ~~(val + 0.5);
	return pfx + num + (long ? (' ' + str + (num != 1 ? 's' : '')) : str[0]);
}

function format(num, long) {
	var pfx = num < 0  ? '-' : '', abs = num < 0 ? -num : num;
	if (abs < SEC) return num + (long ? ' ms' : 'ms');
	if (abs < MIN) return fmt(abs / SEC, pfx, 'second', long);
	if (abs < HOUR) return fmt(abs / MIN, pfx, 'minute', long);
	if (abs < DAY) return fmt(abs / HOUR, pfx, 'hour', long);
	if (abs < YEAR) return fmt(abs / DAY, pfx, 'day', long);
	return fmt(abs / YEAR, pfx, 'year', long);
}

window.ms = {
  format,
  parse
}

Then you can use inside queries or expressions anywhere in your app.

Example JS Query:

const { parse, format } = ms;

// string => number
console.log(parse('2 days'));   //=> 172800000
console.log(parse('1d'));       //=> 86400000
console.log(parse('10h'));      //=> 36000000
console.log(parse('2.5 hrs'));  //=> 9000000
console.log(parse('2h'));       //=> 7200000
console.log(parse('1m'));       //=> 60000
console.log(parse('5s'));       //=> 5000
console.log(parse('1y'));       //=> 31557600000
console.log(parse('100'));      //=> 100
console.log(parse('-3 days'));  //=> -259200000
console.log(parse('-1h'));      //=> -3600000
console.log(parse('-200'));     //=> -200

// number => string
console.log(format(60000));             //=> '1m'
console.log(format(2 * 60000));         //=> '2m'
console.log(format(-3 * 60000));        //=> '-3m'
console.log(format(parse('10 hours'))); //=> '10h'

// number => string (long)
console.log(format(60000, true));             //=> '1 minute'
console.log(format(2 * 60000, true));         //=> '2 minutes'
console.log(format(-3 * 60000, true));        //=> '-3 minutes'
console.log(format(parse('10 hours'), true)); //=> '10 hours'

Which outputs this to the console: