diff --git a/packages/start/LICENSE b/packages/cookies/LICENSE
similarity index 100%
rename from packages/start/LICENSE
rename to packages/cookies/LICENSE
diff --git a/packages/cookies/README.md b/packages/cookies/README.md
new file mode 100644
index 000000000..fcc6616ba
--- /dev/null
+++ b/packages/cookies/README.md
@@ -0,0 +1,99 @@
+
+
+
+
+# @solid-primitives/cookies
+
+[](https://turborepo.org/)
+[](https://bundlephobia.com/package/@solid-primitives/cookies)
+[](https://www.npmjs.com/package/@solid-primitives/cookies)
+[](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+A set of primitives for handling cookies in solid
+
+- [`createServerCookie`](#createservercookie) - Provides a getter and setter for a reactive cookie, which works isomorphically.
+- [`createUserTheme`](#createusertheme) - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.
+- [`getCookiesString`](#getCookiesString) - A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server
+
+## Installation
+
+```bash
+npm install @solid-primitives/cookies
+# or
+yarn add @solid-primitives/cookies
+# or
+pnpm add @solid-primitives/cookies
+```
+
+## How to use it
+
+## `createServerCookie`
+
+A primitive for creating a cookie that can be accessed isomorphically on the client, or the server.
+
+```ts
+import { createServerCookie } from "@solid-primitives/cookies"
+
+const [cookie, setCookie] = createServerCookie("cookieName");
+
+cookie(); // => string | undefined
+```
+
+### Custom serialization
+
+Custom cookie serializers and deserializers can also be implemented
+
+```ts
+import { createServerCookie } from "@solid-primitives/cookies"
+
+const [serverCookie, setServerCookie] = createServerCookie("coolCookie", {
+ deserialize: str => (str ? str.split(" ") : []), // Deserializes cookie into a string[]
+ serialize: val => (val ? val.join(" ") : ""), // serializes the value back into a string
+});
+
+serverCookie(); // => string[]
+```
+
+## `createUserTheme`
+
+Composes `createServerCookie` to provide a type safe way to store a theme and access it on the server or client.
+
+```ts
+import { createUserTheme } from "@solid-primitives/cookies"
+
+const [theme, setTheme] = createUserTheme("cookieName");
+
+theme(); // => "light" | "dark" | undefined
+
+// with default value
+const [theme, setTheme] = createUserTheme("cookieName", {
+ defaultValue: "light",
+});
+
+theme(); // => "light" | "dark"
+```
+
+## `getCookiesString`
+
+A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server.
+Uses `getRequestEvent` on the server and `document.cookie` on the client.
+
+```ts
+import { getCookiesString, parseCookie } from "@solid-primitives/cookies"
+
+const string = getCookiesString()
+const cookie = parseCookie(string, "cookie_name")
+```
+
+
+## Examples
+
+PRs welcome :)
+
+## Demo
+
+You can view a demo of this primitive here:
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)
diff --git a/packages/start/dev/index.tsx b/packages/cookies/dev/index.tsx
similarity index 68%
rename from packages/start/dev/index.tsx
rename to packages/cookies/dev/index.tsx
index 340378c0f..a989a0e9c 100644
--- a/packages/start/dev/index.tsx
+++ b/packages/cookies/dev/index.tsx
@@ -1,8 +1,9 @@
-import { Component, createSignal } from "solid-js";
+import { Component } from "solid-js";
+import { createUserTheme } from "../src/index.js";
const App: Component = () => {
- const [count, setCount] = createSignal(0);
- const increment = () => setCount(count() + 1);
+ const [theme, setTheme] = createUserTheme();
+ const increment = () => setTheme(theme() === "light" ? "dark" : "light");
return (
@@ -10,7 +11,7 @@ const App: Component = () => {
Counter component
it's very important...
diff --git a/packages/start/package.json b/packages/cookies/package.json
similarity index 70%
rename from packages/start/package.json
rename to packages/cookies/package.json
index d5f58a782..c991f437f 100644
--- a/packages/start/package.json
+++ b/packages/cookies/package.json
@@ -1,13 +1,14 @@
{
- "name": "@solid-primitives/start",
- "version": "0.0.4",
- "description": "A set of primitives for Solid Start",
- "author": "Thomas",
+ "name": "@solid-primitives/cookies",
+ "version": "0.0.1",
+ "description": "A set of primitives for handling cookies in solid",
+ "author": "Thomas Beer (https://github.com/Tommypop2)",
"contributors": [
- "Damian Tarnawski "
+ "Damian Tarnawski ",
+ "Seth Murphy (https://github.com/eagerestwolf)"
],
"license": "MIT",
- "homepage": "https://primitives.solidjs.community/package/start",
+ "homepage": "https://primitives.solidjs.community/package/cookies",
"repository": {
"type": "git",
"url": "git+https://github.com/solidjs-community/solid-primitives.git"
@@ -16,18 +17,18 @@
"url": "https://github.com/solidjs-community/solid-primitives/issues"
},
"primitive": {
- "name": "start",
+ "name": "cookies",
"stage": 0,
"list": [
"createServerCookie",
- "createUserTheme"
+ "createUserTheme",
+ "getCookiesString"
],
"category": "Solid Start"
},
"keywords": [
"solid",
"primitives",
- "solid-start",
"ssr"
],
"private": false,
@@ -59,11 +60,9 @@
"test:ssr": "pnpm run vitest --mode ssr"
},
"peerDependencies": {
- "solid-js": "^1.6.12",
- "solid-start": ">=0.2.26"
+ "solid-js": "^1.8.18"
},
"devDependencies": {
- "solid-js": "^1.8.7",
- "solid-start": "^0.3.10"
+ "solid-js": "^1.8.18"
}
}
diff --git a/packages/start/src/index.ts b/packages/cookies/src/index.ts
similarity index 64%
rename from packages/start/src/index.ts
rename to packages/cookies/src/index.ts
index 529df7a99..8eb3fd158 100644
--- a/packages/start/src/index.ts
+++ b/packages/cookies/src/index.ts
@@ -1,28 +1,43 @@
import { createSignal, createEffect, Signal } from "solid-js";
-import { isServer } from "solid-js/web";
-import { parseCookie } from "solid-start";
-import { useRequest } from "solid-start/server/ServerContext.jsx";
+import { getRequestEvent, isServer } from "solid-js/web";
+
+const YEAR = 365 * 24 * 60 * 60;
+
+/*
+ Original code by Chakra UI
+ MIT Licensed, Copyright (c) 2019 Segun Adebayo.
+
+ Credits to the Chakra UI team:
+ https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/toast%401.2.0/packages/color-mode/src/storage-manager.ts
+*/
+
+export function parseCookie(cookie: string, key: string): string | undefined {
+ return cookie.match(new RegExp(`(^| )${key}=([^;]+)`))?.[2];
+}
+
+/**
+ * A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server
+ * @return Returns the cookie string
+ */
+export function getCookiesString(): string {
+ if (isServer) {
+ return getRequestEvent()?.request.headers.get("cookie") ?? ""
+ }
+ return document.cookie
+}
export type MaxAgeOptions = {
- /**
- * The maximum age of the cookie in seconds. Defaults to 1 year.
- */
+ /** The maximum age of the cookie in seconds. Defaults to 1 year. */
cookieMaxAge?: number;
};
export type ServerCookieOptions = MaxAgeOptions & {
- /**
- * A function to deserialize the cookie value to be used as signal value
- */
+ /** A function to deserialize the cookie value to be used as signal value */
deserialize?: (str: string | undefined) => T;
- /**
- * A function to serialize the signal value to be used as cookie value
- */
+ /** A function to serialize the signal value to be used as cookie value */
serialize?: (value: T) => string;
};
-const YEAR = 365 * 24 * 60 * 60;
-
/**
* A primitive for creating a cookie that can be accessed isomorphically on the client, or the server
*
@@ -51,13 +66,7 @@ export function createServerCookie(
cookieMaxAge = YEAR,
} = options ?? {};
- const [cookie, setCookie] = createSignal(
- deserialize(
- parseCookie(isServer ? (useRequest().request.headers.get("cookie") ?? "") : document.cookie)[
- name
- ],
- ),
- );
+ const [cookie, setCookie] = createSignal(deserialize(parseCookie(getCookiesString(), name)));
createEffect(p => {
const string = serialize(cookie());
@@ -91,10 +100,10 @@ export function createUserTheme(
name?: string,
options?: UserThemeOptions,
): Signal;
-export function createUserTheme(name = "theme", options?: UserThemeOptions): Signal {
- const defaultValue = options?.defaultValue;
+export function createUserTheme(name = "theme", options: UserThemeOptions = {}): Signal {
+ const {defaultValue, cookieMaxAge} = options;
return createServerCookie(name, {
- ...options,
+ cookieMaxAge,
deserialize: str => (str === "light" || str === "dark" ? str : defaultValue),
serialize: String,
});
diff --git a/packages/start/tsconfig.json b/packages/cookies/tsconfig.json
similarity index 100%
rename from packages/start/tsconfig.json
rename to packages/cookies/tsconfig.json
diff --git a/packages/start/CHANGELOG.md b/packages/start/CHANGELOG.md
deleted file mode 100644
index 6e4aeb109..000000000
--- a/packages/start/CHANGELOG.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# @solid-primitives/start
-
-## 0.0.4
-
-### Patch Changes
-
-- 74db287: Correct the "homepage" field in package.json
-
-## 0.0.3
-
-### Patch Changes
-
-- d23dd74: Add type exports for cjs
-
-## 0.0.2
-
-### Patch Changes
-
-- a5f01c30: Loosen solid-start peer dependency
diff --git a/packages/start/README.md b/packages/start/README.md
deleted file mode 100644
index c08e95051..000000000
--- a/packages/start/README.md
+++ /dev/null
@@ -1,184 +0,0 @@
-
-
-
-
-# @solid-primitives/start
-
-[](https://turborepo.org/)
-[](https://bundlephobia.com/package/@solid-primitives/start)
-[](https://www.npmjs.com/package/@solid-primitives/start)
-[](https://github.com/solidjs-community/solid-primitives#contribution-process)
-
-A set of primitives for Solid Start
-
-- [`createServerCookie`](#createservercookie) - Provides a getter and setter for a reactive cookie, which works isomorphically.
-- [`createUserTheme`](#createusertheme) - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.
-
-## Installation
-
-```bash
-npm install @solid-primitives/start
-# or
-yarn add @solid-primitives/start
-# or
-pnpm add @solid-primitives/start
-```
-
-## How to use it
-
-## `createServerCookie`
-
-A primitive for creating a cookie that can be accessed isomorphically on the client, or the server.
-
-```ts
-const [cookie, setCookie] = createServerCookie("cookieName");
-
-cookie(); // => string | undefined
-```
-
-### Custom serialization
-
-Custom cookie serializers and deserializers can also be implemented
-
-```ts
-const [serverCookie, setServerCookie] = createServerCookie("coolCookie", {
- deserialize: str => (str ? str.split(" ") : []), // Deserializes cookie into a string[]
- serialize: val => (val ? val.join(" ") : ""), // serializes the value back into a string
-});
-
-serverCookie(); // => string[]
-```
-
-## `createUserTheme`
-
-Composes `createServerCookie` to provide a type safe way to store a theme and access it on the server or client.
-
-```ts
-const [theme, setTheme] = createUserTheme("cookieName");
-
-theme(); // => "light" | "dark" | undefined
-
-// with default value
-const [theme, setTheme] = createUserTheme("cookieName", {
- defaultValue: "light",
-});
-
-theme(); // => "light" | "dark"
-```
-
-## Examples
-
-### `root.tsx`
-
-This is the main entry file for SolidStart demonstrating usage of the `createUserTheme` function.
-
-- Initializes the theme with the `createUserTheme` function.
-- Toggles between the "dark" and "light" themes using a button.
-- Sets the `data-theme` attribute adding compatibility between `createUserTheme` and libraries like [DaisyUI](https://daisyui.com/).
-- Includes a clean implementation of theming through a `Body` class.
-- Provides additional examples on using variant classes to style components.
-
-```tsx
-import { Suspense } from "solid-js";
-import {
- A,
- Body,
- ErrorBoundary,
- FileRoutes,
- Head,
- Html,
- Meta,
- Routes,
- Scripts,
- Title,
-} from "solid-start";
-import Counter from "./components/Counter";
-import "./root.css";
-import { createUserTheme } from "~/primitives/start";
-
-export default function Root() {
- const [theme, setTheme] = createUserTheme("dark-light-theme", { defaultValue: "dark" });
- const toggleTheme = () => setTheme(currentTheme => (currentTheme === "dark" ? "light" : "dark"));
-
- return (
- // Set data-theme when using libraries like Daisyui:
-
-
- SolidStart - Bare
-
-
-
- // Apply theme as a class to the Body element:
-
-
+