You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
svelte-body
Advanced tools
svelte-body - npm Package Compare versions
Comparing version 1.2.4 to 1.3.5
@@ -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 |
| { | ||
| "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
No alert changes
Improved metrics
- Total package byte prevSize
37626
13.1%- Lines of code
1037
14.71%- Number of lines in readme file
109
19.78%Worsened metrics
- Dev dependency count
8
14.29%No dependency changes