denoland / fresh

The next-gen web framework.
https://fresh.deno.dev
MIT License
12.56k stars 648 forks source link

Spliting context to a separate file doubles the result #2249

Closed ooker777 closed 8 months ago

ooker777 commented 10 months ago

Below are two versions of my code. When the context is not split into a separate file, the result is only value, working as expected. However when it is split, then the result is double as valuevalue. I can't reasoning why this is the case. Do you have any idea?

Case 1: Not splitting context to another file

routes/index.tsx

import { User } from "../../fresh-project/islands/User.tsx";
import { createContext } from 'preact'

export const Username = createContext()

function ContextProvider({children}) {
  return (
    <Username.Provider value="value">{children}</Username.Provider>
  );
}
export default function App() {
  return (
    <ContextProvider>
      <User />
    </ContextProvider>
  )
} 

islands/User.tsx

import { useContext } from 'preact/hooks';
import { Username } from '../routes/index.tsx'

export function User() {
  const username = useContext(Username);
  return <>{username}</>;
} 

The result of this is value.

Case 2: Splitting context to another file

routes/index.tsx

import ContextProvider from '../islands/Context.tsx'
import { User } from "../../fresh-project/islands/User.tsx";

export default function App() {
  return (
    <ContextProvider>
      A<User />a
    </ContextProvider>
  )
}

islands/Context.tsx

import { createContext } from 'preact'

export const Username = createContext()

export default function ContextProvider({children}) {
  return (
    <Username.Provider value="value">{children}</Username.Provider>
  );
}

islands/User.tsx

import { useContext } from 'preact/hooks';
import { Username } from './Context.tsx'

export function User() {
  const username = useContext(Username);
  return <>{username}</>;
} 

Then at first the result is Avaluea as expected, but quickly rendered to Avalueavaluea.

Case 3: Adding a character after {children} on Context.tsx

import { createContext } from 'preact'

export const Username = createContext()

export default function ContextProvider({children}) {
  return (
    <Username.Provider value="value">{children}c</Username.Provider>
  );
}

Then at first the result is Avaluea as expected, but quickly rendered to Avalueacac.

marvinhagemeister commented 8 months ago

The issue is that using context to pass data to island is not supported in Fresh.

Closing as duplicate of https://github.com/denoland/fresh/issues/983 .