@solid-primitives/cursor - npm Package Compare versions

Comparing version 0.0.115 to 0.1.0

dist/index.d.ts

@@ -1,5 +0,4 @@
-import { Accessor } from 'solid-js';
-import { FalsyValue, MaybeAccessor } from '@solid-primitives/utils';
-
-type CursorProperty = "-moz-grab" | "-webkit-grab" | "alias" | "all-scroll" | "auto" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "move" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "none" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out" | (string & {});
+import { Accessor } from "solid-js";
+import { FalsyValue, MaybeAccessor } from "@solid-primitives/utils";
+export type CursorProperty = "-moz-grab" | "-webkit-grab" | "alias" | "all-scroll" | "auto" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "move" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "none" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out" | (string & {});
 /**
@@ -22,3 +21,3 @@ * Set selected {@link cursor} to {@link target} styles reactively.
  */
-declare function createElementCursor(target: Accessor<HTMLElement | FalsyValue> | HTMLElement, cursor: MaybeAccessor<CursorProperty>): void;
+export declare function createElementCursor(target: Accessor<HTMLElement | FalsyValue> | HTMLElement, cursor: MaybeAccessor<CursorProperty>): void;
 /**
@@ -39,4 +38,2 @@ * Set selected {@link cursor} to body element styles reactively.
  */
-declare function createBodyCursor(cursor: Accessor<CursorProperty | FalsyValue>): void;
-
-export { CursorProperty, createBodyCursor, createElementCursor };
+export declare function createBodyCursor(cursor: Accessor<CursorProperty | FalsyValue>): void;

dist/index.js

@@ -1,32 +0,60 @@
-import { createEffect, onCleanup } from 'solid-js';
-import { isServer } from 'solid-js/web';
-import { access } from '@solid-primitives/utils';
-
-// src/index.ts
-function createElementCursor(target, cursor) {
-  if (isServer)
-    return;
-  createEffect(() => {
-    const el = access(target);
-    const cursorValue = access(cursor);
-    if (!el)
-      return;
-    const overwritten = el.style.cursor;
-    el.style.setProperty("cursor", cursorValue, "important");
-    onCleanup(() => el.style.cursor = overwritten);
-  });
+import { createEffect, onCleanup } from "solid-js";
+import { isServer } from "solid-js/web";
+import { access } from "@solid-primitives/utils";
+/**
+ * Set selected {@link cursor} to {@link target} styles reactively.
+ *
+ * @param target HTMLElement or a reactive signal returning one. Returning falsy value will unset the cursor.
+ * @param cursor Cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc.
+ *
+ * @example
+ * ```ts
+ * const target = document.querySelector("#element");
+ * const [cursor, setCursor] = createSignal("pointer");
+ * const [enabled, setEnabled] = createSignal(true);
+ *
+ * createElementCursor(() => enabled() && target, cursor);
+ *
+ * setCursor("help");
+ * ```
+ */
+export function createElementCursor(target, cursor) {
+    if (isServer)
+        return;
+    createEffect(() => {
+        const el = access(target);
+        const cursorValue = access(cursor);
+        if (!el)
+            return;
+        const overwritten = el.style.cursor;
+        el.style.setProperty("cursor", cursorValue, "important");
+        onCleanup(() => (el.style.cursor = overwritten));
+    });
 }
-function createBodyCursor(cursor) {
-  if (isServer)
-    return;
-  createEffect(() => {
-    const cursorValue = cursor();
-    if (!cursorValue)
-      return;
-    const overwritten = document.body.style.cursor;
-    document.body.style.setProperty("cursor", cursorValue, "important");
-    onCleanup(() => document.body.style.cursor = overwritten);
-  });
+/**
+ * Set selected {@link cursor} to body element styles reactively.
+ *
+ * @param cursor Signal returing a cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc. Returning falsy value will unset the cursor.
+ *
+ * @example
+ * ```ts
+ * const [cursor, setCursor] = createSignal("pointer");
+ * const [enabled, setEnabled] = createSignal(true);
+ *
+ * createBodyCursor(() => enabled() && cursor());
+ *
+ * setCursor("help");
+ * ```
+ */
+export function createBodyCursor(cursor) {
+    if (isServer)
+        return;
+    createEffect(() => {
+        const cursorValue = cursor();
+        if (!cursorValue)
+            return;
+        const overwritten = document.body.style.cursor;
+        document.body.style.setProperty("cursor", cursorValue, "important");
+        onCleanup(() => (document.body.style.cursor = overwritten));
+    });
 }
-
-export { createBodyCursor, createElementCursor };

package.json

 {
   "name": "@solid-primitives/cursor",
-  "version": "0.0.115",
+  "version": "0.1.0",
   "description": "Two simple primitives for setting cursor css property reactively.",
@@ -37,3 +37,2 @@ "author": "Damian Tarnawski <[e-mail]>",
   "type": "module",
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -43,13 +42,10 @@ "types": "./dist/index.d.ts",
   "exports": {
+    "@solid-primitives/source": "./src/index.ts",
     "import": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    },
-    "require": {
-      "types": "./dist/index.d.cts",
-      "default": "./dist/index.cjs"
     }
   },
   "dependencies": {
-    "@solid-primitives/utils": "^6.2.3"
+    "@solid-primitives/utils": "^6.3.0"
   },
@@ -56,0 +52,0 @@ "peerDependencies": {

README.md

@@ -7,3 +7,2 @@ <p>
 
-[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
 [![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/cursor?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/cursor)
@@ -15,4 +14,4 @@ [![version](https://img.shields.io/npm/v/@solid-primitives/cursor?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/cursor)
 
-- [`createElementCursor`](#createElementCursor) - Set provided cursor to given HTML Element styles reactively.
-- [`createBodyCursor`](#createBodyCursor) - Set selected cursor to body element styles reactively.
+- [`createElementCursor`](#createelementcursor) - Set provided cursor to given HTML Element styles reactively.
+- [`createBodyCursor`](#createbodycursor) - Set selected cursor to body element styles reactively.
 
@@ -19,0 +18,0 @@ ## Installation

No alert changes

Worsened metrics

Total package byte prevSize

8780

decreased by-26.63%

Number of package files

5

decreased by-37.5%

Lines of code

98

decreased by-26.32%

Number of lines in readme file

69

decreased by-1.43%

Dependency changes

• Updated@solid-primitives/utils@^6.3.0