-
-
Notifications
You must be signed in to change notification settings - Fork 351
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Lazy inner tags are not shown #276
Comments
What version do you use? This looks like a bug, and I'll refactor them in v2.1. |
"dependencies": { |
Thank you. I'll refactor them in 2.1. I've come up with a better idea Wait for me. |
ok, thanks. I my office project thinking to use fre very soon. Is there a context provider in fre as in react? |
I haven't implemented context selector yet, but it can be implemented externally through pub-sub simulation |
Thanks, I made context working. import { useLayout, useReducer, useRef, useEffect } from "fre";
export const createContext = defaultValue => {
const context = {
value: defaultValue,
subs: new Set(),
Provider: ({ value, children = null }) => {
useLayout(() => {
context.subs.forEach((fn: any) => fn(value))
context.value = value;
})
return children;
}
}
return context;
}
export const useContext = (context, selector?) => {
const subs = context.subs
const [, forceUpdate] = useReducer(c => c + 1, 0)
const selected = selector ? selector(context.value) : context.value
const ref = useRef(null)
useEffect(() => {
ref.current = selected
})
useEffect(() => {
const fn = (nextValue: unknown) => {
if (ref.current === selector(nextValue)) return;
forceUpdate(nextValue);
}
subs.add(fn)
return () => subs.delete(fn);
}, [subs])
return selected
} import { useState } from "fre"
import { createContext, useContext } from "./context";
const Theme = createContext('light');
function NestedTheme() {
const theme = useContext(Theme);
return <p>Nested Active theme: {theme}</p>;
}
function DisplayTheme(props) {
const theme = useContext(Theme);
return (
<div>
{props && props.children}
<p>Display Active theme: {theme}</p>
</div>
)
}
export default () => {
const [count, setCount] = useState(0)
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>+</button>
<Theme.Provider value="light">
<DisplayTheme>
<NestedTheme />
</DisplayTheme>
<DisplayTheme />
</Theme.Provider>
</div>)
} But getting issues while displaying children. |
Any update on context or suspense? I have very less time i have to select one framework and start my office project. |
I'm really sorry, because I'm reconstructing the core algorithm of fre2.1, and a lot of things have changed. I've released an emergency version that fixes context bugs, which you can do this: yarn add [email protected] About lazy and Suspense, I haven't found a good way yet, maybe I will add them back in version 2.2. You can temporarily replace them with useEffect |
How to do the same in useEffect() can you share with me a code snippet, please? |
function App(){
const [Component, setComponent] = useState(‘loading’)
useEffect(() =>{
import('./app.js').then(({default})=>{
setComponent(default)
})
})
return <div><Component/></div>
} It's not a good idea, but I'm still working on the implementation of Suspense, or have you noticed. |
I tried context it's working fine. But the above code is loading the component but the button count is not updating. |
@kethan Yes, it is different from Suspense. I will study the implementation of Suspense as soon as possible |
ok Thanks. |
In preact, I am able to lazy load the component and then pass context to the lazy-loaded component. <Suspense fallback={<div>loading...</div>}>
<div>
<Theme.Provider value="green">
<Lazy />
</Theme.Provider>
</div>
</Suspense> |
I know this, preact external implementation, I also want to do this, will not put it in the core But it's not easy to implement it safely in fre's current algorithm. I need time. |
OK, sure no problem. meanwhile will start using preact now. Thanks for your support. |
just curious any progress? |
I'm too busy at work. |
Thanks for updating |
The text was updated successfully, but these errors were encountered: