@jill64/svelte-html
Advanced tools
@jill64/svelte-html - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
| { | ||
| "name": "@jill64/svelte-html", | ||
| "version": "0.2.0", | ||
| "description": "🏷️ Reactive attributes assignment for root html element", | ||
| "version": "0.2.1", | ||
| "description": "🏷️ Declarative attribute binding for the root html element", | ||
| "main": "dist/index.js", | ||
@@ -13,4 +13,4 @@ "type": "module", | ||
| "dist", | ||
| "!**/*.test.*", | ||
| "!**/*.spec.*" | ||
| "!*.test.*", | ||
| "!*.spec.*" | ||
| ], | ||
@@ -32,7 +32,5 @@ "exports": { | ||
| "keywords": [ | ||
| "svelte", | ||
| "html", | ||
| "tag", | ||
| "attribute", | ||
| "reactive" | ||
| "attributes", | ||
| "declarative", | ||
| "svelte" | ||
| ], | ||
@@ -52,8 +50,10 @@ "scripts": { | ||
| "peerDependencies": { | ||
| "svelte": "^4.0.0" | ||
| "svelte": "^4.0.0", | ||
| "@sveltejs/kit": "^1.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@jill64/sentry-sveltekit-cloudflare": "1.0.0", | ||
| "@playwright/test": "1.39.0", | ||
| "@sveltejs/adapter-static": "2.0.3", | ||
| "@sveltejs/kit": "1.27.2", | ||
| "@sveltejs/adapter-cloudflare": "2.3.3", | ||
| "@sveltejs/kit": "1.27.3", | ||
| "@typescript-eslint/eslint-plugin": "6.9.1", | ||
@@ -63,3 +63,3 @@ "@typescript-eslint/parser": "6.9.1", | ||
| "eslint-plugin-deprecation": "2.0.0", | ||
| "eslint-plugin-svelte": "2.34.0", | ||
| "eslint-plugin-svelte": "2.34.1", | ||
| "prettier-plugin-svelte": "3.0.3", | ||
@@ -66,0 +66,0 @@ "svelte": "4.2.2", |
@@ -5,6 +5,52 @@ <!----- BEGIN GHOST DOCS HEADER -----> | ||
| [](https://npmjs.com/package/@jill64/svelte-html) [](https://npmjs.com/package/@jill64/svelte-html) [](https://npmjs.com/package/@jill64/svelte-html) [](https://npmjs.com/package/@jill64/svelte-html) [](https://github.com/jill64/svelte-html/actions/workflows/ci.yml) [](https://github.com/jill64/svelte-html/actions/workflows/deploy.yml) | ||
| [](https://npmjs.com/package/@jill64/svelte-html) [](https://npmjs.com/package/@jill64/svelte-html) [](https://npmjs.com/package/@jill64/svelte-html) [](https://npmjs.com/package/@jill64/svelte-html) [](https://github.com/jill64/svelte-html/actions/workflows/ci.yml) [](https://codecov.io/gh/jill64/svelte-html) | ||
| 🏷️ Reactive attributes assignment for root html element | ||
| 🏷️ Declarative attribute binding for the root html element | ||
| ## Install | ||
| ```sh | ||
| npm i @jill64/svelte-html | ||
| ``` | ||
| <!----- END GHOST DOCS HEADER -----> | ||
| ## Usage | ||
| By passing a key-value set to the `<SvelteHTML />` component, attributes are bind to the root html element. | ||
| ```svelte | ||
| <script> | ||
| import { SvelteHTML } from '@jill64/svelte-html' | ||
| </script> | ||
| <SvelteHTML lang="en" prefix="example" /> | ||
| ``` | ||
| ↓ | ||
| ```html | ||
| <html lang="en" prefix="example"> | ||
| <!-- ... --> | ||
| </html> | ||
| ``` | ||
| ## SSR | ||
| Attribute binding with `<SvelteHTML>` is only applied on the client. | ||
| To assign arbitrary attributes during SSR, use the `transform` function in the `handle` hook. | ||
| ```js | ||
| // hooks.server.js | ||
| import { transform } from '@jill64/svelte-html' | ||
| export const handle = async ({ event, resolve }) => { | ||
| // ... | ||
| return resolve(event, { | ||
| transformPageChunk: transform({ | ||
| lang: 'en', | ||
| prefix: 'example' | ||
| }) | ||
| }) | ||
| } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by13.64%
6924
- Number of lines in readme file
- increased by460%
56
Worsened metrics
- Dependency count
- increased by100%
2
- Dev dependency count
- increased by7.69%
14
No dependency changes