🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

svelte-body

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-body - npm Package Compare versions

Comparing version

to
2.0.0

dist/types.d.ts

25

dist/actions.d.ts

@@ -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