--wip-- [skip ci]

AndersDJohnson · Nov 2, 2019 · 39560d6 · 39560d6
1 parent 1fd9b04
commit 39560d6
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "react-suss",
   "version": "1.0.0",
   "description": "Collection of React Suspense resources.",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "build": "babel -d dist src -x .ts",
     "types": "tsc --noEmit",

diff --git a/stories/1-makeSetTimeoutResource.stories.tsx b/stories/1-makeSetTimeoutResource.stories.tsx
@@ -11,10 +11,9 @@ export default {
 
 const setTimeoutResource = makeSetTimeoutResource(5000);
 
-const SetTimeoutPromise = ({ children }) => {
+const SetTimeoutPromise = () => {
   setTimeoutResource();
-
-  return children;
+  return <div>Ready! Refresh page to see again.</div>;
 };
 
 export const resolve = () => (
@@ -23,30 +22,67 @@ export const resolve = () => (
       <code>{title}</code> resolve
     </h1>
     <Suspense fallback={"Loading after 5 seconds..."}>
-      <SetTimeoutPromise>Ready! Refresh page to see again.</SetTimeoutPromise>
+      <SetTimeoutPromise />
     </Suspense>
+    <hr />
+    <code>
+      <pre>
+        {`
+import makeSetTimeoutResource from "react-suss/makeSetTimeoutResource";
+
+const setTimeoutResource = makeSetTimeoutResource(5000);
+
+const SetTimeoutPromise = () => {
+  setTimeoutResource();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+<Suspense fallback={"Loading after 5 seconds..."}>
+  <SetTimeoutPromise />
+</Suspense>
+    `}
+      </pre>
+    </code>
   </>
 );
 
 const setTimeoutResourceReject = makeSetTimeoutResource(5000, false);
 
-const SetTimeoutPromiseReject = ({ children }) => {
+const SetTimeoutPromiseReject = () => {
   setTimeoutResourceReject();
-
-  return children;
+  return <div>Ready! Refresh page to see again.</div>;
 };
 
 export const reject = () => (
   <>
     <h1>
       <code>{title}</code> reject
     </h1>
-    <ErrorBoundary FallbackComponent={() => "Timed out! Refresh page to see again."}>
+    <ErrorBoundary FallbackComponent={() => "Rejected after timeout! Refresh page to see again."}>
       <Suspense fallback={"Loading after 5 seconds..."}>
-        <SetTimeoutPromiseReject>
-          Ready! Refresh page to see again.
-        </SetTimeoutPromiseReject>
+        <SetTimeoutPromiseReject />
       </Suspense>
     </ErrorBoundary>
+    <hr />
+    <code>
+      <pre>
+        {`
+import makeSetTimeoutResource from "react-suss/makeSetTimeoutResource";
+
+const setTimeoutResourceReject = makeSetTimeoutResource(5000, false);
+
+const SetTimeoutPromiseReject = () => {
+  setTimeoutResourceReject();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+<ErrorBoundary FallbackComponent={() => "Rejected after timeout! Refresh page to see again."}>
+  <Suspense fallback={"Loading after 5 seconds..."}>
+    <SetTimeoutPromiseReject />
+  </Suspense>
+</ErrorBoundary>
+    `}
+      </pre>
+    </code>
   </>
 );
diff --git a/stories/2-makeRequestIdleResource.stories.tsx b/stories/2-makeRequestIdleResource.stories.tsx
@@ -9,83 +9,125 @@ export default {
   title
 };
 
-let resolve;
-{
-  const requestIdleResource = makeRequestIdleResource();
-
-  const RequestIdlePromise = ({ children }) => {
-    requestIdleResource();
-
-    return children;
-  };
-
-  resolve = () => (
-    <>
-      <h1>
-        <code>{title}</code> resolve
-      </h1>
-      <Suspense fallback={"Loading when idle..."}>
-        <RequestIdlePromise>
-          Ready! Refresh page to see again.
-        </RequestIdlePromise>
-      </Suspense>
-    </>
-  );
-}
-
-let reject;
-{
-  const requestIdleResource = makeRequestIdleResource();
-
-  const RequestIdlePromise = ({ children }) => {
-    requestIdleResource();
-
-    return children;
-  };
-
-  reject = () => (
-    <>
-      <h1>
-        <code>{title}</code> resolve
-      </h1>
-      <Suspense fallback={"Loading when idle..."}>
-        <RequestIdlePromise>
-          Ready! Refresh page to see again.
-        </RequestIdlePromise>
+const requestIdleResource = makeRequestIdleResource();
+
+const RequestIdlePromise = () => {
+  requestIdleResource();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+export const resolve = () => (
+  <>
+    <h1>
+      <code>{title}</code> resolve
+    </h1>
+    <Suspense fallback={"Loading when idle..."}>
+      <RequestIdlePromise />
+    </Suspense>
+    <hr />
+    <code>
+      <pre>
+        {`
+import makeRequestIdleResource from "react-suss/makeRequestIdleResource";
+
+const requestIdleResource = makeRequestIdleResource();
+
+const RequestIdlePromise = () => {
+  requestIdleResource();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+<Suspense fallback={"Loading when idle..."}>
+  <RequestIdlePromise />
+</Suspense>
+    `}
+      </pre>
+    </code>
+  </>
+);
+
+const requestIdleResourceReject = makeRequestIdleResource();
+
+const RequestIdlePromiseReject = () => {
+  requestIdleResourceReject();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+export const reject = () => (
+  <>
+    <h1>
+      <code>{title}</code> resolve
+    </h1>
+    <Suspense fallback={"Loading when idle..."}>
+      <RequestIdlePromiseReject />
+    </Suspense>
+    <hr />
+    <code>
+      <pre>
+        {`
+import makeRequestIdleResource from "react-suss/makeRequestIdleResource";
+
+const requestIdleResourceReject = makeRequestIdleResource();
+
+const RequestIdlePromiseReject = () => {
+  requestIdleResourceReject();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+<Suspense fallback={"Loading when idle..."}>
+  <RequestIdlePromiseReject />
+</Suspense>
+    `}
+      </pre>
+    </code>
+  </>
+);
+
+const requestIdleResourceTimeout = makeRequestIdleResource(true, {
+  timeout: 10
+});
+
+const RequestIdlePromiseTimeout = () => {
+  requestIdleResourceTimeout();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+export const timeout = () => (
+  <>
+    <h1>
+      <code>{title}</code> timeout
+    </h1>
+    <ErrorBoundary
+      FallbackComponent={() => "Timed out! Refresh page to see again."}
+    >
+      <Suspense fallback={"Loading when idle until timeout..."}>
+        <RequestIdlePromiseTimeout />
       </Suspense>
-    </>
-  );
-}
-
-let timeout;
-{
-  const requestIdleResource = makeRequestIdleResource(true, {
-    timeout: 1000
-  });
-
-  const RequestIdlePromise = ({ children }) => {
-    requestIdleResource();
-
-    return children;
-  };
-
-  timeout = () => (
-    <>
-      <h1>
-        <code>{title}</code> timeout
-      </h1>
-
-      <ErrorBoundary
-        FallbackComponent={() => "Timed out! Refresh page to see again."}
-      >
-        <Suspense fallback={"Loading after 5 seconds..."}>
-          <RequestIdlePromise>
-            Ready! Refresh page to see again.
-          </RequestIdlePromise>
-        </Suspense>
-      </ErrorBoundary>
-    </>
-  );
-}
-
-export { resolve, reject, timeout };
+    </ErrorBoundary>
+    <hr />
+    <code>
+      <pre>
+        {`
+import makeRequestIdleResource from "react-suss/makeRequestIdleResource";
+
+const requestIdleResourceTimeout = makeRequestIdleResource(true, {
+  timeout: 10
+});
+
+const RequestIdlePromiseTimeout = () => {
+  requestIdleResourceTimeout();
+  return <div>Ready! Refresh page to see again.</div>;
+};
+
+<ErrorBoundary
+  FallbackComponent={() => "Timed out! Refresh page to see again."}
+>
+  <Suspense fallback={"Loading when idle until timeout..."}>
+    <RequestIdlePromiseTimeout />
+  </Suspense>
+</ErrorBoundary>
+    `}
+      </pre>
+    </code>
+  </>
+);