node-runner.js

const Path = require('path')
const fnPug = require('fn-pug')
const stylus = require('stylus')
const poststylus = require('poststylus')
const autoprefix = require('autoprefixer')
const { addHook } = require('pirates')
const basic = require('basichtml')
const indexeddbshim = require('indexeddbshim');
const runtime = "require('fn-pug/lib/runtime/vdom').default(require('virtual-dom/h'))"

function fnJadeTransform(source, file) {
  const header =`var $$ = ${runtime}`
  const { code } = fnPug(source, { file })
  const footer = 'module.exports = template'
  
  return [header, code, footer].join('\n')
}

const postcss = poststylus([
  'postcss-alias',
  'postcss-short',
  'postcss-aspect-ratio',
  'postcss-speech-bubble',
  'postcss-triangle',
  'postcss-circle',
  autoprefix({
    browsers: ['ie 10-11', 'iOS 8-10', 'Edge 14-15'],
  }),
])

function stylusTransform(source, file) {
  let styles = ''
  stylus(source)
    .use(postcss)
    .define('assetPath', (d) => {
      return new nodes.Literal(`url(/${d.val})`)
    })
    .set('filename', file)
    .set('paths', [
      Path.resolve(__dirname, '..'),
    ])
    .render(function(err, css){
      styles = css
    })
    
  return `module.exports = \`${styles}\``
}

addHook(stylusTransform, { exts: ['.styl', '.css'] })
addHook(fnJadeTransform, { exts: ['.jade', '.pug'] })
require("@babel/register")

basic.init()

Object.assign(global, basic, {
  window: global,
  location: new URL('http://fanteam-static.api.scoutgg-stg.net'),
  navigator: process,
  requestAnimationFrame(cb) {
    return process.nextTick(cb)
  },
  getComputedStyle(element) {
    return element.style
  },
  localStorage: {
    getItem(name) {
      return this[name]
    },
    setItem(name, value) {
      return this[name] = value
    }
  }
})

indexeddbshim()

global.addEventListener = global.addEventListener.bind(global)

const { default: config } = require('../source/services/config')

Text.prototype.replaceData = function(offset, count = 0, data) {
  const text = this.data
  this.data = (
    text.slice(0, offset) + 
    data + 
    text.slice(offset+count+1)
  )
}

config.fetch = require('node-fetch')
config.navigate = function() {

}

const { default: Lobby } = require('../source/organisms/fantasy-lobby/fantasy-lobby')

const lobby = Lobby()

document.body.append(lobby)

lobby.$initialize.then(() => {
  console.log(lobby)
  debugger
})