@ssgoi/solid 6.5.0 → 6.6.5

package/dist/ssgoi.js

@@ -1,8 +1,8 @@
-import { createComponent as i, template as a, insert as s, use as c } from "solid-js/web";
+import { createComponent as i, insert as a, template as s, use as c } from "solid-js/web";
 import { createMemo as l, createEffect as m, onCleanup as f } from "solid-js";
 import { SsgoiProvider as u } from "./context.js";
 import { createSggoiTransitionContext as g, observeSsgoiTransitions as p } from "@ssgoi/core/internal";
-var v = /* @__PURE__ */ a("<div data-ssgoi-root style=display:contents>");
+var v = /* @__PURE__ */ s("<div data-ssgoi-root style=display:contents>");
 const y = (o) => {
   let e;
   const r = l(() => g(o.config, {
@@ -18,7 +18,7 @@ const y = (o) => {
     },
     get children() {
       var t = v(), n = e;
-      return typeof n == "function" ? c(n, t) : e = t, s(t, () => o.children), t;
+      return typeof n == "function" ? c(n, t) : e = t, a(t, () => o.children), t;
     }
   });
 };

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@ssgoi/solid",
-  "version": "6.5.0",
+  "version": "6.6.5",
   "description": "Solid.js bindings for SSGOI - Native app-like page transitions for Solid applications",
   "private": false,
   "type": "module",
   "files": [
+    "src/lib",
     "dist",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
@@ -14,18 +17,21 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "solid": "./src/lib/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./types": {
+      "solid": "./src/lib/types.ts",
       "types": "./dist/types.d.ts",
       "import": "./dist/types.js",
       "require": "./dist/types.cjs",
       "default": "./dist/types.js"
     },
     "./view-transitions": {
+      "solid": "./src/lib/view-transitions.ts",
       "types": "./dist/view-transitions.d.ts",
       "import": "./dist/view-transitions.js",
       "require": "./dist/view-transitions.cjs",
@@ -33,7 +39,7 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^6.5.0"
+    "@ssgoi/core": "^6.6.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

package/src/lib/context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "solid-js";
+import type { SsgoiContext } from "./types";
+
+const SsgoiContextInstance = createContext<SsgoiContext | null>(null);
+
+export const SsgoiProvider = SsgoiContextInstance.Provider;
+
+export const useSsgoi = () => {
+  const context = useContext(SsgoiContextInstance);
+  if (!context) {
+    throw new Error("useSsgoi must be used within SsgoiProvider");
+  }
+  return context;
+};

package/src/lib/index.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export { Ssgoi } from "./ssgoi";
+/** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
+export { SsgoiTransition } from "./ssgoi-transition";
+export * from "@ssgoi/core";

package/src/lib/ssgoi-transition.tsx

@@ -0,0 +1,34 @@
+import { splitProps, type JSX, type ValidComponent } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { useSsgoi } from "./context";
+
+type SsgoiTransitionProps<T extends ValidComponent = "div"> = {
+  children: JSX.Element;
+  id: string;
+  as?: T;
+  class?: string;
+};
+
+/**
+ * @deprecated Set `data-ssgoi-transition` directly on the page boundary
+ * element inside `<Ssgoi>` instead.
+ */
+export const SsgoiTransition = <T extends ValidComponent = "div">(
+  props: SsgoiTransitionProps<T>,
+) => {
+  const [local, rest] = splitProps(props, ["children", "id", "as", "class"]);
+  const ssgoi = useSsgoi();
+  const component = (local.as || "div") as ValidComponent;
+
+  return (
+    <Dynamic
+      component={component}
+      ref={ssgoi.refFor(local.id)}
+      data-ssgoi-transition={local.id}
+      class={local.class}
+      {...(rest as object)}
+    >
+      {local.children}
+    </Dynamic>
+  );
+};

package/src/lib/ssgoi.tsx

@@ -0,0 +1,35 @@
+import { createEffect, createMemo, onCleanup, type JSX } from "solid-js";
+import type { SsgoiConfig, SsgoiContext } from "./types";
+import { SsgoiProvider } from "./context";
+import {
+  createSggoiTransitionContext,
+  observeSsgoiTransitions,
+} from "@ssgoi/core/internal";
+import type { HostAnimation } from "@ssgoi/core/internal";
+
+interface SsgoiProps {
+  config: SsgoiConfig;
+  host?: HostAnimation;
+  children: JSX.Element;
+}
+
+export const Ssgoi = (props: SsgoiProps) => {
+  let root!: HTMLDivElement;
+  const contextValue = createMemo<SsgoiContext>(() =>
+    createSggoiTransitionContext(props.config, { host: props.host }),
+  );
+
+  createEffect(() => {
+    if (!root) return;
+    const cleanup = observeSsgoiTransitions(root, contextValue());
+    onCleanup(cleanup);
+  });
+
+  return (
+    <SsgoiProvider value={contextValue()}>
+      <div ref={root} data-ssgoi-root="" style={{ display: "contents" }}>
+        {props.children}
+      </div>
+    </SsgoiProvider>
+  );
+};

package/src/lib/types.ts

@@ -0,0 +1 @@
+export * from "@ssgoi/core/types";

package/src/lib/view-transitions.ts

@@ -0,0 +1 @@
+export * from "@ssgoi/core";