Lazy inner tags are not shown

[kethan]

const Lazy = lazy(() => import('./Hello'));
export function App() {
  return (
    <div>
      <Suspense fallback={'loading'}>
        <Lazy />
        <div>111</div>
        <Lazy />
        <div>111</div>
      </Suspense>
    </div>
  )
}`

This `<div>111</div>`  is not shown.

[yisar]

What version do you use? This looks like a bug, and I'll refactor them in v2.1.

[kethan]

What version do you use? This looks like a bug, and I'll refactor them in v2.1.

"dependencies": { "fre": "^2.0.7" },

[yisar]

Thank you. I'll refactor them in 2.1. I've come up with a better idea

Wait for me.

[kethan]

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?

[yisar]

Is there a context provider in fre as in react?

https://github.com/yisar/fre/issues/213#issuecomment-754768434

I haven't implemented context selector yet, but it can be implemented externally through pub-sub simulation

[kethan]

Is there a context provider in fre as in react?

#213 (comment)

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. fre.js:1 Uncaught TypeError: Cannot set property 'parent' of undefined

[kethan]

Any update on context or suspense? I have very less time i have to select one framework and start my office project.

[yisar]

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

[kethan]

th useEffect

How to do the same in useEffect() can you share with me a code snippet, please?

[yisar]

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.

[kethan]

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.

[yisar]

@kethan Yes, it is different from Suspense. I will study the implementation of Suspense as soon as possible

[kethan]

@kethan Yes, it is different from Suspense. I will study the implementation of Suspense as soon as possible

ok Thanks.

[kethan]

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>

[yisar]

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.

[kethan]

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.

[kethan]

just curious any progress?

[yisar]

just curious any progress?

I'm too busy at work.

[kethan]

just curious any progress?

I'm too busy at work.

Thanks for updating