svelte-body
Advanced tools
Comparing version
@@ -1,16 +0,18 @@ | ||
import type { Properties as CSSProperties } from 'csstype'; | ||
import { type ClassValue } from 'clsx'; | ||
import type { Action } from 'svelte/action'; | ||
import type { StyleProperties } from './types'; | ||
/** | ||
* Svelte action to change class on `body` | ||
* Svelte action to change the class property on an element. | ||
* | ||
* You can pass a string or object, or an array of combination of these. Literally anything that [clsx](https://github.com/lukeed/clsx) accepts. | ||
* We use [clsx](https://github.com/lukeed/clsx) under the hood, | ||
* which allows you to pass different shapes and only have truthy names | ||
* applied as classes. Read me about it on their docs. | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* ```svelte | ||
* <script> | ||
* import { classList } from 'svelte-body'; | ||
* | ||
* let isBlue = true; | ||
* let isBlue = $state(true); | ||
* </script> | ||
@@ -22,11 +24,12 @@ * | ||
* <svelte:body use:classList={[ 'red', { blue: isBlue } ]} /> | ||
*``` | ||
* ``` | ||
*/ | ||
export declare const classList: Action<HTMLElement, string | ClassValue>; | ||
export declare const classList: Action<HTMLElement, ClassValue>; | ||
/** | ||
* Svelte action to add style on `body`. style can either be a string or an object. | ||
* Svelte action that changes the `style` property on an element. | ||
* Accepts both a string and style properties object. | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* ```svelte | ||
* <script> | ||
@@ -38,4 +41,4 @@ * import { style } from 'svelte-body'; | ||
* <svelte:body use:style={{ backgroundColor: 'blue' }} /> | ||
*``` | ||
* ``` | ||
*/ | ||
export declare const style: Action<HTMLElement, CSSProperties | string>; | ||
export declare const style: Action<HTMLElement, StyleProperties | string>; |
@@ -1,15 +0,19 @@ | ||
import { writable, get } from 'svelte/store'; | ||
import clsx, {} from 'clsx'; | ||
function clsxList(input) { | ||
return clsx(input).split(' ').filter(Boolean); | ||
} | ||
/** | ||
* Svelte action to change class on `body` | ||
* Svelte action to change the class property on an element. | ||
* | ||
* You can pass a string or object, or an array of combination of these. Literally anything that [clsx](https://github.com/lukeed/clsx) accepts. | ||
* We use [clsx](https://github.com/lukeed/clsx) under the hood, | ||
* which allows you to pass different shapes and only have truthy names | ||
* applied as classes. Read me about it on their docs. | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* ```svelte | ||
* <script> | ||
* import { classList } from 'svelte-body'; | ||
* | ||
* let isBlue = true; | ||
* let isBlue = $state(true); | ||
* </script> | ||
@@ -21,21 +25,15 @@ * | ||
* <svelte:body use:classList={[ 'red', { blue: isBlue } ]} /> | ||
*``` | ||
* ``` | ||
*/ | ||
export const classList = (node, classString = '') => { | ||
const classes = writable(clsx(classString).split(' ').filter(Boolean)); | ||
// When the classes store changes add the new classes | ||
const unsubscribe = classes.subscribe((list) => { | ||
if (Array.isArray(list) && list?.length) | ||
node.classList.add(...list); | ||
}); | ||
// Remove all classes that we added | ||
const unset = () => node.classList.remove(...get(classes)); | ||
export const classList = (node, input) => { | ||
let classes = clsxList(input); | ||
node.classList.add(...classes); | ||
return { | ||
update: (classString = '') => { | ||
unset(); | ||
classes.set(clsx(classString).split(' ').filter(Boolean)); | ||
update(input) { | ||
node.classList.remove(...classes); | ||
classes = clsxList(input); | ||
node.classList.add(...classes); | ||
}, | ||
destroy: () => { | ||
unset(); | ||
unsubscribe(); | ||
destroy() { | ||
node.classList.remove(...classes); | ||
}, | ||
@@ -45,7 +43,8 @@ }; | ||
/** | ||
* Svelte action to add style on `body`. style can either be a string or an object. | ||
* Svelte action that changes the `style` property on an element. | ||
* Accepts both a string and style properties object. | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* ```svelte | ||
* <script> | ||
@@ -57,3 +56,3 @@ * import { style } from 'svelte-body'; | ||
* <svelte:body use:style={{ backgroundColor: 'blue' }} /> | ||
*``` | ||
* ``` | ||
*/ | ||
@@ -64,5 +63,6 @@ export const style = (node, styleData = {}) => { | ||
const update = (styleData = {}) => { | ||
if (typeof styleData == 'string') | ||
if (typeof styleData == 'string') { | ||
pseudoElement.style.cssText = styleData; | ||
if (typeof styleData == 'object') | ||
} | ||
if (typeof styleData == 'object') { | ||
for (const [property, value] of Object.entries(styleData)) { | ||
@@ -77,2 +77,3 @@ // Do a setProperty in case it's a CSS variable | ||
} | ||
} | ||
// Combine body's existing styles with computed ones | ||
@@ -79,0 +80,0 @@ node.style.cssText = ` |
@@ -1,40 +0,33 @@ | ||
import { SvelteComponentTyped } from "svelte"; | ||
import type { StyleProperties } from './types'; | ||
import type { ClassValue } from 'clsx'; | ||
import type { Properties as CSSProperties } from 'csstype'; | ||
declare const __propDef: { | ||
props: { | ||
/** | ||
* Svelte action to change class on `body` | ||
* | ||
* You can pass a string or object, or an array of combination of these. Literally anything that [clsx](https://github.com/lukeed/clsx) accepts. | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* <Body class="red green blue" /> | ||
* <Body class={{ red: true, blue: false }} /> | ||
* <Body class={['red', false && 'blue']} /> | ||
* <Body class={[ 'red', { blue: true } ]} /> | ||
* ``` | ||
*/ class?: string | ClassValue; | ||
/** | ||
* Svelte action to add style on `body`. style can either be a string or an object. | ||
* | ||
* @example | ||
*```svelte | ||
* <Body style={"background-color: blue;"} /> | ||
* <Body style={{ backgroundColor: 'blue' }} /> | ||
* ``` | ||
*/ style?: CSSProperties | string; | ||
}; | ||
events: { | ||
[evt: string]: CustomEvent<any>; | ||
}; | ||
slots: {}; | ||
}; | ||
export type BodyProps = typeof __propDef.props; | ||
export type BodyEvents = typeof __propDef.events; | ||
export type BodySlots = typeof __propDef.slots; | ||
export default class Body extends SvelteComponentTyped<BodyProps, BodyEvents, BodySlots> { | ||
} | ||
export {}; | ||
declare const Body: import("svelte").Component<{ | ||
/** | ||
* Applies the given classes on the body. | ||
* | ||
* We use [clsx](https://github.com/lukeed/clsx) under the hood, | ||
* which allows you to pass different shapes and only have truthy names | ||
* applied as classes. Read me about it on their docs. | ||
* | ||
* @example | ||
* | ||
* ```svelte | ||
* <Body class="red green blue" /> | ||
* <Body class={{ red: true, blue: isBlue }} /> | ||
* <Body class={['red', isBlue && 'blue']} /> | ||
* <Body class={[ 'red', { blue: isBlue } ]} /> | ||
* ``` | ||
*/ | ||
class?: ClassValue; | ||
/** | ||
* Svelte action that changes the `style` property on the body. | ||
* Accepts both a string and style properties object. | ||
* | ||
* @example | ||
*```svelte | ||
* <Body style={"background-color: blue;"} /> | ||
* <Body style={{ backgroundColor: 'blue' }} /> | ||
* ``` | ||
*/ | ||
style?: string | StyleProperties; | ||
}, {}, "">; | ||
export default Body; |
export { default as Body } from './Body.svelte'; | ||
export { type StyleProperties } from './types'; | ||
export { classList, style } from './actions'; | ||
declare module 'csstype' { | ||
interface Properties { | ||
[key: `--${string}`]: any; | ||
} | ||
} |
export { default as Body } from './Body.svelte'; | ||
export {} from './types'; | ||
export { classList, style } from './actions'; |
{ | ||
"name": "svelte-body", | ||
"version": "1.4.0", | ||
"version": "2.0.0", | ||
"description": "Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.", | ||
@@ -13,23 +13,25 @@ "repository": { | ||
}, | ||
"author": "GHOST <ghostdevbusiness@gmail.com> (https://ghostdev.xyz)", | ||
"author": "Willow GHOST <ghostdevbusiness@gmail.com> (https://ghostdev.xyz)", | ||
"contributors": [ | ||
"GHOST <ghostdevbusiness@gmail.com> (https://ghostdev.xyz)", | ||
"Willow GHOST <ghostdevbusiness@gmail.com> (https://ghostdev.xyz)", | ||
"Puru Vijay <devpuruvj@gmail.com> (https://puruvj.dev/)" | ||
], | ||
"devDependencies": { | ||
"@sveltejs/adapter-auto": "^2.1.0", | ||
"@sveltejs/kit": "^1.20.5", | ||
"@sveltejs/package": "^2.1.0", | ||
"svelte": "^4.0.0", | ||
"svelte-preprocess": "^5.0.4", | ||
"svelte2tsx": "^0.6.16", | ||
"typescript": "^5.1.3", | ||
"vite": "^4.3.9" | ||
"@sveltejs/adapter-auto": "^3.2.5", | ||
"@sveltejs/kit": "^2.7.2", | ||
"@sveltejs/package": "^2.3.5", | ||
"@sveltejs/vite-plugin-svelte": "^4.0.0", | ||
"prettier": "^3.3.3", | ||
"prettier-plugin-svelte": "^3.2.7", | ||
"publint": "^0.2.11", | ||
"svelte": "^5.0.5", | ||
"typescript": "^5.6.3", | ||
"vite": "^5.4.9" | ||
}, | ||
"peerDependencies": { | ||
"svelte": "^3.47.0 || ^4.0.0" | ||
"svelte": "^5.0.0" | ||
}, | ||
"dependencies": { | ||
"clsx": "^1.2.1", | ||
"csstype": "^3.1.2" | ||
"clsx": "^2.1.1", | ||
"csstype": "^3.1.3" | ||
}, | ||
@@ -39,2 +41,3 @@ "type": "module", | ||
"svelte": "./dist/index.js", | ||
"sideEffects": false, | ||
"exports": { | ||
@@ -54,4 +57,4 @@ "./package.json": "./package.json", | ||
"build": "vite build", | ||
"package": "svelte-kit sync && svelte-package" | ||
"package": "svelte-kit sync && svelte-package && publint" | ||
} | ||
} |
# Svelte Body | ||
Works with Svelte 3 & 4! | ||
Currently in Svelte Kit and Routify, applying styles per page to the body doesn't work. You can't use `:global(body)` since the style tags aren't removed and reapplied on route change. `svelte-body` handles that for you. It's available as an action or component. | ||
Apply styles to the body in routes! Designed to work with Svelte Kit and Routify. | ||
### [Example REPL](https://svelte.dev/repl/7d04a8d3131c46b5b188744dc86c0fb5?version=3.42.4) | ||
# Why? | ||
Currently in Svelte Kit and Routify, applying styles per page to the body doesn't work. You can't use `:global(body)` since the style tags aren't removed and reapplied on route change. `svelte-body` handles that for you! | ||
# Install | ||
@@ -17,10 +9,6 @@ | ||
npm i svelte-body -D | ||
``` | ||
# pnpm | ||
pnpm add svelte-body -D | ||
This library is made for Svelte 5, if you'd like to use Svelte 3/4 [checkout v1](https://www.npmjs.com/package/svelte-body/v/1.4.0). | ||
# yarn | ||
yarn add svelte-body -D | ||
``` | ||
# Usage | ||
@@ -30,5 +18,5 @@ | ||
```html | ||
```svelte | ||
<script> | ||
import { Body } from 'svelte-body'; | ||
import { Body } from 'svelte-body'; | ||
</script> | ||
@@ -41,11 +29,11 @@ | ||
```html | ||
```svelte | ||
<script> | ||
import { Body } from 'svelte-body'; | ||
import { Body } from 'svelte-body'; | ||
const style = { | ||
backgroundColor: 'violet', | ||
color: 'white', | ||
'--cool-css-prop': '😎' | ||
}; | ||
const style = { | ||
backgroundColor: 'violet', | ||
color: 'white', | ||
'--cool-css-prop': '😎', | ||
}; | ||
</script> | ||
@@ -56,9 +44,9 @@ | ||
For Class, you can pass a combination of string, object, and array of both of these. Literally anything that can be passed to [class](https://github.com/lukeed/clsx). | ||
We use [clsx](https://github.com/lukeed/clsx) under the hood, which allows you to pass different shapes and only have truthy names applied as classes. Read me about it on their docs. | ||
```html | ||
```svelte | ||
<script> | ||
import { classList } from 'svelte-body'; | ||
import { classList } from 'svelte-body'; | ||
let isBlue = true; | ||
let isBlue = $state(true); | ||
</script> | ||
@@ -69,12 +57,12 @@ | ||
<Body class={['red', isBlue && 'blue']} /> | ||
<Body class={[ 'red', { blue: isBlue } ]} /> | ||
<Body class={['red', { blue: isBlue }]} /> | ||
``` | ||
# Actions | ||
## Actions | ||
There are also [svelte actions](https://svelte.dev/docs#use_action) that can be used on `<svelte:body />`: | ||
We also provide a `classList` and `style` action, which can be used on `<svelte:body />` (or any other element). | ||
- `classList` | ||
```html | ||
```svelte | ||
<script> | ||
@@ -92,8 +80,8 @@ import { classList } from 'svelte-body'; | ||
```html | ||
```svelte | ||
<script> | ||
import { style } from 'svelte-body'; | ||
import { style } from 'svelte-body'; | ||
</script> | ||
<svelte:body use:style={"background-color: blue;"} /> | ||
<svelte:body use:style={'background-color: blue;'} /> | ||
``` | ||
@@ -103,12 +91,18 @@ | ||
```html | ||
```svelte | ||
<script> | ||
import { style } from 'svelte-body'; | ||
import { style } from 'svelte-body'; | ||
</script> | ||
<svelte:body | ||
use:style="{{ backgroundColor: 'blue', '--cool-css-prop': '😎' }}" | ||
/> | ||
use:style={{ backgroundColor: 'blue', '--cool-css-prop': '😎' }} /> | ||
``` | ||
# Migrating from v1 to v2 | ||
- Svelte 5 is now required | ||
- We updated to [clsx v2](https://github.com/lukeed/clsx/releases/tag/v2.0.0) | ||
[Read the full changelog](https://github.com/ghostdevv/svelte-body/releases/tag/v2.0.0). | ||
# Support | ||
@@ -115,0 +109,0 @@ |
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
11052
8.56%11
22.22%184
1.1%0
-100%10
25%105
-5.41%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated
Updated