# LIFF ports for Elm

**URL:** <https://discourse.elm-lang.org/t/liff-ports-for-elm/5317>\
**Category:** Show and Tell\
**Created:** [March 15, 2020, 7:36am UTC](https://discourse.elm-lang.org/t/liff-ports-for-elm/5317 "2020-03-15T07:36:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![wingyplus](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wingyplus/32/3042_2.png) [@wingyplus](https://discourse.elm-lang.org/u/wingyplus)\
**Post date:** [March 15, 2020, 7:36am UTC](https://discourse.elm-lang.org/t/liff-ports-for-elm/5317/1 "2020-03-15T07:36:02Z")

</div>

Hi all,

I creating a ports library to make Elm running on [LINE Frontend Framework (or LIFF)](https://developers.line.biz/en/docs/liff/overview/) called [elm-liff](https://github.com/wingyplus/elm-liff). It’s far to be done but it work in normal use-case in common LIFF app. Because of it’s a ports module, that’s means it cannot publish to elm-packages anyway. I would love to see how do you manage this kind library in practice?

Another things that I realize that LIFF cannot open a new window without calling `liff.openWindow`. It’s make Elm debugger not working anyway. I not sure how to make it works. ☹

And I’m really welcome if someone can review my code and suggesting me because I just start learning an Elm around 1 month and I didn’t any experience with functional language so much. 🙂

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [March 16, 2020, 10:42am UTC](https://discourse.elm-lang.org/t/liff-ports-for-elm/5317/2 "2020-03-16T10:42:57Z")

</div>

Hi, you cannot publish a ports module, but there is something of a workaround for that.

Suppose your module looks like this:

```auto
port module MyAwesomeLib exposing (somePort)

port somePort : String -> Cmd msg

```

You can change it instead to be:

```auto
module MyAwesomeLib exposing (SomePort)

type alias SomePort = String -> Cmd msg

```

Now anyone wanting to use your package needs to define the port themselves in their application. They will also need the corresponding javascript side code. You can make this easier for them by:

1. Describe in the README exactly what ports they need to set up in the application, and what they need to be called. So tell them to put this in the application, along with the other instructions on how to use it:

```elm
    port somePort : MyAwesomeLib.SomePort

```

1. Publish your javascript code on npm, so that it can easily be added as a dependency in package.json. OR if its just a very short snippet, you could put the javascript code in the README. There will need to be a short snippet in the README anyway, to show how to wire the port up:

```auto
    app.ports.somePort.subscribe(request => {
        callYourJSLib(request);
    });

```

---

<div class="post-metadata">

**Author:** ![wingyplus](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wingyplus/32/3042_2.png) [@wingyplus](https://discourse.elm-lang.org/u/wingyplus)\
**Post date:** [March 16, 2020, 4:28pm UTC](https://discourse.elm-lang.org/t/liff-ports-for-elm/5317/3 "2020-03-16T16:28:31Z")

</div>

Thanks for your reply. I open a PR to confirm with you that I understand you right here [https://github.com/wingyplus/elm-liff/pull/4/files](https://github.com/wingyplus/elm-liff/pull/4/files). It seems the library needs to tell user what exact name of port to user to avoid unexpected working in the library. I start thinking that I can provide a shell script or node command line tools (can bundle with npm package) to initialize port to avoid this situation.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [March 16, 2020, 10:12pm UTC](https://discourse.elm-lang.org/t/liff-ports-for-elm/5317/4 "2020-03-16T22:12:33Z")

</div>

> [@wingyplus](#):
>
> Thanks for your reply. I open a PR to confirm with you that I understand you right here [https://github.com/wingyplus/elm-liff/pull/4/files](https://github.com/wingyplus/elm-liff/pull/4/files).

Yes, that looks right. You also corrected my mistake (which I also fixed above). Its not `SomePort : X -> Cmd msg` it is as you have done it `type alias SomePort = X -> Cmd msg`.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [March 26, 2020, 10:12pm UTC](https://discourse.elm-lang.org/t/liff-ports-for-elm/5317/5 "2020-03-26T22:12:35Z")

</div>

Closed on March 26, 2020, 10:12pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.