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

Using custom renderer for standard components seems to break page events #265

Open
slahn opened this issue Apr 8, 2024 · 1 comment
Open

Comments

@slahn
Copy link

slahn commented Apr 8, 2024

When I supply a custom renderer for the Page component, the navigation between the forms in the demo breaks.

This also happens when you use the default rendering of the Page component, as long as it's wrapped in the CustomRenderer.

The same thing happens if I leave the Page component alone, but handle ServerLoad in the custom renderer.

When Page is rendered via a CustomRenderer, instead of directly by AnyComp,
you need two clicks to navigate between the forms in the demo.
The first click changes the displayed URL, but the fetch request is never sent.
A second click sends the request, and swaps out the form.

You can reproduce this with npm-fastui-prebuilt and a small patch.
If you would rather I make a branch that shows the error, I'm happy to do that as well.

diff --git a/src/npm-fastui-prebuilt/src/App.tsx b/src/npm-fastui-prebuilt/src/App.tsx
index c43cfdd..099d071 100644
--- a/src/npm-fastui-prebuilt/src/App.tsx
+++ b/src/npm-fastui-prebuilt/src/App.tsx
@@ -1,6 +1,7 @@
 import { CustomRender, FastUI, renderClassName } from 'fastui'
 import * as bootstrap from 'fastui-bootstrap'
 import { FC, ReactNode } from 'react'
+import { DivComp } from '../../npm-fastui/src/components'

 export default function App() {
   return (
@@ -38,6 +39,11 @@ const Transition: FC<{ children: ReactNode; transitioning: boolean }> = ({ child

 const customRender: CustomRender = (props) => {
   const { type } = props
+
+  if (type === 'Page') {
+    return () => <DivComp {...props} />
+  }
+
   if (type === 'Custom' && props.library === undefined && props.subType === 'cowsay') {
     console.assert(typeof props.data === 'string', 'cowsay data must be a string')
     const text = props.data as string
@slahn
Copy link
Author

slahn commented Apr 9, 2024

I think this happens because of a unnecessary remount of the custom rendered component, which breaks the nested ServerLoad component - maybe because the event listener is removed and re-added?

If I change CustomRender to return a ReactNode instead of a FC, everything works - I'm guessing React notices that the component tree doesn't change, then.

Let me know if you want a PR. This breaks the public API, though. Maybe there's a way to fix this while preserving the API.

@slahn slahn changed the title Custom rendering of Page breaks demo Using custom renderer for standard components seems to break page events Apr 9, 2024
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

1 participant