Merge branch 'main' into add-marko

README.md

@@ -110,7 +110,7 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
@@ -153,8 +153,8 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Checkbox
   - [x] Radio
   - [x] Select
-- [ ] Webapp features
-  - [ ] Render app
+- [x] Webapp features
+  - [x] Render app
   - [x] Fetch data
   - [x] Router link
   - [x] Routing
@@ -179,12 +179,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
@@ -274,7 +274,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 2</b>
-            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -290,12 +290,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox

content/4-component-composition/5-context/ember/app.hbs

@@ -0,0 +1 @@
+<UserProfile />

content/4-component-composition/5-context/ember/user-profile.hbs

@@ -0,0 +1,8 @@
+<div>
+  <h2>My Profile</h2>
+  <p>Username: {{this.user.username}}</p>
+  <p>Email: {{this.user.email}}</p>
+  <button {{on "click" (fn this.userService.updateUserName "Jane")}}>
+    Update username to Jane
+  </button>
+</div>

content/4-component-composition/5-context/ember/user-profile.js

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+export default class UserProfileComponent extends Component {
+  @service userService;
+
+  get user() {
+    return this.userService.user;
+  }
+}

content/4-component-composition/5-context/ember/user-service.js

@@ -0,0 +1,22 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class UserServiceService extends Service {
+  @tracked id = 1;
+  @tracked username = 'unicorn42';
+  @tracked email = '[email protected]';
+
+  get user() {
+    return {
+      id: this.id,
+      username: this.username,
+      email: this.email,
+    };
+  }
+
+  @action
+  updateUserName(newUsername) {
+    this.username = newUsername;
+  }
+}

content/4-component-composition/5-context/qwik/App.tsx

@@ -0,0 +1,33 @@
+import {
+  component$,
+  useStore,
+  useContextProvider,
+  createContext,
+  $,
+} from "@builder.io/qwik";
+import UserProfile from "./UserProfile";
+
+export const UserContext = createContext("user-context");
+
+const App = component$(() => {
+  const user = useStore({
+    id: 1,
+    username: "unicorn42",
+    email: "[email protected]",
+  });
+
+  const updateUsername = $((newUsername) => {
+    user.username = newUsername;
+  });
+
+  useContextProvider(UserContext, { user, updateUsername });
+
+  return (
+    <>
+      <h1>Welcome back, {user.username}</h1>
+      <UserProfile />
+    </>
+  );
+});
+
+export default App;

content/4-component-composition/5-context/qwik/UserProfile.tsx

@@ -0,0 +1,19 @@
+import { component$, useContext } from "@builder.io/qwik";
+import { UserContext } from "./App";
+
+const UserProfile = component$(() => {
+  const { user, updateUsername } = useContext(UserContext);
+
+  return (
+    <div>
+      <h2>My Profile</h2>
+      <p>Username: {user.username}</p>
+      <p>Email: {user.email}</p>
+      <button onClick$={() => updateUsername("Jane")}>
+        Update username to Jane
+      </button>
+    </div>
+  );
+});
+
+export default UserProfile;

content/4-component-composition/5-context/react/App.jsx

@@ -1,7 +1,7 @@
 import { useState, createContext } from "react";
 import UserProfile from "./UserProfile";
 
-const UserContext = createContext();
+export const UserContext = createContext();
 
 export default function App() {
   // In a real app, you would fetch the user data from an API

content/4-component-composition/5-context/vue2/App.vue

@@ -0,0 +1,35 @@
+<script>
+import UserProfile from "./UserProfile.vue";
+
+export default {
+  components: { UserProfile },
+  provide() {
+    return {
+      user: Object.assign(this.user, {
+        updateUsername: this.updateUsername,
+      }),
+    };
+  },
+  data() {
+    return {
+      user: {
+        id: 1,
+        username: "unicorn42",
+        email: "[email protected]",
+      },
+    };
+  },
+  methods: {
+    updateUsername(newUsername) {
+      this.user.username = newUsername;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h1>Welcome back, {{ user.username }}</h1>
+    <UserProfile />
+  </div>
+</template>

content/4-component-composition/5-context/vue2/UserProfile.vue

@@ -0,0 +1,16 @@
+<script>
+export default {
+  inject: ["user"],
+};
+</script>
+
+<template>
+  <div>
+    <h2>My Profile</h2>
+    <p>Username: {{ user.username }}</p>
+    <p>Email: {{ user.email }}</p>
+    <button @click="() => user.updateUsername('Jane')">
+      Update username to Jane
+    </button>
+  </div>
+</template>

content/4-component-composition/5-context/vue3/App.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref, provide } from "vue";
+import UserProfile from "./UserProfile.vue";
+
+const user = ref({
+  id: 1,
+  username: "unicorn42",
+  email: "[email protected]",
+});
+
+function updateUsername(username) {
+  user.value.username = username;
+}
+
+provide("user", { user, updateUsername });
+</script>
+
+<template>
+  <h1>Welcome back, {{ user.username }}</h1>
+  <UserProfile />
+</template>

content/4-component-composition/5-context/vue3/UserProfile.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { inject } from "vue";
+const { user, updateUsername } = inject("user");
+</script>
+
+<template>
+  <div>
+    <h2>My Profile</h2>
+    <p>Username: {{ user.username }}</p>
+    <p>Email: {{ user.email }}</p>
+    <button @click="() => updateUsername('Jane')">
+      Update username to Jane
+    </button>
+  </div>
+</template>

content/7-webapp-features/1-render-app/solid/App.jsx

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

content/7-webapp-features/1-render-app/solid/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>

content/7-webapp-features/1-render-app/solid/main.jsx

@@ -0,0 +1,4 @@
+import { render } from "solid-js/web";
+import App from "./App";
+
+render(() => <App />, document.getElementById("app"));

frameworks.mjs

@@ -79,7 +79,7 @@ export default [
     playgroundURL: "https://playground.solidjs.com/",
     documentationURL: "https://www.solidjs.com/",
     filesSorter(files) {
-      return sortAllFilenames(files, ["App.jsx"]);
+      return sortAllFilenames(files, ["index.html", "App.jsx"]);
     },
   },
   {

index.html

@@ -48,7 +48,7 @@
         font-family: "Mona Sans";
         src: url("/font/Mona-Sans.woff2") format("woff2 supports variations"),
           url("/font/Mona-Sans.woff2") format("woff2-variations");
-        font-weight: 200 500;
+        font-weight: 200 500 600;
         font-stretch: 75% 125%;
         font-display: swap;
       }