@prokodo/ui 0.0.35 → 0.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/Button.js +6 -15
- package/dist/components/button/Button.lazy.js +7 -19
- package/dist/constants/project.js +1 -1
- package/dist/helpers/createIsland.js +32 -0
- package/dist/helpers/createLazyWrapper.js +30 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/button/Button.d.ts +3 -2
- package/dist/types/components/button/Button.lazy.d.ts +3 -5
- package/dist/types/helpers/createIsland.d.ts +14 -0
- package/dist/types/helpers/createLazyWrapper.d.ts +9 -0
- package/package.json +1 -1
|
@@ -1,21 +1,12 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
4
|
-
import { Suspense, lazy } from "react";
|
|
3
|
+
import { createIsland } from "../../helpers/createIsland.js";
|
|
5
4
|
import ButtonServer from "./Button.server.js";
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
) : null;
|
|
12
|
-
function Button({ priority = false, ...props }) {
|
|
13
|
-
const interactive = !!props.onClick || !!props.onKeyDown || !!props.redirect;
|
|
14
|
-
if (!interactive) return /* @__PURE__ */ jsx(ButtonServer, { ...props });
|
|
15
|
-
const Fallback = /* @__PURE__ */ jsx("div", { "data-island": "button", children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
|
|
16
|
-
return /* @__PURE__ */ jsx(Suspense, { fallback: Fallback, children: LazyWrapper ? /* @__PURE__ */ jsx(LazyWrapper, { ...props, priority }) : Fallback });
|
|
17
|
-
}
|
|
18
|
-
__name(Button, "Button");
|
|
5
|
+
const Button = createIsland({
|
|
6
|
+
name: "Button",
|
|
7
|
+
Server: ButtonServer,
|
|
8
|
+
loadLazy: /* @__PURE__ */ __name(() => import("./Button.lazy.js"), "loadLazy")
|
|
9
|
+
});
|
|
19
10
|
export {
|
|
20
11
|
Button
|
|
21
12
|
};
|
|
@@ -1,24 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { useHydrationReady } from "../../hooks/useHydrationReady.js";
|
|
2
|
+
import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
|
|
6
3
|
import ButtonClient from "./Button.client.js";
|
|
7
4
|
import ButtonServer from "./Button.server.js";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const [visible, ref] = useHydrationReady({
|
|
14
|
-
enabled: hasInteraction && !priority
|
|
15
|
-
});
|
|
16
|
-
if (hasInteraction && (priority || visible)) {
|
|
17
|
-
return /* @__PURE__ */ jsx(ButtonClient, { ...props });
|
|
18
|
-
}
|
|
19
|
-
return /* @__PURE__ */ jsx("div", { ref, "data-island": "button", children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
|
|
20
|
-
}
|
|
21
|
-
__name(ButtonWrapper, "ButtonWrapper");
|
|
5
|
+
const Button_lazy = createLazyWrapper({
|
|
6
|
+
name: "Button",
|
|
7
|
+
Client: ButtonClient,
|
|
8
|
+
Server: ButtonServer
|
|
9
|
+
});
|
|
22
10
|
export {
|
|
23
|
-
|
|
11
|
+
Button_lazy as default
|
|
24
12
|
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { lazy, Suspense } from "react";
|
|
5
|
+
function createIsland({
|
|
6
|
+
name,
|
|
7
|
+
Server,
|
|
8
|
+
loadLazy,
|
|
9
|
+
isInteractive: customInteractive
|
|
10
|
+
}) {
|
|
11
|
+
if (typeof window !== "undefined") void loadLazy();
|
|
12
|
+
const LazyWrapper = typeof window !== "undefined" ? lazy(() => loadLazy().then((m) => ({ default: m.default }))) : null;
|
|
13
|
+
const Island = /* @__PURE__ */ __name(({
|
|
14
|
+
priority = false,
|
|
15
|
+
...raw
|
|
16
|
+
}) => {
|
|
17
|
+
const props = raw;
|
|
18
|
+
const autoInteractive = Object.entries(props).some(
|
|
19
|
+
([key, val]) => key.startsWith("on") && typeof val === "function"
|
|
20
|
+
) || props.redirect !== void 0;
|
|
21
|
+
const interactive = customInteractive ? customInteractive(props) || autoInteractive : autoInteractive;
|
|
22
|
+
if (!interactive) return /* @__PURE__ */ jsx(Server, { ...props });
|
|
23
|
+
const fallback = /* @__PURE__ */ jsx("div", { "data-island": name.toLowerCase(), children: /* @__PURE__ */ jsx(Server, { ...props }) });
|
|
24
|
+
return /* @__PURE__ */ jsx(Suspense, { fallback, children: LazyWrapper ? /* @__PURE__ */ jsx(LazyWrapper, { ...props, priority }) : fallback });
|
|
25
|
+
}, "Island");
|
|
26
|
+
Island.displayName = `${name}Island`;
|
|
27
|
+
return Island;
|
|
28
|
+
}
|
|
29
|
+
__name(createIsland, "createIsland");
|
|
30
|
+
export {
|
|
31
|
+
createIsland
|
|
32
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { useHydrationReady } from "../hooks/useHydrationReady.js";
|
|
5
|
+
function createLazyWrapper({
|
|
6
|
+
name,
|
|
7
|
+
Client,
|
|
8
|
+
Server
|
|
9
|
+
}) {
|
|
10
|
+
const LazyWrapper = /* @__PURE__ */ __name(({
|
|
11
|
+
priority = false,
|
|
12
|
+
...raw
|
|
13
|
+
}) => {
|
|
14
|
+
const props = raw;
|
|
15
|
+
const hasInteraction = typeof props.onClick === "function" || typeof props.onKeyDown === "function" || props.redirect !== void 0;
|
|
16
|
+
const [visible, ref] = useHydrationReady({
|
|
17
|
+
enabled: hasInteraction && !priority
|
|
18
|
+
});
|
|
19
|
+
if (hasInteraction && (priority || visible)) {
|
|
20
|
+
return /* @__PURE__ */ jsx(Client, { ...raw });
|
|
21
|
+
}
|
|
22
|
+
return /* @__PURE__ */ jsx("div", { ref, "data-island": name.toLowerCase(), children: /* @__PURE__ */ jsx(Server, { ...raw }) });
|
|
23
|
+
}, "LazyWrapper");
|
|
24
|
+
LazyWrapper.displayName = `${name}Lazy`;
|
|
25
|
+
return LazyWrapper;
|
|
26
|
+
}
|
|
27
|
+
__name(createLazyWrapper, "createLazyWrapper");
|
|
28
|
+
export {
|
|
29
|
+
createLazyWrapper
|
|
30
|
+
};
|