chore(emit-to-parent): variable renaming

.gitignore

@@ -28,3 +28,4 @@ dist-ssr
 
 src/generatedContent
 
+archive

content/4-component-composition/2-emit-to-parent/alpine/index.html

@@ -1,12 +1,12 @@
 <div
-  x-data="{ canCome: true }"
-  x-on:yes="canCome = true"
-  x-on:no="canCome = false"
+  x-data="{ isHappy: true }"
+  x-on:yes="isHappy = true"
+  x-on:no="isHappy = false"
 >
   <p>Are you happy?</p>
   <div>
     <button x-on:click="$dispatch('yes')">YES</button>
     <button x-on:click="$dispatch('no')">NO</button>
   </div>
-  <p style="font-size: 50px" x-text="canCome ? '😀' : '😥'"></p>
+  <p style="font-size: 50px" x-text="isHappy ? '😀' : '😥'"></p>
 </div>

content/4-component-composition/2-emit-to-parent/angular/app.component.ts

@@ -8,17 +8,17 @@ import { Component } from "@angular/core";
     <app-answer-button (yes)="onAnswerYes()" (no)="onAnswerNo()">
     </app-answer-button>
 
-    <p style="font-size: 50px">{{ canCome ? "😀" : "😥" }}</p>
+    <p style="font-size: 50px">{{ isHappy ? "😀" : "😥" }}</p>
   `,
 })
 export class AppComponent {
-  canCome = true;
+  isHappy = true;
 
   onAnswerYes() {
-    this.canCome = true;
+    this.isHappy = true;
   }
 
   onAnswerNo() {
-    this.canCome = false;
+    this.isHappy = false;
   }
 }

content/4-component-composition/2-emit-to-parent/aurelia1/app.html

@@ -2,5 +2,5 @@
   <require from="./answer-button"></require>
   <p>Can I come ?</p>
   <answer-button action-handler.call="handleAnswer(reply)"></answer-button>
-  <p style="font-size: 50px">${canCome ? "😀" : "😥"}</p>
+  <p style="font-size: 50px">${isHappy ? "😀" : "😥"}</p>
 </template>

content/4-component-composition/2-emit-to-parent/aurelia1/app.ts

@@ -1,7 +1,7 @@
 export class App {
-  canCome = false;
+  isHappy = false;
 
   handleAnswer(...reply) {
-    this.canCome = reply[0] === "yes" ? true : false;
+    this.isHappy = reply[0] === "yes" ? true : false;
   }
 }

content/4-component-composition/2-emit-to-parent/aurelia2/app.html

@@ -1,3 +1,3 @@
 <p>Can I come ?</p>
 <answer-button action-handler.bind="handleAnswer"></answer-button>
-<p style="font-size: 50px">${canCome ? "😀" : "😥"}</p>
+<p style="font-size: 50px">${isHappy ? "😀" : "😥"}</p>

content/4-component-composition/2-emit-to-parent/aurelia2/app.ts

@@ -1,7 +1,7 @@
 export class App {
-  canCome = false;
+  isHappy = false;
 
   handleAnswer = (answer = false) => {
-    this.canCome = answer;
+    this.isHappy = answer;
   };
 }

content/4-component-composition/2-emit-to-parent/ember/app.hbs

@@ -1,3 +1,3 @@
 <p>Are you happy?</p>
 <AnswerButton @onYes={{this.handleYes}} @onNo={{this.handleNo}} />
-<p style="font-size: 50px;">{{if this.canCome "😀" "😥"}}</p>
+<p style="font-size: 50px;">{{if this.isHappy "😀" "😥"}}</p>

content/4-component-composition/2-emit-to-parent/ember/app.js

@@ -2,8 +2,8 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
 export default class App extends Component {
-  @tracked canCome = true;
+  @tracked isHappy = true;
 
-  handleYes = () => (this.canCome = true);
-  handleNo = () => (this.canCome = false);
+  handleYes = () => (this.isHappy = true);
+  handleNo = () => (this.isHappy = false);
 }

content/4-component-composition/2-emit-to-parent/lit/x-app.js

@@ -6,14 +6,14 @@ import "./answer-button";
 @customElement("x-app")
 export class XApp extends LitElement {
   @state()
-  canCome = true;
+  isHappy = true;
 
   onAnswerNo() {
-    this.canCome = false;
+    this.isHappy = false;
   }
 
   onAnswerYes() {
-    this.canCome = true;
+    this.isHappy = true;
   }
 
   render() {
@@ -23,7 +23,7 @@ export class XApp extends LitElement {
         @yes=${this.onAnswerYes}
         @no=${this.onAnswerNo}
       ></answer-button>
-      <p style="font-size: 50px;">${this.canCome ? "😀" : "😥"}</p>
+      <p style="font-size: 50px;">${this.isHappy ? "😀" : "😥"}</p>
     `;
   }
 }

content/4-component-composition/2-emit-to-parent/mithril/App.js

@@ -2,16 +2,16 @@ import m from "mithril";
 import AnswerButton from "./AnswerButton.js";
 
 export default function App() {
-  let canCome = true;
-  const onAnswerNo = () => (canCome = false);
-  const onAnswerYes = () => (canCome = true);
+  let isHappy = true;
+  const onAnswerNo = () => (isHappy = false);
+  const onAnswerYes = () => (isHappy = true);
 
   return {
     view: () =>
       m(
         "",
         m("p", "Are you happy?"),
-        m("p", { style: { fontSize: 50 } }, canCome ? "😀" : "😥"),
+        m("p", { style: { fontSize: 50 } }, isHappy ? "😀" : "😥"),
         m(AnswerButton, { onYes: onAnswerYes, onNo: onAnswerNo })
       ),
   };

content/4-component-composition/2-emit-to-parent/qwik/App.tsx

@@ -3,22 +3,22 @@ import AnswerButton from "./AnswerButton";
 
 const App = component$(() => {
   const store = useStore({
-    canCome: true,
+    isHappy: true,
   });
 
   const onAnswerNo = $(() => {
-    store.canCome = false;
+    store.isHappy = false;
   });
 
   const onAnswerYes = $(() => {
-    store.canCome = true;
+    store.isHappy = true;
   });
 
   return (
     <>
       <p>Are you happy?</p>
       <AnswerButton onYes$={onAnswerYes} onNo$={onAnswerNo} />
-      <p style={{ fontSize: 50 }}>{store.canCome ? "😀" : "😥"}</p>
+      <p style={{ fontSize: 50 }}>{store.isHappy ? "😀" : "😥"}</p>
     </>
   );
 });

content/4-component-composition/2-emit-to-parent/react/App.jsx

@@ -2,21 +2,21 @@ import { useState } from "react";
 import AnswerButton from "./AnswerButton.jsx";
 
 export default function App() {
-  const [canCome, setCanCome] = useState(true);
+  const [isHappy, setIsHappy] = useState(true);
 
   function onAnswerNo() {
-    setCanCome(false);
+    setIsHappy(false);
   }
 
   function onAnswerYes() {
-    setCanCome(true);
+    setIsHappy(true);
   }
 
   return (
     <>
       <p>Are you happy?</p>
       <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
-      <p style={{ fontSize: 50 }}>{canCome ? "😀" : "😥"}</p>
+      <p style={{ fontSize: 50 }}>{isHappy ? "😀" : "😥"}</p>
     </>
   );
 }

content/4-component-composition/2-emit-to-parent/solid/App.jsx

@@ -2,21 +2,21 @@ import { createSignal } from "solid-js";
 import AnswerButton from "./AnswerButton.jsx";
 
 export default function App() {
-  const [canCome, setCanCome] = createSignal(true);
+  const [isHappy, setIsHappy] = createSignal(true);
 
   function onAnswerNo() {
-    setCanCome(false);
+    setIsHappy(false);
   }
 
   function onAnswerYes() {
-    setCanCome(true);
+    setIsHappy(true);
   }
 
   return (
     <>
       <p>Are you happy?</p>
       <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
-      <p style={{ "font-size": "50px" }}>{canCome() ? "😀" : "😥"}</p>
+      <p style={{ "font-size": "50px" }}>{isHappy() ? "😀" : "😥"}</p>
     </>
   );
 }

content/4-component-composition/2-emit-to-parent/svelte/App.svelte

@@ -1,17 +1,17 @@
 <script>
   import AnswerButton from "./AnswerButton.svelte";
 
-  let canCome = true;
+  let isHappy = true;
 
   function onAnswerNo() {
-    canCome = false;
+    isHappy = false;
   }
 
   function onAnswerYes() {
-    canCome = true;
+    isHappy = true;
   }
 </script>
 
 <p>Are you happy?</p>
 <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
-<p style="font-size: 50px;">{canCome ? "😀" : "😥"}</p>
+<p style="font-size: 50px;">{isHappy ? "😀" : "😥"}</p>

content/4-component-composition/2-emit-to-parent/vue2/App.vue

@@ -6,15 +6,15 @@ export default {
   },
   data() {
     return {
-      canCome: true,
+      isHappy: true,
     };
   },
   methods: {
     onAnswerNo() {
-      this.canCome = false;
+      this.isHappy = false;
     },
     onAnswerYes() {
-      this.canCome = true;
+      this.isHappy = true;
     },
   },
 };
@@ -23,9 +23,12 @@ export default {
 <template>
   <div>
     <p>Are you happy?</p>
-    <AnswerButton @yes="onAnswerYes" @no="onAnswerNo" />
+    <AnswerButton
+      @yes="onAnswerYes"
+      @no="onAnswerNo"
+    />
     <p style="font-size: 50px">
-      {{ canCome ? "😀" : "😥" }}
+      {{ isHappy ? "😀" : "😥" }}
     </p>
   </div>
 </template>

content/4-component-composition/2-emit-to-parent/vue3/App.vue

@@ -2,21 +2,24 @@
 import { ref } from "vue";
 import AnswerButton from "./AnswerButton.vue";
 
-let canCome = ref(true);
+let isHappy = ref(true);
 
 function onAnswerNo() {
-  canCome.value = false;
+  isHappy.value = false;
 }
 
 function onAnswerYes() {
-  canCome.value = true;
+  isHappy.value = true;
 }
 </script>
 
 <template>
   <p>Are you happy?</p>
-  <AnswerButton @yes="onAnswerYes" @no="onAnswerNo" />
+  <AnswerButton
+    @yes="onAnswerYes"
+    @no="onAnswerNo"
+  />
   <p style="font-size: 50px">
-    {{ canCome ? "😀" : "😥" }}
+    {{ isHappy ? "😀" : "😥" }}
   </p>
 </template>

frameworks.mjs

@@ -81,7 +81,7 @@ export default [
       {
         files: ["**/angular/**"],
         parserOptions: {
-          project: ["tsconfig.app.json", "tsconfig.spec.json"],
+          project: ["tsconfig.app.json"],
           createDefaultProgram: true,
         },
         extends: [

package.json

@@ -25,6 +25,7 @@
     "@angular-eslint/eslint-plugin": "^16.0.3",
     "@angular-eslint/eslint-plugin-template": "^16.0.3",
     "@angular-eslint/template-parser": "^16.0.3",
+    "@angular/core": "^16.1.6",
     "@aurelia/router": "2.0.0-beta.7",
     "@babel/core": "^7.22.5",
     "@babel/eslint-parser": "^7.22.5",

pnpm-lock.yaml

@@ -25,6 +25,9 @@ devDependencies:
   '@angular-eslint/template-parser':
     specifier: ^16.0.3
     version: 16.0.3(eslint@8.44.0)(typescript@5.1.6)
+  '@angular/core':
+    specifier: ^16.1.6
+    version: 16.1.6(rxjs@7.8.1)(zone.js@0.13.1)
   '@aurelia/router':
     specifier: 2.0.0-beta.7
     version: 2.0.0-beta.7
@@ -255,6 +258,18 @@ packages:
       - supports-color
     dev: true
 
+  /@angular/core@16.1.6(rxjs@7.8.1)(zone.js@0.13.1):
+    resolution: {integrity: sha512-tUXvVLc+Vbl8Se7hajwyUTNmKD9uPq+SZH6x8sRM2n5azzjBZltOoJfzxK5JKAkiFf/KkQhteHkMBfoDLZ2tmw==}
+    engines: {node: ^16.14.0 || >=18.10.0}
+    peerDependencies:
+      rxjs: ^6.5.3 || ^7.4.0
+      zone.js: ~0.13.0
+    dependencies:
+      rxjs: 7.8.1
+      tslib: 2.6.0
+      zone.js: 0.13.1
+    dev: true
+
   /@aurelia/fetch-client@2.0.0-beta.7:
     resolution: {integrity: sha512-ESyk6cdEHvg6H2IDN+velk+ON1GgyRxDkyFeOC2Bxeq3WU9r03OlUq3oKQ2wvQxOcgjfR8kai6uONwCcD14jfw==}
     engines: {node: '>=14.17.0'}
@@ -7442,6 +7457,12 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
+  /zone.js@0.13.1:
+    resolution: {integrity: sha512-+bIeDAFEBYuXRuU3qGQvzdPap+N1zjM4KkBAiiQuVVCrHrhjDuY6VkUhNa5+U27+9w0q3fbKiMCbpJ0XzMmSWA==}
+    dependencies:
+      tslib: 2.6.0
+    dev: true
+
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true