@solid-primitives/styles - npm Package Compare versions

Comparing version 0.0.114 to 0.1.0

dist/index.d.ts

@@ -1,7 +0,6 @@
-import { Accessor } from 'solid-js';
-
+import { Accessor } from "solid-js";
 /**
  * Reads the current rem size from the document root.
  */
-declare const getRemSize: () => number;
+export declare const getRemSize: () => number;
 /**
@@ -15,3 +14,3 @@ * Creates a reactive signal with value of the current rem size, and tracks it's changes.
  */
-declare function createRemSize(): Accessor<number>;
+export declare function createRemSize(): Accessor<number>;
 /**
@@ -28,8 +27,6 @@ * Returns a reactive signal with value of the current rem size, and tracks it's changes.
  */
-declare const useRemSize: () => Accessor<number>;
+export declare const useRemSize: () => Accessor<number>;
 /**
  * Set the server fallback value for the rem size. {@link getRemSize}, {@link createRemSize} and {@link useRemSize} will return this value on the server.
  */
-declare const setServerRemSize: (size: number) => void;
-
-export { createRemSize, getRemSize, setServerRemSize, useRemSize };
+export declare const setServerRemSize: (size: number) => void;

dist/index.js

@@ -1,43 +0,67 @@
-import { onCleanup } from 'solid-js';
-import { isServer } from 'solid-js/web';
-import { createHydratableSingletonRoot } from '@solid-primitives/rootless';
-import { createHydratableSignal, noop } from '@solid-primitives/utils';
-
-// src/index.ts
-var serverRemSize = 16;
-var totallyHiddenStyles = {
-  border: "0",
-  padding: "0",
-  visibility: "hidden",
-  position: "absolute",
-  top: "-9999px",
-  left: "-9999px"
+import { onCleanup } from "solid-js";
+import { isServer } from "solid-js/web";
+import { createHydratableSingletonRoot } from "@solid-primitives/rootless";
+import { createHydratableSignal, noop } from "@solid-primitives/utils";
+let serverRemSize = 16;
+const totallyHiddenStyles = {
+    border: "0",
+    padding: "0",
+    visibility: "hidden",
+    position: "absolute",
+    top: "-9999px",
+    left: "-9999px",
 };
-var getRemSize = () => isServer ? serverRemSize : parseFloat(getComputedStyle(document.documentElement).fontSize);
-function createRemSize() {
-  if (isServer) {
-    return () => serverRemSize;
-  }
-  const [remSize, setRemSize] = createHydratableSignal(serverRemSize, getRemSize);
-  const el = document.createElement("div");
-  Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
-  document.body.appendChild(el);
-  let init = true;
-  const ro = new ResizeObserver(() => {
-    if (init)
-      return init = false;
-    setRemSize(getRemSize());
-  });
-  ro.observe(el);
-  onCleanup(() => {
-    el.remove();
-    ro.disconnect();
-  });
-  return remSize;
+/**
+ * Reads the current rem size from the document root.
+ */
+export const getRemSize = () => isServer ? serverRemSize : parseFloat(getComputedStyle(document.documentElement).fontSize);
+/**
+ * Creates a reactive signal with value of the current rem size, and tracks it's changes.
+ * @returns A signal with the current rem size in pixels.
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#createRemSize.
+ * @example
+ * const remSize = createRemSize();
+ * console.log(remSize()); // 16
+ */
+export function createRemSize() {
+    if (isServer) {
+        return () => serverRemSize;
+    }
+    const [remSize, setRemSize] = createHydratableSignal(serverRemSize, getRemSize);
+    const el = document.createElement("div");
+    Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
+    document.body.appendChild(el);
+    let init = true;
+    const ro = new ResizeObserver(() => {
+        if (init)
+            return (init = false);
+        setRemSize(getRemSize());
+    });
+    ro.observe(el);
+    onCleanup(() => {
+        el.remove();
+        ro.disconnect();
+    });
+    return remSize;
 }
-var useRemSize = /* @__PURE__ */ createHydratableSingletonRoot(createRemSize);
-var setServerRemSize = isServer ? (size) => {
-  serverRemSize = size;
-} : noop;
-
-export { createRemSize, getRemSize, setServerRemSize, useRemSize };
+/**
+ * Returns a reactive signal with value of the current rem size, and tracks it's changes.
+ *
+ * This is a [singleton root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) except if during hydration.
+ *
+ * @returns A signal with the current rem size in pixels.
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#useRemSize.
+ * @example
+ * const remSize = useRemSize();
+ * console.log(remSize()); // 16
+ */
+export const useRemSize = 
+/*#__PURE__*/ createHydratableSingletonRoot(createRemSize);
+/**
+ * Set the server fallback value for the rem size. {@link getRemSize}, {@link createRemSize} and {@link useRemSize} will return this value on the server.
+ */
+export const setServerRemSize = isServer
+    ? (size) => {
+        serverRemSize = size;
+    }
+    : noop;

package.json

 {
   "name": "@solid-primitives/styles",
-  "version": "0.0.114",
+  "version": "0.1.0",
   "description": "Collection of reactive primitives focused on styles.",
@@ -32,3 +32,2 @@ "author": "Damian Tarnawski <[e-mail]>",
   ],
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -38,9 +37,6 @@ "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"
     }
@@ -55,4 +51,4 @@ },
   "dependencies": {
-    "@solid-primitives/rootless": "^1.4.5",
-    "@solid-primitives/utils": "^6.2.3"
+    "@solid-primitives/rootless": "^1.5.0",
+    "@solid-primitives/utils": "^6.3.0"
   },
@@ -59,0 +55,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/styles?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/styles)
@@ -15,3 +14,3 @@ [![version](https://img.shields.io/npm/v/@solid-primitives/styles?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/styles)
 
-- [`createRemSize`](#createRemSize) - Create a reactive signal of css `rem` size in pixels.
+- [`createRemSize`](#createremsize) - Create a reactive signal of css `rem` size in pixels.
 
@@ -51,3 +50,3 @@ ## Installation
 
-It's behavior is the same as [`createRemSize`](#createRemSize).
+It's behavior is the same as [`createRemSize`](#createremsize).
 
@@ -54,0 +53,0 @@ ```ts

No alert changes

Worsened metrics

Total package byte prevSize

8909

decreased by-26.04%

Number of package files

5

decreased by-37.5%

Lines of code

97

decreased by-37.82%

Number of lines in readme file

77

decreased by-1.28%

Dependency changes

• Updated@solid-primitives/rootless@^1.5.0

• Updated@solid-primitives/utils@^6.3.0