From 687b85b100ba0bce447eae0e2a55dd4eaf64eff1 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling Date: Mon, 16 May 2022 19:09:41 +0000 Subject: [PATCH] docs(react): add missing react import --- .babelrc | 4 +- .eslintrc.esm.mjs | 2 +- README.md | 438 +-- astro.config.mjs | 4 +- .../3-computed-state/alpine/index.html | 7 +- .../3-computed-state/ember/double-count.hbs | 2 +- .../1-minimal-template/ember/hello-world.hbs | 2 +- .../1-minimal-template/react/HelloWorld.jsx | 2 + .../2-templating/2-styling/alpine/index.html | 2 +- .../2-styling/ember/css-style.css | 2 +- .../2-styling/ember/css-style.hbs | 4 +- .../2-templating/2-styling/react/CssStyle.jsx | 1 + content/2-templating/3-loop/alpine/index.html | 6 +- content/2-templating/3-loop/ember/colors.hbs | 8 +- content/2-templating/3-loop/react/Colors.jsx | 2 + .../4-event-click/alpine/index.html | 4 +- .../4-event-click/ember/counter.hbs | 2 +- .../4-event-click/ember/counter.js | 4 +- .../5-dom-ref/ember/input-focused.hbs | 2 +- .../5-dom-ref/ember/input-focused.js | 22 +- .../6-conditional/alpine/index.html | 22 +- .../6-conditional/ember/traffic-light.hbs | 18 +- .../6-conditional/ember/traffic-light.js | 22 +- .../3-lifecycle/1-on-mount/alpine/index.html | 4 +- .../1-on-mount/ember/page-title.hbs | 2 +- .../1-on-mount/ember/page-title.js | 2 +- .../2-on-unmount/alpine/index.html | 8 +- .../3-lifecycle/2-on-unmount/ember/time.hbs | 2 +- .../3-lifecycle/2-on-unmount/ember/time.js | 17 +- .../1-props/alpine/index.html | 14 +- .../1-props/ember/app.hbs | 2 +- .../1-props/ember/user-profile.hbs | 3 +- .../1-props/ember/user-profile.js | 6 +- .../1-props/react/App.jsx | 1 + .../1-props/react/UserProfile.jsx | 1 + .../2-emit-to-parent/alpine/index.html | 12 +- .../2-emit-to-parent/ember/answer-button.hbs | 2 +- .../2-emit-to-parent/ember/app.hbs | 2 +- .../2-emit-to-parent/ember/app.js | 6 +- .../2-emit-to-parent/react/AnswerButton.jsx | 1 + .../3-slot/alpine/index.html | 30 +- .../3-slot/ember/app.hbs | 2 +- .../3-slot/ember/funny-button.hbs | 8 +- .../3-slot/react/App.jsx | 1 + .../3-slot/react/FunnyButton.jsx | 1 + .../4-slot-fallback/alpine/index.html | 59 +- .../4-slot-fallback/ember/app.hbs | 2 +- .../4-slot-fallback/ember/funny-button.hbs | 16 +- .../4-slot-fallback/react/App.jsx | 1 + .../4-slot-fallback/react/FunnyButton.jsx | 1 + .../1-input-text/alpine/index.html | 4 +- .../1-input-text/ember/input-hello.hbs | 2 +- .../1-input-text/ember/input-hello.js | 4 +- .../6-form-input/2-checkbox/alpine/index.html | 4 +- .../2-checkbox/ember/is-available.hbs | 9 +- .../2-checkbox/ember/is-available.js | 4 +- .../6-form-input/3-radio/alpine/index.html | 10 +- .../6-form-input/3-radio/ember/pick-pill.hbs | 16 +- .../6-form-input/3-radio/ember/pick-pill.js | 4 +- .../6-form-input/4-select/alpine/index.html | 16 +- .../4-select/ember/color-select.hbs | 16 +- .../4-select/ember/color-select.js | 16 +- .../1-routing/ember/built-in.md | 3 +- .../7-webapp-features/1-routing/lit/vaadin.md | 6 +- .../1-routing/solid/solid-app-router.md | 12 +- .../2-router-link/ember/built-in.md | 4 +- .../2-router-link/lit/vaadin.md | 2 +- .../2-router-link/solid/solid-app-router.md | 10 +- pnpm-lock.yaml | 2925 ++++++++--------- 69 files changed, 1932 insertions(+), 1923 deletions(-) diff --git a/.babelrc b/.babelrc index 96d2ec5..54c2e69 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "plugins": [["@babel/plugin-proposal-decorators", {"decoratorsBeforeExport": true}]] -} \ No newline at end of file + "plugins": [["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]] +} diff --git a/.eslintrc.esm.mjs b/.eslintrc.esm.mjs index 2bc4bc4..4f88bae 100644 --- a/.eslintrc.esm.mjs +++ b/.eslintrc.esm.mjs @@ -1,4 +1,4 @@ -import FRAMEWORKS from './src/frameworks.mjs' +import FRAMEWORKS from './src/frameworks.mjs'; /** * @type {import("eslint").Linter.Config} diff --git a/README.md b/README.md index 80cc5e5..108188a 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ How do we solve this ? Developers love having framework overview by examples. It ## Roadmap -* \[ ] Add Preact -* \[ ] Add Stencil -* \[ ] Add native JS ? +- \[ ] Add Preact +- \[ ] Add Stencil +- \[ ] Add native JS ? ## Progression @@ -25,33 +25,33 @@ How do we solve this ? Developers love having framework overview by examples. It Svelte -* [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
@@ -59,33 +59,33 @@ How do we solve this ? Developers love having framework overview by examples. It React -* [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
@@ -93,33 +93,33 @@ How do we solve this ? Developers love having framework overview by examples. It Vue 3 -* [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
@@ -127,33 +127,33 @@ How do we solve this ? Developers love having framework overview by examples. It Angular -* [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
@@ -161,33 +161,33 @@ How do we solve this ? Developers love having framework overview by examples. It SolidJS -* [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
@@ -195,33 +195,33 @@ How do we solve this ? Developers love having framework overview by examples. It Lit -* [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
@@ -229,33 +229,33 @@ How do we solve this ? Developers love having framework overview by examples. It Ember -* [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
@@ -263,33 +263,33 @@ How do we solve this ? Developers love having framework overview by examples. It Alpine.js -* [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
diff --git a/astro.config.mjs b/astro.config.mjs index ed12682..b3ec31f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -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'], }, diff --git a/content/1-reactivity/3-computed-state/alpine/index.html b/content/1-reactivity/3-computed-state/alpine/index.html index 19c8960..01bb5f2 100644 --- a/content/1-reactivity/3-computed-state/alpine/index.html +++ b/content/1-reactivity/3-computed-state/alpine/index.html @@ -1,4 +1,7 @@ -

+}" + x-text="doubleCount" +> diff --git a/content/1-reactivity/3-computed-state/ember/double-count.hbs b/content/1-reactivity/3-computed-state/ember/double-count.hbs index 4fe8fc6..15c313d 100644 --- a/content/1-reactivity/3-computed-state/ember/double-count.hbs +++ b/content/1-reactivity/3-computed-state/ember/double-count.hbs @@ -1 +1 @@ -
{{this.doubleCount}}
+
{{this.doubleCount}}
\ No newline at end of file diff --git a/content/2-templating/1-minimal-template/ember/hello-world.hbs b/content/2-templating/1-minimal-template/ember/hello-world.hbs index 159202e..6116828 100644 --- a/content/2-templating/1-minimal-template/ember/hello-world.hbs +++ b/content/2-templating/1-minimal-template/ember/hello-world.hbs @@ -1 +1 @@ -

Hello world

+

Hello world

\ No newline at end of file diff --git a/content/2-templating/1-minimal-template/react/HelloWorld.jsx b/content/2-templating/1-minimal-template/react/HelloWorld.jsx index cddb3cf..d096547 100644 --- a/content/2-templating/1-minimal-template/react/HelloWorld.jsx +++ b/content/2-templating/1-minimal-template/react/HelloWorld.jsx @@ -1,3 +1,5 @@ +import React from 'react'; + export default function HelloWorld() { return

Hello world

; } diff --git a/content/2-templating/2-styling/alpine/index.html b/content/2-templating/2-styling/alpine/index.html index 0dc871f..533429c 100644 --- a/content/2-templating/2-styling/alpine/index.html +++ b/content/2-templating/2-styling/alpine/index.html @@ -1,5 +1,5 @@

I am red

- +