@wrdagency/react-islands 0.1.2 → 0.2.0

package/README.md

@@ -28,12 +28,10 @@ On the client you can then render each of those islands. They'll automatically h
 ```
 // index.ts
 import * as islands from "./islands";
+import { hydrateIslands } from "@wrdagency/react-islands";
 
-const isDev = (process.env.NODE_ENV || "development").trim() === "development";
+hydrateIslands( islands );
 
-for (const island of Object.values(islands)) {
-	island.render({ hydrate: !isDev });
-}
 ```
 
 Create a pre-render script. You can configure your build tool to use this as a seperate entrypoint.

package/dist/index.d.mts

@@ -1,12 +1,40 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FC } from 'react';
-import { I as IslandOpts, a as Island } from './types-Dn7YlQVB.mjs';
+import { I as Island, a as IslandOpts } from './types-BWtowKeL.mjs';
 
-declare function createIsland(component: FC, opts: IslandOpts): Island;
+/**
+ * Create a higher-order component with certain fixed.
+ *
+ * Useful for quickly creating multiple variants of the same component to use as islands.
+ *
+ * @param component FC<T>
+ * @param setProps Partial<T>
+ * @returns FC<T>
+ */
 declare function withProps<T>(component: FC<T>, setProps: Partial<T>): FC<T>;
+/**
+ * Render all Islands in a record.
+ *
+ * Useful if you are importing * from an islands directory.
+ *
+ * @param islands Record<string, Island>
+ */
+declare function hydrateIslands(islands: Record<string, Island>): void;
+
+/**
+ * Create a React Island.
+ *
+ * You can render the island using the Island.render function.
+ *
+ * @param component React.FC
+ * @param opts IslandOpts
+ * @returns Island
+ */
+declare function createIsland(component: FC, opts: IslandOpts): Island;
+/**
+ * Checks if the current script is running in a pre-render.
+ *
+ * @returns boolean
+ */
 declare function isServer(): boolean;
-declare function RawHTML({ html }: {
-    html: string;
-}): react_jsx_runtime.JSX.Element;
 
-export { Island, RawHTML, createIsland, isServer, withProps };
+export { Island, createIsland, hydrateIslands, isServer, withProps };

package/dist/index.d.ts

@@ -1,12 +1,40 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FC } from 'react';
-import { I as IslandOpts, a as Island } from './types-Dn7YlQVB.js';
+import { I as Island, a as IslandOpts } from './types-BWtowKeL.js';
 
-declare function createIsland(component: FC, opts: IslandOpts): Island;
+/**
+ * Create a higher-order component with certain fixed.
+ *
+ * Useful for quickly creating multiple variants of the same component to use as islands.
+ *
+ * @param component FC<T>
+ * @param setProps Partial<T>
+ * @returns FC<T>
+ */
 declare function withProps<T>(component: FC<T>, setProps: Partial<T>): FC<T>;
+/**
+ * Render all Islands in a record.
+ *
+ * Useful if you are importing * from an islands directory.
+ *
+ * @param islands Record<string, Island>
+ */
+declare function hydrateIslands(islands: Record<string, Island>): void;
+
+/**
+ * Create a React Island.
+ *
+ * You can render the island using the Island.render function.
+ *
+ * @param component React.FC
+ * @param opts IslandOpts
+ * @returns Island
+ */
+declare function createIsland(component: FC, opts: IslandOpts): Island;
+/**
+ * Checks if the current script is running in a pre-render.
+ *
+ * @returns boolean
+ */
 declare function isServer(): boolean;
-declare function RawHTML({ html }: {
-    html: string;
-}): react_jsx_runtime.JSX.Element;
 
-export { Island, RawHTML, createIsland, isServer, withProps };
+export { Island, createIsland, hydrateIslands, isServer, withProps };

package/dist/index.js

@@ -1777,39 +1777,17 @@ var require_jsx_runtime = __commonJS({
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
-  RawHTML: () => RawHTML,
   createIsland: () => createIsland,
+  hydrateIslands: () => hydrateIslands,
   isServer: () => isServer,
   withProps: () => withProps
 });
 module.exports = __toCommonJS(src_exports);
+
+// src/render.tsx
 var import_react = __toESM(require_react());
 var import_client = require("react-dom/client");
 var import_jsx_runtime = __toESM(require_jsx_runtime());
-function createIsland(component, opts) {
-  const mergedOpts = __spreadValues({
-    multiple: false,
-    selector: `[data-hydrate="${opts.name}"]`,
-    keepChildren: false
-  }, opts);
-  const island = {
-    type: "island",
-    component,
-    opts: mergedOpts,
-    render(opts2) {
-      renderIsland(this, opts2);
-    }
-  };
-  return island;
-}
-function withProps(component, setProps) {
-  return (props) => {
-    return component(__spreadValues(__spreadValues({}, props), setProps));
-  };
-}
-function isServer() {
-  return !(typeof window != "undefined" && window.document);
-}
 function RawHTML({ html }) {
   const ref = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
@@ -1819,6 +1797,11 @@ function RawHTML({ html }) {
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { ref });
 }
+function withProps(component, setProps) {
+  return (props) => {
+    return component(__spreadValues(__spreadValues({}, props), setProps));
+  };
+}
 function renderIsland(island, renderOpts = {}) {
   const { component, opts } = island;
   const { selector, multiple, keepChildren } = opts;
@@ -1869,10 +1852,37 @@ function renderIsland(island, renderOpts = {}) {
     }
   }
 }
+function hydrateIslands(islands) {
+  const isDev = (process.env.NODE_ENV || "development").trim() === "development";
+  for (const island of Object.values(islands)) {
+    island.render({ hydrate: !isDev });
+  }
+}
+
+// src/index.tsx
+function createIsland(component, opts) {
+  const mergedOpts = __spreadValues({
+    multiple: false,
+    selector: `[data-hydrate="${opts.name}"]`,
+    keepChildren: false
+  }, opts);
+  const island = {
+    type: "island",
+    component,
+    opts: mergedOpts,
+    render(opts2) {
+      renderIsland(this, opts2);
+    }
+  };
+  return island;
+}
+function isServer() {
+  return !(typeof window != "undefined" && window.document);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RawHTML,
   createIsland,
+  hydrateIslands,
   isServer,
   withProps
 });