svelte-body - npm Package Compare versions

Comparing version 1.4.0 to 2.0.0

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

dist/actions.js

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

dist/Body.svelte.d.ts

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

dist/index.d.ts

 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;
-    }
-}

dist/index.js

 export { default as Body } from './Body.svelte';
+export {} from './types';
 export { classList, style } from './actions';

package.json

 {
   "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 <[e-mail]> (https://ghostdev.xyz)",
+  "author": "Willow GHOST <[e-mail]> (https://ghostdev.xyz)",
   "contributors": [
-    "GHOST <[e-mail]> (https://ghostdev.xyz)",
+    "Willow GHOST <[e-mail]> (https://ghostdev.xyz)",
     "Puru Vijay <[e-mail]> (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"
   }
 }

README.md

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

Fixed alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

11052

8.56%

Number of package files

11

22.22%

Lines of code

184

1.1%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

10

25%

Number of lines in readme file

105

-5.41%

Dependency changes

• + Added

  @sveltejs/acorn-typescript@1.0.5
  (transitive)

• + Added

  clsx@2.1.1
  (transitive)

• + Added

  esm-env@1.2.2
  (transitive)

• + Added

  esrap@2.1.0
  (transitive)

• + Added

  svelte@5.36.12
  (transitive)

• + Added

  zimmerframe@1.1.2
  (transitive)

• - Removed

  clsx@1.2.1
  (transitive)

• - Removed

  code-red@1.0.4
  (transitive)

• - Removed

  css-tree@2.3.1
  (transitive)

• - Removed

  estree-walker@3.0.3
  (transitive)

• - Removed

  mdn-data@2.0.30
  (transitive)

• - Removed

  periscopic@3.1.0
  (transitive)

• - Removed

  source-map-js@1.2.1
  (transitive)

• - Removed

  svelte@4.2.20
  (transitive)

• Updated

  clsx@^2.1.1

• Updated

  csstype@^3.1.3