@solid-primitives/styles 0.0.101 → 0.0.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/dev.cjs +8 -10
  2. package/dist/dev.js +7 -4
  3. package/dist/index.cjs +8 -10
  4. package/dist/index.d.ts +2 -1
  5. package/dist/index.js +7 -4
  6. package/dist/server.cjs +4 -8
  7. package/dist/server.js +1 -0
  8. package/package.json +42 -19
package/dist/dev.cjs CHANGED
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var rootless = require('@solid-primitives/rootless');
6
4
  var solidJs = require('solid-js');
5
+ var utils = require('@solid-primitives/utils');
7
6
 
8
7
  // src/index.ts
8
+ var serverRemSize = 16;
9
9
  var totallyHiddenStyles = {
10
10
  border: "0",
11
11
  padding: "0",
@@ -14,9 +14,9 @@ var totallyHiddenStyles = {
14
14
  top: "-9999px",
15
15
  left: "-9999px"
16
16
  };
17
- var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
17
+ exports.getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
18
18
  function createRemSize() {
19
- const [remSize, setRemSize] = solidJs.createSignal(getRemSize());
19
+ const [remSize, setRemSize] = utils.createHydrateSignal(serverRemSize, exports.getRemSize);
20
20
  const el = document.createElement("div");
21
21
  Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
22
22
  document.body.appendChild(el);
@@ -24,7 +24,7 @@ function createRemSize() {
24
24
  const ro = new ResizeObserver(() => {
25
25
  if (init)
26
26
  return init = false;
27
- setRemSize(getRemSize());
27
+ setRemSize(exports.getRemSize());
28
28
  });
29
29
  ro.observe(el);
30
30
  solidJs.onCleanup(() => {
@@ -33,11 +33,9 @@ function createRemSize() {
33
33
  });
34
34
  return remSize;
35
35
  }
36
- var useRemSize = /* @__PURE__ */ rootless.createSharedRoot(createRemSize);
37
- var setServerRemSize = (size) => {
36
+ var sharedRemSize = /* @__PURE__ */ rootless.createSharedRoot(createRemSize);
37
+ exports.useRemSize = () => solidJs.sharedConfig.context ? createRemSize() : sharedRemSize();
38
+ exports.setServerRemSize = () => {
38
39
  };
39
40
 
40
41
  exports.createRemSize = createRemSize;
41
- exports.getRemSize = getRemSize;
42
- exports.setServerRemSize = setServerRemSize;
43
- exports.useRemSize = useRemSize;
package/dist/dev.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import { createSharedRoot } from '@solid-primitives/rootless';
2
- import { createSignal, onCleanup } from 'solid-js';
2
+ import { onCleanup, sharedConfig } from 'solid-js';
3
+ import { createHydrateSignal } from '@solid-primitives/utils';
3
4
 
4
5
  // src/index.ts
6
+ var serverRemSize = 16;
5
7
  var totallyHiddenStyles = {
6
8
  border: "0",
7
9
  padding: "0",
@@ -12,7 +14,7 @@ var totallyHiddenStyles = {
12
14
  };
13
15
  var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
14
16
  function createRemSize() {
15
- const [remSize, setRemSize] = createSignal(getRemSize());
17
+ const [remSize, setRemSize] = createHydrateSignal(serverRemSize, getRemSize);
16
18
  const el = document.createElement("div");
17
19
  Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
18
20
  document.body.appendChild(el);
@@ -29,8 +31,9 @@ function createRemSize() {
29
31
  });
30
32
  return remSize;
31
33
  }
32
- var useRemSize = /* @__PURE__ */ createSharedRoot(createRemSize);
33
- var setServerRemSize = (size) => {
34
+ var sharedRemSize = /* @__PURE__ */ createSharedRoot(createRemSize);
35
+ var useRemSize = () => sharedConfig.context ? createRemSize() : sharedRemSize();
36
+ var setServerRemSize = () => {
34
37
  };
35
38
 
36
39
  export { createRemSize, getRemSize, setServerRemSize, useRemSize };
package/dist/index.cjs CHANGED
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var rootless = require('@solid-primitives/rootless');
6
4
  var solidJs = require('solid-js');
5
+ var utils = require('@solid-primitives/utils');
7
6
 
8
7
  // src/index.ts
8
+ var serverRemSize = 16;
9
9
  var totallyHiddenStyles = {
10
10
  border: "0",
11
11
  padding: "0",
@@ -14,9 +14,9 @@ var totallyHiddenStyles = {
14
14
  top: "-9999px",
15
15
  left: "-9999px"
16
16
  };
17
- var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
17
+ exports.getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
18
18
  function createRemSize() {
19
- const [remSize, setRemSize] = solidJs.createSignal(getRemSize());
19
+ const [remSize, setRemSize] = utils.createHydrateSignal(serverRemSize, exports.getRemSize);
20
20
  const el = document.createElement("div");
21
21
  Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
22
22
  document.body.appendChild(el);
@@ -24,7 +24,7 @@ function createRemSize() {
24
24
  const ro = new ResizeObserver(() => {
25
25
  if (init)
26
26
  return init = false;
27
- setRemSize(getRemSize());
27
+ setRemSize(exports.getRemSize());
28
28
  });
29
29
  ro.observe(el);
30
30
  solidJs.onCleanup(() => {
@@ -33,11 +33,9 @@ function createRemSize() {
33
33
  });
34
34
  return remSize;
35
35
  }
36
- var useRemSize = /* @__PURE__ */ rootless.createSharedRoot(createRemSize);
37
- var setServerRemSize = (size) => {
36
+ var sharedRemSize = /* @__PURE__ */ rootless.createSharedRoot(createRemSize);
37
+ exports.useRemSize = () => solidJs.sharedConfig.context ? createRemSize() : sharedRemSize();
38
+ exports.setServerRemSize = () => {
38
39
  };
39
40
 
40
41
  exports.createRemSize = createRemSize;
41
- exports.getRemSize = getRemSize;
42
- exports.setServerRemSize = setServerRemSize;
43
- exports.useRemSize = useRemSize;
package/dist/index.d.ts CHANGED
@@ -16,7 +16,8 @@ declare function createRemSize(): Accessor<number>;
16
16
  /**
17
17
  * Returns a reactive signal with value of the current rem size, and tracks it's changes.
18
18
  *
19
- * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot).
19
+ * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) except if during hydration.
20
+ *
20
21
  * @returns A signal with the current rem size in pixels.
21
22
  * @see [Primitive documentation](https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#useRemSize).
22
23
  * @example
package/dist/index.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import { createSharedRoot } from '@solid-primitives/rootless';
2
- import { createSignal, onCleanup } from 'solid-js';
2
+ import { onCleanup, sharedConfig } from 'solid-js';
3
+ import { createHydrateSignal } from '@solid-primitives/utils';
3
4
 
4
5
  // src/index.ts
6
+ var serverRemSize = 16;
5
7
  var totallyHiddenStyles = {
6
8
  border: "0",
7
9
  padding: "0",
@@ -12,7 +14,7 @@ var totallyHiddenStyles = {
12
14
  };
13
15
  var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
14
16
  function createRemSize() {
15
- const [remSize, setRemSize] = createSignal(getRemSize());
17
+ const [remSize, setRemSize] = createHydrateSignal(serverRemSize, getRemSize);
16
18
  const el = document.createElement("div");
17
19
  Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
18
20
  document.body.appendChild(el);
@@ -29,8 +31,9 @@ function createRemSize() {
29
31
  });
30
32
  return remSize;
31
33
  }
32
- var useRemSize = /* @__PURE__ */ createSharedRoot(createRemSize);
33
- var setServerRemSize = (size) => {
34
+ var sharedRemSize = /* @__PURE__ */ createSharedRoot(createRemSize);
35
+ var useRemSize = () => sharedConfig.context ? createRemSize() : sharedRemSize();
36
+ var setServerRemSize = () => {
34
37
  };
35
38
 
36
39
  export { createRemSize, getRemSize, setServerRemSize, useRemSize };
package/dist/server.cjs CHANGED
@@ -1,24 +1,20 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  require('@solid-primitives/rootless');
6
4
  require('solid-js');
5
+ require('@solid-primitives/utils');
7
6
 
8
7
  // src/index.ts
9
8
  var serverRemSize = 16;
10
- var getRemSize = () => serverRemSize ;
9
+ exports.getRemSize = () => serverRemSize ;
11
10
  function createRemSize() {
12
11
  {
13
12
  return () => serverRemSize;
14
13
  }
15
14
  }
16
- var useRemSize = () => () => serverRemSize ;
17
- var setServerRemSize = (size) => {
15
+ exports.useRemSize = () => () => serverRemSize ;
16
+ exports.setServerRemSize = (size) => {
18
17
  serverRemSize = size;
19
18
  } ;
20
19
 
21
20
  exports.createRemSize = createRemSize;
22
- exports.getRemSize = getRemSize;
23
- exports.setServerRemSize = setServerRemSize;
24
- exports.useRemSize = useRemSize;
package/dist/server.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import '@solid-primitives/rootless';
2
2
  import 'solid-js';
3
+ import '@solid-primitives/utils';
3
4
 
4
5
  // src/index.ts
5
6
  var serverRemSize = 16;
package/package.json CHANGED
@@ -1,9 +1,11 @@
1
1
  {
2
2
  "name": "@solid-primitives/styles",
3
- "version": "0.0.101",
3
+ "version": "0.0.103",
4
4
  "description": "Collection of reactive primitives focused on styles.",
5
5
  "author": "Damian Tarnawski <gthetaranv@gmail.com>",
6
- "contributors": [],
6
+ "contributors": [
7
+ "Tom Pichaud <dev.tompichaud@icloud.com>"
8
+ ],
7
9
  "license": "MIT",
8
10
  "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#readme",
9
11
  "repository": {
@@ -30,32 +32,57 @@
30
32
  "main": "./dist/server.cjs",
31
33
  "module": "./dist/server.js",
32
34
  "types": "./dist/index.d.ts",
35
+ "browser": {
36
+ "./dist/server.js": "./dist/index.js",
37
+ "./dist/server.cjs": "./dist/index.cjs"
38
+ },
33
39
  "exports": {
34
40
  "worker": {
35
- "import": "./dist/server.js",
41
+ "import": {
42
+ "types": "./dist/index.d.ts",
43
+ "default": "./dist/server.js"
44
+ },
36
45
  "require": "./dist/server.cjs"
37
46
  },
38
47
  "browser": {
39
48
  "development": {
40
- "import": "./dist/dev.js",
49
+ "import": {
50
+ "types": "./dist/index.d.ts",
51
+ "default": "./dist/dev.js"
52
+ },
41
53
  "require": "./dist/dev.cjs"
42
54
  },
43
- "import": "./dist/index.js",
55
+ "import": {
56
+ "types": "./dist/index.d.ts",
57
+ "default": "./dist/index.js"
58
+ },
44
59
  "require": "./dist/index.cjs"
45
60
  },
46
61
  "deno": {
47
- "import": "./dist/server.js",
62
+ "import": {
63
+ "types": "./dist/index.d.ts",
64
+ "default": "./dist/server.js"
65
+ },
48
66
  "require": "./dist/server.cjs"
49
67
  },
50
68
  "node": {
51
- "import": "./dist/server.js",
69
+ "import": {
70
+ "types": "./dist/index.d.ts",
71
+ "default": "./dist/server.js"
72
+ },
52
73
  "require": "./dist/server.cjs"
53
74
  },
54
75
  "development": {
55
- "import": "./dist/dev.js",
76
+ "import": {
77
+ "types": "./dist/index.d.ts",
78
+ "default": "./dist/dev.js"
79
+ },
56
80
  "require": "./dist/dev.cjs"
57
81
  },
58
- "import": "./dist/index.js",
82
+ "import": {
83
+ "types": "./dist/index.d.ts",
84
+ "default": "./dist/index.js"
85
+ },
59
86
  "require": "./dist/index.cjs"
60
87
  },
61
88
  "keywords": [
@@ -65,21 +92,17 @@
65
92
  "css"
66
93
  ],
67
94
  "dependencies": {
68
- "@solid-primitives/rootless": "^1.2.0"
69
- },
70
- "browser": {
71
- "./dist/server.cjs": "./dist/index.cjs",
72
- "./dist/server.js": "./dist/index.js"
73
- },
74
- "devDependencies": {
75
- "solid-js": "^1.5.0"
95
+ "@solid-primitives/rootless": "^1.2.2",
96
+ "@solid-primitives/utils": "^5.2.0"
76
97
  },
77
98
  "peerDependencies": {
78
- "solid-js": "^1.5.0"
99
+ "solid-js": "^1.6.0"
79
100
  },
101
+ "typesVersions": {},
80
102
  "scripts": {
81
103
  "start": "vite serve dev --host",
82
- "dev": "npm run start",
104
+ "dev": "vite serve dev",
105
+ "page": "vite build dev",
83
106
  "build": "jiti ../../scripts/build.ts --ssr --dev",
84
107
  "test": "vitest -c ../../configs/vitest.config.ts",
85
108
  "test:ssr": "pnpm run test --mode ssr"