code examples for vueconf toronto 2020 talk

holepunch

// Example 1: tessa's MyPlace

<!-- View: MyPlace -->
<BasePlace>
  <template v-slot:about>
    <img alt="my face" src="profile_pic.jpg" />
    <p class="pronouns">(she, her)</p>
  </template>

  <template v-slot:default>
    <Pancake />
    <Toast />
    <Apple />
    <Cucumber />
    <Apple />
    <IceCream />
    <Mushroom />
  </template>
</BasePlace>

<!-- Component: BasePlace -->
<h1>{{ placeName }}</h1>
<slot name="about" />
<slot>
  <Banana /><Banana /><Banana />
</slot>



// Example 2: Jason & Matan's MyPlaces

<!-- View: JasonSpace -->
<script>export default {
  data: _ => ({
    bananas: 0
  }),

  methods: {
    sendBanana() {
      ++this.bananas
    }
  }
}
</script>

<template>
<BasePlace placeName="JasonSpace">
  <template v-slot:about>
    <img alt="Jason's photo" src="jason.jpg" />
    <p class="pronouns">(he, him)</p>

    <button name="sendBanana" @click="sendBanana">
      <Banana /><Banana /><Banana />
    </button>
  </template>

  <template v-slot:default>
    <Pancake />
    <Toast />
    <Apple />
    <Cucumber />
    <Apple />
    <IceCream />
    <Mushroom />

    <teleport 
      v-if="bananas" 
      to="#theBananaDimension"
    >
      <Banana 
        v-for="banana in bananas" :
        key="banana" 
        class="banana" 
      />
    </teleport>
  </template>
</BasePlace>
</template>


<!-- View: Matan's Veggie Garden -->
<template>
<BasePlace 
  class="MatansVeggieGarden" 
  placeName="Matan's Veggie Garden"
>
  <template v-slot:about>
    <img alt="Matan's photo" src="matan.jpg" />
    <p class="pronouns">(he, him)</p>
  </template>

  <template v-slot:default>
    <div id="theBananaDimension" />

    <Carrot />
    <Carrot />
    <Mushroom />
    <Mushroom />
    <Cucumber />
    <Cucumber />
    <Tomato />
    <Tomato />
    <Lettuce />
    <Lettuce />
  </template>
</BasePlace>
</template>

<style lang="scss">
.MatansVeggieGarden {
  .Banana {
    background: url('tomato.png') no-repeat;
    background-size: contain;
    width: 80px; // Tomato width
    padding-left: 80px; // Push banana out of view
  }
}
</style>



// Example 3: The Pancake House

<!-- View: PancakeHouse -->
<RoomManish />
<RoomBobby />
<RoomEm />
<RoomKitchen /

<!-- Component: Kitchen -->
<h1 @click="bonusPancake">~The Kitchen~</h1>

<teleport 
  v-if="numBonusPancakes" 
  to=".bonusPancakePortal"
>
  <Pancake 
    v-for="bonusPancake in numBonusPancakes" 
    :key="bonusPancake" 
  />
</teleport>

<h2>orders</h2>
<div class="foodOrders" id="foodOrders" />
</div>

<!-- Component: BaseRoom -->
<script>
export default {
  props: {
    roomOwner: {
      type: String,
      required: true,
    }
  },

  data: _ => ({
    pancakeRequested: false,
    pancakesServed: 0,
  }),

  methods: {
    requestPancake() {
      this.pancakeRequested = true
    },

    servePancake() {
      this.pancakeRequested = false
      this.pancakesServed++
    },
  },
}
</script>

<template>
<h1>{{ roomOwner }}'s Room</h1>

<div class="bonusPancakePortal" />

<Pancake 
  v-for="pancake in pancakesServed" 
  :key="pancake" 
/>

<button @click="requestPancake">
  request pancake
</button>

<teleport 
  to="#foodOrders" 
  v-if="pancakeRequested"
>
  <button @click.stop="servePancake">
    {{ roomOwner }}
  </button>
</teleport>
</template>

<!-- View: RoomEm -->
<img alt="Em's photo" src="em.jpg" />
<BaseRoom roomOwner="Em" />


// Example 4: The Laundry Room — Control Flow

<!-- View: RoomLaundry -->
<script>
import Laundry from './Laundry'

export default {
  components: {
    Laundry,
  },

  data: _ => ({
    laundry: [{
        description: 't-shirt',
        clothingType: 'shirt',
        cleaningInstructions: 'machine wash cold',
      },
      {
        description: 'pants',
        clothingType: 'pants',
        cleaningInstructions: 'dry clean only',
      },
      {
        description: 'sneakers',
        clothingType: 'shoes',
        cleaningInstructions: 'remove dirt using a soft-bristled brush; use a small amount of gentle detergent if necessary',
      },
      {
        description: 'briefcase',
        clothingType: 'accessory',
        cleaningInstructions: 'wipe clean with a soft, damp cloth',
      },
      {
        description: 'towel',
        clothingType: 'linen',
        cleaningInstructions: 'machine wash on highest heat setting',
      },
    ]
  }),
</script>

<template>
<Laundry :laundry="laundry" />
</template>

<!-- Component: Laundry -->
<template v-for="clothingItem in laundry">
  <img
    v-if="needsToBeSentToCleaners(clothingItem.cleaningInstructions)"
    :src="getImgUrl(clothingItem.description)"
    :class="{ isAtCleaners: clothingItem.isAtCleaners }"
    class="dryCleaning"
    @click="sendToCleaners(clothingItem)"
  />

  <img
    v-else-if="!isMachineWashable(clothingItem.cleaningInstructions )"
    :src="getImgUrl(clothingItem.description)"
    class="special"
  />

  <img
    v-else-if="!clothingItem.isClean"
    :src="getImgUrl(`${ clothingItem.description }-wet`)"
  />

  <img 
    v-else 
    :src="getImgUrl(clothingItem.description)" 
    class="hangDry" 
  />
</template>



// Example 5: The Laundry Room — Scoped Slots

<!-- View: RoomLaundry --
<template>
<Laundry :laundry="laundry">
  <template v-slot:specialCleaning="{ specialCareItem }">
    <!-- Can't have v-if on same line as v-slot b/c v-if is evaluated first -->
    <img 
      v-if="needsToBeSentToCleaners(specialCareItem.cleaningInstructions)"
      :src="getImgUrl(specialCareItem.description)"
      :class="{ isAtCleaners: specialCareItem.isAtCleaners }"
      @click="sendToCleaners(specialCareItem)" 
    />
    <img 
      v-else 
      :src="getImgUrl(specialCareItem.description)" 
    />
  </template>

  <template v-slot="{ machineWashableClothing }">
    <img 
      v-if="!machineWashableClothing.isClean" 
      :src="getImgUrl(`${ machineWashableClothing.description }-wet`)"
      @click="runWasherOn(machineWashableClothing)" 
    />
    <img 
      v-else 
      :src="getImgUrl(machineWashableClothing.description)" 
    />
  </template>
</Laundry>

<!-- Component: Laundry -->
<template v-for="clothingItem in laundry" :key="clothingItem.description">
  <slot 
    name="specialCleaning" 
    v-if="!isMachineWashable(clothingItem.cleaningInstructions)"
    v-bind:specialCareItem="clothingItem"
  >
    <img :src="getImgUrl(clothingItem.description)" />
  </slot>
</template>


<template v-for="clothingItem in laundry" :key="clothingItem.description">
  <slot 
    v-if="isMachineWashable(clothingItem.cleaningInstructions)" 
    v-bind:machineWashableClothing="clothingItem"
  >
  <img :src="getImgUrl(clothingItem.description)" />
  </slot>
</template>