Skip to content
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

Open
kethan opened this issue Jun 9, 2021 · 19 comments
Open

Lazy inner tags are not shown #276

kethan opened this issue Jun 9, 2021 · 19 comments

Comments

@kethan
Copy link

kethan commented Jun 9, 2021

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
Copy link
Collaborator

yisar commented Jun 9, 2021

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

@kethan
Copy link
Author

kethan commented Jun 9, 2021

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

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

@yisar
Copy link
Collaborator

yisar commented Jun 9, 2021

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

Wait for me.

@kethan
Copy link
Author

kethan commented Jun 9, 2021

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
Copy link
Collaborator

yisar commented Jun 9, 2021

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

@kethan
Copy link
Author

kethan commented Jun 9, 2021

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
Copy link
Author

kethan commented Jun 13, 2021

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

@yisar
Copy link
Collaborator

yisar commented Jun 13, 2021

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 fre@2.1.0-alpha2

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
Copy link
Author

kethan commented Jun 13, 2021

th useEffect

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

@yisar
Copy link
Collaborator

yisar commented Jun 13, 2021

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
Copy link
Author

kethan commented Jun 13, 2021

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
Copy link
Collaborator

yisar commented Jun 13, 2021

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

@kethan
Copy link
Author

kethan commented Jun 13, 2021

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

ok Thanks.

@kethan
Copy link
Author

kethan commented Jun 13, 2021

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
Copy link
Collaborator

yisar commented Jun 13, 2021

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
Copy link
Author

kethan commented Jun 13, 2021

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
Copy link
Author

kethan commented Jun 25, 2021

just curious any progress?

@yisar
Copy link
Collaborator

yisar commented Jun 25, 2021

just curious any progress?

I'm too busy at work.

@kethan
Copy link
Author

kethan commented Jun 25, 2021

just curious any progress?

I'm too busy at work.

Thanks for updating

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants