fix: useLoader fallback (#516)

* fix: useLoader fallback * docs: changeset Co-authored-by: Belinda Cao <[email protected]>
web-infra-dev · Jun 10, 2022 · ae5a9db · ae5a9db
1 parent 78c569e
commit ae5a9db
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 11 deletions.
diff --git a/.changeset/famous-ways-matter.md b/.changeset/famous-ways-matter.md
@@ -0,0 +1,5 @@
+---
+"@modern-js/runtime-core": patch
+---
+
+fix(runtime): useLoader fallback logic
diff --git a/packages/runtime/src/compatible.tsx b/packages/runtime/src/compatible.tsx
@@ -123,15 +123,11 @@ export const bootstrap: BootStrap = async (
       (res: any, key) => {
         const loaderData = loadersData[key];
 
-        if (
-          loaderData.loading !== false ||
-          loaderData.error ||
-          typeof loaderData.data === 'undefined'
-        ) {
+        if (loaderData.loading !== false) {
           return res;
         }
 
-        res[key] = loaderData.data;
+        res[key] = loaderData;
         return res;
       },
       {},

diff --git a/packages/runtime/src/loader/loaderManager.ts b/packages/runtime/src/loader/loaderManager.ts
@@ -15,7 +15,6 @@ const createGetId = () => {
     }
 
     // WARNING: id should be unique after serialize.
-    // In some cases， such as 0/'0' would generate the same id.
     const id = JSON.stringify(objectId);
 
     invariant(id, 'params should be not null value');
@@ -42,14 +41,18 @@ export type LoaderResult = {
 
 const createLoader = (
   id: string,
-  initialData: any,
+  initialData: LoaderResult = {
+    loading: false,
+    reloading: false,
+    data: undefined,
+    error: undefined,
+  },
   loaderFn: () => Promise<any>,
   skip = false,
 ) => {
   let promise: Promise<any> | null;
   let status: LoaderStatus = LoaderStatus.idle;
-  let data: any = initialData;
-  let error: any;
+  let { data, error } = initialData;
   let hasLoaded = false;
 
   const handlers = new Set<
@@ -80,7 +83,7 @@ const createLoader = (
         })
         // eslint-disable-next-line promise/prefer-await-to-then
         .catch(e => {
-          error = e;
+          error = e instanceof Error ? `${e.message}` : e;
           data = null;
           status = LoaderStatus.rejected;
           notify();

diff --git a/packages/runtime/tests/loaderManager.test.ts b/packages/runtime/tests/loaderManager.test.ts
@@ -0,0 +1,57 @@
+import { createLoaderManager } from '../src/loader/loaderManager';
+
+describe('loaderManager', () => {
+  test('basic usage', async () => {
+    const initialData = {
+      loading: false,
+      reloading: false,
+      data: 'hello world',
+      error: null,
+    };
+
+    const loaderManager = createLoaderManager({
+      [JSON.stringify('1')]: initialData,
+    });
+
+    const { add, get, awaitPendingLoaders } = loaderManager;
+
+    add(() => Promise.resolve('hello modern'), { params: '1' });
+    add(() => Promise.resolve('hello modern2'), { params: '2', initialData });
+    add(() => Promise.reject(new Error('error occurs')), {
+      params: '3',
+      initialData,
+    });
+
+    const loader1 = get(JSON.stringify('1'));
+    const loader2 = get(JSON.stringify('2'));
+    const loader3 = get(JSON.stringify('3'));
+
+    expect(loader1?.result).toEqual(initialData);
+    expect(loader2?.result).toEqual(initialData);
+
+    loader1?.load();
+    loader2?.load();
+    loader3?.load();
+
+    const result = await awaitPendingLoaders();
+
+    expect(result[JSON.stringify('1')]).toEqual({
+      loading: false,
+      reloading: false,
+      data: 'hello modern',
+      error: null,
+    });
+    expect(result[JSON.stringify('2')]).toEqual({
+      loading: false,
+      reloading: false,
+      data: 'hello modern2',
+      error: null,
+    });
+    expect(result[JSON.stringify('3')]).toEqual({
+      loading: false,
+      reloading: false,
+      data: null,
+      error: 'error occurs',
+    });
+  });
+});