Elm-github-install and elm-test

Learn
1

Hi !

I’m an elm beginner, and I need to pull some data from sessionStorage to use this data in my http queries. As far as I understood, I need to go native to do it. Here is the current state of my beginner’s quest to get it working.

I found a package for doing it ( https://github.com/gdotdesign/elm-storage ), that also provides helpers for tests. Great !

Okay, let’s start: first, it is not managed by the package manager, because it embed native code. Okay, it is a choice as a community I can understand, but how do people make elm program using the sessionStorage ?
They seem to either embed it in their own programs directly ( copy/paste ?), or make use of third party packages not hosted by the main repository, and use, for example, https://github.com/gdotdesign/elm-github-install , aka elm-install to install those.

I run the elm-install, it works properly, so now, I can write my code. I write it, making usage of the library after a proper install, it compiles :slight_smile:

Now I’d like to check it in unit tests. I go to my tests, add a new one, run elm-test as usual, and well it does not find my third party dep.

Okay, so let’s try:

  • searching on the internet for elm-install and elm-test : nothing that really matches
  • adding it directly in my tests elm-package.json: does not work
  • try elm-install before from the tests directory: doesn’t work
  • try copying /elm-stufffrom root to tests: doesn’t work
  • try using elm-test --add-dependencies: doesn’t work
I cannot find module 'Storage.Spec.Session'.

Module 'AuthSpec' is trying to import it.

Potential problems could be:
  * Misspelled the module name
  * Need to add a source directory or new dependency to elm-package.json

I feel like I’ve used most of the solutions that jumps at me, and finding nothing related makes me think I do something wrong, what is it ? :slight_smile:

How do you handle testing third party modules ? Should I find another test runner ( I found a elm-install-test, but it’s a placeholder ) ? How do you deal with that yourself ?

2

The recommended way to do that is to use ports. Native should be avoided. It is an undocumented internal mechanism.

3

@pdamoc okay, thanks for this feedback.

I’m not against using ports at all. Though I did not find an existing library for reading from sessionStorage leveraging them.

Also, in order to update on my quest to retrieve values from sessionStorage: I’ve tried cloning elm-storage and its dependency elm-spec in a vendor directory, with internal directories (src, spec) added to src in elm-package.json.
It almost leads to something working, but it is failing at runtime because the native code does not have the proper names, when it should be looking for _gdotdesign$elm_storage$Native_Storage like in original lib , it looks at _my_github_organisation$my_projet_name$Native_Storage without finding it

So, as I have some deadlines and nobody will believe reading some values from sessionStorage can be tough, it is likely to end up with a copy/paste/rename rather than even a vendor/clone mechanism, and I’m despaired by this idea ( I was already not proud of using the Native one, nor the vendor/cloning one )

The alternative is implementing a sessionStorage reading library by myself, and using ports to make it work. I’ll give it a quick try now : honestly, I get why, but it is quite frustrating. Of course any tutorial is welcome at this point :wink:
I’m not even sure, should I be motivated some day, that I could even publish this ports based code as a library and get it published into elm packages ( see https://groups.google.com/forum/#!msg/elm-discuss/mbtR8Vu0VWo/IRh4vzUuBAAJ as I don’t know the difference between ports and ports modules).

4

This is the kind of troubles people get into for using these unofficial libraries.

Trust me, this is simpler than you think.

Read the JavaScript interop section of the guide.

Look at the ToDoMVC example. It shows how to interact with localStorage through ports.

sessionStorage is the same.

4 Likes
5

I extremely second pdamoc’s notion: that’s literally 10 lines of code to set up the ports and wire the JS… @temsa which guide are you following? I’ve never come across articles that promote Native code, but they seem to be out there…

1 Like
6

@mfeineis It’s been more a trial and error process.

I needed access to sessionStorage, I’m a beginner, used to node and frontend JS, so my first reflex is checking for a well tested package to do it, first checking official packages, then github and other hosting platforms, and I found https://github.com/gdotdesign/elm-storage, which was convincing.

I knew the way is to use ports, but I was more comfortable at adding a dependency, rather than deal with it myself, plus I was happy having no real extra JS code to manage myself in an Elm project. Turns out it is not the best way.

7

Ah I see, don’t get me wrong, experimenting is fun but the Native is a kind of sensitive topic right now :sun_with_face: I didn’t mean to sound angry if that’s how it came across.

8

I was more comfortable at adding a dependency, rather than deal with it myself

Totally understand what you are going through. Browser storage is part of the Web API that unfortunately does not have an official elm package yet. Evan (the creator of Elm) has stated that the goal is to have complete coverage of the Web API once 0.19 is out.

In the meantime, it’s good to get comfortable using ports and writing a little extra code. It’ll help you understand how everything is wired up and give you the confidence that it is not broken. I’m on my phone, so don’t have the link available, but Murphy Randle’s Elm conf talk on ports (on YouTube) walks through an excellent approach to doing ports without having to add TOO much extra code.

So while I get the temptation to use a package with native code, you are most likely going to regret it in the long run. Save yourself hours of trouble in the future by taking the extra 30 minutes to do it right today.

Good luck!

1 Like
9

If another example with bi-directional interaction with a storage API helps, this sample app might be useful to you:

Like the ToDoMVC example, it interacts with localStorage, but the interface for sessionStorage is identical.

3 Likes