@solid-primitives/styles 0.0.114 → 0.1.1

package/README.md

@@ -4,14 +4,13 @@
 
 # @solid-primitives/styles
 
-[![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)
 [![version](https://img.shields.io/npm/v/@solid-primitives/styles?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/styles)
 [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
 
 Collection of reactive primitives focused on 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.
 
 ## Installation
 
@@ -46,7 +45,7 @@ createEffect(() => {
 
 This primitive provides a [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) variant that will reuse signals, HTML elements and the ResizeObserver instance across all dependents that use it.
 
-It's behavior is the same as [`createRemSize`](#createRemSize).
+It's behavior is the same as [`createRemSize`](#createremsize).
 
 ```ts
 import { useRemSize } from "@solid-primitives/styles";

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-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;
 /**
  * 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.
@@ -12,7 +11,7 @@ declare const getRemSize: () => number;
  * const remSize = createRemSize();
  * console.log(remSize()); // 16
  */
-declare function createRemSize(): Accessor<number>;
+export declare function createRemSize(): Accessor<number>;
 /**
  * Returns a reactive signal with value of the current rem size, and tracks it's changes.
  *
@@ -24,10 +23,8 @@ declare function createRemSize(): Accessor<number>;
  * const remSize = useRemSize();
  * console.log(remSize()); // 16
  */
-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;

package/dist/index.js

@@ -1,43 +1,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-primitives/styles",
-  "version": "0.0.114",
+  "version": "0.1.1",
   "description": "Collection of reactive primitives focused on styles.",
   "author": "Damian Tarnawski <gthetaranv@gmail.com>",
   "contributors": [
@@ -29,18 +29,14 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "browser": {},
   "exports": {
     "import": {
+      "@solid-primitives/source": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    },
-    "require": {
-      "types": "./dist/index.d.cts",
-      "default": "./dist/index.cjs"
     }
   },
   "keywords": [
@@ -50,8 +46,8 @@
     "css"
   ],
   "dependencies": {
-    "@solid-primitives/rootless": "^1.4.5",
-    "@solid-primitives/utils": "^6.2.3"
+    "@solid-primitives/utils": "^6.3.1",
+    "@solid-primitives/rootless": "^1.5.1"
   },
   "peerDependencies": {
     "solid-js": "^1.6.12"

package/dist/index.cjs

@@ -1,45 +0,0 @@
-'use strict';
-
-var solidJs = require('solid-js');
-var web = require('solid-js/web');
-var rootless = require('@solid-primitives/rootless');
-var utils = require('@solid-primitives/utils');
-
-// src/index.ts
-var serverRemSize = 16;
-var totallyHiddenStyles = {
-  border: "0",
-  padding: "0",
-  visibility: "hidden",
-  position: "absolute",
-  top: "-9999px",
-  left: "-9999px"
-};
-exports.getRemSize = () => web.isServer ? serverRemSize : parseFloat(getComputedStyle(document.documentElement).fontSize);
-function createRemSize() {
-  if (web.isServer) {
-    return () => serverRemSize;
-  }
-  const [remSize, setRemSize] = utils.createHydratableSignal(serverRemSize, exports.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(exports.getRemSize());
-  });
-  ro.observe(el);
-  solidJs.onCleanup(() => {
-    el.remove();
-    ro.disconnect();
-  });
-  return remSize;
-}
-exports.useRemSize = /* @__PURE__ */ rootless.createHydratableSingletonRoot(createRemSize);
-exports.setServerRemSize = web.isServer ? (size) => {
-  serverRemSize = size;
-} : utils.noop;
-
-exports.createRemSize = createRemSize;

package/dist/index.d.cts

@@ -1,33 +0,0 @@
-import { Accessor } from 'solid-js';
-
-/**
- * Reads the current rem size from the document root.
- */
-declare const getRemSize: () => number;
-/**
- * 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
- */
-declare function createRemSize(): Accessor<number>;
-/**
- * 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
- */
-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 };