LinkList.vue #

<!--
Url: https://adamwathan.me/renderless-components-in-vuejs/

Jeho pristup je predavani atributu a eventu jako cely objekt, moje je  :bookmarkNow a prijde mi to lepsi teda ... ale ukladam.

-->

<script setup>
const props = defineProps({
  links: {
    type: Array,
    required: true
  }
})

const bookmark = (link) => {
  link.bookmarked = !link.bookmarked;
}
</script>

<template>
  <slot 
    v-for="(link, index) in links" 
    :key="link.id"
    :link="link"
    :bookmarkNow="() => bookmark(link)"
    :bookmarkButtonAttrs="{
      style: link.bookmarked ? 'font-weight: bold;' : ''
    }"
    :bookmarkButtonEvents="{
      click: () => bookmark(link)
    }"
  />
</template>

Sh #

_

ShallowRef.vue #

<script setup>
import { shallowRef, watchEffect, triggerRef } from 'vue'

  const user = shallowRef({
    name: 'John',
    job: 'BFU',
    age: 90
  })

// Log the user whenever it changes
  watchEffect(() => {
    console.log('LOG: watchEffect', user)
  });
 
 // Update nested state (no log happens)
 setTimeout(() => {
   user.value.name = 'Martin';
   console.log('LOG: user name changed')
 }, 2000)
 
 
 // Force a reactive update to trigger
  setTimeout(() => {
    triggerRef(user);
    console.log('LOG: whole object changed')
  }, 4000)

  // [user object]
</script>

<

app.js #

<script setup>
import { ref } from 'vue'
import Modal from './Modal.vue'

const openByRef = ref(false)

setTimeout(() => {
  openByRef.value = true
}, 2000)
</script>

<template>
  <Modal v-model="openByRef">

    <template #buttons="slotProps">
      inner state: {{ slotProps.opened }} <br />
      outer state: {{ openByRef }} <br /><br />
      <button @click="slotProps.open()">open</button> | 
      <button @click="slotProps.close()">close</button>
  
      <br /><br />
    </template>

    <template #default="slotProps">
      OBSAH MODALU
    </template>

  </Modal>
</template>

readme.md #

readme.md #

splat.php #

<?php


// rest ... a,b,c,d,e => []
function concatenate($transform, ...$strings) {
  $string = '';
  foreach($strings as $piece) {
    $string .= $piece;
  }
  return($transform($string));
}

echo concatenate("strtoupper", "I'm ", 20 + 2, " years", " old."); // I'M 22 YEARS OLD.


// spread ... []
function add($a, $b, $c) {
    return $a + $b + $c;
}

$operators = [2, 3];
echo add(1, ...$operators); // 6

enum.js #

enum Direction {
  Up,
  Down,
  Left,
  Right
}

const Colors = Object.freeze({
    RED:   Symbol("red"),
    BLUE:  Symbol("blue"),
    GREEN: Symbol("green")
});

/**
 * Enum for common colors.
 * @readonly
 * @enum {{name: string, hex: string}}
 */
const Colors = Object.freeze({
  RED:   { name: "red", hex: "#f00" },
  BLUE:  { name: "blue", hex: "#00f" },
  GREEN: { name: "green", hex: "#0f0" }
});


function createEnum(values) {
  const enumObject = {};
  for (const val of values) {
    enumObject[val] = val;
  }
  return Object.freeze(enumObject);
}

// { Up: 'Up', Down: 'Down', Left: 'Left', Right: 'Right' }
createEnum(['Up', 'Down', 'Left', 'Right']);



class Direction {
  static Up = new Direction('Up');
  static Down = new Direction('Down');
  static Left = new Direction('Left');
  static Right = new Direction('Right');

  constructor(name) {
    this.name = name;
  }
  toString() {
    return `Direction.${this.name}`;
  }
}

toggle.js #

const toggle = (...list) => 
{
    // To track the cycle.
    let current = -1;
    const length = list.length;
    return function () 
    {
        // Increment current and used modulo to cycle back to the start.
        current = (current + 1) % length;

        // Returing the current element.
        return list[current];
    };
};

const toggleFunction = toggle("ON","OF");
console.log(toggleFunction()); // Prints "ON"
console.log(toggleFunction()); // Prints "OF"
console.log(toggleFunction()); // Prints "ON"

copy.js #

// https://javascript.plainenglish.io/structuredclone-the-easiest-way-to-deep-clone-objects-in-javascript-c503b536266b

const testData = {
  number: 123,
  string: "test",
  undefined: undefined,
  null: null,
  boolean: true,
  object: { a: 1, b: { c: 2 } },
  array: [1, 2, { d: 3 }],
  // function: function() { return "hello"; },
  map: new Map([["key1", "value1"], ["key2", "value2"]]),
  set: new Set([1, 2, 3]),
  date: new Date(),
  error: new Error("An error occurred"),
  regex: /test/i,
  // domNode: document.createElement("div")
}

const structuredCloneResult = structuredClone(testData)
console.log(structuredCloneResult)
/*
{
  number: 123,
  string: "test",
  undefined: undefined,
  null: null,
  boolean: true,
  object: { a: 1, b: { c: 2 } },
  array: [1, 2, { d: 3 }],
  function: undefined, // Functions are not cloned
  map: Map { 'key1' => 'value1', 'key2' => 'value2' },
  set: Set { 1, 2, 3 },
  date: 2023-05-23T09:00:00.000Z,
  error: Error: An error occurred,
  regex: /test/i,
  domNode: undefined // DOM nodes are not cloned
}
*/