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

- +