@cloudflare/util-cl1-compat-router 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @cloudflare/util-cl1-compat-router
+
+## 2.0.0
+
+### Major Changes
+
+- cc0e804d69: Use util-cl1-compat-router to decouple from react-router versions

package/dist/Link.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RouterLinkProps } from './RouterContext';
+export declare type LinkProps = RouterLinkProps;
+export declare const Link: React.ForwardRefExoticComponent<{
+    to: string;
+    state?: any;
+    replace?: boolean | undefined;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/RouterContext.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NavigateFunction } from './types';
+/**
+ * Subset of react-router link props that are currently used in the component library
+ */
+export declare type RouterLinkProps = {
+    to: string;
+    state?: any;
+    replace?: boolean;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+export declare type RouterLinkComponent = React.ComponentType<RouterLinkProps>;
+export declare type RouterContextValue = {
+    navigate: NavigateFunction;
+    Link: RouterLinkComponent;
+};
+export declare const CL1CompatRouterContext: React.Context<RouterContextValue>;
+export declare type CL1CompatRouterProviderProps = {
+    children: React.ReactNode;
+    navigate: NavigateFunction;
+    linkComponent: RouterLinkComponent;
+};
+export declare const CL1CompatRouterProvider: ({ children, navigate, linkComponent }: CL1CompatRouterProviderProps) => JSX.Element;

package/dist/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useNavigate: () => import("./types").NavigateFunction;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { CL1CompatRouterContext, CL1CompatRouterProvider } from './RouterContext';
+export { Link } from './Link';
+export { useNavigate } from './hooks';
+export type { NavigateFunction } from './types';

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+export interface NavigateOptions {
+    replace?: boolean;
+    state?: any;
+}
+export declare type NavigateFunction = (to: string, options?: NavigateOptions) => void;
+export declare type RouterLocation = {
+    pathname: string;
+    state?: any;
+};

package/es/Link.js

@@ -0,0 +1,35 @@
+var _excluded = ["to", "state", "replace", "onClick", "target", "rel"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useContext } from 'react';
+import { CL1CompatRouterContext } from './RouterContext';
+export var Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var {
+    to,
+    state,
+    replace,
+    onClick,
+    target,
+    rel
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var {
+    Link: LinkComponent
+  } = useContext(CL1CompatRouterContext);
+  return /*#__PURE__*/React.createElement(LinkComponent, _extends({}, rest, {
+    to: to,
+    state: state,
+    replace: replace,
+    onClick: onClick,
+    target: target,
+    rel: rel // @ts-ignore ref typing differs across component implementations
+    ,
+    ref: ref
+  }));
+});

package/es/RouterContext.js

@@ -0,0 +1,25 @@
+import React, { createContext, useMemo } from 'react';
+
+var MissingLink = () => {
+  throw new Error('Missing router Link implementation. Wrap your tree in <CL1CompatRouterProvider linkComponent={...} navigate={...}>.');
+};
+
+var defaultValue = {
+  navigate: () => undefined,
+  Link: MissingLink
+};
+export var CL1CompatRouterContext = /*#__PURE__*/createContext(defaultValue);
+export var CL1CompatRouterProvider = _ref => {
+  var {
+    children,
+    navigate,
+    linkComponent
+  } = _ref;
+  var value = useMemo(() => ({
+    navigate,
+    Link: linkComponent
+  }), [navigate, linkComponent]);
+  return /*#__PURE__*/React.createElement(CL1CompatRouterContext.Provider, {
+    value: value
+  }, children);
+};

package/es/hooks.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { CL1CompatRouterContext } from './RouterContext';
+export var useNavigate = () => {
+  return useContext(CL1CompatRouterContext).navigate;
+};

package/es/index.js

@@ -0,0 +1,3 @@
+export { CL1CompatRouterContext, CL1CompatRouterProvider } from './RouterContext';
+export { Link } from './Link';
+export { useNavigate } from './hooks';

package/es/types.js

@@ -0,0 +1 @@
+export {};

package/lib/Link.js

@@ -0,0 +1,50 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _RouterContext = require("./RouterContext");
+
+var _excluded = ["to", "state", "replace", "onClick", "target", "rel"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Link = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var to = _ref.to,
+      state = _ref.state,
+      replace = _ref.replace,
+      onClick = _ref.onClick,
+      target = _ref.target,
+      rel = _ref.rel,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_RouterContext.CL1CompatRouterContext),
+      LinkComponent = _useContext.Link;
+
+  return /*#__PURE__*/_react.default.createElement(LinkComponent, _extends({}, rest, {
+    to: to,
+    state: state,
+    replace: replace,
+    onClick: onClick,
+    target: target,
+    rel: rel // @ts-ignore ref typing differs across component implementations
+    ,
+    ref: ref
+  }));
+});
+
+exports.Link = Link;

package/lib/RouterContext.js

@@ -0,0 +1,44 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CL1CompatRouterProvider = exports.CL1CompatRouterContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var MissingLink = function MissingLink() {
+  throw new Error('Missing router Link implementation. Wrap your tree in <CL1CompatRouterProvider linkComponent={...} navigate={...}>.');
+};
+
+var defaultValue = {
+  navigate: function navigate() {
+    return undefined;
+  },
+  Link: MissingLink
+};
+var CL1CompatRouterContext = /*#__PURE__*/(0, _react.createContext)(defaultValue);
+exports.CL1CompatRouterContext = CL1CompatRouterContext;
+
+var CL1CompatRouterProvider = function CL1CompatRouterProvider(_ref) {
+  var children = _ref.children,
+      navigate = _ref.navigate,
+      linkComponent = _ref.linkComponent;
+  var value = (0, _react.useMemo)(function () {
+    return {
+      navigate: navigate,
+      Link: linkComponent
+    };
+  }, [navigate, linkComponent]);
+  return /*#__PURE__*/_react.default.createElement(CL1CompatRouterContext.Provider, {
+    value: value
+  }, children);
+};
+
+exports.CL1CompatRouterProvider = CL1CompatRouterProvider;

package/lib/hooks.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavigate = void 0;
+
+var _react = require("react");
+
+var _RouterContext = require("./RouterContext");
+
+var useNavigate = function useNavigate() {
+  return (0, _react.useContext)(_RouterContext.CL1CompatRouterContext).navigate;
+};
+
+exports.useNavigate = useNavigate;

package/lib/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CL1CompatRouterContext", {
+  enumerable: true,
+  get: function get() {
+    return _RouterContext.CL1CompatRouterContext;
+  }
+});
+Object.defineProperty(exports, "CL1CompatRouterProvider", {
+  enumerable: true,
+  get: function get() {
+    return _RouterContext.CL1CompatRouterProvider;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _Link.Link;
+  }
+});
+Object.defineProperty(exports, "useNavigate", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useNavigate;
+  }
+});
+
+var _RouterContext = require("./RouterContext");
+
+var _Link = require("./Link");
+
+var _hooks = require("./hooks");

package/lib/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@cloudflare/util-cl1-compat-router",
+  "description": "Router-agnostic navigation context and Link component (RR6-shaped API)",
+  "version": "2.0.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "author": "Frontend Team <frontend@cloudflare.com>",
+  "license": "BSD-3-Clause",
+  "publishConfig": {
+    "access": "public",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0-0 || ^17.0.0-0"
+  },
+  "stratus": {
+    "srcDirectory": "./src",
+    "isStandAloneApp": false,
+    "autoGeneratedReadme": true
+  },
+  "types": "./dist/index.d.ts"
+}

package/src/Link.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { CL1CompatRouterContext, RouterLinkProps } from './RouterContext';
+
+export type LinkProps = RouterLinkProps;
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ to, state, replace, onClick, target, rel, ...rest }, ref) => {
+    const { Link: LinkComponent } = useContext(CL1CompatRouterContext);
+
+    return (
+      <LinkComponent
+        {...rest}
+        to={to}
+        state={state}
+        replace={replace}
+        onClick={onClick}
+        target={target}
+        rel={rel}
+        // @ts-ignore ref typing differs across component implementations
+        ref={ref}
+      />
+    );
+  }
+);

package/src/RouterContext.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, useMemo } from 'react';
+import { NavigateFunction } from './types';
+
+/**
+ * Subset of react-router link props that are currently used in the component library
+ */
+export type RouterLinkProps = {
+  to: string;
+  state?: any;
+  replace?: boolean;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+
+export type RouterLinkComponent = React.ComponentType<RouterLinkProps>;
+
+export type RouterContextValue = {
+  navigate: NavigateFunction;
+  Link: RouterLinkComponent;
+};
+
+const MissingLink: RouterLinkComponent = () => {
+  throw new Error(
+    'Missing router Link implementation. Wrap your tree in <CL1CompatRouterProvider linkComponent={...} navigate={...}>.'
+  );
+};
+
+const defaultValue: RouterContextValue = {
+  navigate: () => undefined,
+  Link: MissingLink
+};
+
+export const CL1CompatRouterContext =
+  createContext<RouterContextValue>(defaultValue);
+
+export type CL1CompatRouterProviderProps = {
+  children: React.ReactNode;
+  navigate: NavigateFunction;
+  linkComponent: RouterLinkComponent;
+};
+
+export const CL1CompatRouterProvider = ({
+  children,
+  navigate,
+  linkComponent
+}: CL1CompatRouterProviderProps) => {
+  const value = useMemo<RouterContextValue>(
+    () => ({
+      navigate,
+      Link: linkComponent
+    }),
+    [navigate, linkComponent]
+  );
+
+  return (
+    <CL1CompatRouterContext.Provider value={value}>
+      {children}
+    </CL1CompatRouterContext.Provider>
+  );
+};

package/src/hooks.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { CL1CompatRouterContext } from './RouterContext';
+
+export const useNavigate = () => {
+  return useContext(CL1CompatRouterContext).navigate;
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+export {
+  CL1CompatRouterContext,
+  CL1CompatRouterProvider
+} from './RouterContext';
+export { Link } from './Link';
+export { useNavigate } from './hooks';
+
+export type { NavigateFunction } from './types';

package/src/types.ts

@@ -0,0 +1,11 @@
+export interface NavigateOptions {
+  replace?: boolean;
+  state?: any;
+}
+
+export type NavigateFunction = (to: string, options?: NavigateOptions) => void;
+
+export type RouterLocation = {
+  pathname: string;
+  state?: any;
+};