v5 draft

[betula]

// App.jsx
import React, { useState, useCallback } from 'react';
import { set, useService } from 'lamp-luwak';

// Primary syntax (you can modify count only in owned class methods not in React components or another classes)

class Counter {
	count = 0; // auto getter/setter for non function value
	inc = () => this.count += 1;
	dec() { this.count -= 1; } // That syntax is possible too
}

const Comp = () => {
	const { count, inc, dec } = useService(Counter); // Need to be create new proxy for each component for detection of using properties in that React component and update It only if update used property
	return (
		<>
			<i>{count}</i>
			<button onClick={inc}>+</button>
			<button onClick={dec}>-</button>
		</>
	)
}

class CurrentUser {
	firstName = 'Jonh'; // Only scalar value (or plain object) possible here, functions no possible
	lastName = 'Doe'
	get name() { // getter is computed forever
		return this.firstName + ' ' + this.lastName
	}
}

// Secondary

class Counter {
	state = {
		count: 0
	},
	inc = () => modify().count += 1;
	dec = () => modify().count -= 1;
}

class Counter {
	state = 0,
	inc = () => set(get() + 1);
	dec = () => set(get() - 1);
}

// Others

class Counter {
	state = 0,
	inc = () => this.state += 1;
	dec = () => this.state -= 1;
}

const Comp = () => {
	const counter = useService(Counter);
	return (
		<>
			<i>{counter.state}</i>
			<button onClick={counter.inc}>+</button>
			<button onClick={counter.dec}>-</button>
		</>
	)
}

const Comp = () => {
	const { state, inc, dec } = service(Counter);
	return (
		<>
			<i>{state}</i>
			<button onClick={inc}>+</button>
			<button onClick={dec}>-</button>
		</>
	)
}

class CounterStore {
	state = 0,
	inc() {
		this.state += 1;
	}
	dec() {
		this.state -= 1;
	}
}

const Counter = store(0, {
  inc: () => set(state => state + 1);
  dec: () => set(state => state - 1);
});

const Comp = () => {
  const  {  }
}

class CounterStore {
	state = 0,
	inc() {
		set(state => state + 1);
	}
	dec() {
		set(state => state - 1);
	}
}

class CounterStore {
	count = new Flow(0);
	inc() {
		this.count.set(this.count.get() + 1);
	}
	dec() {
		this.count.set(this.count.get() - 1);
	}
}

const Counter = () => {
  const count = flow(0);
  return {
    inc: () => count.set(count.get() + 1),
    dec: () => count.set(count.get() - 1)
  }
}

// При вызове через service, можно определять count как Flow при обращение и делать ему get(), что бы вставлять как значение


const CounterStore = () => ({
	count = 0,
	inc: () => set(({ count }) => { count: count + 1}), // ????
	dec: () => set(state => state - 1),
});

const Count = () => {
  const { state } = useService(CounterStore);
  return <p>{state}</p>;
};

const Buttons = () => {
  const { inc, dec } = useService(CounterStore);
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </>
);

export default App;