Skip to content

Commit 4338fa9

Browse files
authored
[FIX] Update start package (#660)
2 parents debb49f + a04bb61 commit 4338fa9

File tree

9 files changed

+218
-1884
lines changed

9 files changed

+218
-1884
lines changed
File renamed without changes.

Diff for: packages/cookies/README.md

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<p>
2+
<img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=cookies" alt="Solid Primitives cookies">
3+
</p>
4+
5+
# @solid-primitives/cookies
6+
7+
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
8+
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/cookies?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/cookies)
9+
[![version](https://img.shields.io/npm/v/@solid-primitives/cookies?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/cookies)
10+
[![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)
11+
12+
A set of primitives for handling cookies in solid
13+
14+
- [`createServerCookie`](#createservercookie) - Provides a getter and setter for a reactive cookie, which works isomorphically.
15+
- [`createUserTheme`](#createusertheme) - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.
16+
- [`getCookiesString`](#getCookiesString) - A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server
17+
18+
## Installation
19+
20+
```bash
21+
npm install @solid-primitives/cookies
22+
# or
23+
yarn add @solid-primitives/cookies
24+
# or
25+
pnpm add @solid-primitives/cookies
26+
```
27+
28+
## How to use it
29+
30+
## `createServerCookie`
31+
32+
A primitive for creating a cookie that can be accessed isomorphically on the client, or the server.
33+
34+
```ts
35+
import { createServerCookie } from "@solid-primitives/cookies"
36+
37+
const [cookie, setCookie] = createServerCookie("cookieName");
38+
39+
cookie(); // => string | undefined
40+
```
41+
42+
### Custom serialization
43+
44+
Custom cookie serializers and deserializers can also be implemented
45+
46+
```ts
47+
import { createServerCookie } from "@solid-primitives/cookies"
48+
49+
const [serverCookie, setServerCookie] = createServerCookie("coolCookie", {
50+
deserialize: str => (str ? str.split(" ") : []), // Deserializes cookie into a string[]
51+
serialize: val => (val ? val.join(" ") : ""), // serializes the value back into a string
52+
});
53+
54+
serverCookie(); // => string[]
55+
```
56+
57+
## `createUserTheme`
58+
59+
Composes `createServerCookie` to provide a type safe way to store a theme and access it on the server or client.
60+
61+
```ts
62+
import { createUserTheme } from "@solid-primitives/cookies"
63+
64+
const [theme, setTheme] = createUserTheme("cookieName");
65+
66+
theme(); // => "light" | "dark" | undefined
67+
68+
// with default value
69+
const [theme, setTheme] = createUserTheme("cookieName", {
70+
defaultValue: "light",
71+
});
72+
73+
theme(); // => "light" | "dark"
74+
```
75+
76+
## `getCookiesString`
77+
78+
A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server.
79+
Uses `getRequestEvent` on the server and `document.cookie` on the client.
80+
81+
```ts
82+
import { getCookiesString, parseCookie } from "@solid-primitives/cookies"
83+
84+
const string = getCookiesString()
85+
const cookie = parseCookie(string, "cookie_name")
86+
```
87+
88+
89+
## Examples
90+
91+
PRs welcome :)
92+
93+
## Demo
94+
95+
You can view a demo of this primitive here: <https://codesandbox.io/p/sandbox/amazing-easley-wqk38i?file=%2Fsrc%2Fcookies_primitive%2Findex.ts%3A36%2C20>
96+
97+
## Changelog
98+
99+
See [CHANGELOG.md](./CHANGELOG.md)

Diff for: packages/start/dev/index.tsx renamed to packages/cookies/dev/index.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import { Component, createSignal } from "solid-js";
1+
import { Component } from "solid-js";
2+
import { createUserTheme } from "../src/index.js";
23

34
const App: Component = () => {
4-
const [count, setCount] = createSignal(0);
5-
const increment = () => setCount(count() + 1);
5+
const [theme, setTheme] = createUserTheme();
6+
const increment = () => setTheme(theme() === "light" ? "dark" : "light");
67
return (
78
<div class={`min-h-screen ${"dark" == "dark" ? "dark" : ""}`}>
89
<div class="box-border flex min-h-screen w-full flex-col items-center justify-center space-y-4 bg-gray-800 p-24 text-white">
910
<div class="wrapper-v">
1011
<h4>Counter component</h4>
1112
<p class="caption">it's very important...</p>
1213
<button class="btn" onClick={increment}>
13-
{count()}
14+
{theme()}
1415
</button>
1516
</div>
1617
</div>

Diff for: packages/start/package.json renamed to packages/cookies/package.json

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
2-
"name": "@solid-primitives/start",
3-
"version": "0.0.4",
4-
"description": "A set of primitives for Solid Start",
5-
"author": "Thomas",
2+
"name": "@solid-primitives/cookies",
3+
"version": "0.0.1",
4+
"description": "A set of primitives for handling cookies in solid",
5+
"author": "Thomas Beer (https://github.com/Tommypop2)",
66
"contributors": [
7-
"Damian Tarnawski <[email protected]>"
7+
"Damian Tarnawski <[email protected]>",
8+
"Seth Murphy (https://github.com/eagerestwolf)"
89
],
910
"license": "MIT",
10-
"homepage": "https://primitives.solidjs.community/package/start",
11+
"homepage": "https://primitives.solidjs.community/package/cookies",
1112
"repository": {
1213
"type": "git",
1314
"url": "git+https://github.com/solidjs-community/solid-primitives.git"
@@ -16,18 +17,18 @@
1617
"url": "https://github.com/solidjs-community/solid-primitives/issues"
1718
},
1819
"primitive": {
19-
"name": "start",
20+
"name": "cookies",
2021
"stage": 0,
2122
"list": [
2223
"createServerCookie",
23-
"createUserTheme"
24+
"createUserTheme",
25+
"getCookiesString"
2426
],
2527
"category": "Solid Start"
2628
},
2729
"keywords": [
2830
"solid",
2931
"primitives",
30-
"solid-start",
3132
"ssr"
3233
],
3334
"private": false,
@@ -59,11 +60,9 @@
5960
"test:ssr": "pnpm run vitest --mode ssr"
6061
},
6162
"peerDependencies": {
62-
"solid-js": "^1.6.12",
63-
"solid-start": ">=0.2.26"
63+
"solid-js": "^1.8.18"
6464
},
6565
"devDependencies": {
66-
"solid-js": "^1.8.7",
67-
"solid-start": "^0.3.10"
66+
"solid-js": "^1.8.18"
6867
}
6968
}

Diff for: packages/start/src/index.ts renamed to packages/cookies/src/index.ts

+33-24
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,43 @@
11
import { createSignal, createEffect, Signal } from "solid-js";
2-
import { isServer } from "solid-js/web";
3-
import { parseCookie } from "solid-start";
4-
import { useRequest } from "solid-start/server/ServerContext.jsx";
2+
import { getRequestEvent, isServer } from "solid-js/web";
3+
4+
const YEAR = 365 * 24 * 60 * 60;
5+
6+
/*
7+
Original code by Chakra UI
8+
MIT Licensed, Copyright (c) 2019 Segun Adebayo.
9+
10+
Credits to the Chakra UI team:
11+
https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/toast%401.2.0/packages/color-mode/src/storage-manager.ts
12+
*/
13+
14+
export function parseCookie(cookie: string, key: string): string | undefined {
15+
return cookie.match(new RegExp(`(^| )${key}=([^;]+)`))?.[2];
16+
}
17+
18+
/**
19+
* A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server
20+
* @return Returns the cookie string
21+
*/
22+
export function getCookiesString(): string {
23+
if (isServer) {
24+
return getRequestEvent()?.request.headers.get("cookie") ?? ""
25+
}
26+
return document.cookie
27+
}
528

629
export type MaxAgeOptions = {
7-
/**
8-
* The maximum age of the cookie in seconds. Defaults to 1 year.
9-
*/
30+
/** The maximum age of the cookie in seconds. Defaults to 1 year. */
1031
cookieMaxAge?: number;
1132
};
1233

1334
export type ServerCookieOptions<T = string> = MaxAgeOptions & {
14-
/**
15-
* A function to deserialize the cookie value to be used as signal value
16-
*/
35+
/** A function to deserialize the cookie value to be used as signal value */
1736
deserialize?: (str: string | undefined) => T;
18-
/**
19-
* A function to serialize the signal value to be used as cookie value
20-
*/
37+
/** A function to serialize the signal value to be used as cookie value */
2138
serialize?: (value: T) => string;
2239
};
2340

24-
const YEAR = 365 * 24 * 60 * 60;
25-
2641
/**
2742
* A primitive for creating a cookie that can be accessed isomorphically on the client, or the server
2843
*
@@ -51,13 +66,7 @@ export function createServerCookie<T>(
5166
cookieMaxAge = YEAR,
5267
} = options ?? {};
5368

54-
const [cookie, setCookie] = createSignal(
55-
deserialize(
56-
parseCookie(isServer ? (useRequest().request.headers.get("cookie") ?? "") : document.cookie)[
57-
name
58-
],
59-
),
60-
);
69+
const [cookie, setCookie] = createSignal(deserialize(parseCookie(getCookiesString(), name)));
6170

6271
createEffect(p => {
6372
const string = serialize(cookie());
@@ -91,10 +100,10 @@ export function createUserTheme(
91100
name?: string,
92101
options?: UserThemeOptions,
93102
): Signal<Theme | undefined>;
94-
export function createUserTheme(name = "theme", options?: UserThemeOptions): Signal<any> {
95-
const defaultValue = options?.defaultValue;
103+
export function createUserTheme(name = "theme", options: UserThemeOptions = {}): Signal<any> {
104+
const {defaultValue, cookieMaxAge} = options;
96105
return createServerCookie(name, {
97-
...options,
106+
cookieMaxAge,
98107
deserialize: str => (str === "light" || str === "dark" ? str : defaultValue),
99108
serialize: String,
100109
});
File renamed without changes.

Diff for: packages/start/CHANGELOG.md

-19
This file was deleted.

0 commit comments

Comments
 (0)