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

Fix DOMException when replacing or pushing page history state with a complex object #776

Closed
wants to merge 1 commit into from

Conversation

iamohd-zz
Copy link

When trying to replace a page history state with a complex object, DOMException will be thrown. #775

This PR fixes this issue.

When trying to replace a page history state with a complex object, DOMException will be thrown. #775 

This PR fixes this issue.
@reinink
Copy link
Member

reinink commented Jul 1, 2021

Hmm, this shouldn't ever be necessary, as the page object that's received from a server response is what's saved in history state, and that comes from a JSON response. Meaning, there shouldn't ever be a complex JavaScript object within the page object. I'm honestly sure how that would be possible, without doing something weird/hacky.

@reinink reinink closed this Jul 1, 2021
@rkyoku
Copy link

rkyoku commented Feb 23, 2024

@reinink could you please remove functions before serializing?

Maybe this is what you call "weird" or "hacky", but I am dynamically adding functions to my object/prop.

Sure it's a different philosophy from using events for everything, but the advantages of this are:

  • more intuitive (a mere function call),
  • less weird and unnecessary code to communicate from child to parent,
  • fewer bugs (e.g. I forgot to attach the handler to the child comp, or misspelled the event name),
  • last but not least: it also works BEFORE the child component gets mounted (which doesn't work with events).

Events are golden when props are not passed to components. But when they are, events become irrelevant.

Compare this:

// ParentComp.svelte
export let myobj // retrieved from page props
myobj.onMyEvent = e => {/*do stuff*/}
<ChildComp {myobj} />

// ChildComp.svelte
export let myobj // passed from parent
myobj.onMyEvent()

With this:

// ParentComp.svelte
export let myobj
const onMyEvent = e => {/*do stuff*/}
<ChildComp {myobj} on:myevent={onMyEvent} />

// ChildComp.svelte
import { createEventDispatcher, onMount } from 'svelte'
export let myobj
const dispatch = createEventDispatcher()
onMount(() => {dispatch('myevent', {})})

Sure, you don't save 300 lines of code, but it's still a shorter syntax, more intuitive too, and with better separation of concerns and also less imports, and less error-prone (e.g. "oh fudge, I've been investigating this bug for at least 15 minutes but I just noticed I forgot to attach my event handler" kind of thing).

All you have to do in Inertia is to remove the functions from objects that get serialized, it's not a big deal, and it will give a lot more flexibility to devs.

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

Successfully merging this pull request may close these issues.

3 participants