nash403

import { useStepper } from '@vueuse/core'
import { ref, toValue } from 'vue'

/**
 * A wrapper around VueUse's `useStepper` that adds async-aware navigation methods.
 * It tracks direction of navigation (forward/backward) and only transitions between steps
 * if the provided async action succeeds.
 *
 * The transition functions (`goXXX`) return a tuple `[success, error, result]`:
 * - `success`: Boolean indicating whether the async action succeeded.

nash403

// Types for the result object with discriminated union
type Success<T> = {
  data: T;
  error: null;
};

type Failure<E> = {
  data: null;
  error: E;
};

nash403

// auth middleware
import { useAuthStore } from "@/stores/auth";

export default async function auth({ next }) {
  const authStore = useAuthStore();

  const user = await authStore.checkAuth();

  if (!( 'id' in user)) {
    console.log("Not logged in");

nash403

useReactiveMap composable

Vue 3 composable to create a reactive Map to use as a small local database.

In memory by default, users can pass a custom map object to override that behavior.

The returned reactive Map is extended with ability to standardize custom key generation.

nash403

Dynamic composable loading with Vue 3

Reactive watcher to load effect scopes dynamically depending on the watched value. Typically, the effect scope you load is a function that contains reactive logic in the same way you would have in a component setup function.

Example use:

const watchSource = ref(...) // anything
 

nash403

// Copied from this article https://kentcdodds.com/blog/implementing-a-simple-state-machine-library-in-javascript
function createMachine(stateMachineDefinition) {
	const machine = {
		value: stateMachineDefinition.initialState,
		transition(currentState, event) {
			const currentStateDefinition = stateMachineDefinition[currentState]
			const destinationTransition = currentStateDefinition.transitions[event]
			if (!destinationTransition) {
				return
			}

nash403

<script lang="ts">
  import { VNodeData } from 'vue'
  import { defineComponent } from '@vue/composition-api'

  /**
   * Use this component to render raw SVG content
   * without the need to use the `v-html` directive
   * which requires a parent node in Vue 2.x (ex: `<div v-html="..."></div>`).
   * `<NSvgFragment :src="..." />` will directly render the svg tag with its content.
   * */

nash403

// Prop/Method Decorator with no arguments
function logDecorator(t, n, descriptor) {
  const original = descriptor.value;
  if (typeof original === 'function') {
    descriptor.value = function(...args) {
      console.log(`Arguments: ${args}`);
      try {
        const result = original.apply(this, args);
        console.log(`Result: ${result}`);
        return result;

nash403

/*
Two things will happen here:
1) normalize()ing to NFD Unicode normal form decomposes combined graphemes into the combination of simple ones. The è of Crème ends up expressed as e + ̀.
2) Using a regex character class to match the U+0300 → U+036F range, it is now trivial to globally get rid of the diacritics, which the Unicode standard conveniently groups as the Combining Diacritical Marks Unicode block.
*/
export const normalizeChar = char => char.normalize('NFD').replace(/[\u0300-\u036f]/g, '')

export const normalizeStr = str => str.split('').map(normalizeChar).join('')

nash403

const fs = require('fs')
const path = require('path')

const files = []

fs.readdirSync(__dirname).forEach(file => {
  const i = file.indexOf(path.basename(file))
  const j = file.indexOf(path.extname(file))
  files.push(file.substring(i, j))
})