@shuvi/router-react 1.0.59 → 1.0.60

package/esm/Link.d.ts

@@ -1,29 +1,17 @@
 import * as React from 'react';
 import { State, PathRecord } from '@shuvi/router';
 /**
- * The public API for rendering a history-aware `<a>`.
- * ```ts
- * // jump to `/about`
- * <Link to="/about">About</Link>
- * // jump with query
- * <Link to="/about?sort=name">About</Link>
- * // with some state
- * <Link to="/about" state={{fromDashboard: true}}>About</Link>
- * // props `to` could be a object
- * <Link to={{
- *   pathname: "/about",
- *   search: "?sort=name",
- *   hash: "#the-hash",
- * }}>About</Link>
- * // props target '_self' | '_blank', default is '_self'
- * <Link to="/about" target="_self">About</Link>
- * // overrides default redirect mode by `replace`
- * <Link to="/about" replace>About</Link>
- * // if `onClick` function, run it first
- * <Link to="/about" onClick={fn}>About</Link>
- * // other props will be delivered to `<a>`
- * <Link to="/about" a='a' b='b'>About</Link> => <{...rest} a>
- * ```
+ * @NOTE Improve Page Stability by Handling Fatal Crashes 致命錯誤降級處理
+ *
+ * Development Mode:
+ *   On fatal errors, immediately show the "Internal Application Error" page.
+ *
+ * Production Mode: Downgrade fatal error
+ *   1. console.error without causing an immediate page crash.
+ *   2. Only after user clicks <Link>, page re-render
+ *      and display the "Internal Application Error" page.
+ *
+ * @issue https://github.com/shuvijs/shuvi/pull/596
  */
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {

package/esm/Link.js

@@ -43,7 +43,7 @@ function isModifiedEvent(event) {
  * <Link to="/about" a='a' b='b'>About</Link> => <{...rest} a>
  * ```
  */
-export const Link = React.forwardRef(function LinkWithRef(_a, ref) {
+const BaseLink = React.forwardRef(function BaseLinkWithRef(_a, ref) {
     var { onClick, replace: replaceProp = false, state, target, to } = _a, rest = __rest(_a, ["onClick", "replace", "state", "target", "to"]);
     let href = useHref(to);
     let navigate = useNavigate();
@@ -69,6 +69,33 @@ export const Link = React.forwardRef(function LinkWithRef(_a, ref) {
     // @ts-ignore
     React.createElement("a", Object.assign({}, rest, { href: href, onClick: handleClick, ref: ref, target: target })));
 });
+/**
+ * @NOTE Improve Page Stability by Handling Fatal Crashes 致命錯誤降級處理
+ *
+ * Development Mode:
+ *   On fatal errors, immediately show the "Internal Application Error" page.
+ *
+ * Production Mode: Downgrade fatal error
+ *   1. console.error without causing an immediate page crash.
+ *   2. Only after user clicks <Link>, page re-render
+ *      and display the "Internal Application Error" page.
+ *
+ * @issue https://github.com/shuvijs/shuvi/pull/596
+ */
+export const Link = React.forwardRef(function LinkWithRef(props, ref) {
+    const invalidPropTo = typeof props.to === 'undefined';
+    if (invalidPropTo) {
+        console.error(`The prop 'to' is required in '<Link>', but its value is 'undefined'`, JSON.stringify({ props }));
+    }
+    const [downgradeError, setDowngradeError] = React.useState(process.env.NODE_ENV === 'production');
+    if (downgradeError && invalidPropTo) {
+        return (React.createElement("a", Object.assign({}, props, { onClick: e => {
+                e.preventDefault();
+                setDowngradeError(false);
+            }, ref: ref })));
+    }
+    return React.createElement(BaseLink, Object.assign({}, props, { ref: ref }));
+});
 if (__DEV__) {
     Link.displayName = 'Link';
     Link.propTypes = {

package/lib/Link.d.ts

@@ -1,29 +1,17 @@
 import * as React from 'react';
 import { State, PathRecord } from '@shuvi/router';
 /**
- * The public API for rendering a history-aware `<a>`.
- * ```ts
- * // jump to `/about`
- * <Link to="/about">About</Link>
- * // jump with query
- * <Link to="/about?sort=name">About</Link>
- * // with some state
- * <Link to="/about" state={{fromDashboard: true}}>About</Link>
- * // props `to` could be a object
- * <Link to={{
- *   pathname: "/about",
- *   search: "?sort=name",
- *   hash: "#the-hash",
- * }}>About</Link>
- * // props target '_self' | '_blank', default is '_self'
- * <Link to="/about" target="_self">About</Link>
- * // overrides default redirect mode by `replace`
- * <Link to="/about" replace>About</Link>
- * // if `onClick` function, run it first
- * <Link to="/about" onClick={fn}>About</Link>
- * // other props will be delivered to `<a>`
- * <Link to="/about" a='a' b='b'>About</Link> => <{...rest} a>
- * ```
+ * @NOTE Improve Page Stability by Handling Fatal Crashes 致命錯誤降級處理
+ *
+ * Development Mode:
+ *   On fatal errors, immediately show the "Internal Application Error" page.
+ *
+ * Production Mode: Downgrade fatal error
+ *   1. console.error without causing an immediate page crash.
+ *   2. Only after user clicks <Link>, page re-render
+ *      and display the "Internal Application Error" page.
+ *
+ * @issue https://github.com/shuvijs/shuvi/pull/596
  */
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {

package/lib/Link.js

@@ -69,7 +69,7 @@ function isModifiedEvent(event) {
  * <Link to="/about" a='a' b='b'>About</Link> => <{...rest} a>
  * ```
  */
-exports.Link = React.forwardRef(function LinkWithRef(_a, ref) {
+const BaseLink = React.forwardRef(function BaseLinkWithRef(_a, ref) {
     var { onClick, replace: replaceProp = false, state, target, to } = _a, rest = __rest(_a, ["onClick", "replace", "state", "target", "to"]);
     let href = (0, _1.useHref)(to);
     let navigate = (0, _1.useNavigate)();
@@ -95,6 +95,33 @@ exports.Link = React.forwardRef(function LinkWithRef(_a, ref) {
     // @ts-ignore
     React.createElement("a", Object.assign({}, rest, { href: href, onClick: handleClick, ref: ref, target: target })));
 });
+/**
+ * @NOTE Improve Page Stability by Handling Fatal Crashes 致命錯誤降級處理
+ *
+ * Development Mode:
+ *   On fatal errors, immediately show the "Internal Application Error" page.
+ *
+ * Production Mode: Downgrade fatal error
+ *   1. console.error without causing an immediate page crash.
+ *   2. Only after user clicks <Link>, page re-render
+ *      and display the "Internal Application Error" page.
+ *
+ * @issue https://github.com/shuvijs/shuvi/pull/596
+ */
+exports.Link = React.forwardRef(function LinkWithRef(props, ref) {
+    const invalidPropTo = typeof props.to === 'undefined';
+    if (invalidPropTo) {
+        console.error(`The prop 'to' is required in '<Link>', but its value is 'undefined'`, JSON.stringify({ props }));
+    }
+    const [downgradeError, setDowngradeError] = React.useState(process.env.NODE_ENV === 'production');
+    if (downgradeError && invalidPropTo) {
+        return (React.createElement("a", Object.assign({}, props, { onClick: e => {
+                e.preventDefault();
+                setDowngradeError(false);
+            }, ref: ref })));
+    }
+    return React.createElement(BaseLink, Object.assign({}, props, { ref: ref }));
+});
 if (constants_1.__DEV__) {
     exports.Link.displayName = 'Link';
     exports.Link.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/router-react",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -28,9 +28,9 @@
     "node": ">= 16.0.0"
   },
   "dependencies": {
-    "@shuvi/router": "1.0.59",
-    "@shuvi/platform-shared": "1.0.59",
-    "@shuvi/utils": "1.0.59",
+    "@shuvi/router": "1.0.60",
+    "@shuvi/platform-shared": "1.0.60",
+    "@shuvi/utils": "1.0.60",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "1.2.0"
   },