Marko Bolliger cannap

Vuex and Deep Nested Objects

Vue.js provides a good example for working with deep nested objects or tree data structures. But, how about when Vuex is involved?

Fortunately, Evan You (Vue.js' creator) gives us a hint:

...Or, you can use the same flat structure and use ids to reference nested items, and use a Vuex getter in each tree item component to retrieve its children.

So, how do we go about doing that? After a few attempts getting nested objects' reactivity to work, here is what I did.

Strings

`String.prototype.*`

None of the string methods modify this – they always return fresh strings.

charAt(pos: number): string ^ES1

Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

Some things that are "better" with this BetterPromise implementation:

BetterPromise # then(..) accepts a BetterPromise (or Promise) instance passed directly, instead of requiring a function to return it, so that the promise is linked into the chain.
```
var p = BetterPromise.resolve(42);

var q = Promise.resolve(10);

p.then(console.log).then(q).then(console.log);
```

	const obj = { a: 1, c: 3, b: 2 }

	// Map from object.
	const myMap = new Map(Object.entries(obj))

	// Map to Object.
	// NOTE: Keys will be cast to strings by `.toString`, so any "complex" key like for example `[1, 2]` will become `1,2`
	const newObj = [...myMap.entries()]
	.reduce((acc, [key, value]) => (Object.assign(acc, { [key]: value })), {})

	axios.interceptors.response.use(function (response) {
	return response;
	}, function (error) {

	const originalRequest = error.config;

	if (error.response.status === 401 && !originalRequest._retry) {

	originalRequest._retry = true;


	const contextQuery = require.context('./queries', true, /\.(gql\|graphql)$/)
	const query = {}

	contextQuery.keys().forEach((filename) => {
	const queryKey = filename.split('/').pop().replace(/.gql\|.graphql/i, '')
	query[queryKey] = contextQuery(filename)
	})

	export default query

	let isRefreshing = false;
	let refreshSubscribers = [];

	const instance = axios.create({
	baseURL: Config.API_URL,
	});

	instance.interceptors.response.use(response => {
	return response;
	}, error => {

	( function( wp ) {

	var el = wp.element.createElement;
	var __ = wp.i18n.__;
	wp.blocks.registerBlockType( 'learn-gutenberg/ex2-vue', {
	title: __( 'Learn Gutenberg Example 2: VueJS', 'learn-gutenberg' ),
	category: 'widgets',
	supportHTML: false,
	attributes: {
	who: {

	# Automate npm updating when using nvm-windows
	# Installs npm@latest for the current active node install
	# Source: https://github.com/coreybutler/nvm-windows/issues/300#issuecomment-368192283
	$ErrorActionPreference = "Stop"

	# Create a folder in the Temp directory and return it
	# Source: https://stackoverflow.com/a/34559554/9165387
	function New-TemporaryDirectory {
	$parent = [System.IO.Path]::GetTempPath()
	$name = [System.IO.Path]::GetRandomFileName()

	// Simple API REST (NodeJS - Express - MongoDB)
	const express = require('express')
	const app = express()
	const bodyParser = require('body-parser')
	const mongoose = require('mongoose')
	const bcrypt = require('bcrypt')
	const salt = bcrypt.genSaltSync(10) // fixed salt

	// Tokens Blacklist (a very straightforward alternative to some STS)
	const revokedTokens = new Set()