Compare Declarative Frameworks

<template>
  <p v-if="condition">Condition is true</p>
  <p v-else>Condition is false</p>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  condition: Boolean
});
</script>

function ConditionalComponent({ condition }) {
  return (
    <>
      {condition ? (
        <p>Condition is true</p>
      ) : (
        <p>Condition is false</p>
      )}
    </>
  );
}

// Usage
<ConditionalComponent condition={true} />;

struct ConditionalComponent: View {
    let condition: Bool

    var body: some View {
        Group {
            if condition {
                Text("Condition is true")
            } else {
                Text("Condition is false")
            }
        }
    }
}

// Usage
ConditionalComponent(condition: true)

<template>
  <button @click="setClicked">
    {{ clicked ? "Button clicked" : "Click me" }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const clicked = ref(false);

function setClicked() {
  clicked.value = true;
}
</script>

import { useState } from "react";

function ClickableComponent() {
  const [clicked, setClicked] = useState(false);

  return (
    <button onClick={() => setClicked(true)}>
      {clicked ? "Button clicked" : "Click me"}
    </button>
  );
}

struct ClickableComponent: View {
    @State private var clicked = false

    var body: some View {
        Button(action: {
            clicked = true
        }) {
            Text(clicked ? "Button clicked" : "Click me")
        }
    }
}

struct ExampleComponent: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ExampleComponent_Previews: PreviewProvider {
    static var previews: some View {
        ExampleComponent()
    }
}

<template>
  <ul>
    <li v-for="person in items" :key="person.id">
      Name: {{ person.name }}, Age: {{ person.age }}
    </li>
  </ul>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  items: Array
});
</script>

<!-- Usage -->
<item-keys-example
  :items="[
    { name: 'John', age: 30, id: '1' },
    { name: 'Jane', age: 28, id: '2' },
    { name: 'Bob', age: 25, id: '3' }
  ]"
></item-keys-example>

function ItemKeysExample({ items }) {
  return (
    <ul>
      {items.map((person) => (
        <li key={person.id}>
          Name: {person.name}, Age: {person.age}
        </li>
      ))}
    </ul>
  );
}

// Usage
<ItemKeysExample
  items={[
    { name: "John", age: 30, id: "1" },
    { name: "Jane", age: 28, id: "2" },
    { name: "Bob", age: 25, id: "3" },
  ]}
/>;

struct Person: Identifiable {
    let name: String
    let age: Int
    let id: String
}

struct ItemKeysExample: View {
    let items: [Person]

    var body: some View {
        List(items) { person in
            Text("Name: \(person.name), Age: \(person.age)")
        }
    }
}

// Usage
ItemKeysExample(items: [Person(name: "John", age: 30, id: "1"), Person(name: "Jane", age: 28, id: "2"), Person(name: "Bob", age: 25, id: "3")])

<template>
  <div :style="style">Hello, World!</div>
</template>

<script setup>
import { reactive } from 'vue';

const style = reactive({
  padding: '16px',
  backgroundColor: 'blue',
  color: 'white'
});
</script>

function ModifiersExample() {
  const style = {
    padding: "16px",
    backgroundColor: "blue",
    color: "white",
  };

  return <div style={style}>Hello, World!</div>;
}

struct ModifiersExample: View {
    var body: some View {
        Text("Hello, World!")
            .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
            .background(Color.blue)
    }
}

<!-- ParentComponent.vue -->
<template>
  <intermediate />
</template>

<script setup>
import { provide, ref } from 'vue';
import Intermediate from './IntermediateComponent.vue';

const data = ref('Some data');
provide('dataKey', data);
</script>

<!-- IntermediateComponent.vue -->
<template>
  <child />
</template>

<script setup>
import Child from './ChildComponent.vue';
</script>

<!-- ChildComponent.vue -->
<template>
  <p>Received data: {{ data }}</p>
</template>

<script setup>
import { inject } from 'vue';

const data = inject('dataKey');
</script>


<!-- Usage -->
<parent-component data="Some data"></parent-component>

import { createContext, useContext } from "react";

const CustomContext = createContext();

function Parent({ data }) {
  return (
    <CustomContext.Provider value={data}>
      <Intermediate />
    </CustomContext.Provider>
  );
}

function Intermediate() {
  return <Child />;
}

function Child() {
  const data = useContext(CustomContext);
  return <p>Received data: {data}</p>;
}

// Usage
<Parent data="Some data" />;

struct CustomEnvironmentKey: EnvironmentKey {
    static let defaultValue: String = ""
}

extension EnvironmentValues {
    var customData: String {
        get { self[CustomEnvironmentKey.self] }
        set { self[CustomEnvironmentKey.self] = newValue }
    }
}

struct Parent: View {
    let data: String

    var body: some View {
        Intermediate().environment(\.customData, data)
    }
}

struct Intermediate: View {
    var body: some View {
        Child()
    }
}

struct Child: View {
    @Environment(\.customData) private var data

    var body: some View {
        Text("Received data: \(data)")
    }
}

// Usage
Parent(data: "Some data")