Revert "Merge pull request #73 from matschik/feat/required-react-import"

This reverts commit a69607362c, reversing
changes made to c17359e1e6.

.babelrc

@@ -1,3 +1,3 @@
 {
-  "plugins": [["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]]
-}
+    "plugins": [["@babel/plugin-proposal-decorators", {"decoratorsBeforeExport": true}]]
+}

.eslintrc.esm.mjs

@@ -1,4 +1,4 @@
-import FRAMEWORKS from './src/frameworks.mjs';
+import FRAMEWORKS from './src/frameworks.mjs'
 
 /**
  * @type {import("eslint").Linter.Config}

README.md

@@ -13,9 +13,9 @@ How do we solve this ? Developers love having framework overview by examples. It
 
 ## Roadmap
 
-- \[ ] Add Preact
-- \[ ] Add Stencil
-- \[ ] Add native JS ?
+*   \[ ] Add Preact
+*   \[ ] Add Stencil
+*   \[ ] Add native JS ?
 
 ## Progression
 
@@ -25,33 +25,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>Svelte</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Routing
-  - [x] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Routing
+   * [x] Router link
 
 </details><details>
         <summary>
@@ -59,33 +59,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>React</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Routing
-  - [x] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Routing
+   * [x] Router link
 
 </details><details>
         <summary>
@@ -93,33 +93,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>Vue 3</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Routing
-  - [x] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Routing
+   * [x] Router link
 
 </details><details>
         <summary>
@@ -127,33 +127,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>Angular</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Routing
-  - [x] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Routing
+   * [x] Router link
 
 </details><details>
         <summary>
@@ -161,33 +161,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>SolidJS</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Routing
-  - [x] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Routing
+   * [x] Router link
 
 </details><details>
         <summary>
@@ -195,33 +195,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>Lit</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Routing
-  - [x] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Routing
+   * [x] Router link
 
 </details><details>
         <summary>
@@ -229,33 +229,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>Ember</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Routing
-  - [x] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Routing
+   * [x] Router link
 
 </details><details>
         <summary>
@@ -263,33 +263,33 @@ How do we solve this ? Developers love having framework overview by examples. It
             <b>Alpine.js</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/91" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [ ] Webapp features
-  - [ ] Routing
-  - [ ] Router link
+* [x] Reactivity
+   * [x] Declare state
+   * [x] Update state
+   * [x] Computed state
+* [x] Templating
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
+   * [x] Dom ref
+   * [x] Conditional
+* [x] Lifecycle
+   * [x] On mount
+   * [x] On unmount
+* [x] Component composition
+   * [x] Props
+   * [x] Emit to parent
+   * [x] Slot
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [ ] Webapp features
+   * [ ] Routing
+   * [ ] Router link
 
 </details>
 

astro.config.mjs

@@ -8,7 +8,9 @@ export default defineConfig({
 	// https://docs.astro.build/en/reference/configuration-reference/
 	integrations: [tailwind(), svelte()],
 	vite: {
-		plugins: [FullReload(['content/**/*'])],
+		plugins: [
+      FullReload(['content/**/*'])
+    ],
 		optimizeDeps: {
 			exclude: ['locate-path', 'path-exists', 'find-up'],
 		},

content/1-reactivity/3-computed-state/alpine/index.html

@@ -1,7 +1,4 @@
-<h1
-	x-data="{
+<h1 x-data="{
   count : 10,
   get doubleCount() { return this.count * 2 }
-}"
-	x-text="doubleCount"
-></h1>
+}" x-text="doubleCount"></h1>

content/1-reactivity/3-computed-state/ember/double-count.hbs

@@ -1 +1 @@
-<div>{{this.doubleCount}}</div>
+<div>{{this.doubleCount}}</div>

content/2-templating/1-minimal-template/ember/hello-world.hbs

@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1>Hello world</h1>

content/2-templating/1-minimal-template/react/HelloWorld.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function HelloWorld() {
 	return <h1>Hello world</h1>;
 }

content/2-templating/2-styling/alpine/index.html

@@ -1,5 +1,5 @@
 <h1 class="title">I am red</h1>
-<button style="font-size: 10rem">I am a button</button>
+<button style="font-size: 10rem;">I am a button</button>
 
 <style>
 	.title {

content/2-templating/2-styling/ember/css-style.css

@@ -1,4 +1,4 @@
 /* using: https://github.com/salsify/ember-css-modules */
 .title {
-	color: red;
+  color: red;
 }

content/2-templating/2-styling/ember/css-style.hbs

@@ -1,2 +1,2 @@
-<h1 class='title'>I am red</h1>
-<button style='font-size: 10rem;'>I am a button</button>
+<h1 class="title">I am red</h1>
+<button style="font-size: 10rem;">I am a button</button>

content/2-templating/2-styling/react/CssStyle.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './style.css';
 
 export default function CssStyle() {

content/2-templating/3-loop/alpine/index.html

@@ -1,5 +1,5 @@
 <ul x-data="{ colors: ['red', 'green', 'blue'] }">
-	<template x-for="color in colors">
-		<li x-text="color"></li>
-	</template>
+  <template x-for="color in colors">
+    <li x-text="color"></li>
+  </template>
 </ul>

content/2-templating/3-loop/ember/colors.hbs

@@ -1,5 +1,5 @@
 <ul>
-	{{#each (array 'red' 'green' 'blue') as |color|}}
-		<li>{{color}}</li>
-	{{/each}}
-</ul>
+  {{#each (array "red" "green" "blue") as |color|}}
+    <li>{{color}}</li>
+  {{/each}}
+</ul>

content/2-templating/3-loop/react/Colors.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Colors() {
 	const colors = ['red', 'green', 'blue'];
 	return (

content/2-templating/4-event-click/alpine/index.html

@@ -1,4 +1,4 @@
 <div x-data="{ count: 0 }">
-	<p>Counter: <span x-text="count"></span></p>
-	<button x-on:click="count++">+1</button>
+  <p>Counter: <span x-text="count"></span></p>
+  <button x-on:click="count++">+1</button>
 </div>

content/2-templating/4-event-click/ember/counter.hbs

@@ -1,2 +1,2 @@
 <p>Counter: {{this.count}}</p>
-<button {{on 'click' this.incrementCount}}>+1</button>
+<button {{on 'click' this.incrementCount}}>+1</button>

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

@@ -1 +1 @@
-<input {{this.autofocus}} />
+<input {{this.autofocus}} />

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

@@ -1,5 +1,4 @@
-<div
-	x-data="{
+<div x-data="{
   TRAFFIC_LIGHTS: ['red', 'orange', 'green'],
   lightIndex: 0,
   get light() { return this.TRAFFIC_LIGHTS[this.lightIndex] },
@@ -10,14 +9,13 @@
       this.lightIndex++
     }
   }
-}"
->
-	<button x-on:click="nextLight">Next light</button>
-	<p>Light is: <span x-text="light"></span></p>
-	<p>
-		You must
-		<span x-show="light === 'red'">STOP</span>
-		<span x-show="light === 'orange'">SLOW DOWN</span>
-		<span x-show="light === 'green'">GO</span>
-	</p>
+}">
+  <button x-on:click="nextLight">Next light</button>
+  <p>Light is: <span x-text="light"></span></p>
+  <p>
+    You must
+    <span x-show="light === 'red'">STOP</span>
+    <span x-show="light === 'orange'">SLOW DOWN</span>
+    <span x-show="light === 'green'">GO</span>
+  </p>
 </div>

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

@@ -1,12 +1,12 @@
 <button {{on 'click' this.nextLight}}>Next light</button>
 <p>Light is: {{this.light}}</p>
 <p>
-	You must
-	{{#if (eq this.light 'red')}}
-		STOP
-	{{else if (eq this.light 'orange')}}
-		SLOW DOWN
-	{{else if (eq this.light 'green')}}
-		GO
-	{{/if}}
-</p>
+  You must
+  {{#if (eq this.light 'red')}}
+    STOP
+  {{else if (eq this.light 'orange')}}
+    SLOW DOWN
+  {{else if (eq this.light 'green')}}
+    GO
+  {{/if}}
+</p>

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

@@ -1 +1,3 @@
-<p x-data="{ pageTitle: '' }" x-init="$nextTick(() => { pageTitle = document.title })">Page title: <span x-text="pageTitle"></span></p>
+<p x-data="{ pageTitle: '' }" x-init="$nextTick(() => { pageTitle = document.title })">
+  Page title: <span x-text="pageTitle"></span>
+</p>

content/3-lifecycle/1-on-mount/ember/page-title.hbs

@@ -1 +1 @@
-<p>Page title is: {{(this.pageTitle)}}</p>
+<p>Page title is: {{ (this.pageTitle) }}</p>

content/3-lifecycle/2-on-unmount/alpine/index.html

@@ -1,10 +1,6 @@
-<p
-	x-data="{
+<p x-data="{
   time: new Date().toLocaleTimeString(),
   timer: null,
   init() { this.timer = setInterval(() => (this.time = new Date().toLocaleTimeString()), 1000) },
   destroy() { clearInterval(this.timer) }
-}"
->
-	Current time: <span x-text="time"></span>
-</p>
+}">Current time: <span x-text="time"></span></p>

content/3-lifecycle/2-on-unmount/ember/time.hbs

@@ -1 +1 @@
-<p>Current time: {{this.time}}</p>
+<p>Current time: {{this.time}}</p>

content/4-component-composition/1-props/alpine/index.html

@@ -1,15 +1,13 @@
 <!--Alpine JS suggests using a server-side templating engine or another frontend framework in conjunction with Alpine to do this-->
 
-<div
-	x-data="{
+<div x-data="{
   name: 'John',
   age: 20,
   favouriteColors: ['green', 'blue', 'red'],
   isAvailable: true
-}"
->
-	<p>My name is <span x-text="John"></span></p>
-	<p>My age is <span x-text="age"></span></p>
-	<p>My favourite colors are <span x-text="favouriteColors.join(', ')"></span></p>
-	<p>I am <span x-text="isAvailable ? 'available' : 'not available'"></span></p>
+}">
+  <p>My name is <span x-text="John"></span></p>
+  <p>My age is <span x-text="age"></span></p>
+  <p>My favourite colors are <span x-text="favouriteColors.join(', ')"></span></p>
+  <p>I am <span x-text="isAvailable ? 'available' : 'not available'"></span></p>
 </div>

content/4-component-composition/1-props/ember/app.hbs

@@ -1 +1 @@
-<UserProfile @name='John' @age={{20}} @favouriteColors={{array 'green' 'blue' 'red'}} @isAvailable={{true}} />
+<UserProfile @name="John" @age={{20}} @favouriteColors={{array 'green' 'blue' 'red'}} @isAvailable={{true}} />

content/4-component-composition/1-props/ember/user-profile.hbs

@@ -1,4 +1,5 @@
 <p>My name is {{@name}} !</p>
 <p>My age is {{@age}} !</p>
 <p>My favourite colors are {{this.formattedColors}} !</p>
-<p>I am {{if @isAvailable 'available' 'not available'}}</p>
+<p>I am {{if @isAvailable 'available' 'not available'}}</p>
+

content/4-component-composition/1-props/react/App.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import UserProfile from './UserProfile.jsx';
 
 export default function App() {

content/4-component-composition/1-props/react/UserProfile.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export default function UserProfile({ name = '', age = null, favouriteColors = [], isAvailable = false }) {

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

@@ -1,8 +1,8 @@
 <div x-data="{ canCome: true }" x-on:yes="canCome = true" x-on:no="canCome = false">
-	<p>Can I come ?</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>Can I come ?</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>
 </div>

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

@@ -1,2 +1,2 @@
 <button {{on 'click' @onYes}}> YES </button>
-<button {{on 'click' @onNo}}> NO </button>
+<button {{on 'click' @onNo}}> NO </button>

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

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

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export default function AnswerButton({ onYes, onNo }) {

content/4-component-composition/3-slot/alpine/index.html

@@ -1,20 +1,16 @@
 <!--Alpine JS suggests using a server-side templating engine or another frontend framework in conjunction with Alpine to do this-->
 
-<button
-	x-data
-	x-text="'Click me !'"
-	style="
-		background: rgba(0, 0, 0, 0.4);
-		color: #fff;
-		padding: 10px 20px;
-		font-size: 30px;
-		border: 2px solid #fff;
-		margin: 8px;
-		transform: scale(0.9);
-		box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
-		transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
-		outline: 0;
-	"
->
-	<span>No content found</span>
+<button x-data x-text="'Click me !'" style="
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  padding: 10px 20px;
+  font-size: 30px;
+  border: 2px solid #fff;
+  margin: 8px;
+  transform: scale(0.9);
+  box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+  transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+  outline: 0;
+">
+  <span>No content found</span>
 </button>

content/4-component-composition/3-slot/ember/app.hbs

@@ -1 +1 @@
-<FunnyButton> Click me ! </FunnyButton>
+<FunnyButton> Click me ! </FunnyButton>

content/4-component-composition/3-slot/ember/funny-button.hbs

@@ -1,5 +1,5 @@
 <button
-	style='
+	style="
     background: rgba(0, 0, 0, 0.4);
     color: #fff;
     padding: 10px 20px;
@@ -9,7 +9,7 @@
     transform: scale(0.9);
     box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
     transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
-    outline: 0;'
+    outline: 0;"
 >
-	{{yield}}
-</button>
+  {{yield}}
+</button>

content/4-component-composition/3-slot/react/App.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import FunnyButton from './FunnyButton.jsx';
 
 export default function App() {

content/4-component-composition/3-slot/react/FunnyButton.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export default function FunnyButton({ children }) {

content/4-component-composition/4-slot-fallback/alpine/index.html

@@ -1,38 +1,31 @@
 <!--Alpine JS suggests using a server-side templating engine or another frontend framework in conjunction with Alpine to do this-->
 
-<button
-	x-data
-	style="
-		background: rgba(0, 0, 0, 0.4);
-		color: #fff;
-		padding: 10px 20px;
-		font-size: 30px;
-		border: 2px solid #fff;
-		margin: 8px;
-		transform: scale(0.9);
-		box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
-		transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
-		outline: 0;
-	"
->
-	<span>No content found</span>
+<button x-data style="
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  padding: 10px 20px;
+  font-size: 30px;
+  border: 2px solid #fff;
+  margin: 8px;
+  transform: scale(0.9);
+  box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+  transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+  outline: 0;
+">
+  <span>No content found</span>
 </button>
 
-<button
-	x-data
-	x-text="'I got content !'"
-	style="
-		background: rgba(0, 0, 0, 0.4);
-		color: #fff;
-		padding: 10px 20px;
-		font-size: 30px;
-		border: 2px solid #fff;
-		margin: 8px;
-		transform: scale(0.9);
-		box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
-		transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
-		outline: 0;
-	"
->
-	<span>No content found</span>
+<button x-data x-text="'I got content !'" style="
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  padding: 10px 20px;
+  font-size: 30px;
+  border: 2px solid #fff;
+  margin: 8px;
+  transform: scale(0.9);
+  box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+  transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+  outline: 0;
+">
+  <span>No content found</span>
 </button>

content/4-component-composition/4-slot-fallback/ember/app.hbs

@@ -1,2 +1,2 @@
 <FunnyButton />
-<FunnyButton>I got content !</FunnyButton>
+<FunnyButton>I got content !</FunnyButton>

content/4-component-composition/4-slot-fallback/ember/funny-button.hbs

@@ -1,5 +1,5 @@
 <button
-	style='
+	style="
     background: rgba(0, 0, 0, 0.4);
     color: #fff;
     padding: 10px 20px;
@@ -9,15 +9,15 @@
     transform: scale(0.9);
     box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
     transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
-    outline: 0;'
+    outline: 0;"
 >
-	{{#if (has-block)}}
+  {{#if (has-block)}}
 
-		{{yield}}
+    {{yield}}
 
-	{{else}}
+  {{else}}
 
-		<span>No content found</span>
+    <span>No content found</span>
 
-	{{/if}}
-</button>
+  {{/if}}
+</button>

content/4-component-composition/4-slot-fallback/react/App.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import FunnyButton from './FunnyButton.jsx';
 
 export default function App() {

content/4-component-composition/4-slot-fallback/react/FunnyButton.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export default function FunnyButton({ children }) {

content/6-form-input/1-input-text/alpine/index.html

@@ -1,4 +1,4 @@
 <div x-data="{ text: 'Hello World' }">
-	<p x-text="text"></p>
-	<input x-model="text" />
+  <p x-text="text"></p>
+  <input x-model="text" />
 </div>

content/6-form-input/1-input-text/ember/input-hello.hbs

@@ -1,2 +1,2 @@
 <p>{{this.text}}</p>
-<input value={{this.text}} {{on 'input' this.handleInput}} />
+<input value={{this.text}} {{on 'input' this.handleInput}} />

content/6-form-input/2-checkbox/alpine/index.html

@@ -1,4 +1,4 @@
 <div x-data="{ isAvailable: true }">
-	<input id="is-available" x-model="isAvailable" type="checkbox" />
-	<label for="is-available">Is available</label>
+  <input id="is-available" x-model="isAvailable" type="checkbox" />
+  <label for="is-available">Is available</label>
 </div>

content/6-form-input/2-checkbox/ember/is-available.hbs

@@ -1,2 +1,7 @@
-<input id='is-available' type='checkbox' checked={{this.isAvailable}} {{on 'change' this.handleChange}} />
-<label for='is-available'>Is available</label>
+<input
+  id="is-available"
+  type="checkbox"
+  checked={{this.isAvailable}}
+  {{on 'change' this.handleChange}}
+/>
+<label for="is-available">Is available</label>

content/6-form-input/3-radio/alpine/index.html

@@ -1,9 +1,9 @@
 <div x-data="{ picked: 'red' }">
-	<div>Picked: <span x-text="picked"></span></div>
+  <div>Picked: <span x-text="picked"></span></div>
 
-	<input id="blue-pill" x-model="picked" type="radio" value="blue" />
-	<label for="blue-pill">Blue pill</label>
+  <input id="blue-pill" x-model="picked" type="radio" value="blue" />
+  <label for="blue-pill">Blue pill</label>
 
-	<input id="red-pill" x-model="picked" type="radio" value="red" />
-	<label for="red-pill">Red pill</label>
+  <input id="red-pill" x-model="picked" type="radio" value="red" />
+  <label for="red-pill">Red pill</label>
 </div>

content/6-form-input/3-radio/ember/pick-pill.hbs

@@ -1,7 +1,15 @@
 <div>Picked: {{this.picked}}</div>
 
-<input id='blue-pill' type='radio' value='blue' checked={{eq this.picked 'blue'}} {{on 'change' this.handleChange}} />
-<label htmlFor='blue-pill'>Blue pill</label>
+<input
+  id="blue-pill" type="radio" value="blue"
+  checked={{eq this.picked 'blue'}}
+  {{on 'change' this.handleChange}}
+/>
+<label htmlFor="blue-pill">Blue pill</label>
 
-<input id='red-pill' type='radio' value='red' checked={{eq this.picked 'red'}} {{on 'change' this.handleChange}} />
-<label htmlFor='red-pill'>Red pill</label>
+<input
+  id="red-pill" type="radio" value="red"
+  checked={{eq this.picked 'red'}}
+  {{on 'change' this.handleChange}}
+/>
+<label htmlFor="red-pill">Red pill</label>

content/6-form-input/4-select/alpine/index.html

@@ -1,5 +1,4 @@
-<div
-	x-data="{
+<div x-data="{
   selectedColorId: 2,
   colors: [
     { id: 1, text: 'red' },
@@ -7,11 +6,10 @@
     { id: 3, text: 'green' },
     { id: 4, text: 'gray', isDisabled: true }
   ]
-}"
->
-	<select x-model.number="selectedColorId">
-		<template x-for="color in colors" x-bind:key="color.id">
-			<option x-text="color.text" x-bind:value="color.id" x-bind:disabled="!!color.isDisabled" x-bind:selected="color.id === selectedColorId"></option>
-		</template>
-	</select>
+}">
+  <select x-model.number="selectedColorId">
+    <template x-for="color in colors" x-bind:key="color.id">
+      <option x-text="color.text" x-bind:value="color.id" x-bind:disabled="!!color.isDisabled" x-bind:selected="color.id === selectedColorId"></option>
+    </template>
+  </select>
 </div>

content/6-form-input/4-select/ember/color-select.hbs

@@ -1,7 +1,11 @@
 <select {{on 'change' this.select}}>
-	{{#each this.colors as |color|}}
-		<option value={{color.id}} disabled={{color.isDisabled}} selected={{eq color.id this.selectedColorId}}>
-			{{color.text}}
-		</option>
-	{{/each}}
-</select>
+  {{#each this.colors as |color|}}
+    <option
+      value={{color.id}}
+      disabled={{color.isDisabled}}
+      selected={{eq color.id this.selectedColorId}}
+    >
+      {{color.text}}
+    </option>
+  {{/each}}
+</select>

content/7-webapp-features/1-routing/ember/built-in.md

@@ -1,9 +1,8 @@
 Built-in <a href="https://guides.emberjs.com/release/routing/">routing</a>
 
 Given an `app/router.js` config of:
-
 ```js
-Router.map(function () {
+Router.map(function() {
   this.route('about');
   this.route('fallback', { path: '*' });
 });

content/7-webapp-features/1-routing/lit/vaadin.md

@@ -11,8 +11,8 @@ With [@vaadin/router](https://vaadin.com/router)
   const outlet = document.getElementById('outlet');
   const router = new Router(outlet);
   router.setRoutes([
-    { path: '/', component: 'x-home-view' },
-    { path: '/about', component: 'x-about-view' },
+    {path: '/', component: 'x-home-view'},
+    {path: '/about', component: 'x-about-view'},
   ]);
 </script>
-```
+```

content/7-webapp-features/1-routing/solid/solid-app-router.md

@@ -1,10 +1,10 @@
 With [solid-app-router](https://github.com/solidjs/solid-app-router)
 
 ```jsx
-import { render } from 'solid-js/web';
-import { Router, Routes, Route } from 'solid-app-router';
-import About from './About';
-import Home from './Home';
+import { render } from "solid-js/web";
+import { Router, Routes, Route } from "solid-app-router";
+import About from "./About";
+import Home from "./Home";
 
 function App() {
   return (
@@ -21,6 +21,6 @@ render(
       <App />
     </Router>
   ),
-  document.getElementById('root')
+  document.getElementById("root")
 );
-```
+```

content/7-webapp-features/2-router-link/ember/built-in.md

@@ -3,12 +3,12 @@ Built-in <a href="https://guides.emberjs.com/release/routing/linking-between-rou
 ```hbs
 <ul>
   <li>
-    <LinkTo @route='index'>
+    <LinkTo @route="index">
       Home
     </LinkTo>
   </li>
   <li>
-    <LinkTo @route='about'>
+    <LinkTo @route="about">
       About us
     </LinkTo>
   </li>

content/7-webapp-features/2-router-link/lit/vaadin.md

@@ -9,4 +9,4 @@ With [@vaadin/router](https://vaadin.com/router)
     <a href="/about">About us</a>
   </li>
 </ul>
-```
+```

content/7-webapp-features/2-router-link/solid/solid-app-router.md

@@ -7,12 +7,16 @@ export default function Home() {
   return (
     <ul>
       <li>
-        <Link href="/">Home</Link>
+        <Link href="/">
+          Home
+        </Link>
       </li>
       <li>
-        <Link href="/about">About us</Link>
+        <Link href="/about">
+          About us
+        </Link>
       </li>
     </ul>
   );
 }
-```
+```