DEV Community: E.R. Nurwijayadi

Purescript: Playing with Records

E.R. Nurwijayadi — Tue, 22 Dec 2020 06:28:26 +0000

This post was originally posted on my personal blog 😀. The source code example also provided in github, given in that blog.

🕷 Purescript - Playing with Records

🕷 Haskell - Playing with Records

Goal

Goal: A step by step practical case to collect unique record fields. Using Purescript from Haskell mockup.

The task is simply to collect unique tags from records. I have done it using Javascript, and Typescript. And I want to know how it looks like with Purescript.

The issue is, I never code in Purescript before. Luckily I have learnt Haskell a few years ago. So I decide to make a mockup from Haskell. Rewrite from javascript to haskell takes an adaptation, but after a while, it is not that hard to do.

It turned out, that it is easy to rewrite, from Haskell to Purescript. But beware of the differences.

While it is comfortable to work with list in Haskell, Purescript utilize array, that is more compatible with Javascript.

This might cause an issue, for custom algorithm. For example purpose, we are going to use algorithm, for collecting unique array/list. Of course we can do it with nub standard library. I just want to show the reader something more fundamental, just in case anyone need to make custom function in Purescript.

Let's get it on.

Data Structure: Original in Javascript

Consider a case example of some popular songs from the old decades.

With javascript, I can just write away the records in below form:

const songs  = [
  { title: "Cantaloupe Island",          tags: ["60s", "jazz"] },
  { title: "Let it Be",                  tags: ["60s", "rock"] },
  { title: "Knockin' on Heaven's Door",  tags: ["70s", "rock"] },
  { title: "Emotion",                    tags: ["70s", "pop"] },
  { title: "The River" }
];

export default songs;

Data Structure: Ported to Haskell

With Haskell, I can strictly append additional type signature.

module MySongs (Tags(..), Song, songs, title, tags) where

data Tags = Tags [String]
        deriving (Eq, Show)

data Song = Song { title :: String, tags :: Maybe Tags }
        deriving (Show)

songs :: [Song]
songs = [
    Song { title = "Cantaloupe Island",
           tags = Just (Tags ["60s", "jazz"]) },
    Song { title = "Let it Be",
           tags = Just (Tags ["60s", "rock"]) },
    Song { title = "Knockin' on Heaven's Door",  
           tags = Just (Tags ["70s", "rock"]) },
    Song { title = "Emotion",
           tags = Just (Tags ["70s", "pop"]) },
    Song { title = "The River",
           tags = Nothing }
  ]

I also attach Maybe as a nullable option, so we can adapt while no tags data is available.

Data Structure: Ported to Purescript

The same applied with purescript. Except we use array instead of list.

module MySongs (Tags(..), Song, songs) where

import Data.Maybe

type Tags = Array String
type Song = { title :: String, tags :: Maybe Tags }

songs :: Array Song
songs = [
    { title : "Cantaloupe Island",
      tags : Just (["60s", "jazz"]) },
    { title : "Let it Be",
      tags : Just (["60s", "rock"]) },
    { title : "Knockin' on Heaven's Door",
      tags : Just (["70s", "rock"]) },
    { title : "Emotion",
      tags : Just (["70s", "pop"]) },
    { title : "The River",
      tags : Nothing }
  ]

Functional: in Javascript

These days with ecmascript 2019 we can use flatMap, so the code can be shorter.

import songs from "./songs-data.js";

const unique = array => [... new Set(array)];

const allTags = unique(songs
  .filter(song => song.tags)
  .flatMap(song => song.tags)
);
console.log(allTags );

Oneliner Solution: in Haskell

We can also make a oneliner statement in Haskell. Using catMaybes to extract values from list of Maybes. Using concat to flatten the list. And finally using nub standar library to filter just the unique values.

import MySongs
import Data.List
import Data.Maybe

unwrapTags :: Tags -> [String]
unwrapTags (Tags tags) = tags

main = print $ nub $ concat 
             $ (map unwrapTags)
             $ catMaybes
             $ (map tags songs)

With the result similar to below:

$ runghc 14-songs-tags-unique.hs
["60s","jazz","rock","70s","pop"]

Short enough to makes me happy. If you ever write a Haskell codes, you should know how it works.

Oneliner Solution: in Purescript

It is a little bit longer in Purescript. Because we need more import statement, compared to haskell counterpart.

module Step14 where
import Prelude
import Effect.Console (log)
import Data.Array (concat, filter, catMaybes, nub)
import Data.Maybe
import MySongs

main = log $ show $ nub
        $ concat $ catMaybes $ (map _.tags songs)

With the result similar to below:

$ spago run --main Step14
[info] Build succeeded.
["60s","jazz","rock","70s","pop"]

You can spot, that in Purescript we are using (map _.tags songs) to access field of the each songs record, instead of (map tags songs) in Haskell.

There are details to achieve this in provided link above. I just want this notes to be short. So I strip out the details here.

Custom Unique Function: in Haskell

We are done with introduction. Now let me write a custom unique function, based on some stackoverflow and coderosetta.

exclude :: String -> ([String] -> [String])
exclude tag = filter((/=) tag)

unique :: [String] -> [String]
unique [] = []
unique (tag:tags) = tag:unique(exclude tag tags)

tags :: [String]
tags = ["rock", "jazz", "rock", "pop", "pop"]

main = print (unique tags)

With the result similar to below:

$ runghc 07-tags-unique.hs
["rock","jazz","pop"]

The thing is, the code is using x:xs pattern matching. This could be a troublesome while working with array in purescript, since x:xs pattern matching is made for list. And we are working with array in purescript.

For you who never heard x:xs pattern, it is easier to understand, if we write the pattern as, head:tail instead of x:xs. Where the head is the first element, and the tail are the rest elements in list or array.

Custom Unique Function: in Purescript

Now, how is it going to be in Purescript 🤔?

Well, we can utilize uncons. Then recursively cons the tails.

module Step07 where
import Prelude
import Data.Array (filter, (:), cons, uncons)
import Data.Maybe
import Effect.Console (log)

exclude :: String -> Array String -> Array String
exclude tag xs = filter((/=) tag) xs

unique :: Array String -> Array String
unique tags = case uncons tags of
  Nothing -> []
  Just {head: tag, tail: tags} -> cons tag (unique (exclude tag tags))

tags :: Array String
tags = ["rock", "jazz", "rock", "pop", "pop"]

main = log $ show (unique tags)

With the result similar to below:

$ spago run --main Step07
[info] Build succeeded.
["rock","jazz","pop"]

No need to take hours to find replacement for this x:xs pattern in array.

Conclusion

That is all. You can use the pattern for your own custom algorithm.

What do you think?

Typescript: Playing with Interface

E.R. Nurwijayadi — Mon, 21 Dec 2020 13:08:51 +0000

This post was originally posted on my personal blog 😀. The source code example also provided in github, given in that blog.

🕷 Typescript - Small Step into Typed

Goal

Goal: A small step into typescript using custom song script example.

I make this case example, because I want to learn typescript. The task is simply to collect unique tags from records.

Type Basic

Consider start from simple. This is a conventional function in typescript:

const func = function(a: number, b: number): number { return a+b; }

const z: number = func(6,7)
console.log (z)

We can rewrite using ES6's fat arrow, with about the same result, as below code:

const func = (a: number, b: number): number => a+b;

const z: number = func(6,7)
console.log (z)

Or even better with some kind of function signatures, with about the same result, as below code:

type MyFunc = (a: number, b: number) => number;
const func: MyFunc = (a, b) => a + b;

const z: number = func(6,7)
console.log (z)

You can spot the detail. This looks like type signature in functional programming.

Now let's get down to a record case example.

Data Structure: Original in Javascript

Consider a case example of some popular songs from the old decades.

With javascript, I can just write away the records in below form:

const songs  = [
  { title: "Cantaloupe Island",          tags: ["60s", "jazz"] },
  { title: "Let it Be",                  tags: ["60s", "rock"] },
  { title: "Knockin' on Heaven's Door",  tags: ["70s", "rock"] },
  { title: "Emotion",                    tags: ["70s", "pop"] },
  { title: "The River" }
];

export default songs;

Data Structure: Ported to Typescript

With Typescript, you can peacefully append additional interface signature.

interface Song{
  readonly title: string;
  readonly tags?: Array<string>;
}

const songs: Array<Song> = [
  { title: "Cantaloupe Island",
    tags : ["60s", "jazz"] },
  { title: "Let it Be",
    tags : ["60s", "rock"] },
  { title: "Knockin' on Heaven's Door",
    tags : ["70s", "rock"] },
  { title: "Emotion",
    tags : ["70s", "pop"] },
  { title: "The River" }
];

export { Song, songs };

Procedural: in Javascript

In the old glorious days of Javascript, common approach to solve unique array in records is, by using loop.

let tagSet = new Set();

// using set feature to collect tag names
songs.forEach(function(song) {
  if( "tags" in song ) {
    let tags = song.tags;
    console.log(tags);

    for (const tag of tags) {
      tagSet.add(tag);
    }
  }
});

console.log(tagSet);

// normalize to array
let alltags = [...tagSet];

console.log(alltags);

Well, not so old, this is already using ecmascript 2015.

Functional: in Javascript

These days with ecmascript 2019 we can use flatMap, so the code can be shorter.

import songs from "./songs-data.js";

const unique = array => [... new Set(array)];

const allTags = unique(songs
  .filter(song => song.tags)
  .flatMap(song => song.tags)
);
console.log(allTags );

Type Interface: in Typescript

With the right code, it is fun to type the interface signature.

import { Song, songs } from "./songs-data";

type   Unique  = (array: Array<string>) => Array<string>;
const  unique  : Unique = (array) => [... new Set(array)];

type  PickTags = (song: Song) => Array<string>;
const pickTags : PickTags = (song) => song.tags!

const allTags: Array<string> = unique(songs
  .filter(  pickTags )
  .flatMap( pickTags )
);
console.log(allTags );

There are details to achieve this in provided link above.
I just want this notes to be short. So I strip out the details here.

Type Interface: with Deno (also Typescript)

However, beware of the difference between ts-node and deno.

All the codes above works well, except we need an adjustment for export import.

This picture should be enough to show the issue

Export Interface

Instead of ts-node style below:

interface Song{ … }
…
export { Song, songs };

We should use export reserved word as below:

export interface Song{ … }
…
export { songs };

Import

Now you can import as usual, except you must specify, the file extension .ts.

import { Song, songs } from "./songs-data.ts";

The script should works well.
This is the only issue I face so far.
And it has been solved already.

Conclusion

Once I step into this typescript.
It doesn't seems to be scary anymore.
In fact this looks fun.
I should play with language more often.

What do you think?

Solving this.$children removal in Vue3 using provide/inject mechanism

E.R. Nurwijayadi — Mon, 07 Dec 2020 11:45:12 +0000

This post was originally posted on my personal blog 😀. The source code example also provided in github, given in that blog.

🕷 Tabs - JS - Vue3 Composition

I have been learning vue2 recently and make my own tabs component in with vue CLI. In part of my learning process, I also migrate to vue3 using composition API.

Goal

I need to pass all tabs data in parent component, along with the children data, to all child components.

In order to select tab in click event, all the children data should be available in all child components,

The Children Issue

My vue2 design pattern is using slot:

<template>
   <tabs>
      <tab name="home" title="Home" color="bg-blue-500">
        <h3>Home</h3>
        <p>Lorem ipsum dolor sit amet,
           consectetur adipiscing elit.
           Quisque in faucibus magna.</p>
      </tab>
      …
  </tabs>
</template>

In children component, the data above will be processed with v-for:

<template>
  <main class="tabs">
    <div class="tab-headers">
      <div
         v-for="tab in tabs" v-bind:key="tab.name"
         v-on:click="selectTabByName(tab.name)"
         v-bind:class="[activeClass(tab), colorClass(tab)]"
        >{{ tab.title }}
      </div>
    </div>

    <div class="tab-spacer"></div>

    <div class="tab-contents">
      <slot></slot>
    </div>
  </main>
</template>

The children component is using this line of code.

export default {
  name: 'TabListSimple',
  data() {
    return {
      selected: 'news',
      tabs: this.$children
    };
  }
}

As you might have known, the this.$children has already been deprecated in vue3. There is no good example,on how to migrate this using the design pattern above.

The Design Pattern

Affter a while, I realize that my problem is not in the this.$children itself. There must be another way to do this. Then in vue3, I start to move from data in template to plain javascript.

let tabsArray = [
  { name: 'home', title: 'Home', color: 'bg-blue-500',
    text: `Lorem ipsum dolor sit amet,
      consectetur adipiscing elit.
      Quisque in faucibus magna.` },
  …
];

export { tabsArray };

At first, I think that this is not an elegant solution, but I continue anyway. My goal is to get the component done in vue3, so I can start migrate without obstacle. I can change the code later anyway.

Data Provided from Parent

Using provide and inject mechanism, preapring all tabs to be used in child component later.

Now I can rewrite the code from scratch using template without data.

<template>
  <tabs />
</template>

The data can be provided in parent.

import { provide } from 'vue'
import { tabsArray } from '@/tabsArray.js'
import tabs from '@/components/mockup/TabsMockup.vue'

export default {
  name: 'MainMockup',
  components: { tabs },
  setup() {
    provide('tabsArray', tabsArray)
  }
}

Composition API with vue3 is very helpful. Although actually you can do it with option API with vue2.

Data Injected to Children

The children component is still using v-for as usual, but this time I do not use the slot feature.

<template>
  <main class="tabs">
    <div class="tab-headers">
      <tabheader
        v-for="tab in tabs" v-bind:key="tab.name"
        :title="tab.title" :color="tab.color"
        :tabname="tab.name"
      />
    </div>

    <div class="tab-spacer"></div>

    <div class="tab-contents">
      <tabcontent
        v-for="tab in tabs" v-bind:key="tab.name"
        :text="tab.text" :title="tab.title" :color="tab.color"
        :tabname="tab.name"
      />
    </div>
  </main>
</template>

The tabs data in children is available now, by injecting previosly provided tabsArray.

import { inject } from 'vue'
import tabheader  from '@/components/mockup/TabHeaderMockup.vue'
import tabcontent from '@/components/mockup/TabContentMockup.vue'

export default {
  name: 'TabsMockup',
  components: { tabheader, tabcontent },
  setup() {
    const tabs = inject('tabsArray')
    return { tabs }
  }
}

That simple. And that is all.

Preview

Complete Code

You can have a thorough explanation with working code examples, in provided links above.

Closing This Article

This provide and inject mechanism is simpler. It is also make sense without magic. But sacrificing slot design pattern might not pleased everbody.

After all I still have so much to learn.