loilo

// Arbitrarily nested object containing Promises goes in
// Plain data structure comes out
async function deepAsync (object) {
  // Walk arrays
  if (Array.isArray(object)) {
    return Promise.all(object.map(async item => await deepAsync(item)))

  // Walk objects
  } else if (typeof object === 'object' && String(object) === '[object Object]') {
    return Object

loilo

Make Vue events bubble

Vue events don't bubble the component tree on their own. However when writing wrapper components this can be the desired behaviour.

This code registers a global bubble directive which allows to re-emit all given events:

Let's say we want to bubble events start, accelerate and brake of our component Car.

Without any help, we'd roughly have to do this:

loilo

PHP arg string generator

Generate a command line arg string from an associative array.

This is purely built for functionality, not for beauty: no grouping of shorthand flags, all args will be escaped and wrapped in single quotes, no matter if needed or not.

Usage

Associative key-value pairs will be treated as command line options while array entries with no/integer keys will be used as regular arguments.

loilo

function magicMethods (clazz) {
  // A toggle switch for the __isset method
  // Needed to control "prop in instance" inside of getters
  let issetEnabled = true

  const classHandler = Object.create(null)

  // Trap for class instantiation
  classHandler.construct = (target, args, receiver) => {
    // Wrapped class instance

loilo

This is about how to split a GitHub pull request, following a real in-the-wild example.

So it happened that I once wanted to fix a bug (#832) on the shelljs repository.

I forked the repository, cloned it and created a new branch called ln-directory-dest. I fixed the bug, created a pull request, and implemented initial review feedback.

At this point, I had added the commits A, B, C, D, E and [F](https://github.com/Loilo/shelljs/commit/946ab48bf5cf9c8aac03407

loilo

Keep pre-existing DOM alive in Vue

For my use cases, Vue has one critical pitfall: I frequently have/want to use Vue components with <slot>s as wrappers for content from a CMS which I don't have control over. That is, the content comes over the wire via HTML, and I have to activate Vue for some of it.

<interactive-element>
  <p>Slot content I don't have control over</p>
</interactive-element>

I need to activate the Vue component <interactive-element>.

loilo

class HashStateManager {
  constructor ({ global = window, prefix = '!' } = {}) {
    this.window = global
    this.prefix = prefix
    this.callbacks = new Set
    this.urlListenerEnabled = true
    this.boundUrlListener = this.urlListener.bind(this)

    this.internalState = this.parseState()
    this.publicState = this.createState()

loilo

<?php

require_once __DIR__ . "/vendor/erasys/dnode-php-sync-client/DnodeSyncClient.php";

class DNode
{
    protected $connection;

    public static function connect($host, $port)
    {

loilo

Vue: Pass Slots through from Parent to Child Components

The Situation

• We've got some components A, B and C which provide different slots.

  const A = {
    template: `<div><slot name="a">Default A Content</slot></div>`
  }

const B = {

loilo

// Store this as vue.config.js in your project root
// to enable object spread in templates.
// Note that you'll need to provide an Object.assign()
// polyfill for legacy browsers.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')