kudzues/component-party
1
0
Fork 0
mirror of https://github.com/lainbo/component-party.git synced 2026-04-05 04:59:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Add missing react import
This commit is contained in:
Mathieu Schimmerling
2022-05-16 21:11:35 +02:00
committed by GitHub
parent c17359e1e6 687b85b100
commit a69607362c
69 changed files with 1932 additions and 1923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.babelrc
View File

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

2
.eslintrc.esm.mjs
View File

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

438
README.md
View File

@@ -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>

4
astro.config.mjs
View File

@@ -8,9 +8,7 @@ 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'],
},

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

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

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

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

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

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

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

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

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

@@ -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 {

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

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

4
content/2-templating/2-styling/ember/css-style.hbs
View File

@@ -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>

1
content/2-templating/2-styling/react/CssStyle.jsx
View File

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

6
content/2-templating/3-loop/alpine/index.html
View File

@@ -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>

8
content/2-templating/3-loop/ember/colors.hbs
View File

@@ -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>

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

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

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

@@ -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>

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

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

4
content/2-templating/4-event-click/ember/counter.js
View File

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class Counter extends Component {
@tracked count = 0;
@tracked count = 0;
incrementCount = () => this.count++;
incrementCount = () => this.count++;
}

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

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

22
content/2-templating/5-dom-ref/ember/input-focused.js
View File

@@ -2,17 +2,17 @@ import Component from '@glimmer/component';
import { modifier } from 'ember-modifier';
export default class InputFocused extends Component {
autofocus = modifier(element => element.focus());
autofocus = modifier((element) => element.focus());
}
/**
* modifier: https://github.com/ember-modifier/ember-modifier
*
* See also:
* - https://github.com/emberjs/rfcs/pull/811
* - ember-modifier becomes default part of blueprint
* - https://github.com/emberjs/rfcs/pull/757
* - dependencyless support for using
* `autofocus = element => element.focus()`
* instead
*/
* modifier: https://github.com/ember-modifier/ember-modifier
*
* See also:
* - https://github.com/emberjs/rfcs/pull/811
* - ember-modifier becomes default part of blueprint
* - https://github.com/emberjs/rfcs/pull/757
* - dependencyless support for using
* `autofocus = element => element.focus()`
* instead
*/

22
content/2-templating/6-conditional/alpine/index.html
View File

@@ -1,4 +1,5 @@
<div x-data="{
<div
x-data="{
TRAFFIC_LIGHTS: ['red', 'orange', 'green'],
lightIndex: 0,
get light() { return this.TRAFFIC_LIGHTS[this.lightIndex] },
@@ -9,13 +10,14 @@
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>

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

@@ -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>

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

@@ -4,17 +4,17 @@ import { tracked } from '@glimmer/tracking';
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
export default class TrafficLight extends Component {
@tracked lightIndex = 0;
@tracked lightIndex = 0;
get light() {
return TRAFFIC_LIGHTS[this.lightIndex];
}
get light() {
return TRAFFIC_LIGHTS[this.lightIndex];
}
nextLight = () => {
if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
this.lightIndex = 0;
} else {
this.lightIndex++;
}
}
nextLight = () => {
if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
this.lightIndex = 0;
} else {
this.lightIndex++;
}
};
}

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

@@ -1,3 +1 @@
<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>

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

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

2
content/3-lifecycle/1-on-mount/ember/page-title.js
View File

@@ -1,5 +1,5 @@
import Component from '@glimmer/component';
export default class PageTitle extends Component {
pageTitle = () => document.title;
pageTitle = () => document.title;
}

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

@@ -1,6 +1,10 @@
<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>

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

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

17
content/3-lifecycle/2-on-unmount/ember/time.js
View File

@@ -3,16 +3,15 @@ import { tracked } from '@glimmer/tracking';
import { registerDestructor } from '@ember/destroyable';
export default class Time extends Component {
@tracked time = new Date().toLocaleTimeString();
@tracked time = new Date().toLocaleTimeString();
constructor(owner, args) {
super(owner, args);
constructor(owner, args) {
super(owner, args);
let timer = setInterval(() => {
this.time = new Date().toLocaleTimeString()
}, 1000);
registerDestructor(this, () => clearInterval(timer));
}
let timer = setInterval(() => {
this.time = new Date().toLocaleTimeString();
}, 1000);
registerDestructor(this, () => clearInterval(timer));
}
}

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

@@ -1,13 +1,15 @@
<!--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>

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

@@ -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}} />

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

@@ -1,5 +1,4 @@
<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>

6
content/4-component-composition/1-props/ember/user-profile.js
View File

@@ -1,7 +1,7 @@
import Component from '@glimmer/component';
export default class UserProfile extends Component {
get formattedColors() {
return this.args.favouriteColors.join(', ');
}
get formattedColors() {
return this.args.favouriteColors.join(', ');
}
}

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

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

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

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

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

@@ -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>

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

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

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

@@ -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>

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

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

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

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

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

@@ -1,16 +1,20 @@
<!--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>

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

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

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

@@ -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>

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

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

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

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

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

@@ -1,31 +1,38 @@
<!--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>

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

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

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

@@ -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>

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

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

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

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

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

@@ -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>

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

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

4
content/6-form-input/1-input-text/ember/input-hello.js
View File

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class InputHello extends Component {
@tracked text = 'Hello World';
@tracked text = 'Hello World';
handleInput = event => this.text = event.target.value;
handleInput = (event) => (this.text = event.target.value);
}

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

@@ -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>

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

@@ -1,7 +1,2 @@
<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>

4
content/6-form-input/2-checkbox/ember/is-available.js
View File

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class InputHello extends Component {
@tracked isAvailable = false;
@tracked isAvailable = false;
handleChange = event => this.isAvailable = event.target.checked;
handleChange = (event) => (this.isAvailable = event.target.checked);
}

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

@@ -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>

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

@@ -1,15 +1,7 @@
<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>

4
content/6-form-input/3-radio/ember/pick-pill.js
View File

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class PickPill extends Component {
@tracked picked = 'red';
@tracked picked = 'red';
handleChange = (event) => this.picked = event.target.value;
handleChange = (event) => (this.picked = event.target.value);
}

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

@@ -1,4 +1,5 @@
<div x-data="{
<div
x-data="{
selectedColorId: 2,
colors: [
{ id: 1, text: 'red' },
@@ -6,10 +7,11 @@
{ 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>

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

@@ -1,11 +1,7 @@
<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>

16
content/6-form-input/4-select/ember/color-select.js
View File

@@ -2,14 +2,14 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class ColorSelect extends Component {
@tracked selectedColorId = 2;
@tracked selectedColorId = 2;
select = (event) => this.selectedColorId = event.target.value;
select = (event) => (this.selectedColorId = event.target.value);
colors = [
{ id: 1, text: 'red' },
{ id: 2, text: 'blue' },
{ id: 3, text: 'green' },
{ id: 4, text: 'gray', isDisabled: true },
];
colors = [
{ id: 1, text: 'red' },
{ id: 2, text: 'blue' },
{ id: 3, text: 'green' },
{ id: 4, text: 'gray', isDisabled: true },
];
}

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

@@ -1,8 +1,9 @@
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: '*' });
});

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

@@ -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>
```
```

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

@@ -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')
);
```
```

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

@@ -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>

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

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

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

@@ -7,16 +7,12 @@ 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>
);
}
```
```

2925
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff