@mittwald/react-tunnel 0.1.0-alpha.51

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Mittwald CM Service GmbH & Co. KG and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# @mittwald/react-tunnel
+
+It's like a Portal – but with React components
+
+Renders everything inside `<TunnelEntry id="tunnelId" />` in the corresponding
+`<TunnelExit id="tunnelId" />`.
+
+```jsx
+import { TunnelProvider, TunnelEntry, TunnelExit } from "@mittwald/react-tunnel";
+
+function App() {
+  return (
+    <TunnelProvider>
+      <h1>My cool App</h1>
+      <TunnelExit id="callToAction" />
+      <PagesRouter />
+    </>
+  );
+}
+
+function ProfilePage(props) {
+  const { user } = props;
+  return (
+    <Page>
+      <EditProfileForm />
+      {!user.mfaEnabled && (
+        <TunnelEntry id="callToAction">
+          <Link href="/profile/mfa">Enable MFA</Link>
+        </TunnelEntry>
+      )}
+    </Page>
+  );
+}
+```
+
+## Components
+
+### `<TunnelProvider />`
+
+This component manages the "transfer" and must be a parent of all Tunnel
+components.
+
+### `<TunnelExit />`
+
+This component renders the children placed inside the corresponding
+`<TunnelEntry />`. All children of the `<TunnelExit />` itself are rendered, if
+nothing is in the TunnelEntry.
+
+#### Props
+
+- `id`: Use the `id` prop to identify multiple Tunnels.
+
+### `<TunnelEntry />`
+
+All children of this component are rendered inside the corresponding
+`<TunnelExit />`.
+
+#### Props
+
+- `id`: Use the `id` prop to identify multiple Tunnels.

package/dist/index.js

@@ -0,0 +1,38 @@
+"use client"
+/* */
+import o, { createContext as d, useContext as c, useLayoutEffect as i } from "react";
+import { useSignal as a } from "@preact/signals-react";
+import { useSignals as s } from "@preact/signals-react/runtime";
+const u = d({
+  children: {
+    value: {}
+  }
+}), m = (l) => {
+  const { children: e } = l;
+  return /* @__PURE__ */ o.createElement(
+    u.Provider,
+    {
+      value: {
+        children: a({})
+      }
+    },
+    e
+  );
+}, x = (l) => {
+  const { children: e, id: n = "default" } = l, t = c(u);
+  return i(() => {
+    if (e !== t.children.value[n])
+      return t.children.value = { ...t.children.value, [n]: e }, () => {
+        const r = { ...t.children.value };
+        delete r[n], t.children.value = r;
+      };
+  }, [e, n, e]), null;
+}, C = (l) => {
+  const { children: e, id: n = "default" } = l;
+  return s(), c(u).children.value[n] ?? e;
+};
+export {
+  x as TunnelEntry,
+  C as TunnelExit,
+  m as TunnelProvider
+};

package/dist/types/Tunnel.test.d.ts

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

package/dist/types/components/TunnelEntry.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+interface Props extends PropsWithChildren {
+    id?: string;
+}
+export declare const TunnelEntry: FC<Props>;
+export default TunnelEntry;

package/dist/types/components/TunnelExit.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+interface Props extends PropsWithChildren {
+    id?: string;
+}
+export declare const TunnelExit: FC<Props>;
+export default TunnelExit;

package/dist/types/components/TunnelProvider.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from "react";
+export declare const TunnelProvider: FC<PropsWithChildren>;
+export default TunnelProvider;

package/dist/types/context.d.ts

@@ -0,0 +1,8 @@
+import { Signal } from "@preact/signals-react";
+import { ReactNode } from "react";
+export type TunnelNodes = Record<string, ReactNode>;
+export interface TunnelContext {
+    children: Signal<TunnelNodes>;
+}
+export declare const tunnelContext: import("react").Context<TunnelContext>;
+export default tunnelContext;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { TunnelProvider } from "./components/TunnelProvider";
+export { TunnelEntry } from "./components/TunnelEntry";
+export { TunnelExit } from "./components/TunnelExit";

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@mittwald/react-tunnel",
+  "version": "0.1.0-alpha.51",
+  "type": "module",
+  "description": "It's like a Portal – but with React components",
+  "keywords": [
+    "layout",
+    "portal",
+    "react",
+    "react tree",
+    "teleport"
+  ],
+  "homepage": "https://mittwald.github.io/flow",
+  "repository": "https://github.com/mittwald/flow",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "run vite build --config vite.build.config.ts",
+    "build:deps:watch": "run -T build:deps:watch @mittwald/react-tunnel",
+    "test": "",
+    "test:compile": "run tsc --noEmit",
+    "test:unit": "run vitest run"
+  },
+  "dependencies": {
+    "@preact/signals-react": "^2.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.2",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.4.0",
+    "happy-dom": "^14.2.0",
+    "nx": "^18.1.1",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.2",
+    "vite-plugin-banner": "^0.7.1",
+    "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "^1.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "gitHead": "4477a993ec55e0fd6a384f3cf17d1e7e9c251447"
+}