align useFetcher API

brophdawg11 · May 31, 2022 · a2ac47d · a2ac47d
1 parent 1794dae
commit a2ac47d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 35 deletions.
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -35,6 +35,7 @@
   "scripts": {
     "build": "vite build && tsc -b",
     "clean": "git clean -fX .",
+    "dev": "vite dev",
     "integration:start": "vite dev --mode=production --port 3000",
     "integration:test": "cypress run --config-file ./../../cypress.json",
     "integration": "start-server-and-test integration:start http-get://localhost:3000/ integration:test"

diff --git a/packages/vue/reference-app/components/TaskItem.vue b/packages/vue/reference-app/components/TaskItem.vue
@@ -14,12 +14,12 @@ export default defineComponent({
     },
   },
   setup(props) {
-    let { Form, fetcher } = useFetcher();
+    let fetcher = useFetcher();
     let isDeleting = computed(() => fetcher.value.formData != null);
 
     return {
+      fetcher,
       task: props.task,
-      Form,
       isDeleting,
     };
   },
@@ -31,7 +31,12 @@ export default defineComponent({
   &nbsp;
   <Link :to="`/tasks/${task.id}`">Open</Link>
   &nbsp;
-  <component :is="Form" style="display: inline" action="/tasks" method="post">
+  <component
+    :is="fetcher.Form"
+    style="display: inline"
+    action="/tasks"
+    method="post"
+  >
     <button type="submit" name="taskId" :value="task.id" :disabled="isDeleting">
       {{ isDeleting ? "Deleting..." : "❌" }}
     </button>

diff --git a/packages/vue/reference-app/routes/NewTask.vue b/packages/vue/reference-app/routes/NewTask.vue
@@ -21,8 +21,8 @@ const isAdding = computed(() => navigation.value.state !== "idle");
 
 <template>
   <h3>New Task</h3>
-  <Form method="post" action="/tasks/new">
-    <input name="newTask" />
+  <Form method="post">
+    <input name="newTask" placeholder="Add a task..." :disabled="isAdding" />
     <button type="submit" :disabled="isAdding">
       {{ isAdding ? "Adding..." : "Add" }}
     </button>

diff --git a/packages/vue/src/remix-router-vue.ts b/packages/vue/src/remix-router-vue.ts
@@ -126,9 +126,9 @@ export function useFormAction(action = "."): string {
 
 let fetcherId = 0;
 
-type FetcherWithComponents<TData> = {
-  fetcher: ShallowRef<Fetcher<TData>>;
+type FetcherWithComponents<TData> = Fetcher<TData> & {
   Form: Component;
+  // TODO: abstract via useSubmitImpl
   submit(
     target:
       | HTMLFormElement
@@ -143,54 +143,51 @@ type FetcherWithComponents<TData> = {
   load: (href: string) => void;
 };
 
-export function useFetcher<TData = unknown>(): FetcherWithComponents<TData> {
+export function useFetcher<TData = unknown>(): Ref<
+  FetcherWithComponents<TData>
+> {
   let { router, stateRef } = getRouterContext();
   let defaultAction = useFormAction();
   let fetcherKey = String(++fetcherId);
   let fetcherRef = shallowRef<Fetcher<TData>>(
     router.getFetcher<TData>(fetcherKey)
   );
-  let fetcher = computed(() => fetcherRef.value);
 
   watch(
     stateRef,
     () => (fetcherRef.value = router.getFetcher<TData>(fetcherKey))
   );
 
-  onUnmounted(() => {
-    if (!router) {
-      console.warn("No fetcher available to clean up from useFetcher()");
-      return;
-    }
-    router.deleteFetcher(fetcherKey);
-  });
+  onUnmounted(() => router.deleteFetcher(fetcherKey));
 
-  return {
-    Form: defineComponent({
-      name: "fetcher.Form",
-      props: {
-        replace: {
-          type: Boolean,
-          default: false,
-        },
-        onSubmit: {
-          type: Function,
-          default: undefined,
-        },
+  let Form = defineComponent({
+    name: "fetcher.Form",
+    props: {
+      replace: {
+        type: Boolean,
+        default: false,
+      },
+      onSubmit: {
+        type: Function,
+        default: undefined,
       },
-      setup:
-        (props, { slots }) =>
-        () =>
-          h(FormImpl, { ...props, fetcherKey }, slots.default),
-    }),
+    },
+    setup:
+      (props, { slots }) =>
+      () =>
+        h(FormImpl, { ...props, fetcherKey }, slots.default),
+  });
+
+  return computed(() => ({
+    ...fetcherRef.value,
+    Form,
     submit(target, options = {}) {
       return submitForm(router, defaultAction, target, options, fetcherKey);
     },
     load(href) {
       return router.fetch(fetcherKey, href);
     },
-    fetcher,
-  };
+  }));
 }
 
 export function useFetchers(): Fetcher[] {