[Bug?]: submission.clear is not a function

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

submission.clear() throws TypeError: submission.clear is not a function

Expected behavior 🤔

submission.clear() does not throw

Steps to reproduce 🕹

Steps:

Create a route with the following content:

import { action, useSubmission } from '@solidjs/router'

const act = action(async () => {
  'use server'
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return 'OK'
})

export default function Route() {
  const submission = useSubmission(act)
  return (
    <form action={act} method="post">
      <input type="text" name="name" />
      <button type="submit">Submit</button>
      <button type="button" onClick={() => submission.clear()}>Clear</button>
      <button type="reset">Reset</button>
    </form>
  )
}

Open the route and click "Clear" button

Context 🔦

Typings says clear can't be undefined:

solid-router/src/types.ts

Lines 195 to 203 in 10b7d8c

    
           export type Submission<T, U> = { 
        
             readonly input: T; 
        
             readonly result?: U; 
        
             readonly error: any; 
        
             readonly pending: boolean; 
        
             readonly url: string; 
        
             clear: () => void; 
        
             retry: () => void; 
        
           };

Seams like need to fix typings or always return a clear function.

Your environment 🌎

"@solidjs/router": "^0.13.5"
"@solidjs/start": "^1.0.1"

Probably I had to report this issue to solid-router, but actually all the methods of useSubmission are undefined by default, even when server returns flash= cookie with action result info, i.e. no javascript case is not working and it is probably solid-start issue.

Oh.. I see. Yeah this is a router issue. Like the API for useSubmissions assumes an array and it can be empty. However for useSubmission it assume one and it can be undefined. I did it with a proxy so it could dynamically switch under without a accessor function but I'm being too clever here. I should probably have the proxy always return the method even as a no-op. But in general this is an example where I probably didn't take TS into consideration properly because as you said any property could be undefined. I will need to look at what I can do here with TS.

	export type Submission<T, U> = {
	readonly input: T;
	readonly result?: U;
	readonly error: any;
	readonly pending: boolean;
	readonly url: string;
	clear: () => void;
	retry: () => void;
	};