Size: a a a
IS
🚀🚀
yarn test --testPathPattern='vue/__tests__' --watch🚀🚀
🚀🚀
ф
vue/dist/vue.runtime.common.dev.js, если юзать umd, то его просто нет🚀🚀
🚀🚀
🚀🚀
Б
const App = () => {
const value1 = useStore(store1);
const value2 = useStore(store2);
const value3 = useStore(store3);
const value4 = useStore(store4);
const value5 = useStore(store5);
return (
<div>
<div>{value1}</div>
<div>{value2}</div>
<div>{value3}</div>
<div>{value4}</div>
<div>{value5}</div>
</div>
)
}
а я хочу писать как-то так (читать переменные сразу в шаблоне например вызывая через функцию без необходимости дублировать эти переменные через useStore)const App = () => {
return (
<div>
<div>{value1()}</div>
<div>{value2()}</div>
<div>{value3()}</div>
<div>{value4()}</div>
<div>{value5()}</div>
</div>
)
}
И можно было бы написать простой враппер const value1 = () => useStore(store1) - но проблема в том реакт выдаст ошибку (или будут баги) если вызывать useStore внутри условий - <div>{someFlag ? value1() : value2()}</div>🚀🚀
const App = () => {
const value1 = useStore(store1);
const value2 = useStore(store2);
const value3 = useStore(store3);
const value4 = useStore(store4);
const value5 = useStore(store5);
return (
<div>
<div>{value1}</div>
<div>{value2}</div>
<div>{value3}</div>
<div>{value4}</div>
<div>{value5}</div>
</div>
)
}
а я хочу писать как-то так (читать переменные сразу в шаблоне например вызывая через функцию без необходимости дублировать эти переменные через useStore)const App = () => {
return (
<div>
<div>{value1()}</div>
<div>{value2()}</div>
<div>{value3()}</div>
<div>{value4()}</div>
<div>{value5()}</div>
</div>
)
}
И можно было бы написать простой враппер const value1 = () => useStore(store1) - но проблема в том реакт выдаст ошибку (или будут баги) если вызывать useStore внутри условий - <div>{someFlag ? value1() : value2()}</div>const App = () => (
<div>
<div>{useStore(value1)}</div>
<div>{useStore(value2)}</div>
<div>{useStore(value3)}</div>
</div>
)🚀🚀
🚀🚀
Б
const store1 = createStore(..)
const store2 = createStore(..)
const store3 = createStore(..)
const store4 = createStore(..)
const store5 = createStore(..)
const value1 = autoSub(store1);
const value2 = autoSub(store2);
const value3 = autoSub(store3);
const value4 = autoSub(store4);
const value5 = autoSub(store5);
const App = component(() => {
return (
<div>
<div>{value1()}</div>
{someFlag
? <div>{value2()}</div>
: <div>{value3()}</div>
}
<div>{value4()}</div>
<div>{value5()}</div>
</div>
)
})
Б
let CurrentComponentStores = null;
const component = () => {
return (fn) => {
//получаем из состояния все сторы на которые компонент подписан
const storesState = useRef({stores: [], storesUnsubs: []});
//и отписываемся (если это медленно то можно добавить сравнение старых сторов и новых чтобы отписываться только от нужных)
storesState.storesUnsubs.forEach(unsub => unsub());
//вытаскиваем setState чтобы обновить компонент при изменении стора
const [state, setState] = useState({});
//записываем в глобальную переменную сторы чтобы вызов autoSub смог запушить себя но сначала свапим с временной переменной чтобы восстановить после вызова компонента
const temp = CurrentComponentStores;
CurrentComponentStores = storesState.stores = [];
//вызываем компонент
fn();
//восстанавливаем предыдущее значение CurrentComponentStores
CurrentComponentStores = temp;
//подписываемся на все сторы которые были автоматически добавлены
storesState.storesUnsubs = storesState.stores.map(store => store.updates.watch(() => setState({})))
}
}
const autoSub = (store) => {
return () => {
//пушим в глобальную переменную чтобы враппер component смог подписаться на стор
if(CurrentComponentStores) CurrentComponentStores.stores.push(store);
return store.getState();
}
}
🚀🚀
let CurrentComponentStores = null;
const component = () => {
return (fn) => {
//получаем из состояния все сторы на которые компонент подписан
const storesState = useRef({stores: [], storesUnsubs: []});
//и отписываемся (если это медленно то можно добавить сравнение старых сторов и новых чтобы отписываться только от нужных)
storesState.storesUnsubs.forEach(unsub => unsub());
//вытаскиваем setState чтобы обновить компонент при изменении стора
const [state, setState] = useState({});
//записываем в глобальную переменную сторы чтобы вызов autoSub смог запушить себя но сначала свапим с временной переменной чтобы восстановить после вызова компонента
const temp = CurrentComponentStores;
CurrentComponentStores = storesState.stores = [];
//вызываем компонент
fn();
//восстанавливаем предыдущее значение CurrentComponentStores
CurrentComponentStores = temp;
//подписываемся на все сторы которые были автоматически добавлены
storesState.storesUnsubs = storesState.stores.map(store => store.updates.watch(() => setState({})))
}
}
const autoSub = (store) => {
return () => {
//пушим в глобальную переменную чтобы враппер component смог подписаться на стор
if(CurrentComponentStores) CurrentComponentStores.stores.push(store);
return store.getState();
}
}
🚀🚀
🚀🚀
let CurrentComponentStores = null;
const component = () => {
return (fn) => {
//получаем из состояния все сторы на которые компонент подписан
const storesState = useRef({stores: [], storesUnsubs: []});
//и отписываемся (если это медленно то можно добавить сравнение старых сторов и новых чтобы отписываться только от нужных)
storesState.storesUnsubs.forEach(unsub => unsub());
//вытаскиваем setState чтобы обновить компонент при изменении стора
const [state, setState] = useState({});
//записываем в глобальную переменную сторы чтобы вызов autoSub смог запушить себя но сначала свапим с временной переменной чтобы восстановить после вызова компонента
const temp = CurrentComponentStores;
CurrentComponentStores = storesState.stores = [];
//вызываем компонент
fn();
//восстанавливаем предыдущее значение CurrentComponentStores
CurrentComponentStores = temp;
//подписываемся на все сторы которые были автоматически добавлены
storesState.storesUnsubs = storesState.stores.map(store => store.updates.watch(() => setState({})))
}
}
const autoSub = (store) => {
return () => {
//пушим в глобальную переменную чтобы враппер component смог подписаться на стор
if(CurrentComponentStores) CurrentComponentStores.stores.push(store);
return store.getState();
}
}
🚀🚀
Б
🚀🚀
const App = () => {
const value1 = useStore(store1);
const value2 = useStore(store2);
const value3 = useStore(store3);
const value4 = useStore(store4);
const value5 = useStore(store5);
return (
<div>
<div>{value1}</div>
<div>{value2}</div>
<div>{value3}</div>
<div>{value4}</div>
<div>{value5}</div>
</div>
)
}
а я хочу писать как-то так (читать переменные сразу в шаблоне например вызывая через функцию без необходимости дублировать эти переменные через useStore)const App = () => {
return (
<div>
<div>{value1()}</div>
<div>{value2()}</div>
<div>{value3()}</div>
<div>{value4()}</div>
<div>{value5()}</div>
</div>
)
}
И можно было бы написать простой враппер const value1 = () => useStore(store1) - но проблема в том реакт выдаст ошибку (или будут баги) если вызывать useStore внутри условий - <div>{someFlag ? value1() : value2()}</div>const App = createComponent({foo, bar}, (props, {foo, bar}) => {
})