@solid-primitives/styles 0.0.105 → 0.0.107

package/README.md

@@ -44,7 +44,7 @@ createEffect(() => {
 
 ### `useRemSize`
 
-This primitive provides a [shared root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) variant that will reuse signals, HTML elements and the ResizeObserver instance across all dependents that use it.
+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).
 

package/dist/index.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-var rootless = require('@solid-primitives/rootless');
 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
@@ -14,9 +15,12 @@ var totallyHiddenStyles = {
   top: "-9999px",
   left: "-9999px"
 };
-exports.getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+exports.getRemSize = () => web.isServer ? serverRemSize : parseFloat(getComputedStyle(document.documentElement).fontSize);
 function createRemSize() {
-  const [remSize, setRemSize] = utils.createHydrateSignal(serverRemSize, exports.getRemSize);
+  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);
@@ -33,9 +37,10 @@ function createRemSize() {
   });
   return remSize;
 }
-var sharedRemSize = /* @__PURE__ */ rootless.createSharedRoot(createRemSize);
-exports.useRemSize = () => solidJs.sharedConfig.context ? createRemSize() : sharedRemSize();
-exports.setServerRemSize = () => {
+exports.useRemSize = /* @__PURE__ */ rootless.createHydratableSingletonRoot(createRemSize);
+exports.setServerRemSize = web.isServer ? (size) => {
+  serverRemSize = size;
+} : () => {
 };
 
 exports.createRemSize = createRemSize;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ 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 [Primitive documentation](https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#createRemSize).
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#createRemSize.
  * @example
  * const remSize = createRemSize();
  * console.log(remSize()); // 16
@@ -16,10 +16,10 @@ declare function createRemSize(): Accessor<number>;
 /**
  * Returns a reactive signal with value of the current rem size, and tracks it's changes.
  *
- * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) except if during hydration.
+ * 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 [Primitive documentation](https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#useRemSize).
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#useRemSize.
  * @example
  * const remSize = useRemSize();
  * console.log(remSize()); // 16

package/dist/index.js

@@ -1,6 +1,7 @@
-import { createSharedRoot } from '@solid-primitives/rootless';
-import { onCleanup, sharedConfig } from 'solid-js';
-import { createHydrateSignal } from '@solid-primitives/utils';
+import { onCleanup } from 'solid-js';
+import { isServer } from 'solid-js/web';
+import { createHydratableSingletonRoot } from '@solid-primitives/rootless';
+import { createHydratableSignal } from '@solid-primitives/utils';
 
 // src/index.ts
 var serverRemSize = 16;
@@ -12,9 +13,12 @@ var totallyHiddenStyles = {
   top: "-9999px",
   left: "-9999px"
 };
-var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+var getRemSize = () => isServer ? serverRemSize : parseFloat(getComputedStyle(document.documentElement).fontSize);
 function createRemSize() {
-  const [remSize, setRemSize] = createHydrateSignal(serverRemSize, getRemSize);
+  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);
@@ -31,9 +35,10 @@ function createRemSize() {
   });
   return remSize;
 }
-var sharedRemSize = /* @__PURE__ */ createSharedRoot(createRemSize);
-var useRemSize = () => sharedConfig.context ? createRemSize() : sharedRemSize();
-var setServerRemSize = () => {
+var useRemSize = /* @__PURE__ */ createHydratableSingletonRoot(createRemSize);
+var setServerRemSize = isServer ? (size) => {
+  serverRemSize = size;
+} : () => {
 };
 
 export { createRemSize, getRemSize, setServerRemSize, useRemSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-primitives/styles",
-  "version": "0.0.105",
+  "version": "0.0.107",
   "description": "Collection of reactive primitives focused on styles.",
   "author": "Damian Tarnawski <gthetaranv@gmail.com>",
   "contributors": [
@@ -29,56 +29,11 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/server.cjs",
-  "module": "./dist/server.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "browser": {
-    "./dist/server.js": "./dist/index.js",
-    "./dist/server.cjs": "./dist/index.cjs"
-  },
+  "browser": {},
   "exports": {
-    "worker": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/server.js"
-      },
-      "require": "./dist/server.cjs"
-    },
-    "browser": {
-      "development": {
-        "import": {
-          "types": "./dist/index.d.ts",
-          "default": "./dist/dev.js"
-        },
-        "require": "./dist/dev.cjs"
-      },
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": "./dist/index.cjs"
-    },
-    "deno": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/server.js"
-      },
-      "require": "./dist/server.cjs"
-    },
-    "node": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/server.js"
-      },
-      "require": "./dist/server.cjs"
-    },
-    "development": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/dev.js"
-      },
-      "require": "./dist/dev.cjs"
-    },
     "import": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -92,18 +47,18 @@
     "css"
   ],
   "dependencies": {
-    "@solid-primitives/rootless": "^1.2.6",
-    "@solid-primitives/utils": "^5.4.0"
+    "@solid-primitives/rootless": "^1.3.1",
+    "@solid-primitives/utils": "^5.5.1"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.0"
+    "solid-js": "^1.6.12"
   },
   "typesVersions": {},
   "scripts": {
     "start": "vite serve dev --host",
     "dev": "vite serve dev",
     "page": "vite build dev",
-    "build": "jiti ../../scripts/build.ts --ssr --dev",
+    "build": "jiti ../../scripts/build.ts",
     "test": "vitest -c ../../configs/vitest.config.ts",
     "test:ssr": "pnpm run test --mode ssr"
   }

package/dist/dev.cjs

@@ -1,41 +0,0 @@
-'use strict';
-
-var rootless = require('@solid-primitives/rootless');
-var solidJs = require('solid-js');
-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 = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
-function createRemSize() {
-  const [remSize, setRemSize] = utils.createHydrateSignal(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;
-}
-var sharedRemSize = /* @__PURE__ */ rootless.createSharedRoot(createRemSize);
-exports.useRemSize = () => solidJs.sharedConfig.context ? createRemSize() : sharedRemSize();
-exports.setServerRemSize = () => {
-};
-
-exports.createRemSize = createRemSize;

package/dist/dev.js

@@ -1,39 +0,0 @@
-import { createSharedRoot } from '@solid-primitives/rootless';
-import { onCleanup, sharedConfig } from 'solid-js';
-import { createHydrateSignal } from '@solid-primitives/utils';
-
-// src/index.ts
-var serverRemSize = 16;
-var totallyHiddenStyles = {
-  border: "0",
-  padding: "0",
-  visibility: "hidden",
-  position: "absolute",
-  top: "-9999px",
-  left: "-9999px"
-};
-var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
-function createRemSize() {
-  const [remSize, setRemSize] = createHydrateSignal(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 sharedRemSize = /* @__PURE__ */ createSharedRoot(createRemSize);
-var useRemSize = () => sharedConfig.context ? createRemSize() : sharedRemSize();
-var setServerRemSize = () => {
-};
-
-export { createRemSize, getRemSize, setServerRemSize, useRemSize };

package/dist/server.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-require('@solid-primitives/rootless');
-require('solid-js');
-require('@solid-primitives/utils');
-
-// src/index.ts
-var serverRemSize = 16;
-exports.getRemSize = () => serverRemSize ;
-function createRemSize() {
-  {
-    return () => serverRemSize;
-  }
-}
-exports.useRemSize = () => () => serverRemSize ;
-exports.setServerRemSize = (size) => {
-  serverRemSize = size;
-} ;
-
-exports.createRemSize = createRemSize;

package/dist/server.js

@@ -1,18 +0,0 @@
-import '@solid-primitives/rootless';
-import 'solid-js';
-import '@solid-primitives/utils';
-
-// src/index.ts
-var serverRemSize = 16;
-var getRemSize = () => serverRemSize ;
-function createRemSize() {
-  {
-    return () => serverRemSize;
-  }
-}
-var useRemSize = () => () => serverRemSize ;
-var setServerRemSize = (size) => {
-  serverRemSize = size;
-} ;
-
-export { createRemSize, getRemSize, setServerRemSize, useRemSize };