Toy Level Reactivity like Vue 3.x

Hydrogen

Last update: Oct 17, 2022

Related tags

React Libraries reactivity

Overview

reactivity

Reactivity like Vue 3.x

Features

Typescript JSX Support
Components and Fragment
Dependency-Collect Reactivity
Reactive Object based on ES6 Proxy
Ref and Computed Objects
Functional Component
Partly Composition API
Output Native DOM Node

Examples

info.name, () => info.age ], (old, newVal) => { console.log(old, newVal, "watch") }) const handleInputName = (ev: InputEvent) => { info.name = (ev.target as HTMLInputElement)?.value ?? "" } const handleInputAge = (ev: InputEvent) => { info.age = parseInt((ev.target as HTMLInputElement)?.value ?? "") } return ( <>

Hi, My name is {() => info.name /* Make it reactive */}. I'm {() => info.age} years old.

Name:

Age:

) }) const Count = defineComponent(() => { const count = ref(0) const handleClick = () => count.value += 1 return ( <>

Click times: {count}

) }) const Text = defineComponent<{ name: string }>((ctx) => (

{ctx.props.name}

)) const App = defineComponent(() => ( <> )) mount('#app', )">

import {
  defineComponent,
  reactive,
  mount,
  watch,
  ref,
} from './reactivity'

const NameInput = defineComponent(() => {
  
  const info = reactive<{
    name: string,
    age: number
  }>({
    name: "John",
    age: 20
  })

  watch([
    () => info.name,
    () => info.age
  ], (old, newVal) => {
    console.log(old, newVal, "watch")
  })

  const handleInputName = (ev: InputEvent) => {
    info.name = (ev.target as HTMLInputElement)?.value ?? ""
  }

  const handleInputAge = (ev: InputEvent) => {
    info.age = parseInt((ev.target as HTMLInputElement)?.value ?? "")
  }

  return (
    <>
      <p>Hi, My name is {() => info.name /* Make it reactive */}. I'm {() => info.age} years old.</p>
      <p>Name: <input 
          onInput={handleInputName}
          value={info.name /* This is not reactive */}
        />
      </p>
      <p>Age: <input 
          onInput={handleInputAge} 
          value={info.age}
        />
      </p>
    </>
  )
})

const Count = defineComponent(() => {
  const count = ref(0)
  const handleClick = () => count.value += 1

  return (
    <>
      <p>Click times: {count}</p>
      <button onClick={handleClick}>Click me! {count}</button>
    </>
  )
})

const Text = defineComponent<{
  name: string
}>((ctx) => (<h1>{ctx.props.name}</h1>))

const App = defineComponent(() => (
  <>
    <Text name="hello" />
    <Count />
    <NameInput />
  </>
))

mount('#app', <App />)

License

MIT License, Copyright (c) Hydrogen

Lightweight react-like library. Support for asynchronous rendering and hooks.

Recept · Lightweight react-like library. Like the name, this project is mainly based on the architectural idea of react, which can feel react more int

52 Sep 17, 2022

⚛️ 🎥 3️⃣ A minimal boilerplate for Remotion + React Three Fiber

Remotion + React Three Fiber Starter Template This is a template repository, click "Use this template" to create a repository based off this template!

40 Dec 1, 2022

⚛️ 🎥 3️⃣ A minimal boilerplate for Remotion + React Three Fiber

Remotion + React Three Fiber Starter Template This is a template repository, click "Use this template" to create a repository based off this template!

40 Dec 1, 2022

A toy virtual DOM diffing and reconciliation algorithm, with a simple event loop

3 Jan 31, 2022

Toy video game project using PixiJS, React and Typescript

PixiJS space shooter This project was developed as a learning experience, to learn the basics of video game development using PixiJS as the graphics e

1 Dec 30, 2021

genji is A small vue state management framewok by vue3 reactivity.

genji is A small vue state management framewok by vue3 reactivity. Why calls genji ? It's inspired by Overwatch. Genji flings prec

13 Sep 5, 2022

basic implementation of the Vue 3 reactivity engine - from scratch

Vue 3 Reactivity This material was created by Marc Backes in order to show how reactivity is solved in Vue 3. It contains a basic implementation of th

13 Oct 6, 2022

A reactive filesystem interface based on Vue 3 reactivity system.

37 Oct 8, 2022

A mini version of Vue 3 with reactivity, runtime, and compiler modules

29 Jun 16, 2022

A pokemon-like project game where you level up by hacking your neighbor.

CTF BourgPalette A pokemon-like project game where you level up by hacking your neighbor. You play as a new hacker. You are not trying to capture all

23 Dec 27, 2022

🌩 A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte

Storeon A tiny event-based Redux-like state manager for React, Preact, Angular, Vue and Svelte. Small. 180 bytes (minified and gzipped). No dependenci

1.9k Dec 30, 2022

js-generate-password is usable for every javascript and typescript based project like react, vue, node, etc. it used to generate passwords that may contain alphabets, number and symbols. The options parameter enables the user to enable or disable the characters that are used to generate random password.

js-generate-password js-generate-password is usable for every javascript and typescript based project like react, vue, node, etc. it used to generate

38 Dec 1, 2022

Framework frontend Javascript yg dibuat untuk belajar lebih memahami tentang sistem reactivity pada framework2 frontend modern.

Fremwok-Fremwokan Framework frontend Javascript yg dibuat untuk belajar lebih memahami tentang sistem reactivity pada framework2 frontend modern. jika