Making a Native ELM module with Moment.js

Question

I've been playing around with Elm for a couple of days and I wanted to make a port of Moment.JS, since I've seen a lack of libraries for what I wanted, and Moment just has everything that I need.

The thing is that I always face the same error. I have Moment.JS in my Native folder (it is named MomentJS.js) and another file called Moment.js (my wrapper). The problem is that when I call moment in Moment.js, I get an error saying that moment is not defined.

I've tried to import MomentJS.js in my elm file as well, before and/or after Moment.js. I've also tried to copy the whole JS into Moment.js and add my wrapper at the end of it. None of this things worked. You know what could I do? I've been looking for similar repos on the internet but I've never seen a module that has a wrapper and another JS file just for the native library.

This is my Moment.js code:

var _user$project$Native_Moment = (function() {

    var moment = require('moment');


    var format = function ( format, date ) {
        return moment().format();
    }

    return {
        format: format
    };

})();

and my Moment.elm code:

module Moment exposing (format)

{-| A module desc

@docs format

-}

import Native.MomentJS
import Native.Moment

{-| Call the default `Moment.js` format method
-}
format : String -> String -> String
format fm dt = Native.Moment.format fm dt

The last thing that I tried was to download Moment from npm, copy its folder from the node_modules folder to my Native folder and do moment = require('moment') but I got TypeError: fun(...) is not a function.

Any suggestions?

Answer 1

After some digging, what you are looking to do is completely possible yes! :) However, it won't be a simple copy paste. Look at the source you posted here, it will require mapping every function to the native elm functions, i'd recommend starting small with this conversion.

First, Get a simple hello world Native example work, see here

Secondly, add in some of the simpler functions from moment.js one by one, i'd recommend starting with moment\src\lib\format\format.js

Lastly, I know this isn't what you want to hear, but if you really want to write javascript in elm, maybe Elm isn't what you are looking for? I really can't imagine converting an entire library similar to Moment.js would be simpler than creating your own Elm library inspired by Moment.js

Either way, best of luck! Seems like a fun challenge either way :)

Answer 2

There are two supported ways for Elm and JavaScript to talk to each other: ports and flags. Both are asynchronous and will be awkward for your needs.

https://guide.elm-lang.org/interop/javascript.html

Should you write native code? Elm's creator says no.

So the best path forward is to use one of the existing time/date libraries or write what you need yourself.