You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
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
1.3.5

53

dist/index.js

@@ -297,4 +297,45 @@ (function (global, factory) {

function toVal(mix) {
var k, y, str='';
if (typeof mix === 'string' || typeof mix === 'number') {
str += mix;
} else if (typeof mix === 'object') {
if (Array.isArray(mix)) {
for (k=0; k < mix.length; k++) {
if (mix[k]) {
if (y = toVal(mix[k])) {
str && (str += ' ');
str += y;
}
}
}
} else {
for (k in mix) {
if (mix[k]) {
str && (str += ' ');
str += k;
}
}
}
}
return str;
}
function clsx () {
var i=0, tmp, x, str='';
while (i < arguments.length) {
if (tmp = arguments[i++]) {
if (x = toVal(tmp)) {
str && (str += ' ');
str += x;
}
}
}
return str;
}
const classList = (node, classString = '') => {
const classes = writable(classString.split(' ').filter(Boolean));
const classes = writable(clsx(classString).split(' ').filter(Boolean));

@@ -330,4 +371,10 @@ // When the classes store changes add the new classes

if (typeof styleData == 'object')
for (const [property, value] of Object.entries(styleData))
pseudoElement.style.setProperty(property, value);
for (const [property, value] of Object.entries(styleData)) {
// Do a setProperty in case it's a CSS variable
if (property.startsWith('--')) {
pseudoElement.style.setProperty(property, value);
} else {
pseudoElement.style[property] = value;
}
}

@@ -334,0 +381,0 @@ // Combine body's existing styles with computed ones

7

package.json
{
"name": "svelte-body",
"version": "1.2.4",
"version": "1.3.5",
"description": "Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.",

@@ -28,3 +28,3 @@ "main": "./dist/index.js",

"dev:build": "rollup -c -w",
"dev:docs": "cd docs && npm run dev"
"dev:dev": "cd dev && npm run dev"
},

@@ -34,2 +34,3 @@ "devDependencies": {

"@rollup/plugin-node-resolve": "^13.0.0",
"clsx": "^1.1.1",
"npm-run-all": "^4.1.5",

@@ -44,2 +45,2 @@ "prettier-plugin-svelte": "^2.4.0",

}
}
}

@@ -51,2 +51,17 @@ # Svelte Body

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).
```svelte
<script>
import { classList } from 'svelte-body';
let isBlue = true;
</script>
<Body class="red green blue" />
<Body class={{ red: true, blue: isBlue }} />
<Body class={['red', isBlue && 'blue']} />
<Body class={[ 'red', { blue: isBlue } ]} />
```
# Actions

@@ -63,3 +78,6 @@

<svelte:body use:classList={"red green blue"}>
<svelte:body use:classList={"red green blue"} />
<svelte:body use:classList={{ red: true, blue: isBlue }} />
<svelte:body use:classList={['red', isBlue && 'blue']} />
<svelte:body use:classList={[ 'red', { blue: isBlue } ]} />
```

@@ -74,3 +92,3 @@

<svelte:body use:style={"background-color: blue;"}>
<svelte:body use:style={"background-color: blue;"} />
```

@@ -77,0 +95,0 @@

import { writable, get } from 'svelte/store';
import clsx from 'clsx';
export const classList = (node, classString = '') => {
const classes = writable(classString.split(' ').filter(Boolean));
const classes = writable(clsx(classString).split(' ').filter(Boolean));

@@ -35,4 +36,10 @@ // When the classes store changes add the new classes

if (typeof styleData == 'object')
for (const [property, value] of Object.entries(styleData))
pseudoElement.style.setProperty(property, value);
for (const [property, value] of Object.entries(styleData)) {
// Do a setProperty in case it's a CSS variable
if (property.startsWith('--')) {
pseudoElement.style.setProperty(property, value);
} else {
pseudoElement.style[property] = value;
}
}

@@ -39,0 +46,0 @@ // Combine body's existing styles with computed ones

/// <reference types="svelte" />
import { Properties } from 'csstype';
// Copied from `clsx` to remove it from dependencies
export type ClassValue =
| ClassArray
| ClassDictionary
| string
| number
| null
| boolean
| undefined;
export interface ClassDictionary {
[id: string]: any;
}
export interface ClassArray extends Array<ClassValue> {}
declare module 'csstype' {

@@ -14,2 +30,4 @@ interface Properties {

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

@@ -20,5 +38,10 @@ *

* import { classList } from 'svelte-body';
*
* let isBlue = true;
* </script>
*
* <svelte:body use:classList={"red green blue"}>
* <svelte:body use:classList={{ red: true, blue: isBlue }}>
* <svelte:body use:classList={['red', isBlue && 'blue']}>
* <svelte:body use:classList={[ 'red', { blue: isBlue } ]}>
*```

@@ -31,3 +54,3 @@ *

node: HTMLElement,
classString: string,
classString: ClassValue,
): { update: () => void; destroy: () => void };

@@ -46,11 +69,2 @@

* <svelte:body use:style={"background-color: blue;"}>
*```
*
* @example
*
*```svelte
* <script>
* import { style } from 'svelte-body';
* </script>
*
* <svelte:body use:style={{ backgroundColor: 'blue' }}>

@@ -57,0 +71,0 @@ *```

/// <reference types="svelte" />
import { SvelteComponentTyped } from 'svelte';
import { Properties } from 'csstype';
import { ClassValue } from './actions.d';
export interface BodyProps {
/**
* A string of styles (style="" on a HTML element)
* Svelte action to add style on `body`. style can either be a string or an object.
*
* @example
*
*```svelte
* <script>
* import { style } from 'svelte-body';
* </script>
*
* <svelte:body use:style={"background-color: blue;"}>
* <svelte:body use:style={{ backgroundColor: 'blue' }}>
*```
*/

@@ -12,7 +24,24 @@ style?: string | Properties;

/**
* A string of class names (class="" on a HTML element)
* 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
* <script>
* import { classList } from 'svelte-body';
*
* let isBlue = true;
* </script>
*
* <svelte:body use:classList={"red green blue"}>
* <svelte:body use:classList={{ red: true, blue: isBlue }}>
* <svelte:body use:classList={['red', isBlue && 'blue']}>
* <svelte:body use:classList={[ 'red', { blue: isBlue } ]}>
*```
*/
class?: string;
class?: ClassValue;
}
export default class Body extends SvelteComponentTyped<BodyProps, {}, {}> {}
export { default as Body } from './Body.svelte';
export * from './actions.d';
export { classList, style } from './actions.d';

Sorry, the diff of this file is not supported yet