leporello-js/src/index.js

import {UI} from './editor/ui.js'
import {EFFECTS, render_initial_state, apply_side_effects} from './effects.js'
import {
  open_dir, 
  close_dir, 
  init_window_service_worker
} from './filesystem.js'
import {examples_promise} from './examples.js'

const EXAMPLE = `function fib(n) {
  if(n == 0 || n == 1) {
    return n
  } else {
    return fib(n - 1) + fib(n - 2)
  }
}

fib(6)
`


const set_error_handler = (w, with_unhandled_rejection = true) => {
  // TODO err.message
  w.onerror = (msg, src, lineNum, colNum, err) => {
    if(err?.__ignore) {
      return
    }
    ui.set_status(msg)
  }
  if(with_unhandled_rejection) {
    w.addEventListener('unhandledrejection', (event) => {
      ui.set_status(event.reason)
    })
  }
}

// Fake directory, http requests to this directory intercepted by service_worker
export const FILES_ROOT = new URL('./__leporello_files', globalThis.location)

const get_html_url = state => {
  const base = FILES_ROOT + '/' 
  return state.html_file == ''
    ? base + '__leporello_blank.html'
    : base + state.html_file + '?leporello'
}

const on_window_load = w => {
  init_window_service_worker(w)
  exec(
    'open_app_window', 
    new Set(Object.getOwnPropertyNames(w))
  )
}


// By default run code in hidden iframe, until user explicitly opens visible
// window
let iframe
const open_run_iframe = (state) => {
  iframe = document.createElement('iframe')
  iframe.src = get_html_url(state)
  iframe.setAttribute('hidden', '')
  document.body.appendChild(iframe)
  // for app_window, do not set unhandled rejection, because having rejected
  // promises in user code is normal condition
  set_error_handler(iframe.contentWindow, false)
  globalThis.app_window = iframe.contentWindow
  init_app_window(globalThis.app_window)
}

// Open another browser window so user can interact with application
// TODO test in another browsers
export const open_app_window = state => {
  // TODO set_error_handler? Or we dont need to set_error_handler for child
  // window because error is always caught by parent window handler?
  globalThis.app_window.close()
  globalThis.app_window = open(get_html_url(state))
  init_app_window(globalThis.app_window)
}

const init_app_window = w => {

  const is_loaded = () => {
    const nav = w.performance.getEntriesByType("navigation")[0]
    return nav != null && nav.loadEventEnd > 0
  }

  const add_load_handler = () => {
    /*
      Wait until 'load event', then set unload handler. The page after
      window.open seems to go through these steps:

      - about:blank gets opened
      - Real URL get opened
      - 'unload' event for about:blank page
      - 'load event for real URL

      if we set unload handler right now, then it will be fired for unload
        event for about:blank page
    */
    if(is_loaded()) {
      // Already loaded
      add_unload_handler()
      on_window_load(w)
    } else {
      w.addEventListener('load', () => {
        add_unload_handler()
        // Wait until `load` event before executing code, because service worker that
        // is responsible for loading external modules seems not working until `load`
        // event fired.  TODO: better register SW explicitly and don't rely on
        // already registered SW?
        on_window_load(w)
      })
    }
  }

  const add_unload_handler = () => {
    w.addEventListener('unload', (e) => {
      // Set timeout to 100ms because it takes some time for page to get closed
      // after triggering 'unload' event
      setTimeout(() => {
        if(w.closed && w == globalThis.app_window) {
          // If by that time w.closed was set to true, then page was
          // closed. Get back to using iframe
          globalThis.app_window = iframe.contentWindow
          reload_app_window(get_state())
        } else {
          add_load_handler()
        }
      }, 100)
    })
  }

  add_load_handler()
}

export const reload_app_window = state => {
  // TODO after window location reload, open_app_window command will be fired.
  // Maybe we should have separate commands for open_app_window and
  // reload_app_window?
  globalThis.app_window.location = get_html_url(state)
}



const get_entrypoint_settings = () => {

  const params = new URLSearchParams(window.location.search)

  const entrypoint = null 
    ?? params.get('entrypoint')
    ?? localStorage.entrypoint
    ?? ''

  return {
    current_module: params.get('entrypoint') ?? localStorage.current_module ?? '',
    entrypoint,
    html_file: localStorage.html_file ?? '',
  }
}


export const open_directory = () => {
  if(globalThis.showDirectoryPicker == null) {
    throw new Error('Your browser is not supporting File System Access API')
  }
  open_dir(true).then(dir => {
    exec('load_dir', dir, true, get_entrypoint_settings())
  })
}

export const close_directory = async () => {
  close_dir()
  exec('load_dir', await examples_promise, false, get_entrypoint_settings())
}


let COMMANDS
let ui
let state

export const init = async (container, _COMMANDS) => {
  COMMANDS = _COMMANDS

  set_error_handler(window)

  const default_module = {'': localStorage.code || EXAMPLE}
  let initial_state
  const project_dir = await open_dir(false)
  if(project_dir == null) {
    initial_state = {
      project_dir: await examples_promise,
      files: default_module,
      has_file_system_access: false,
    }
  } else {
    initial_state = {
      project_dir,
      files: default_module,
      has_file_system_access: true,
    }
  }

  state = COMMANDS.get_initial_state(
    {
      ...initial_state, 
      on_deferred_call: (...args) => exec('on_deferred_call', ...args)
    },

    get_entrypoint_settings(),
  )

  // Expose state for debugging
  globalThis.__state = state
  ui = new UI(container, state)
  // Expose for debugging
  globalThis.__ui = ui

  render_initial_state(ui, state)

  open_run_iframe(state)
}

export const get_state = () => state

export const with_code_execution = (action, state = get_state()) => {
  /*
    supress is_recording_deferred_calls while rendering, because rendering may
    call toJSON(), which can call trigger deferred call (see lodash.js lazy
    chaining)
  */
  if(state.eval_cxt != null) {
    state.eval_cxt.is_recording_deferred_calls = false
  }

  try {
    return action()
  } finally {
    if(state.eval_cxt != null) {
      state.eval_cxt.is_recording_deferred_calls = true
    }
  }
}

export const exec = (cmd, ...args) => {
  if(cmd == 'input' || cmd == 'write') {
    // Do not print file to console
    console.log('exec', cmd)
  } else {
    console.log('exec', cmd, ...args)
  }

  const comm = cmd.split('.').reduce(
    (comm, segment) => comm?.[segment],
    COMMANDS
  )
  if(comm == null) {
    throw new Error('command ' + cmd + ' + not found')
  }

  const result = comm(state, ...args)
  console.log('nextstate', result)

  let nextstate, effects
  if(result.state != null) {
    ({state: nextstate, effects} = result)
  } else {
    nextstate = result
    effects = null
  }

  // Sanity check
  if(state?.current_module == null) {
    console.error('command did not return state, returned', result)
    throw new Error('illegal state')
  }


  with_code_execution(() => {
    apply_side_effects(state, nextstate, cmd, ui);

    if(effects != null) {
      (Array.isArray(effects) ? effects : [effects]).forEach(e => {
        if(e.type == 'write' || e.type == 'save_to_localstorage') {
          // do not spam to console
          console.log('apply effect', e.type)
        } else {
          console.log('apply effect', e.type, ...(e.args ?? []))
        }
        EFFECTS[e.type](nextstate, e.args, ui)
      })
    }
  }, nextstate)



  // Expose for debugging
  globalThis.__prev_state = state
  globalThis.__state = nextstate
  state = nextstate
}