Tweak some samples for clarity and better behavior in playgrounds

content/2-templating/5-dom-ref/alpine/index.html

@@ -1 +1 @@
-<input x-init="$el.focus();" />
+<input type="checkbox" x-init="$el.indeterminate = true;" />

content/2-templating/5-dom-ref/angular/inputindeterminate.component.ts

@@ -0,0 +1,14 @@
+import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-inputindeterminate",
+  template: `<input type="checkbox" #inputRef />`,
+})
+export class InputindeterminateComponent implements OnInit {
+  @ViewChild("inputRef", { static: true })
+  inputRef!: ElementRef<HTMLInputElement>;
+
+  ngOnInit() {
+    this.inputRef.nativeElement.indeterminate = true;
+  }
+}

content/2-templating/5-dom-ref/aurelia1/input-indeterminate.html

@@ -0,0 +1,3 @@
+<template>
+  <input type="checkbox" ref="inputElement" />
+</template>

content/2-templating/5-dom-ref/aurelia1/input-indeterminate.ts

@@ -0,0 +1,7 @@
+export class InputIndeterminate {
+  inputElement: HTMLInputElement;
+
+  attached() {
+    this.inputElement.indeterminate = true;
+  }
+}

content/2-templating/5-dom-ref/ember/input-indeterminate.hbs

@@ -0,0 +1 @@
+<input type="checkbox" {{this.autofocus}} />

content/2-templating/5-dom-ref/ember/input-focused.js → content/2-templating/5-dom-ref/ember/input-indeterminate.js

@@ -1,8 +1,8 @@
 import Component from "@glimmer/component";
 import { modifier } from "ember-modifier";
 
-export default class InputFocused extends Component {
-  autofocus = modifier((element) => element.focus());
+export default class InputIndeterminate extends Component {
+  indeterminate = modifier((element) => element.indeterminate = true);
 }
 
 /**
@@ -13,6 +13,6 @@ export default class InputFocused extends Component {
  *    - ember-modifier becomes default part of blueprint
  *  - https://github.com/emberjs/rfcs/pull/757
  *    - dependencyless support for using
- *       `autofocus = element => element.focus()`
+ *       `indeterminate = element => element.indeterminate = true`
  *       instead
  */

content/2-templating/5-dom-ref/lit/input-indeterminate.js

@@ -0,0 +1,16 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref, createRef } from "lit/directives/ref.js";
+
+@customElement("input-indeterminate")
+export class InputIndeterminate extends LitElement {
+  inputRef = createRef();
+
+  firstUpdated() {
+    this.inputRef.value.indeterminate = true;
+  }
+
+  render() {
+    return html`<input type="checkbox" ${ref(this.inputRef)} />`;
+  }
+}

content/2-templating/5-dom-ref/qwik/InputIndeterminate.tsx

@@ -0,0 +1,9 @@
+import { component$, useClientEffect$, useRef } from "@builder.io/qwik";
+
+export const InputIndeterminate = component$(() => {
+  const inputElement = useRef(null);
+
+  useClientEffect$(() => inputElement.current.indeterminate = true);
+
+  return <input type="checkbox" ref={inputElement} />;
+});

content/2-templating/5-dom-ref/react/InputIndeterminate.jsx

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export default function InputIndeterminate() {
+  const inputElement = useRef(null);
+
+  useEffect(() => inputElement.current.indeterminate = true, []);
+
+  return <input type="checkbox" ref={inputElement} />;
+}

content/2-templating/5-dom-ref/solid/InputIndeterminate.jsx

@@ -0,0 +1,9 @@
+import { onMount } from "solid-js";
+
+export default function InputIndeterminate() {
+  let inputElement;
+
+  onMount(() => inputElement.indeterminate = true);
+
+  return <input ref={inputElement} type="checkbox" />;
+}

content/2-templating/5-dom-ref/svelte/InputFocused.svelte → content/2-templating/5-dom-ref/svelte/InputIndeterminate.svelte

@@ -4,8 +4,8 @@
   let inputElement;
 
   onMount(() => {
-    inputElement.focus();
+    inputElement.indeterminate = true;
   });
 </script>
 
-<input bind:this={inputElement} />
+<input bind:this={inputElement} type="checkbox" />

content/2-templating/5-dom-ref/vue2/InputIndeterminate.vue

@@ -0,0 +1,14 @@
+<script>
+export default {
+  mounted() {
+    this.$refs.inputElement.indeterminate = true;
+  },
+};
+</script>
+
+<template>
+  <input
+    ref="inputElement"
+    type="checkbox"
+  >
+</template>

content/2-templating/5-dom-ref/vue3/InputFocused.vue → content/2-templating/5-dom-ref/vue3/InputIndeterminate.vue

@@ -4,10 +4,13 @@ import { ref, onMounted } from "vue";
 const inputElement = ref();
 
 onMounted(() => {
-  inputElement.value.focus();
+  inputElement.value.indeterminate = true;
 });
 </script>
 
 <template>
-  <input ref="inputElement">
+  <input
+    ref="inputElement"
+    type="checkbox"
+  >
 </template>

content/2-templating/6-conditional/alpine/index.html

@@ -4,11 +4,7 @@
   lightIndex: 0,
   get light() { return this.TRAFFIC_LIGHTS[this.lightIndex] },
   nextLight() {
-    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0
-    } else {
-      this.lightIndex++
-    }
+    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length
   }
 }"
 >

content/2-templating/6-conditional/angular/trafficlight.component.ts

@@ -25,10 +25,6 @@ export class TrafficlightComponent {
   }
 
   nextLight() {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 }

content/2-templating/6-conditional/aurelia1/traffic-light.ts

@@ -4,12 +4,7 @@ export class App {
   light: string = this.TRAFFIC_LIGHTS[this.lightIndex];
 
   nextLight() {
-    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
-
+    this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
     this.light = this.TRAFFIC_LIGHTS[this.lightIndex];
   }
 }

content/2-templating/6-conditional/ember/traffic-light.js

@@ -11,10 +11,6 @@ export default class TrafficLight extends Component {
   }
 
   nextLight = () => {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   };
 }

content/2-templating/6-conditional/lit/traffic-light.js

@@ -14,11 +14,7 @@ export class TrafficLight extends LitElement {
   }
 
   nextLight() {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex = this.lightIndex + 1;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 
   render() {

content/2-templating/6-conditional/qwik/TrafficLight.tsx

@@ -10,11 +10,7 @@ export const App = component$(() => {
   const light = TRAFFIC_LIGHTS[store.lightIndex];
 
   const nextLight = $(() => {
-    if (store.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      store.lightIndex = 0;
-    } else {
-      store.lightIndex += 1;
-    }
+    store.lightIndex = (store.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   });
 
   return (

content/2-templating/6-conditional/react/TrafficLight.jsx

@@ -8,11 +8,7 @@ export default function TrafficLight() {
   const light = TRAFFIC_LIGHTS[lightIndex];
 
   function nextLight() {
-    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      setLightIndex(0);
-    } else {
-      setLightIndex(lightIndex + 1);
-    }
+    setLightIndex((lightIndex + 1) % TRAFFIC_LIGHTS.length);
   }
 
   return (

content/2-templating/6-conditional/solid/TrafficLight.jsx

@@ -8,11 +8,7 @@ export default function TrafficLight() {
   const light = () => TRAFFIC_LIGHTS[lightIndex()];
 
   function nextLight() {
-    if (lightIndex() + 1 > TRAFFIC_LIGHTS.length - 1) {
-      setLightIndex(0);
-    } else {
-      setLightIndex(lightIndex() + 1);
-    }
+    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
   }
 
   return (

content/2-templating/6-conditional/svelte/TrafficLight.svelte

@@ -5,11 +5,7 @@
   $: light = TRAFFIC_LIGHTS[lightIndex];
 
   function nextLight() {
-    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      lightIndex = 0;
-    } else {
-      lightIndex++;
-    }
+    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 </script>
 

content/2-templating/6-conditional/vue2/TrafficLight.vue

@@ -13,11 +13,7 @@ export default {
   },
   methods: {
     nextLight() {
-      if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-        this.lightIndex = 0;
-      } else {
-        this.lightIndex++;
-      }
+      this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
     },
   },
 };

content/2-templating/6-conditional/vue3/TrafficLight.vue

@@ -6,11 +6,7 @@ const lightIndex = ref(0);
 const light = computed(() => TRAFFIC_LIGHTS[lightIndex.value]);
 
 function nextLight() {
-  if (lightIndex.value + 1 > TRAFFIC_LIGHTS.length - 1) {
-    lightIndex.value = 0;
-  } else {
-    lightIndex.value++;
-  }
+  lightIndex.value = (lightIndex.value + 1) % TRAFFIC_LIGHTS.length;
 }
 </script>
 

content/3-lifecycle/1-on-mount/alpine/index.html

@@ -1,6 +1,6 @@
 <p
-  x-data="{ pageTitle: '' }"
-  x-init="$nextTick(() => { pageTitle = document.title })"
+  x-data="{ viewportSize: '' }"
+  x-init="$nextTick(() => { viewportSize = `${window.innerWidth} × ${window.innerHeight}` })"
 >
-  Page title: <span x-text="pageTitle"></span>
+  Viewport size: <span x-text="viewportSize"></span>
 </p>