Brainstorm v4

[betula]

• Think about selector style syntax for calculate dependent values
• Think about change first example. We need protect our ideology from "mutable store" illusion in readme example.

[betula]

May be change example to this api. Think about.

import { useProvide, set, get } from 'lamp-luwak';

class User {
  store = 'John';
}

const UserNameEditor = () => {
  const user = useProvide(User);
  return (
    <input
      onChange={(e) => set(user, e.target.value)}
      value={get(user)}
    />
  )
};

[betula]

No middlewares (research this question, see use cases of middlewares)
Whats redux problems solve that decision
Selectors
Look like as javascript proxy object, or another type of proxy using. (May be remove modify. Is it can be problem??)
Присвоение мутабельное всем кажется присутствует мутабельность из-за примера.
Рассказать про примитивность, что все максимально просто, что бы быть максимально быстрым.

[betula]

constructor() {
	this.getList = selector(this, () => {
		
	});
}
getList = selector(() => {
  return this.user.firstName + ' ' + this.use.lastName;
})

[betula]

88dd8bb
get/set functions added. But need to add typings for this functions.

[betula]

May be something same for selectors:

selector(() => {
	const todo = provide(Todo);
	const user = provide(User);
	return get(todo)[get(user).filter];
})

[betula]

class Todo {
  filter = provide(Filter);
  state = [];
  getList() {
    return selector(() => this.state.filter((i) => i.completed === this.filter.state));
  }
}

In this case we decide case in redux selector in the next example.

class Task {
  todo = provide(Todo);
  getNumberedLabel() {
    return selector(() => `I'm ${this.getOrder()} in list`);
  }
  getOrder() { // I think its possible subscribe to task and todo here in any component where I can use It. If I make only hooks framework, I can subscribe to anybody everywhere that I want, and Its will be correct unlink after components die. Check hypothesis about only hooks framework, Its will be really really interesting! And we can use counter of subscribers here, and optimize hard calculation, think about too)
    return this.todo.getTaskOrder(this);
  }
}
class Todo {
  state = [] as Task[];
  getTeskOrder(task) {
    return this.state.indexOf(task);
  }
}

I think it possible to make system of changing subscription (mix of mobx, observe to access to state prop, and react-hooks, we need subscribe each component independently, think about)

class Task {
  todo = provide(Todo);
  getNumberedLabel = selector(() => `I'm ${this.getOrder()} in list`); // Read about this here and see decopiled code

And alternative syntax

export const Task = () => {
  const todo = provide(Todo);
  const getNumberedLabel = selector(() => `I'm ${getOrder()} in list`);
  const getOrder = () => todo.getTaskOrder(this);
  return { // If It doesn't contain store inside, that mean store will created automatic in creation phase
    getNumberedLabel
  }
}
export const Todo = () => {
  const store = store<Task[]>();
  const getTaskOrder = (task) => store.state.indexOf(task);
  return mix(store, { // or merge, apply, create?... etc
    getTaskOrder
  });
}

If It global and everywhere available we can use It without provide function, by direct calls. Think about It.

// Todo.ts
export const Task = () => {
  const store = store<Task>();
  const getNumberedLabel = selector(() => `I'm ${getOrder()} in list`);
  const getOrder = () => getTaskOrder(this); // this ??
  return {
    store,
    getNumberedLabel
  }
}

export const taskList = store<Task[]>();
export const getTaskOrder = (task) => taskList.state.indexOf(task);

[betula]

Think about syntax of depend stores

// effects/
//   debounce.ts

export const debounce = (store) => {
  const store2 = store<typeof store>();
  subscribe(store, () => {
    // ....
    store2.state = store.state; 
  });
  return store2;
}

Its makes new debounced store from another one

[betula]

May be make store+methods for It entity name "atom".

const createTask = () => {
  // ...
  return atom(store, methods);  // Think about it...?? may be no need, not a modern look like.
}

[betula]

New API design evening brainstorm

const hello = useProvide(Hello);
const m = useProvide(M);

const c = useSelector(() => hello.address );




const hello = createStore();
const hello = create((set) => ({
  state: 0,
  run: () => set({ a: 1 });
}));
const hello = store({ a: 10 });


const helloFactory = () => {
  return store({
    address: null
  });
}

set(helloFactory(), state => state);

const setList = (user: User, list: []) => set(user, (state) => ({ ...state, list }));

class Hello {
  state = {
    address: null
  };
  perform() {
    modify(this).address = {};
  }
}


const debounce = (source: Store) => { // Debounce solve here
  const store2 = create(source); // Make new store with default values from another
  subscribe(source, (value) => {
    set(store2, value);
  });
  // chan2.state === {}
  return store2;
};

// Make overloading create(initialState); create(Class); Think about function who return store () => create(User)???
// Make one more overloading create(sourceStore);

subscribe(store1, store2, (newState1, newState2, prevState1, prevState2) => { // Diamond problem solve here
  // ...
});

create(Hello, store1, store2);//, () => ({ ...store1.state, ...store2.state }));

const combined = create(store1, store2, (state1, state2) => ({
  ...state1,
  ...state2
}));

const UserService = () => { // It is interesting syntax too
  const store = create({ id: 10 });
  const address = create(store, (state) => state.id);

  return extend(store, {
    get id() { return store.state.id },
    move() {
      return store.state.id;
    }
  }
};

// Next question - syntax of http cancelling

const request = (url) => {
  const store = create({
    data: [],
    process: true,
    id: null
  });
  const hadler = fetch(url)
    .then((data) => {
      set(store, (state) => ({ ...state, data, process: false }));
    })
    .catch((error) => {
      set(store, (state) => ({ ...state, error, process: false }));
    });
  modify(store).id = handler.id;

  onDestroy(store, () => { //??
    // http.cancel ---
  });


  return store;
}

const debounce = (source: Store) => { // Debounce solve here
  const store2 = create(source); // Make new store with default values from another
  subscribe(source, (value) => {
    set(store2, value);
  });

  // I think it is more interesting to change "subscribe" function name to "watch" it is will look like below

  watch(source, (value) => {});

  subscribe(source, (value) => {});

  // propogate(source, store2);

  chan(store2, [ source ], (signal) => {
    if (signal === "http_cancel") {
      // ...
      // for (i of [1..10]) send({ i }); // Same as react hooks contextual function call
    }
    return signal;
  });

  send(store2, "http_cancel"); // Send signal without contextual calculation
  recieve(store2, (signal) => {
    // ...
  });

  // Short notation
  chan(store2, source);

  // chan2.state === {}
  return store2;
};

[betula]

Test for v4 syntax
cd2dde4#diff-d8c2fc7e1e9406f2af4e456316493959

[betula]

May be naming of next functions:

const App = () => {
  const user = useStore(User)
  const userService = useService(User);
  return </ div>;
}

For old case I think useSubscribe is good.

const App = ({ user }) => {
  useSubscribe(user);
  return </div>;
}

[betula]

Start implementation of v4 syntax
https://github.com/betula/lamp-luwak/commits/v4

[betula]

#53