Call for JS code examples!

[getify]

One big area of contribution from the community that I would very much appreciate:

Please share here code snippets (preferably in JS) that are substantially (or entirely!) vanilla JS (not just a bunch of React/Vue/etc), or possibly TypeScript. Just focus on snippets that actually illustrate JS syntax (loops, if statements, ternaries, function calls, operators, string interpolations, type coercions, etc).

What I am going for is to be able create more side-by-side examples of code in JS and then the equivalent code in Foi.

Ideally, these snippets will be at least 5-10 lines of code, but probably not longer than about 100 lines of code. Think about the kinds of snippets you'd put in a blog post if you were trying to illustrate some operations/tasks in JS.

Calls to external APIs are fine, so log(), fetch(), setTimeout(), addEventListener(), etc... all ok. Just don't focus on snippets that are mostly "boring" abstractions or usages of frameworks/libraries.

FOR POSTERITY SAKE, PLEASE COPY/PASTE ACTUAL CODE BELOW, NOT JUST LINKS TO EXTERNAL SOURCES.

Thanks everyone! :)

[wujekbizon]

function chunk(array, size) {
  const chunked = [];
  let index = 0;

  while (index < array.length) {
    chunked.push(array.slice(index, index + size));
    index += size;
  }

  return chunked;
}

[getify]

Thanks!

FYI, already have an alternate implementation of this util, in the cheatsheet "comparison examples".

[getify]

OK, here's the Foi version of the above snippet:

defn chunk(array, size) {
  def chunked: <>;
  def index: 0;

  ?[index ?< size(array)] ~each {
    chunked := < &chunked, &array.[index..(index+size-1)] >;
    index := index + size;
  };
  
  ^chunked;
};

[wujekbizon]

function selectionSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    let indexOfMin = i;

    for (let j = i+1; j <arr.length; j++) {
      if (arr[j] < arr[indexOfMin]) {
        indexOfMin = j;
      }
    }

    if (indexOfMin !== i) {
      let lesser = arr[indexOfMin];
      arr[indexOfMin] = arr[i];
      arr[i] = lesser;
    }
  }

  return arr;
}

[getify]

Great!

defn selectionSort(arr) {
  0..(size(arr)-1) ~each (i) {
    def indexOfMin: i;

    (i+1)..(size(arr)-1) ~each (j) {
      ?[arr[j] ?< arr[indexOfMin]]:
        indexOfMin := j;
    };

    ?[indexofMin != i]:
      arr := < &arr, %indexOfMin: arr[i], %i: arr[indexOfMin] >;
  };
  
  ^arr;
};

[wujekbizon]

function mergeSort(arr) {
  if (arr.length === 1) {
    return arr;
  }

  const center = Math.floor(arr.length / 2);
  const left = arr.slice(0, center);
  const right = arr.slice(center);

  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  const results = [];

  while (left.length && right.length) {
    if (left[0] < right[0]) {
      results.push(left.shift());
    } else {
      results.push(right.shift());
    }
  }

  return [...results, ...left, ...right];
}

[getify]

Excellent!

defn mergeSort(arr) ?[arr.length ?= 1]: arr {
  def center: floor(size(arr) / 2);
  def left: arr.[0..(center-1)];
  def right: arr.[center..];

  ^merge(mergeSort(left), mergeSort(right));
};

defn merge(left, right) {
  def results: <>;

  ?[size(left) ?> 0 ?and size(right) ?> 0] ~each {
    ?{
      ?[left.0 ?< right.0]:
        results := < &results, left.0 >;
      ?:
        results := < &results, right.0 >;
    };
  };
  
  ^< &results, &left, &right >;
};

[jcubic]

Promises:

fetch('https://example.com').then(res => res.text()).then(text => console.log(text));

alternative async/await:

const res = await fetch('https://example.com');
const text = await res.text();
console.log(text);

[getify]

Thanks!

fetch("https://example.com")
  .then(defn(res)^res.text())
  .then(log);
  
// ***********************

Promise ~<< {
  def res:: fetch("https://example.com");
  def text:: res.text();
  log(text);
};

[jcubic]

Generators:

function* random(n) {
   while (n--) {
     yield Math.random();
   }
}

for (const num of random(10)) {
   console.log(num);
}

[getify]

Yay!

defn random(n)^Gen@ (defn(env,yield){
  n..1 ~<* {
    yield(Math.random())
  }
});

random(10).run() ~<* (~cata)|, Left@, log |

Note: generators (like in JS) produce an iterator, with .next() calls on it. Unlike JS, generators are automatically wrapped in an IO, so the run() is necessary to start. This takes the place of the somewhat weird fake-laziness of JS generators starting up in the paused state; when you start a Foi generator with run(), it starts running right away. The inner ~<* loop pushed out a random value, and then waits on the promise returned from the yield() function call before proceeding to the next iteration.

The outer ~<* loop consumes the iterator, where each underlying .next() call either produces a Left or Right (Either monad) value -- Left for when the generator is closed/complete, or Right for a produced value. The ~cata unwraps this value and only invokes log() for Right values, or rewraps Left values.

[wujekbizon]

Let's do a little of Typescript:

import { useSyncExternalStore } from 'react';

export default function createStore<Shape>(initialState: Shape) {
  let currentState = initialState;
  const listeners = new Set<(state: Shape) => void>();
  let serverState: Shape | null = null;
  const subscribe = (listener: (state: Shape) => void) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };
  return {
    getState: () => currentState,
    setState: (newState: Shape) => {
      currentState = newState;
      listeners.forEach((listener) => listener(currentState));
    },
    subscribe,
    serverInitialize: (initialServerState: Shape) => {
      if (!serverState) {
        currentState = initialServerState;
        serverState = initialServerState;
      }
    },
    getServerState: () => serverState ?? initialState,

    useStore: <SelectorOutput>(
      selector: (state: Shape) => SelectorOutput
    ): SelectorOutput =>
      useSyncExternalStore(
        subscribe,
        () => selector(currentState),
        () => selector(serverState ?? initialState)
      ),
  };
}

[getify]

Glad to get a chance to illustrate/exercise some type annotation stuff:

// unsure of these types!?
deft Shape empty;
deft SelectorOutput empty;

deft CreateStore(Shape) ^empty;
deft Listener(Shape) ^empty;
deft Listeners < *Listener >;
deft ShapeOpt Shape | empty;
deft EmptyFunc() ^empty;
deft Subscribe(Listener) ^EmptyFunc;
deft SetState(Shape) ^empty;
deft ServerInitialize(Shape) ^empty;
deft Selector(Shape) ^SelectorOutput;
deft UseStore(Selector) ^SelectorOutput;

def < :useSyncExternalStore >: import "react";

export { :createStore };

defn createStore(initialState) :as CreateStore {
  def currentState: initialState;
  def listeners: <> :as Listeners;
  def serverState: empty :as ShapeOpt;
  defn subscribe(listener) :over(listeners) :as Subscribe {
    listeners := <[ &listeners, listener ]>;
    ^defn() :over(listeners) { listeners := < &listeners, %listener: empty >; }
  };
  defn getState() ^currentState;
  defn setState(newState)
    :over(currentState)
    :as SetState
  {
    currentState := newState;
    listeners ~each (listener) { listener(currentState) };
  };
  defn serverInitialize(initialServerState: Shape)
    :over(currentState,serverState)
    :as ServerInitialize
  {
    ![serverState]: {
      currentState := initialServerState;
      serverState := initialServerState;
    }
  };
  defn getServerState() ^?{
    ?[!empty serverState]: serverState;
    ?: initialState
  };
  defn useStore(selector) :as UseStore
    ^useSyncExternalStore(
      subscribe,
      defn() ^selector(currentState),
      defn() ^selector(?{
        ?[!empty serverState]: serverState;
        ?: initialState
      })
    );

  ^<
    :getState, :setState, :subscribe, :serverInitialize,
    :getServerState, :useStore
  >
};

Note: function expressions can't be included inside the < .. > Record (object) definition. As such, I used function definitions for them, and included them by name in the final returned Record literal. I honestly probably prefer that style in my JS, but in Foi it's required in this case.

[mhashim6]

A simple audio player lib in js from my Blog Series

let queue = [],
  player = new Audio(),
  onPlayNext = (url) => ({});

const next = () => playlist(queue, false, false, onPlayNext);
const nextLoop = () => playlist(queue, false, true, onPlayNext);

export const playlist = (
  urls,
  clear = false,
  loop = false,
  onNext = onPlayNext
) => {
  onPlayNext = onNext;
  if (clear) {
    queue = [];
    queue.push(...urls);
  }
  if (queue.length !== 0) {
    const upcoming = queue.shift();
    if (loop) {
      queue.push(upcoming);
    }
    player.src = upcoming;
    player.removeEventListener("ended", loop ? nextLoop : next);
    player.addEventListener("ended", loop ? nextLoop : next);
    player.play();
    queue.length && onNext(upcoming);
  } else {
    player.removeEventListener("ended", loop ? nextLoop : next);
  }
};

export const clear = () => {
  queue = [];
  player.removeEventListener("ended", next);
};

export const play = (url) => {
  stop();
  player.src = url;
  player.play();
};

export const resume = () => {
  player.play();
};

export const pause = () => {
  player.pause();
};

export const stop = () => {
  player.pause();
  player.currentTime = 0;
  clear();
};


export const onPlay = (action) => {
  const cb = () => {
    action(player.src);
  };
  player.addEventListener("play", cb);
  return () => player.removeEventListener("play", cb);
};
export const onTimeUpdate = (action) => {
  const cb = () => {
    action(player.src, player.currentTime);
  };
  player.addEventListener("timeupdate", cb);
  return () => player.removeEventListener("timeupdate", cb);
};
export const onPause = (action) => {
  const cb = () => {
    action(player.src);
  };
  player.addEventListener("pause", cb);
  return () => player.removeEventListener("pause", cb);
};
export const onStop = (action) => {
  const cb = () => {
    action(player.src);
  };
  player.addEventListener("ended", cb);
  return () => player.removeEventListener("ended", cb);
};

[getify]

Great!

export {
  :playlist, :clear, :play, :resume, :pause, :stop,
  :onPlay, :onTimeUpdate, :onPause, :onStop,
};

def queue: <>;
def player: Audio();

defn onPlayNext(url) ^<>;
defn next() ^playlist(queue, false, false, onPlayNext);
defn nextLoop() ^playlist(queue, false, true, onPlayNext);

defn playlist(
    urls,
    clear: false,
    loop: false,
    onNext: onPlayNext
  )
  :over(queue,onPlayNext)
{
  def cb: next;
  ?[loop]: cb := nextLoop;

  onPlayNext := onNext;
  ?[clear]: queue := < &urls >;

  ?{
    ?[size(queue) ?= 0]: {
      def upcoming: queue.[1..];
      ?[loop]: queue := < &queue, upcoming >;

      player.src(upcoming);
      player.removeEventListener("ended", cb);
      player.addEventListener("ended", cb);
      player.play();
      ?[size(queue) ?> 0]: onNext(upcoming)
    }
    ?:
      player.removeEventListener("ended", cb)
  }
};

defn clear() :over(queue) {
  queue := <>;
  player.removeEventListener("ended", next)
};

defn play(url) {
  stop();
  player.src(url);
  player.play()
};

defn resume() ^player.play();

defn pause() ^player.pause();

defn stop() {
  player.pause();
  player.currentTime(0);
  clear()
};

defn onPlay(action) {
  defn cb() ^action(player.src);
  player.addEventListener("play", cb);
  ^defn() ^player.removeEventListener("play", cb)
};

defn onTimeUpdate(action) {
  defn cb() ^action(player.src, player.currentTime);
  player.addEventListener("timeupdate", cb);
  ^defn() ^player.removeEventListener("timeupdate", cb)
};

defn onPause(action) {
  defn cb() ^action(player.src);
  player.addEventListener("pause", cb);
  ^defn() ^player.removeEventListener("pause", cb)
};

defn onStop(action) {
  defn cb() ^action(player.src);
  player.addEventListener("ended", cb);
  ^defn() ^player.removeEventListener("ended", cb)
};

Note: since Foi doesn't have a terse ternary decision form, I hoisted the repeated loop ? nextLoop : next from the playlist() function to a single variable definition def cb: next followed by the reassignment (?[loop]: cb := nextLoop;). I've contemplated a terse ternary expression for Foi, but each time I see an example for it, I feel like there's a decent work-around so it hasn't really justified itself to me yet.

[wujekbizon]

A simple reducer:

export const reducer = (state, action) => {
  if (action.type === 'ADD_ITEM') {
    const newPeople = [...state.people, action.payload];
    return {
      ...state,
      people: newPeople,
      isModalOpen: true,
      modalContent: 'item added',
    };
  }
  if (action.type === 'NO_VALUE') {
    return { ...state, isModalOpen: true, modalContent: 'please enter value' };
  }
  if (action.type === 'CLOSE_MODAL') {
    return { ...state, isModalOpen: false };
  }
  if (action.type === 'REMOVE_ITEM') {
    const newPeople = state.people.filter(
      (person) => person.id !== action.payload
    );
    return { ...state, people: newPeople };
  }
  throw new Error('no matching action type');
};

[getify]

Pattern matching FTW!

export { :reducer };

defn reducer(state, action)^?(action.type){
  ?["ADD_ITEM"]: {
    def newPeople: < &state.people, action.payload >;
    <
      &state,
      people: newPeople,
      isModalOpen: true,
      modalContent: "item added",
    >
  }
  ?["NO_VALUE"]:
    < &state, isModalOpen: true, modalContent: "please enter value" >;
  ?["CLOSE_MODAL"]:
    < &state, isModalOpen: false >;
  ?["REMOVE_ITEM"]: {
    def newPeople: state.people ~filter (person) {
      person.id != action.payload
    };
    < &state, people: newPeople >
  }
  ?: Left@ "no matching action type"
};

[HostXX]

Counting sort:

function countingSort(array, min, max) {
  let count = new Array(max - min +1).fill(0);

  for (let i = 0; i < array.length; i++) {
    count[array[i] - min]++;
  }

  let position = 0;

  for (let i = min; i <= max; i++) {
    for (let j = 0; j < count[i - min]; j++) {
        array[position] = i;
        position++;
    }
  }
 
  return array;
}

[getify]

Fun!

defn countingSort(array, min, max) {
  def count: min..max ~map @@0;
  def position: 0;

  0..(size(array)-1) ~each {
    def idx: array[i] - min;
    def val: count[idx] + 1;
    count := < &count, %idx: val >
  };

  min..max ~each (i) {
    0..(count[i - min] - 1) ~each (j) {
      array := < &array, %position: i >;
      position := position + 1
    };
  };
  
  ^array
};

[HostXX]

Decimal to Roman:

function decimalToRoman(decimal) {
   if (decimal < 1 || decimal > 3999) {
     return null;
   }

  const romanNumerals = {
    M: 1000,
    CM: 900,
    D: 500,
    CD: 400,
    C: 100,
    XC: 90,
    L: 50,
    XL: 40,
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1
  };

  let roman = '';
  for (const [numeral, value] of Object.entries(romanNumerals))     {
    while (decimal >= value) {
      roman += numeral;
      decimal -= value;
     }
  }

  return roman;
}

[getify]

neat!

defn decimalToRoman(decimal)
  ![(?<>)(1, decimal, 3999)]: None@
{
  def romanNumerals: <
    M: 1000,
    CM: 900,
    D: 500,
    CD: 400,
    C: 100,
    XC: 90,
    L: 50,
    XL: 40,
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1
  >;

  def roman: "";
  romanNumerals ~each (numeral,value) {
    ?[decimal ?>= value] ~each {
      roman := roman + numeral;
      decimal := decimal - value;
    };
  };

  ^roman
}

Note: I probably would have done the loop with a reduce/fold, but I kept it in the spirit/style of the original JS snippet for comparison purposes.

[prabhatexit0]

1971. Find if Path Exists in Graph (LeetCode Problem)
      Link: https://leetcode.com/problems/find-if-path-exists-in-graph/description/

Using Recursive Depth First Search:

var validPath = function(n, edges, source, destination) {
    if (source == destination) return true
    let adj = Array(n).fill().map(() => [])
    let vis = Array(n).fill(false)

    for(let i = 0; i < edges.length; i++) {
        adj[edges[i][0]].push(edges[i][1]) 
        adj[edges[i][1]].push(edges[i][0]) 
    }

    const dfs = (i) => {
        if(vis[i]) return false
        vis[i] = true
        if(i == destination) return true
        let res = false
        for(let e of adj[i]) res |= dfs(e)
        return res
    }

    return dfs(source)
};

Using Iterative Depth First Search:

var validPath = function(n, edges, source, destination) {
    if (source == destination) return true
    let adj = Array(n).fill().map(() => [])
    let vis = Array(n).fill(false)

    for(let i = 0; i < edges.length; i++) {
        adj[edges[i][0]].push(edges[i][1]) 
        adj[edges[i][1]].push(edges[i][0]) 
    }
    
    const dfs = (source) => {
        let stack = [source]
        while(stack.length > 0) {
            let cur = stack.pop()
            if(cur == destination) return true
            vis[cur] = true
            if(adj[cur])
                for(let i of adj[cur]) {
                    if(vis[i]) continue
                    stack.push(i)
                }
        }
        return false
    }

    return dfs(source)
};

[getify]

Recursive Depth First Search:

def validPath: defn(n, edges, source, destination)
  ?[source ?= destination]: true
{
  def adj: 1..n ~map @@<>;
  def vis: 1..n ~map @@false;
  def dfs: defn(i)
    ?[vis[i]]: false
    ?[i ?= destination]: true
    :over(vis)
  {
    def res: false;
    vis := < &vis, %i: true >;
    adj[i] ~each (e) { res := res ?or dfs(e) };
    ^res
  };
  
  edges ~each (e) {
    adj := < &adj, %e.0: e.1, %e.1: e.0 >
  };

  ^dfs(source)
};

Note: There's a few things I would do differently if I were writing this code, but I stuck with the style/approach of the original JS snippet. In particular, I'd use named defn function definitions (i.e., defn validPath(..) rather than assigning anonymous functions to variables (i.e., def validPath: defn(..)). Also, the dfs() function isn't tail-recursive so a stack overflow could occur on large graphs. And finally, the loop that computes/re-assigns res with the boolean-ORs... I'd do this with a reduce/fold, and possibly use boolean monoids (see the boolean any/all example in that section).

[getify]

Iterative Depth First Search:

def validPath: defn(n, edges, source, destination)
  ?[source ?= destination]: true
{
  def adj: 1..n ~map @@<>;
  def vis: 1..n ~map @@false;
  def dfs: defn(source) :over(vis) {
    def stack: < source >;
    def complete: false;
    ?[stack.length ?> 0] ~each {
      def cur: stack.-1;
      stack := stack.[..-2];  // like stack.pop()
      ?{
        ![complete]: {
          vis := < &vis, %cur: true >;
          adj[cur] ~each (i) {
            ![vis[i]]: stack := < &stack, i >
          }
        }
        ?[cur ?= destination]: complete := true
      }
    };
    ^false
  };
  
  edges ~each (e) {
    adj := < &adj, %e.0: e.1, %e.1: e.0 >
  };

  ^dfs(source)
};

Note: The original JS snippet uses some flow-control approaches (e.g.,continue and function return from deep inside a loop) that Foi strongly discourages (doesn't support). My above translation of the code is not so great looking, as a result of needing to work around that. I would likely spend more time trying to restructure the code/algorithm to use different flow-control processes, and hopefully clean that code up.

[infsahitya]

Binary Search using recursion:

const BinarySearch = (arr, x, start, end) => {
    if (start > end) return false;

    let mid=Math.floor((start + end)/2);

    if (arr[mid]===x) return true;
    if(arr[mid] > x) return BinarySearch(arr, x, start, mid-1);
    else return BinarySearch(arr, x, mid+1, end);
}

Binary Search using iteration:

const BinarySearch = (arr, x) => {
    let start=0, end=arr.length-1;

    while (start<=end){
        let mid=Math.floor((start + end)/2);
  
        if (arr[mid]===x) return true;
        else if (arr[mid] < x)
             start = mid + 1;
        else
             end = mid - 1;
    }
    return false;
}

[getify]

Binary Search using recursion:

defn BinarySearch(arr, x, start, end)
  ?[start ?> end]: false
{
  def mid: floor((start + end)/2);
  ^?(arr[mid]){
    ?[x]: true;
    ?[?> x]: BinarySearch(arr, x, start, mid-1);
    ?: BinarySearch(arr, x, mid+1, end)
  }
};

Dependent-style pattern matching. I like named function definitions better, but you could have done def BinarySearch: defn(..) if you really prefer functions as assignment expressions.

[getify]

Binary Search using iteration:

defn BinarySearch(arr, x) {
  def start: 0;
  def end: size(arr) - 1;
  def ret: false;

  ?[start ?<= end] ~each {
    def mid: floor((start + end)/2);
    ?(arr[mid]){
      ?[x]: ret := true;
      ?[?< x]: start := mid + 1;
      ?: end := mid - 1
    }
  };
  
  ^ret
};

Note: Function returns buried inside loops is a common flow-control idiom in imperative programming, but Foi takes a stance against such flow-control practices, and as such it's not allowed. Worked around it with a boolean flag here, but I might also try to consider a more declarative/FP way of doing this if I spent a bit more time thinking about the code.

[infsahitya]

Binary Search using recursion:

defn BinarySearch(arr, x, start, end)
  ?[start ?> end]: false
{
  def mid: floor((start + end)/2);
  ^?(arr[mid]){
    ?[x]: true;
    ?[?> x]: BinarySearch(arr, x, start, mid-1);
    ?: BinarySearch(arr, x, mid+1, end)
  }
};

Dependent-style pattern matching. I like named function definitions better, but you could have done def BinarySearch: defn(..) if you really prefer functions as assignment expressions.

That's really some nice semantic for function assignment in Foi.

[RatnadeepBiswakarma]

Get a nested property from an object using dot notation!

function getPropertyFromObject(obj, path) {
  path = path.split(".")
  return path.reduce(
    (currentValue, currentKey) =>
      currentValue && currentValue[currentKey]
        ? currentValue[currentKey]
        : null,
    obj
  )
}

[getify]

This is an interesting one!

defn getPropertyFromObject(obj, path) ^((~fold)(
  split(path,"."),
  obj,
  (currentValue, currentKey) {
    ?(currentValue){
      ?[?has currentKey]: #[currentKey];
      ?: empty
    }
  }
))

Note: this is a good example of a code idiom that, in its original form, doesn't translate well to Foi, because it's preferable to solve this a different way. However, I included the direct transformation as close as possible for comparison purposes. If you found yourself writing such code, you'd likely feel the desire to re-think it. In the next reply, I'll post an altered approach.

[getify]

Here's an alternate version, which uses the Maybe monad. It's more idiomatic of the "path of least resistance" in Foi. We're still doing a reduce/fold over the parts of the path, but we're chaining (with ~<) into a Maybe monad instance, so the emptiness check is happening at each of those chain operations. If it comes out empty, then the rest of the loop will be no-ops against a None.

The (.)|,currentKey| expression is partially applying the . operator (skipping the first argument), producing a unary function that expects as its argument the obj on which to access the property. Then this function is flow-composed (with +>) to the Maybe._@ unit constructor to re-wrap the accessed value (or empty) in a monad.

The return value from this function is thus a Maybe (that is, either an Id or None monad), and you'd have to handle that in the calling code (perhaps with a ~cata).

defn getPropertyFromObject(obj, path) ^((~fold)(
  split(path,"."),
  Maybe._@ obj,
  (currentValue, currentKey) {
    currentValue ~< ((.)|,currentKey| +> Maybe._@)
  }
))

[7assenTlili]

Sort array by object field name while elements with undefined name should be at the start of the result array.

function sortByName (array) {
  array.sort((a, b) => {
    if (!b.name) {
      return 1
    }
    if (!a.name) {
      return -1
    }
    return a.name.localeCompare(b.name)
  })
}

[getify]

Cool!

defn sortByName(array)^sort(
  array,
  defn(a, b)^?{
    ![b ?has "name"]: 1;
    ![a ?has "name"]: -1;
    ?: localeCompare(a.name,b.name)
  });

[jcubic]

Using generator as an async function, this is what Babel is doing to async..await when transpiling into generators.

function* title() {
    var res = yield fetch('https://jcubic.pl/feed.xml');
    var text = yield res.text();
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(text, "text/xml");
    return xmlDoc.querySelector('title').innerHTML;
}

function is_promise(value) {
    return value instanceof Promise ||
        (typeof value === 'object' && typeof value.then === 'function');
}

function unwind(gen) {
    var iterator = gen()[Symbol.iterator]();
    return new Promise(function(resolve) {
        (function next(value) {
            value = iterator.next(value);
            if (!value.done) {
                if (is_promise(value.value)) {
                    value.value.then(next);
                } else {
                    next(value.value);
                }
            } else {
                resolve(value.value);
            }
        })();
    });
}

unwind(title).then((title) => console.log(title));

[getify]

Interesting. I'm going to answer with 3 different versions.

The first here is the equivalent of the JS async..await syntax, as Foi does it:

defn title()^(Promise ~<<{
  def res:: fetch("https://jcubic.pl/feed.xml");
  def text:: res.text();
  def parser: DOMParser();
  def xmlDoc: parser.parseFromString(text, "text/xml");
  xmlDoc.querySelector("title").innerHTML;
});

Promise ~<< {
  def v:: title();
  log(v);
};
// or: title() ~map log;
// or: title() ~map (title) { log(title) };

Note: the Promise ~<< part signifies a promise-do-block, and the :: (double-colon) on def res:: and def test:: are effectively awaits that unwrap the promises before proceeding.

[getify]

The second version here is similar, but uses a full IO (which is also a Promise transformer):

defn title()^(IO ~<<{
  def res:: fetch("https://jcubic.pl/feed.xml");
  def text:: res.text();
  def parser: DOMParser();
  def xmlDoc: parser.parseFromString(text, "text/xml");
  xmlDoc.querySelector("title").innerHTML;
});

(IO ~<< {
  def v:: title();
  log(v);
}).run();
// or: title().run() ~map log;
// or: title().run() ~map (title) { log(title) };

Note: IOs are lazy, meaning the .run()s are necessary to actually invoke them.

[getify]

And finally, to your original question, if you really wanted to use a generator, you can do so. However, generators really should be for producing a series of values, so this is kind of a "smell" if you do it this way. In other words, since Foi natively supports the previous Promise and IO versions I posted, doing it the manual way with generators (including the unwind() utility approach you posted) would generally be disfavored. Nevertheless, here's the generator syntax/mechanism added to the mix:

defn title()^Gen@ (defn(env,yield)^(Promise ~<<{
  def res:: fetch("https://jcubic.pl/feed.xml");
  def text:: res.text();
  def parser: DOMParser();
  def xmlDoc: parser.parseFromString(text, "text/xml");
  yield(xmlDoc.querySelector("title").innerHTML)
}));

(~cata)(title().run(), Left@, log)

// or:
// title().run() ~<* (ev) {
//  (~cata)(ev, Left@, log);
// }

[jcubic]

optional async transducer:

var compose = function(f, g) {
    return function(...args) {
        return g(f(...args));
    };
};

var resolve = (value, fn) => {
    if (value instanceof Promise) {
         return value.then(fn);
    } else {
        return fn(value);
    }
};

var map = fn => reducing => (result, input) => {
    return reducing(result, resolve(input, fn));
};

var filter =  predicate => reducing => (result, input) => {
    const next = cond => cond ? reducing(result, input) : result;
    return resolve(resolve(input, predicate), next);
}

var connector = fn => (accumulator, element) => {
   return resolve(accumulator, (acc) => {
      return resolve(element, (e) => fn(acc, e));
   });
}

var concat = connector((acc, item) => acc.concat(item));
var sum = connector((a, b) => a + b);

var transducer = compose(map(x => x + 1), filter(x => x % 2 === 0));

(async function() {
   var promises = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => Promise.resolve(n));

   var result = await promises.reduce(transducer(concat), Promise.resolve([]));
   console.log(result); // [2, 4, 6, 8, 10]
})();

var result = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    .reduce(transducer(concat), []);
console.log(result); // [2, 4, 6, 8, 10]

[getify]

I love transducers! There will certainly be a built-in set of these facilities, but here's the translation of your code.

defn resolve(value,fn)^?{
  ?[value ?as Promise]: value ~map fn;
  ?: fn(value)
};

defn mapT(fn)(reducing)(result,input) 
  ^reducing(result, resolve(input, fn));

defn filterT(predicate)(reducing)(result,input) {
  defn next(cond) ![cond]: result ^reducing(result, input);
  ^resolve(resolve(input, predictate), next)
};

defn connector(fn)(accumulator,element)
  ^resolve(accumulator, defn(acc)
    ^resolve(element, defn(e)^fn(acc, e))
  );

def concat: connector(defn(acc,item)^(acc + item));
def sum: connector(defn(a,b)^(a + b));
def transducer: map(defn(x)^x + 1) +> filter(defn(x)^(mod(x,2) ?= 0));
def result: empty;

Promise ~<< {
  def promises: <0, 1, 2, 3, 4, 5, 6, 7, 8, 9> ~map Promise@;
  
  def result:: (~fold)(promises, Promise@<>, transducer(concat));
  log(result)  // <2, 4, 6, 8, 10>
};

result := (~fold)(
  <0, 1, 2, 3, 4, 5, 6, 7, 8, 9>,
  <>,
  transducer(concat)
);
log(result)    // <2, 4, 6, 8, 10>

Note: compose() isn't needed because Foi has the +> flow operator. concat() and sum() both use the + operator, because that operator is overloaded to delegate to underlying concat capability -- for numbers it adds, for strings / tuples (lists) it concats.

[0xTheProDev]

  function inherit (Const, Super) {
     function F () {}
     F.prototype = Super.prototype;
     Const.prototype = new F();
     Const.prototype.constructor = Const;
  }

[getify]

There is no prototype (or any form of inheritance) in Foi, so I don't think there's any equivalent code I could show for this. Foi insists that you use functional composition patterns (many to choose from) rather than OO composition patterns.