npm - @stacksjs/sanitizer - Versions diffs - 0.2.5 → 0.2.8 - Mend

@stacksjs/sanitizer 0.2.5 → 0.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -5,356 +5,71 @@
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-# stx
+# @stacksjs/sanitizer
-A modern templating engine with Vue-like Single File Components, Laravel Blade directives, and Bun-powered performance.
+A fast, native Bun-powered HTML sanitizer with DOMPurify-like features. Protection against XSS and malicious content.
-## Features
-- **Vue-like SFC** - `<script>`, `<template>`, `<style>` structure
-- **Auto-imported Components** - Use `<Card />` directly, no imports needed
-- **Two-way Binding** - `x-model` and `x-text` for reactive forms
-- **Blade Directives** - `@if`, `@foreach`, `@layout`, `@section`
-- **Props & Slots** - Pass data and content to components
-- **200K+ Icons** - Built-in Iconify integration
-- **Custom Directives** - Extend with your own directives
-## Quick Start
+## Installation
 ```bash
-bun add bun-plugin-stx
-```
-```toml
-# bunfig.toml
-preload = ["bun-plugin-stx"]
-```
-## Single File Components
-STX components use a Vue-like structure:
-```html
-<!-- components/Greeting.stx -->
-<script server>
-// Server-side only - used for SSR, stripped from output
-const name = props.name || 'World'
-const time = new Date().toLocaleTimeString()
-</script>
-<template>
-  <div class="greeting">
-    <h1>Hello, {{ name }}!</h1>
-    <p>Current time: {{ time }}</p>
-    <slot />
-  </div>
-</template>
-<style>
-.greeting {
-  padding: 2rem;
-  background: #f5f5f5;
-}
-</style>
-```
-### Script Types
-| Type | Behavior |
-|------|----------|
-| `<script server>` | SSR only - extracted for variables, stripped from output |
-| `<script client>` | Client only - preserved for browser, skips server evaluation |
-| `<script>` | Both - runs on server AND preserved for client |
-## Components
-Components in `components/` are auto-imported using PascalCase:
-```html
-<!-- pages/home.stx -->
-<Header />
-<main>
-  <UserCard name="John" role="Admin" />
-  <Card title="Welcome">
-    <p>This goes into the slot!</p>
-  </Card>
-</main>
-<Footer />
-```
-### Props
-Pass data to components via attributes:
-```html
-<!-- String prop -->
-<Card title="Hello" />
-<!-- Expression binding with : -->
-<Card :count="items.length" :active="isActive" />
-<!-- Mustache interpolation -->
-<Card title="{{ userName }}" />
-```
-Access props in components:
-```html
-<script server>
-const title = props.title || 'Default'
-const count = props.count || 0
-</script>
-<template>
-  <h1>{{ title }}</h1>
-  <p>Count: {{ count }}</p>
-</template>
-```
-### Slots
-Use `<slot />` to inject content:
-```html
-<!-- components/Card.stx -->
-<template>
-  <div class="card">
-    <h2>{{ props.title }}</h2>
-    <slot />
-  </div>
-</template>
-```
-```html
-<!-- Usage -->
-<Card title="News">
-  <p>This content appears in the slot!</p>
-</Card>
-```
-### Explicit Imports
-For components outside `components/`, use `@import`:
-```html
-@import('layouts/Sidebar')
-@import('shared/Button', 'shared/Modal')
-<Sidebar />
-<Button label="Click me" />
-```
-## Layouts
-Wrap pages with common structure using `@layout`:
-```html
-<!-- layouts/default.stx -->
-<!DOCTYPE html>
-<html>
-<head>
-  <title>{{ title || 'My App' }}</title>
-</head>
-<body>
-  <Header />
-  <main>
-    @yield('content')
-  </main>
-  <Footer />
-</body>
-</html>
-```
-```html
-<!-- pages/about.stx -->
-@layout('default')
-@section('content')
-  <h1>About Us</h1>
-  <p>Welcome to our site.</p>
-@endsection
-```
-## Two-Way Binding (x-element)
-For reactive forms, use x-element directives:
-```html
-<div x-data="{ message: '', count: 0 }">
-  <!-- Two-way binding -->
-  <input x-model="message" placeholder="Type here..." />
-  <!-- Reactive display -->
-  <p>You typed: <span x-text="message"></span></p>
-  <!-- Event handling -->
-  <button @click="count++">Increment</button>
-  <button @click="count--">Decrement</button>
-  <span x-text="count"></span>
-</div>
+bun add @stacksjs/sanitizer
 ```
-| Directive | Purpose |
-|-----------|---------|
-| `x-data` | Define reactive scope |
-| `x-model` | Two-way binding for inputs |
-| `x-text` | Reactive text content |
-| `@click` | Event handling |
-## Template Directives
-### Conditionals
-```html
-@if (user.isAdmin)
-  <AdminPanel />
-@elseif (user.isEditor)
-  <EditorTools />
-@else
-  <UserView />
-@endif
-```
-### Loops
-```html
-@foreach (items as item)
-  <li>{{ item.name }}</li>
-@endforeach
-@for (let i = 0; i < 5; i++)
-  <li>Item {{ i }}</li>
-@endfor
-```
-### Auth Guards
-```html
-@auth
-  <p>Welcome back, {{ user.name }}!</p>
-@endauth
-@guest
-  <a href="/login">Please log in</a>
-@endguest
-```
-### Output
-```html
-<!-- Escaped (safe) -->
-{{ userInput }}
-<!-- Raw HTML (trusted content only) -->
-{!! trustedHtml !!}
-```
-## Custom Directives
-Register custom directives in your build:
+## Usage
 ```typescript
-import { stxPlugin, type CustomDirective } from 'bun-plugin-stx'
-const uppercase: CustomDirective = {
-  name: 'uppercase',
-  handler: (content, params) => params[0]?.toUpperCase() || content.toUpperCase()
-}
-const wrap: CustomDirective = {
-  name: 'wrap',
-  hasEndTag: true,
-  handler: (content, params) => `<div class="${params[0] || 'wrapper'}">${content}</div>`
-}
+import { sanitize } from '@stacksjs/sanitizer'
-Bun.build({
-  entrypoints: ['./src/index.stx'],
-  plugins: [stxPlugin({
-    customDirectives: [uppercase, wrap]
-  })]
-})
+// Basic sanitization
+const clean = sanitize('<script>alert("xss")</script><p>Hello</p>')
+// => '<p>Hello</p>'
 ```
-```html
-<!-- Usage -->
-<p>@uppercase('hello world')</p>
+### Presets
-@wrap('container')
-  <p>Wrapped content</p>
-@endwrap
-```
+```typescript
+import { sanitize, strict, basic, relaxed, markdown } from '@stacksjs/sanitizer'
-## Icons
+// Strict - minimal tags allowed
+sanitize(html, strict)
-200K+ icons via Iconify:
+// Basic - common formatting tags
+sanitize(html, basic)
-```html
-<HomeIcon size="24" />
-<SearchIcon size="20" color="#333" />
-```
+// Relaxed - most HTML allowed
+sanitize(html, relaxed)
-```bash
-bun stx iconify list
-bun stx iconify generate material-symbols
+// Markdown - optimized for markdown output
+sanitize(html, markdown)
 ```
-## Complete Example
-```html
-<!-- components/TodoApp.stx -->
-<script server>
-const title = props.title || 'My Todos'
-</script>
+### Utilities
-<template>
-  <div class="todo-app" x-data="{ todos: [], newTodo: '' }">
-    <h1>{{ title }}</h1>
+```typescript
+import { isSafe, escape, stripTags } from '@stacksjs/sanitizer'
-    <form @submit.prevent="todos.push({ text: newTodo, done: false }); newTodo = ''">
-      <input x-model="newTodo" placeholder="Add todo..." />
-      <button type="submit">Add</button>
-    </form>
+// Check if HTML is safe
+isSafe('<p>Hello</p>') // true
-    @if (initialTodos)
-      <ul>
-        @foreach (initialTodos as todo)
-          <li>{{ todo.text }}</li>
-        @endforeach
-      </ul>
-    @endif
-  </div>
-</template>
+// Escape HTML entities
+escape('<script>') // '&lt;script&gt;'
-<style>
-.todo-app {
-  max-width: 400px;
-  margin: 0 auto;
-}
-</style>
+// Strip all HTML tags
+stripTags('<p>Hello <b>world</b></p>') // 'Hello world'
 ```
 ## Documentation
 - [Full Documentation](https://stx.sh)
-- [Syntax Highlighting Guide](./docs/STX_SYNTAX_HIGHLIGHTING.md)
-- [Examples](./examples/)
-## Testing
-```bash
-bun test
-```
 ## License
 MIT
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/stx?style=flat-square
-[npm-version-href]: https://npmjs.com/package/@stacksjs/stx
-[npm-downloads-src]: https://img.shields.io/npm/dm/@stacksjs/stx?style=flat-square
-[npm-downloads-href]: https://npmjs.com/package/@stacksjs/stx
+[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/sanitizer?style=flat-square
+[npm-version-href]: https://npmjs.com/package/@stacksjs/sanitizer
+[npm-downloads-src]: https://img.shields.io/npm/dm/@stacksjs/sanitizer?style=flat-square
+[npm-downloads-href]: https://npmjs.com/package/@stacksjs/sanitizer
 [github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/stx/ci.yml?style=flat-square&branch=main
 [github-actions-href]: https://github.com/stacksjs/stx/actions?query=workflow%3Aci

package/dist/index.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { sanitize } from './sanitizer';
 export * from './presets';
 export { basic, getPreset, markdown, relaxed, strict } from './presets';
 export * from './sanitizer';
+// Re-export for convenience
 export { escape, isSafe, sanitize, sanitizeWithInfo, stripTags } from './sanitizer';
 export * from './types';
-export default sanitize;
+export default sanitize;

package/dist/presets.d.ts CHANGED Viewed

@@ -18,4 +18,4 @@ export declare const relaxed: SanitizerOptions;
 /**
  * Markdown preset - Optimized for markdown-generated HTML
  */
-export declare const markdown: SanitizerOptions;
+export declare const markdown: SanitizerOptions;

package/dist/sanitizer.d.ts CHANGED Viewed

@@ -18,4 +18,4 @@ export declare function stripTags(html: string): string;
 /**
  * Escape HTML for safe display
  */
-export declare function escape(text: string): string;
+export declare function escape(text: string): string;

package/dist/types.d.ts CHANGED Viewed

@@ -25,4 +25,4 @@ export declare interface SanitizeResult {
 /**
  * Preset configurations
  */
-export type SanitizerPreset = 'strict' | 'basic' | 'relaxed' | 'markdown'
+export type SanitizerPreset = 'strict' | 'basic' | 'relaxed' | 'markdown';

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/sanitizer",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "description": "A fast, native Bun-powered HTML sanitizer with DOMPurify-like features. Protection against XSS and malicious content.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",