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

chore: format with prettier

Browse Source
This commit is contained in:
Mathieu Schimmerling
2022-11-09 02:11:46 +00:00
parent 2b1e7b4980
commit 1380f959f6
297 changed files with 9040 additions and 5403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.babelrc
View File

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

4
.eslintrc.cjs
View File

@@ -1,2 +1,2 @@
const _require = require('esm')(module);
module.exports = _require('./.eslintrc.esm.mjs').default;
const _require = require("esm")(module);
module.exports = _require("./.eslintrc.esm.mjs").default;

6
.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}
@@ -6,12 +6,12 @@ import FRAMEWORKS from './src/frameworks.mjs';
export default {
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
sourceType: "module",
},
env: {
browser: true,
},
plugins: ['prettier'],
plugins: ["prettier"],
overrides: FRAMEWORKS.reduce((acc, { eslint }) => {
if (Array.isArray(eslint)) {
acc.push(...eslint);

15
.prettierrc
View File

@@ -1,17 +1,4 @@
{
"printWidth": 180,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": true,
"plugins": ["prettier-plugin-svelte"],
"overrides": [
{
"files": [".*", "*.json", "*.md", "*.toml", "*.yml", "**/vue2/*"],
"options": {
"useTabs": false
}
}
]
"plugins": ["prettier-plugin-svelte"]
}

9
.vscode/extensions.json vendored
View File

@@ -1,4 +1,11 @@
{
"recommendations": ["astro-build.astro-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "svelte.svelte-vscode", "Vue.volar"],
"recommendations": [
"astro-build.astro-vscode",
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"svelte.svelte-vscode",
"Vue.volar"
],
"unwantedRecommendations": []
}

13
.vscode/settings.json vendored
View File

@@ -4,9 +4,18 @@
"editor.formatOnSave": false,
// Runs Prettier, then ESLint
"editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"],
"vetur.validation.template": false,
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
},
"cSpell.words": ["alpinejs", "astro", "astrojs", "matschik", "mdast", "pnpm", "qwik", "shiki", "webp"]
"cSpell.words": [
"alpinejs",
"astro",
"astrojs",
"matschik",
"mdast",
"pnpm",
"qwik",
"shiki",
"webp"
]
}

563
README.md
View File

@@ -19,34 +19,34 @@ 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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -54,34 +54,34 @@ 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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -89,34 +89,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Vue 2</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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -124,34 +124,34 @@ 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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -159,34 +159,34 @@ 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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -194,34 +194,34 @@ 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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -229,34 +229,34 @@ 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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -264,34 +264,34 @@ 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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -299,34 +299,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Alpine</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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -334,34 +334,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Qwik</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] Fetch data
* [x] Router link
* [x] Routing
- [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] Fetch data
- [x] Router link
- [x] Routing
</details>
@@ -388,7 +388,7 @@ This project requires Node.js to be `v14.0.0` or higher, because we use new Java
## 🧑‍💻 Contributors
This project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)].
[![Contributors](https://opencollective.com/component-party/contributors.svg?width=890\&button=false)](https://github.com/matschik/component-party/graphs/contributors)
[![Contributors](https://opencollective.com/component-party/contributors.svg?width=890&button=false)](https://github.com/matschik/component-party/graphs/contributors)
## ⚖️ License
@@ -397,5 +397,4 @@ MIT. Made with 💖
<!-- variables -->
[gitpod-src]: https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod
[gitpod-href]: https://gitpod.io/#https://github.com/matschik/component-party

24
astro.config.mjs
View File

@@ -1,16 +1,16 @@
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import svelte from '@astrojs/svelte';
import FullReload from 'vite-plugin-full-reload';
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import svelte from "@astrojs/svelte";
import FullReload from "vite-plugin-full-reload";
// https://astro.build/config
export default defineConfig({
// https://docs.astro.build/en/reference/configuration-reference/
integrations: [tailwind(), svelte()],
vite: {
plugins: [FullReload(['content/**/*'])],
optimizeDeps: {
exclude: ['locate-path', 'path-exists', 'find-up'],
},
},
// https://docs.astro.build/en/reference/configuration-reference/
integrations: [tailwind(), svelte()],
vite: {
plugins: [FullReload(["content/**/*"])],
optimizeDeps: {
exclude: ["locate-path", "path-exists", "find-up"],
},
},
});

8
content/1-reactivity/1-declare-state/angular/name.component.ts
View File

@@ -1,9 +1,9 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-name',
template: '<h1>Hello {{ name }}</h1>',
selector: "app-name",
template: "<h1>Hello {{ name }}</h1>",
})
export class NameComponent {
name = 'John';
name = "John";
}

4
content/1-reactivity/1-declare-state/ember/name.js
View File

@@ -1,5 +1,5 @@
import Component from '@glimmer/component';
import Component from "@glimmer/component";
export default class CounterComponent extends Component {
name = 'John';
name = "John";
}

4
content/1-reactivity/1-declare-state/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./name.js"></script>
<script type="module" src="./name.js"></script>
</head>
<body>
<x-name></x-name>
<x-name></x-name>
</body>

16
content/1-reactivity/1-declare-state/lit/name.js
View File

@@ -1,12 +1,12 @@
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@customElement('x-name')
@customElement("x-name")
export class XName extends LitElement {
@state()
name = 'John';
@state()
name = "John";
render() {
return html`<h1>Hello ${this.name}!</h1>`;
}
render() {
return html`<h1>Hello ${this.name}!</h1>`;
}
}

6
content/1-reactivity/1-declare-state/qwik/Name.tsx
View File

@@ -1,7 +1,7 @@
import { component$, useStore } from '@builder.io/qwik';
import { component$, useStore } from "@builder.io/qwik";
export const Name = component$(() => {
const store = useStore({ name: 'John' });
const store = useStore({ name: "John" });
return <h1>Hello {store.name}</h1>;
return <h1>Hello {store.name}</h1>;
});

6
content/1-reactivity/1-declare-state/react/Name.jsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useState } from "react";
export default function Name() {
const [name] = useState('John');
const [name] = useState("John");
return <h1>Hello {name}</h1>;
return <h1>Hello {name}</h1>;
}

6
content/1-reactivity/1-declare-state/solid/Name.jsx
View File

@@ -1,7 +1,7 @@
import { createSignal } from 'solid-js';
import { createSignal } from "solid-js";
export default function Name() {
const [name] = createSignal('John');
const [name] = createSignal("John");
return <h1>Hello {name()}</h1>;
return <h1>Hello {name()}</h1>;
}

2
content/1-reactivity/1-declare-state/svelte/Name.svelte
View File

@@ -1,5 +1,5 @@
<script>
let name = 'John';
let name = "John";
</script>
<h1>Hello {name}</h1>

2
content/1-reactivity/1-declare-state/vue2/Name.vue
View File

@@ -2,7 +2,7 @@
export default {
data() {
return {
name: 'John',
name: "John",
};
},
};

4
content/1-reactivity/1-declare-state/vue3/Name.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref } from 'vue';
const name = ref('John');
import { ref } from "vue";
const name = ref("John");
</script>
<template>

14
content/1-reactivity/2-update-state/angular/name.component.ts
View File

@@ -1,13 +1,13 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-name',
template: '<h1>Hello {{ name }}</h1>',
selector: "app-name",
template: "<h1>Hello {{ name }}</h1>",
})
export class NameComponent {
name = 'John';
name = "John";
constructor() {
this.name = 'Jane';
}
constructor() {
this.name = "Jane";
}
}

14
content/1-reactivity/2-update-state/ember/name.js
View File

@@ -1,12 +1,12 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
export default class CounterComponent extends Component {
@tracked name = 'John';
@tracked name = "John";
constructor(owner, args) {
super(owner, args);
constructor(owner, args) {
super(owner, args);
this.name = 'Jane';
}
this.name = "Jane";
}
}

4
content/1-reactivity/2-update-state/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./name.js"></script>
<script type="module" src="./name.js"></script>
</head>
<body>
<x-name></x-name>
<x-name></x-name>
</body>

24
content/1-reactivity/2-update-state/lit/name.js
View File

@@ -1,17 +1,17 @@
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@customElement('x-name')
@customElement("x-name")
export class XName extends LitElement {
@state()
name = 'John';
@state()
name = "John";
constructor() {
super();
this.name = 'Jane';
}
constructor() {
super();
this.name = "Jane";
}
render() {
return html`<h1>Hello ${this.name}!</h1>`;
}
render() {
return html`<h1>Hello ${this.name}!</h1>`;
}
}

8
content/1-reactivity/2-update-state/qwik/Name.tsx
View File

@@ -1,8 +1,8 @@
import { component$, useStore } from '@builder.io/qwik';
import { component$, useStore } from "@builder.io/qwik";
export const Name = component$(() => {
const store = useStore({ name: 'John' });
store.name = 'Jane';
const store = useStore({ name: "John" });
store.name = "Jane";
return <h1>Hello {store.name}</h1>;
return <h1>Hello {store.name}</h1>;
});

8
content/1-reactivity/2-update-state/react/Name.jsx
View File

@@ -1,8 +1,8 @@
import { useState } from 'react';
import { useState } from "react";
export default function Name() {
const [name, setName] = useState('John');
setName('Jane');
const [name, setName] = useState("John");
setName("Jane");
return <h1>Hello {name}</h1>;
return <h1>Hello {name}</h1>;
}

8
content/1-reactivity/2-update-state/solid/Name.jsx
View File

@@ -1,8 +1,8 @@
import { createSignal } from 'solid-js';
import { createSignal } from "solid-js";
export default function Name() {
const [name, setName] = createSignal('John');
setName('Jane');
const [name, setName] = createSignal("John");
setName("Jane");
return <h1>Hello {name()}</h1>;
return <h1>Hello {name()}</h1>;
}

4
content/1-reactivity/2-update-state/svelte/Name.svelte
View File

@@ -1,6 +1,6 @@
<script>
let name = 'John';
name = 'Jane';
let name = "John";
name = "Jane";
</script>
<h1>Hello {name}</h1>

4
content/1-reactivity/2-update-state/vue2/Name.vue
View File

@@ -2,11 +2,11 @@
export default {
data() {
return {
name: 'John',
name: "John",
};
},
created() {
this.name = 'Jane';
this.name = "Jane";
},
};
</script>

6
content/1-reactivity/2-update-state/vue3/Name.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { ref } from 'vue';
const name = ref('John');
name.value = 'Jane';
import { ref } from "vue";
const name = ref("John");
name.value = "Jane";
</script>
<template>

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

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

14
content/1-reactivity/3-computed-state/angular/doublecount.component.ts
View File

@@ -1,13 +1,13 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-doublecount',
template: '<div>{{ doubleCount }}</div>',
selector: "app-doublecount",
template: "<div>{{ doubleCount }}</div>",
})
export class DoublecountComponent {
count = 10;
count = 10;
get doubleCount() {
return this.count * 2;
}
get doubleCount() {
return this.count * 2;
}
}

10
content/1-reactivity/3-computed-state/ember/double-count.js
View File

@@ -1,9 +1,9 @@
import Component, { tracked } from '@glimmer/component';
import Component, { tracked } from "@glimmer/component";
export default class DoubleCount extends Component {
@tracked count = 10;
@tracked count = 10;
get doubleCount() {
return this.count * 2;
}
get doubleCount() {
return this.count * 2;
}
}

22
content/1-reactivity/3-computed-state/lit/double-count.js
View File

@@ -1,16 +1,16 @@
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@customElement('double-count')
@customElement("double-count")
export class DoubleCount extends LitElement {
@state()
count = 10;
@state()
count = 10;
get doubleCount() {
return this.count * 2;
}
get doubleCount() {
return this.count * 2;
}
render() {
return html`<div>${this.doubleCount}</div>`;
}
render() {
return html`<div>${this.doubleCount}</div>`;
}
}

4
content/1-reactivity/3-computed-state/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./double-count.js"></script>
<script type="module" src="./double-count.js"></script>
</head>
<body>
<double-count></double-count>
<double-count></double-count>
</body>

8
content/1-reactivity/3-computed-state/qwik/DoubleCount.tsx
View File

@@ -1,8 +1,8 @@
import { component$, useStore } from '@builder.io/qwik';
import { component$, useStore } from "@builder.io/qwik";
export const DoubleCount = component$(() => {
const store = useStore({ count: 10 });
const doubleCount = store.count * 2;
const store = useStore({ count: 10 });
const doubleCount = store.count * 2;
return <div>{doubleCount}</div>;
return <div>{doubleCount}</div>;
});

8
content/1-reactivity/3-computed-state/react/DoubleCount.jsx
View File

@@ -1,8 +1,8 @@
import { useState } from 'react';
import { useState } from "react";
export default function DoubleCount() {
const [count] = useState(10);
const doubleCount = count * 2;
const [count] = useState(10);
const doubleCount = count * 2;
return <div>{doubleCount}</div>;
return <div>{doubleCount}</div>;
}

8
content/1-reactivity/3-computed-state/solid/DoubleCount.jsx
View File

@@ -1,8 +1,8 @@
import { createSignal } from 'solid-js';
import { createSignal } from "solid-js";
export default function DoubleCount() {
const [count] = createSignal(10);
const doubleCount = () => count() * 2;
const [count] = createSignal(10);
const doubleCount = () => count() * 2;
return <div>{doubleCount()}</div>;
return <div>{doubleCount()}</div>;
}

4
content/1-reactivity/3-computed-state/svelte/DoubleCount.svelte
View File

@@ -1,6 +1,6 @@
<script>
let count = 10;
$: doubleCount = count * 2;
let count = 10;
$: doubleCount = count * 2;
</script>
<div>{doubleCount}</div>

2
content/1-reactivity/3-computed-state/vue3/DoubleCount.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, computed } from 'vue';
import { ref, computed } from "vue";
const count = ref(10);
const doubleCount = computed(() => count.value * 2);
</script>

6
content/2-templating/1-minimal-template/angular/helloworld.component.ts
View File

@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-helloworld',
template: '<h1>Hello world</h1>',
selector: "app-helloworld",
template: "<h1>Hello world</h1>",
})
export class HelloworldComponent {}

12
content/2-templating/1-minimal-template/lit/hello-world.js
View File

@@ -1,9 +1,9 @@
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
@customElement('hello-world')
@customElement("hello-world")
export class HelloWorld extends LitElement {
render() {
return html`<h1>Hello world</h1>`;
}
render() {
return html`<h1>Hello world</h1>`;
}
}

4
content/2-templating/1-minimal-template/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./hello-world.js"></script>
<script type="module" src="./hello-world.js"></script>
</head>
<body>
<hello-world></hello-world>
<hello-world></hello-world>
</body>

4
content/2-templating/1-minimal-template/qwik/HelloWorld.tsx
View File

@@ -1,5 +1,5 @@
import { component$ } from '@builder.io/qwik';
import { component$ } from "@builder.io/qwik";
export const HelloWorld = component$(() => {
return <div>Hello World</div>;
return <div>Hello World</div>;
});

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

@@ -1,3 +1,3 @@
export default function HelloWorld() {
return <h1>Hello world</h1>;
return <h1>Hello world</h1>;
}

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

@@ -1,3 +1,3 @@
export default function HelloWorld() {
return <h1>Hello World!</h1>;
return <h1>Hello World!</h1>;
}

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

@@ -2,7 +2,7 @@
<button style="font-size: 10rem">I am a button</button>
<style>
.title {
color: red;
}
.title {
color: red;
}
</style>

26
content/2-templating/2-styling/angular/cssstyle.component.ts
View File

@@ -1,17 +1,17 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-cssstyle',
template: `
<h1 class="title">I am red</h1>
<button style="font-size: 10rem">I am a button</button>
`,
styles: [
`
.title {
color: red;
}
`,
],
selector: "app-cssstyle",
template: `
<h1 class="title">I am red</h1>
<button style="font-size: 10rem">I am a button</button>
`,
styles: [
`
.title {
color: red;
}
`,
],
})
export class CssStyleComponent {}

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>

30
content/2-templating/2-styling/lit/css-style.js
View File

@@ -1,19 +1,19 @@
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";
@customElement('css-style')
@customElement("css-style")
export class CssStyle extends LitElement {
static styles = css`
.title {
color: red;
}
`;
static styles = css`
.title {
color: red;
}
`;
render() {
return html`
<h1 class="title">I am red</h1>
<button style=${styleMap({ fontSize: '10rem' })}>I am a button</button>
`;
}
render() {
return html`
<h1 class="title">I am red</h1>
<button style=${styleMap({ fontSize: "10rem" })}>I am a button</button>
`;
}
}

4
content/2-templating/2-styling/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./css-style.js"></script>
<script type="module" src="./css-style.js"></script>
</head>
<body>
<css-style></css-style>
<css-style></css-style>
</body>

16
content/2-templating/2-styling/qwik/CssStyle.tsx
View File

@@ -1,16 +1,16 @@
import { component$, useStyles$ } from '@builder.io/qwik';
import { component$, useStyles$ } from "@builder.io/qwik";
export const App = component$(() => {
useStyles$(`
useStyles$(`
.title {
color: red;
}
`);
return (
<>
<h1 class="title">I am red</h1>
<button style={{ 'font-size': '10rem' }}>I am a button</button>
</>
);
return (
<>
<h1 class="title">I am red</h1>
<button style={{ "font-size": "10rem" }}>I am a button</button>
</>
);
});

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

@@ -1,10 +1,10 @@
import './style.css';
import "./style.css";
export default function CssStyle() {
return (
<>
<h1 className="title">I am red</h1>
<button style={{ fontSize: '10rem' }}>I am a button</button>
</>
);
return (
<>
<h1 className="title">I am red</h1>
<button style={{ fontSize: "10rem" }}>I am a button</button>
</>
);
}

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

@@ -1,3 +1,3 @@
.title {
color: red;
color: red;
}

14
content/2-templating/2-styling/solid/CssStyle.jsx
View File

@@ -1,10 +1,10 @@
import './style.css';
import "./style.css";
export default function CssStyle() {
return (
<>
<h1 class="title">I am red</h1>
<button style={{ 'font-size': '10rem' }}>I am a button</button>
</>
);
return (
<>
<h1 class="title">I am red</h1>
<button style={{ "font-size": "10rem" }}>I am a button</button>
</>
);
}

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

@@ -1,3 +1,3 @@
.title {
color: red;
color: red;
}

6
content/2-templating/2-styling/svelte/CssStyle.svelte
View File

@@ -2,7 +2,7 @@
<button style="font-size: 10rem;">I am a button</button>
<style>
.title {
color: red;
}
.title {
color: red;
}
</style>

2
content/2-templating/2-styling/vue3/CssStyle.vue
View File

@@ -9,6 +9,6 @@
<style scoped>
.title {
color: red;
color: red;
}
</style>

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>

16
content/2-templating/3-loop/angular/colors.component.ts
View File

@@ -1,13 +1,13 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-colors',
template: `
<ul>
<li *ngFor="let color of colors">{{ color }}</li>
</ul>
`,
selector: "app-colors",
template: `
<ul>
<li *ngFor="let color of colors">{{ color }}</li>
</ul>
`,
})
export class ColorsComponent {
colors = ['red', 'green', 'blue'];
colors = ["red", "green", "blue"];
}

6
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}}
{{#each (array "red" "green" "blue") as |color|}}
<li>{{color}}</li>
{{/each}}
</ul>

22
content/2-templating/3-loop/lit/colors-list.js
View File

@@ -1,15 +1,15 @@
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
@customElement('colors-list')
@customElement("colors-list")
export class ColorsList extends LitElement {
colors = ['red', 'green', 'blue'];
colors = ["red", "green", "blue"];
render() {
return html`
<ul>
${this.colors.map((color) => html`<li>${color}</li>`)}
</ul>
`;
}
render() {
return html`
<ul>
${this.colors.map((color) => html`<li>${color}</li>`)}
</ul>
`;
}
}

4
content/2-templating/3-loop/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./colors-list.js"></script>
<script type="module" src="./colors-list.js"></script>
</head>
<body>
<colors-list></colors-list>
<colors-list></colors-list>
</body>

22
content/2-templating/3-loop/qwik/Colors.tsx
View File

@@ -1,14 +1,14 @@
import { component$ } from '@builder.io/qwik';
import { component$ } from "@builder.io/qwik";
export const Colors = component$(() => {
const colors = ['red', 'green', 'blue'];
return (
<>
<ul>
{colors.map((color) => (
<li key={color}>{color}</li>
))}
</ul>
</>
);
const colors = ["red", "green", "blue"];
return (
<>
<ul>
{colors.map((color) => (
<li key={color}>{color}</li>
))}
</ul>
</>
);
});

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

@@ -1,10 +1,10 @@
export default function Colors() {
const colors = ['red', 'green', 'blue'];
return (
<ul>
{colors.map((color) => (
<li key={color}>{color}</li>
))}
</ul>
);
const colors = ["red", "green", "blue"];
return (
<ul>
{colors.map((color) => (
<li key={color}>{color}</li>
))}
</ul>
);
}

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

@@ -1,11 +1,11 @@
import { For } from 'solid-js';
import { For } from "solid-js";
export default function Colors() {
const colors = ['red', 'green', 'blue'];
const colors = ["red", "green", "blue"];
return (
<ul>
<For each={colors}>{(color) => <li>{color}</li>}</For>
</ul>
);
return (
<ul>
<For each={colors}>{(color) => <li>{color}</li>}</For>
</ul>
);
}

8
content/2-templating/3-loop/svelte/Colors.svelte
View File

@@ -1,9 +1,9 @@
<script>
const colors = ['red', 'green', 'blue'];
const colors = ["red", "green", "blue"];
</script>
<ul>
{#each colors as color}
<li>{color}</li>
{/each}
{#each colors as color}
<li>{color}</li>
{/each}
</ul>

2
content/2-templating/3-loop/vue2/Colors.vue
View File

@@ -2,7 +2,7 @@
export default {
data() {
return {
colors: ['red', 'green', 'blue'],
colors: ["red", "green", "blue"],
};
},
};

2
content/2-templating/3-loop/vue3/Colors.vue
View File

@@ -1,5 +1,5 @@
<script setup>
const colors = ['red', 'green', 'blue'];
const colors = ["red", "green", "blue"];
</script>
<template>

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>

20
content/2-templating/4-event-click/angular/counter.component.ts
View File

@@ -1,16 +1,16 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-counter',
template: `
<p>Counter: {{ count }}</p>
<button (click)="incrementCount()">+1</button>
`,
selector: "app-counter",
template: `
<p>Counter: {{ count }}</p>
<button (click)="incrementCount()">+1</button>
`,
})
export class CounterComponent {
count = 0;
count = 0;
incrementCount() {
this.count++;
}
incrementCount() {
this.count++;
}
}

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>

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

@@ -1,8 +1,8 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
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++;
}

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

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./x-counter.js"></script>
<script type="module" src="./x-counter.js"></script>
</head>
<body>
<x-counter></x-counter>
<x-counter></x-counter>
</body>

28
content/2-templating/4-event-click/lit/x-counter.js
View File

@@ -1,19 +1,19 @@
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@customElement('x-counter')
@customElement("x-counter")
export class XCounter extends LitElement {
@state()
count = 0;
@state()
count = 0;
incrementCount() {
this.count = this.count + 1;
}
incrementCount() {
this.count = this.count + 1;
}
render() {
return html`
<p>Counter: ${this.count}</p>
<button @click=${this.incrementCount}>+1</button>
`;
}
render() {
return html`
<p>Counter: ${this.count}</p>
<button @click=${this.incrementCount}>+1</button>
`;
}
}

16
content/2-templating/4-event-click/qwik/Counter.tsx
View File

@@ -1,11 +1,11 @@
import { component$, useStore } from '@builder.io/qwik';
import { component$, useStore } from "@builder.io/qwik";
export const Counter = component$(() => {
const store = useStore({ count: 0 });
return (
<>
<p>Counter: {store.count}</p>
<button onClick$={() => store.count++}>Increment</button>
</>
);
const store = useStore({ count: 0 });
return (
<>
<p>Counter: {store.count}</p>
<button onClick$={() => store.count++}>Increment</button>
</>
);
});

22
content/2-templating/4-event-click/react/Counter.jsx
View File

@@ -1,16 +1,16 @@
import { useState } from 'react';
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
const [count, setCount] = useState(0);
function incrementCount() {
setCount((count) => count + 1);
}
function incrementCount() {
setCount((count) => count + 1);
}
return (
<>
<p>Counter: {count}</p>
<button onClick={incrementCount}>+1</button>
</>
);
return (
<>
<p>Counter: {count}</p>
<button onClick={incrementCount}>+1</button>
</>
);
}

22
content/2-templating/4-event-click/solid/Counter.jsx
View File

@@ -1,16 +1,16 @@
import { createSignal } from 'solid-js';
import { createSignal } from "solid-js";
export default function Counter() {
const [count, setCount] = createSignal(0);
const [count, setCount] = createSignal(0);
function incrementCount() {
setCount(count() + 1);
}
function incrementCount() {
setCount(count() + 1);
}
return (
<>
<p>Counter: {count()}</p>
<button onClick={incrementCount}>+1</button>
</>
);
return (
<>
<p>Counter: {count()}</p>
<button onClick={incrementCount}>+1</button>
</>
);
}

8
content/2-templating/4-event-click/svelte/Counter.svelte
View File

@@ -1,9 +1,9 @@
<script>
let count = 0;
let count = 0;
function incrementCount() {
count++;
}
function incrementCount() {
count++;
}
</script>
<p>Counter: {count}</p>

4
content/2-templating/4-event-click/vue3/Counter.vue
View File

@@ -1,9 +1,9 @@
<script setup>
import { ref } from 'vue';
import { ref } from "vue";
const count = ref(0);
function incrementCount() {
count.value++;
count.value++;
}
</script>

16
content/2-templating/5-dom-ref/angular/inputfocused.component.ts
View File

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

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

@@ -1,8 +1,8 @@
import Component from '@glimmer/component';
import { modifier } from 'ember-modifier';
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());
}
/**

4
content/2-templating/5-dom-ref/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./input-focused.js"></script>
<script type="module" src="./input-focused.js"></script>
</head>
<body>
<input-focused></input-focused>
<input-focused></input-focused>
</body>

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

@@ -1,16 +1,16 @@
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { ref, createRef } from 'lit/directives/ref.js';
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { ref, createRef } from "lit/directives/ref.js";
@customElement('input-focused')
@customElement("input-focused")
export class InputFocused extends LitElement {
inputRef = createRef();
inputRef = createRef();
firstUpdated() {
this.inputRef.value.focus();
}
firstUpdated() {
this.inputRef.value.focus();
}
render() {
return html`<input type="text" ${ref(this.inputRef)} />`;
}
render() {
return html`<input type="text" ${ref(this.inputRef)} />`;
}
}

8
content/2-templating/5-dom-ref/qwik/InputFocused.tsx
View File

@@ -1,9 +1,9 @@
import { component$, useClientEffect$, useRef } from '@builder.io/qwik';
import { component$, useClientEffect$, useRef } from "@builder.io/qwik";
export const InputFocused = component$(() => {
const inputElement = useRef(null);
const inputElement = useRef(null);
useClientEffect$(() => inputElement.current.focus());
useClientEffect$(() => inputElement.current.focus());
return <input type="text" ref={inputElement} />;
return <input type="text" ref={inputElement} />;
});

8
content/2-templating/5-dom-ref/react/InputFocused.jsx
View File

@@ -1,9 +1,9 @@
import { useEffect, useRef } from 'react';
import { useEffect, useRef } from "react";
export default function InputFocused() {
const inputElement = useRef(null);
const inputElement = useRef(null);
useEffect(() => inputElement.current.focus(), []);
useEffect(() => inputElement.current.focus(), []);
return <input type="text" ref={inputElement} />;
return <input type="text" ref={inputElement} />;
}

8
content/2-templating/5-dom-ref/solid/InputFocused.jsx
View File

@@ -1,9 +1,9 @@
import { onMount } from 'solid-js';
import { onMount } from "solid-js";
export default function InputFocused() {
let inputElement;
let inputElement;
onMount(() => inputElement.focus());
onMount(() => inputElement.focus());
return <input ref={inputElement} type="text" />;
return <input ref={inputElement} type="text" />;
}

10
content/2-templating/5-dom-ref/svelte/InputFocused.svelte
View File

@@ -1,11 +1,11 @@
<script>
import { onMount } from 'svelte';
import { onMount } from "svelte";
let inputElement;
let inputElement;
onMount(() => {
inputElement.focus();
});
onMount(() => {
inputElement.focus();
});
</script>
<input bind:this={inputElement} />

4
content/2-templating/5-dom-ref/vue3/InputFocused.vue
View File

@@ -1,10 +1,10 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted } from "vue";
const inputElement = ref();
onMounted(() => {
inputElement.value.focus();
inputElement.value.focus();
});
</script>

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

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

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

@@ -1,34 +1,34 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
@Component({
selector: 'app-trafficlight',
template: `
<button (click)="nextLight()">Next light</button>
<p>Light is: {{ light }}</p>
<p>
You must
<ng-container [ngSwitch]="light">
<span *ngSwitchCase="'red'">STOP</span>
<span *ngSwitchCase="'orange'">SLOW DOWN</span>
<span *ngSwitchCase="'green'">GO</span>
</ng-container>
</p>
`,
selector: "app-trafficlight",
template: `
<button (click)="nextLight()">Next light</button>
<p>Light is: {{ light }}</p>
<p>
You must
<ng-container [ngSwitch]="light">
<span *ngSwitchCase="'red'">STOP</span>
<span *ngSwitchCase="'orange'">SLOW DOWN</span>
<span *ngSwitchCase="'green'">GO</span>
</ng-container>
</p>
`,
})
export class TrafficlightComponent {
lightIndex = 0;
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++;
}
}
}

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

@@ -1,12 +1,12 @@
<button {{on 'click' this.nextLight}}>Next light</button>
<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}}
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>

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

@@ -1,20 +1,20 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
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/2-templating/6-conditional/lit/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="module" src="./traffic-light.js"></script>
<script type="module" src="./traffic-light.js"></script>
</head>
<body>
<traffic-light></traffic-light>
<traffic-light></traffic-light>
</body>

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

@@ -1,38 +1,38 @@
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { choose } from 'lit/directives/choose.js';
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { choose } from "lit/directives/choose.js";
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
@customElement('traffic-light')
@customElement("traffic-light")
export class TrafficLight extends LitElement {
@state()
lightIndex = 0;
@state()
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 = this.lightIndex + 1;
}
}
nextLight() {
if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
this.lightIndex = 0;
} else {
this.lightIndex = this.lightIndex + 1;
}
}
render() {
return html`
<button @click=${this.nextLight}>Next light</button>
<p>Light is ${this.light}</p>
<p>
You must
${choose(this.light, [
['red', () => html`<span>STOP</span>`],
['orange', () => html`<span>SLOW DOWN</span>`],
['green', () => html`<span>GO</span>`],
])}
</p>
`;
}
render() {
return html`
<button @click=${this.nextLight}>Next light</button>
<p>Light is ${this.light}</p>
<p>
You must
${choose(this.light, [
["red", () => html`<span>STOP</span>`],
["orange", () => html`<span>SLOW DOWN</span>`],
["green", () => html`<span>GO</span>`],
])}
</p>
`;
}
}

50
content/2-templating/6-conditional/qwik/TrafficLight.tsx
View File

@@ -1,32 +1,32 @@
import { $, component$, useStore } from '@builder.io/qwik';
import { $, component$, useStore } from "@builder.io/qwik";
export const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
export const TRAFFIC_LIGHTS = ["red", "orange", "green"];
export const App = component$(() => {
const store = useStore({
lightIndex: 0,
});
const store = useStore({
lightIndex: 0,
});
const light = TRAFFIC_LIGHTS[store.lightIndex];
const light = TRAFFIC_LIGHTS[store.lightIndex];
const nextLight = $(() => {
if (store.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
store.lightIndex = 0;
} else {
store.lightIndex += 1;
}
});
const nextLight = $(() => {
if (store.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
store.lightIndex = 0;
} else {
store.lightIndex += 1;
}
});
return (
<>
<button onClick$={nextLight}>Next light</button>
<p>Light is: {light}</p>
<p>
You must
{light === 'red' && <span>STOP</span>}
{light === 'orange' && <span>SLOW DOWN</span>}
{light === 'green' && <span>GO</span>}
</p>
</>
);
return (
<>
<button onClick$={nextLight}>Next light</button>
<p>Light is: {light}</p>
<p>
You must
{light === "red" && <span>STOP</span>}
{light === "orange" && <span>SLOW DOWN</span>}
{light === "green" && <span>GO</span>}
</p>
</>
);
});

46
content/2-templating/6-conditional/react/TrafficLight.jsx
View File

@@ -1,30 +1,30 @@
import { useState } from 'react';
import { useState } from "react";
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
export default function TrafficLight() {
const [lightIndex, setLightIndex] = useState(0);
const [lightIndex, setLightIndex] = useState(0);
const light = TRAFFIC_LIGHTS[lightIndex];
const light = TRAFFIC_LIGHTS[lightIndex];
function nextLight() {
if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
setLightIndex(0);
} else {
setLightIndex(lightIndex + 1);
}
}
function nextLight() {
if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
setLightIndex(0);
} else {
setLightIndex(lightIndex + 1);
}
}
return (
<>
<button onClick={nextLight}>Next light</button>
<p>Light is: {light}</p>
<p>
You must
{light === 'red' && <span>STOP</span>}
{light === 'orange' && <span>SLOW DOWN</span>}
{light === 'green' && <span>GO</span>}
</p>
</>
);
return (
<>
<button onClick={nextLight}>Next light</button>
<p>Light is: {light}</p>
<p>
You must
{light === "red" && <span>STOP</span>}
{light === "orange" && <span>SLOW DOWN</span>}
{light === "green" && <span>GO</span>}
</p>
</>
);
}

62
content/2-templating/6-conditional/solid/TrafficLight.jsx
View File

@@ -1,38 +1,38 @@
import { createSignal, Switch, Match } from 'solid-js';
import { createSignal, Switch, Match } from "solid-js";
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
export default function TrafficLight() {
const [lightIndex, setLightIndex] = createSignal(0);
const [lightIndex, setLightIndex] = createSignal(0);
const light = () => TRAFFIC_LIGHTS[lightIndex()];
const light = () => TRAFFIC_LIGHTS[lightIndex()];
function nextLight() {
if (lightIndex() + 1 > TRAFFIC_LIGHTS.length - 1) {
setLightIndex(0);
} else {
setLightIndex(lightIndex() + 1);
}
}
function nextLight() {
if (lightIndex() + 1 > TRAFFIC_LIGHTS.length - 1) {
setLightIndex(0);
} else {
setLightIndex(lightIndex() + 1);
}
}
return (
<>
<button onClick={nextLight}>Next light</button>
<p>Light is: {light()}</p>
<p>
You must
<Switch>
<Match when={light() === 'red'}>
<span>STOP</span>
</Match>
<Match when={light() === 'orange'}>
<span>SLOW DOWN</span>
</Match>
<Match when={light() === 'green'}>
<span>GO</span>
</Match>
</Switch>
</p>
</>
);
return (
<>
<button onClick={nextLight}>Next light</button>
<p>Light is: {light()}</p>
<p>
You must
<Switch>
<Match when={light() === "red"}>
<span>STOP</span>
</Match>
<Match when={light() === "orange"}>
<span>SLOW DOWN</span>
</Match>
<Match when={light() === "green"}>
<span>GO</span>
</Match>
</Switch>
</p>
</>
);
}

36
content/2-templating/6-conditional/svelte/TrafficLight.svelte
View File

@@ -1,27 +1,27 @@
<script>
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
let lightIndex = 0;
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
let lightIndex = 0;
$: light = TRAFFIC_LIGHTS[lightIndex];
$: light = TRAFFIC_LIGHTS[lightIndex];
function nextLight() {
if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
lightIndex = 0;
} else {
lightIndex++;
}
}
function nextLight() {
if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
lightIndex = 0;
} else {
lightIndex++;
}
}
</script>
<button on:click={nextLight}>Next light</button>
<p>Light is: {light}</p>
<p>
You must
{#if light === 'red'}
<span>STOP</span>
{:else if light === 'orange'}
<span>SLOW DOWN</span>
{:else if light === 'green'}
<span>GO</span>
{/if}
You must
{#if light === "red"}
<span>STOP</span>
{:else if light === "orange"}
<span>SLOW DOWN</span>
{:else if light === "green"}
<span>GO</span>
{/if}
</p>

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

@@ -2,7 +2,7 @@
export default {
data() {
return {
TRAFFIC_LIGHTS: ['red', 'orange', 'green'],
TRAFFIC_LIGHTS: ["red", "orange", "green"],
lightIndex: 0,
};
},

14
content/2-templating/6-conditional/vue3/TrafficLight.vue
View File

@@ -1,16 +1,16 @@
<script setup>
import { ref, computed } from 'vue';
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
import { ref, computed } from "vue";
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
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++;
}
if (lightIndex.value + 1 > TRAFFIC_LIGHTS.length - 1) {
lightIndex.value = 0;
} else {
lightIndex.value++;
}
}
</script>

Some files were not shown because too many files have changed in this diff Show More