npm - @stacksjs/stx - Versions diffs - 0.0.10 → 0.1.7 - Mend

@stacksjs/stx 0.0.10 → 0.1.7

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 (50) hide show

package/README.md +69 -21
package/dist/a11y.d.ts +40 -0
package/dist/analyzer.d.ts +64 -0
package/dist/animation.d.ts +64 -0
package/dist/assets.d.ts +19 -0
package/dist/auth.d.ts +11 -0
package/dist/bin/cli.js +2821 -154
package/dist/caching.d.ts +18 -6
package/dist/chunk-2ndtnc0t.js +9822 -0
package/dist/{chunk-ywm063e4.js → chunk-e11q5a3p.js} +2 -2
package/dist/chunk-vsbm352h.js +670 -0
package/dist/client.d.ts +19 -35
package/dist/components.d.ts +6 -0
package/dist/conditionals.d.ts +17 -1
package/dist/config.d.ts +6 -2
package/dist/csrf.d.ts +28 -0
package/dist/custom-directives.d.ts +5 -6
package/dist/dev-server.d.ts +21 -0
package/dist/docs.d.ts +39 -3
package/dist/error-handling.d.ts +101 -0
package/dist/expressions.d.ts +43 -4
package/dist/formatter.d.ts +16 -0
package/dist/forms.d.ts +15 -25
package/dist/i18n.d.ts +17 -20
package/dist/includes.d.ts +21 -18
package/dist/index.d.ts +30 -24
package/dist/init.d.ts +9 -0
package/dist/js-ts.d.ts +10 -0
package/dist/loops.d.ts +4 -3
package/dist/markdown.d.ts +8 -0
package/dist/method-spoofing.d.ts +13 -0
package/dist/middleware.d.ts +9 -1
package/dist/performance-utils.d.ts +58 -0
package/dist/plugin.d.ts +2 -0
package/dist/process.d.ts +9 -7
package/dist/release.d.ts +1 -0
package/dist/routes.d.ts +36 -0
package/dist/safe-evaluator.d.ts +16 -0
package/dist/seo.d.ts +33 -0
package/dist/serve.d.ts +35 -0
package/dist/src/index.js +2893 -135
package/dist/streaming.d.ts +30 -14
package/dist/types.d.ts +214 -48
package/dist/utils.d.ts +21 -3
package/dist/view-composers.d.ts +26 -0
package/dist/web-components.d.ts +7 -14
package/package.json +18 -9
package/dist/chunk-04bqmpzb.js +0 -7069
package/dist/chunk-8ehp5m3y.js +0 -4279
package/dist/chunk-9ynf73q9.js +0 -2502

package/README.md CHANGED Viewed

@@ -112,9 +112,9 @@ export default {
 }
 ```
-## STX Template Syntax
+## stx Template Syntax
-STX templates use a syntax inspired by Laravel Blade. Templates can contain HTML with special directives for rendering dynamic content.
+stx templates use a syntax inspired by Laravel Blade. Templates can contain HTML with special directives for rendering dynamic content.
 ### Basic Example
@@ -122,7 +122,7 @@ STX templates use a syntax inspired by Laravel Blade. Templates can contain HTML
 <!DOCTYPE html>
 <html>
 <head>
-  <title>STX Example</title>
+  <title>stx Example</title>
   <script>
     // Define your data as an ESM export
     export const title = "Hello World";
@@ -148,7 +148,7 @@ STX templates use a syntax inspired by Laravel Blade. Templates can contain HTML
 ### Data Export Options
-There are two ways to expose data in your STX templates:
+There are two ways to expose data in your stx templates:
 #### 1. ESM exports (recommended)
@@ -188,7 +188,7 @@ There are two ways to expose data in your STX templates:
 #### Custom Directives
-STX supports defining your own custom directives for template processing:
+stx supports defining your own custom directives for template processing:
 ```ts
 import type { CustomDirective } from 'bun-plugin-stx'
@@ -298,7 +298,7 @@ Output unescaped HTML content:
 #### Markdown Support
-STX supports rendering Markdown content directly in your templates using the `@markdown` directive:
+stx supports rendering Markdown content directly in your templates using the `@markdown` directive:
 ```html
 <div class="content">
@@ -339,7 +339,7 @@ Content here
 ### Internationalization (i18n)
-STX supports internationalization to help you build multilingual applications. Translation files are stored in YAML format (JSON also supported) and support nested keys and parameter replacements.
+stx supports internationalization to help you build multilingual applications. Translation files are stored in YAML format (JSON also supported) and support nested keys and parameter replacements.
 #### Configuration
@@ -371,7 +371,7 @@ Create translation files in your translationsDir:
 ```yaml
 # translations/en.yaml
-welcome: Welcome to STX
+welcome: Welcome to stx
 greeting: Hello, :name!
 nav:
   home: Home
@@ -381,7 +381,7 @@ nav:
 ```yaml
 # translations/de.yaml
-welcome: Willkommen bei STX
+welcome: Willkommen bei stx
 greeting: Hallo, :name!
 nav:
   home: Startseite
@@ -391,7 +391,7 @@ nav:
 #### Using Translations
-STX provides multiple ways to use translations in your templates:
+stx provides multiple ways to use translations in your templates:
 1. **@translate Directive**
@@ -438,7 +438,7 @@ Then in your template:
 ### Web Components Integration
-STX now provides seamless integration with Web Components, allowing you to automatically build and use custom elements from your STX components.
+stx now provides seamless integration with Web Components, allowing you to automatically build and use custom elements from your stx components.
 #### Configuration
@@ -461,7 +461,7 @@ await build({
           {
             name: 'MyButton', // Class name for the component
             tag: 'my-button', // HTML tag name (must contain a hyphen)
-            file: 'components/button.stx', // Path to the STX component
+            file: 'components/button.stx', // Path to the stx component
             attributes: ['type', 'text', 'disabled'] // Observed attributes
           },
           {
@@ -507,9 +507,9 @@ Include web components in your templates with the `@webcomponent` directive:
 </html>
 ```
-#### Source STX Components
+#### Source stx Components
-The original STX components can be simple:
+The original stx components can be simple:
 ```html
 <!-- components/button.stx -->
@@ -539,9 +539,9 @@ Web components support several configuration options:
 ## TypeScript Support
-STX includes TypeScript declarations for importing .stx files. Make sure your `tsconfig.json` includes the necessary configuration:
+stx includes TypeScript declarations for importing .stx files. Make sure your `tsconfig.json` includes the necessary configuration:
-```json
+```jsonc
 {
   "compilerOptions": {
     // ... your other options
@@ -561,7 +561,7 @@ declare module '*.stx';
 ## Example Server
-Run a development server with your STX templates:
+Run a development server with your stx templates:
 ```ts
 // serve.ts
@@ -615,6 +615,54 @@ The plugin works by:
 bun test
 ```
+## CSS Generation with Headwind
+stx uses [Headwind](https://headwind.stacksjs.org) for utility-first CSS generation. Headwind is a blazingly fast CSS framework built with Bun that generates only the CSS you need.
+### Building CSS
+```bash
+# Build CSS from your .stx templates
+bun run build:css
+# The CSS will be generated at ./examples/dist/styles.css
+```
+### Headwind Configuration
+Headwind is configured via `headwind.config.ts`:
+```typescript
+import type { HeadwindConfig } from 'headwind'
+import path from 'node:path'
+const config: Partial<HeadwindConfig> = {
+  content: [
+    './examples/**/*.stx',
+    './examples/**/*.{html,js,ts,jsx,tsx}',
+  ],
+  output: './examples/dist/styles.css',
+  minify: false,
+}
+export default config
+```
+### Using Utility Classes
+stx templates support all Headwind/Tailwind-compatible utility classes:
+```html
+<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg">
+  <h1 class="text-2xl font-bold text-gray-900">Hello World</h1>
+  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
+    Click Me
+  </button>
+</div>
+```
+The build process automatically scans all your `.stx` files and generates only the CSS classes you actually use. For more information, visit the [Headwind documentation](https://headwind.stacksjs.org).
 ## Changelog
 Please see our [releases](https://github.com/stacksjs/stx/releases) page for more information on what has changed recently.
@@ -674,7 +722,7 @@ Made with 💙
 ## Documentation Generation
-STX can automatically generate documentation for your components, templates, and directives. This helps developers understand your UI components and how to use them.
+stx can automatically generate documentation for your components, templates, and directives. This helps developers understand your UI components and how to use them.
 ### Command Line
@@ -718,12 +766,12 @@ export default {
     directives: true,
     extraContent: '## Getting Started\n\nThis is additional content to include in the documentation.',
   },
-};
+}
 ```
 ### Component Documentation
-STX can extract component metadata from JSDoc comments in your component files:
+stx can extract component metadata from JSDoc comments in your component files:
 ```html
 <!--
@@ -769,7 +817,7 @@ This component will be documented with all its properties, types, default values
 ### Web Component Documentation
-STX will automatically document web components defined in your configuration:
+stx will automatically document web components defined in your configuration:
 ```ts
 export default {

package/dist/a11y.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import type { CustomDirective, StxOptions } from './types';
+/**
+ * Process accessibility directives
+ */
+export declare function processA11yDirectives(template: string, context: Record<string, any>, filePath: string, options: StxOptions): string;
+/**
+ * Create the screen reader only style
+ */
+export declare function getScreenReaderOnlyStyle(): string;
+/**
+ * Automatically check template for accessibility issues
+ */
+export declare function checkA11y(html: string, filePath: string): Promise<A11yViolation[]>;
+/**
+ * Scan a directory of stx files for accessibility issues
+ */
+export declare function scanA11yIssues(directory: string, options?: { recursive?: boolean, ignorePaths?: string[] }): Promise<Record<string, A11yViolation[]>>;
+/**
+ * Register all a11y directives
+ */
+export declare function registerA11yDirectives(): CustomDirective[];
+/**
+ * A11y directive for adding accessibility hints
+ */
+export declare const a11yDirective: CustomDirective;
+/**
+ * Screen reader directive for screen reader only content
+ */
+export declare const screenReaderDirective: CustomDirective;
+/**
+ * Accessibility violation found during a11y checks
+ */
+export declare interface A11yViolation {
+  type: string
+  element: string
+  message: string
+  impact: 'critical' | 'serious' | 'moderate' | 'minor'
+  help: string
+  helpUrl?: string
+}

package/dist/analyzer.d.ts ADDED Viewed

@@ -0,0 +1,64 @@
+/**
+ * Analyze an stx template file
+ */
+export declare function analyzeTemplate(filePath: string): Promise<AnalysisResult>;
+/**
+ * Analyze multiple templates
+ */
+export declare function analyzeProject(patterns?: string[], cwd?: string): Promise<{
+  results: AnalysisResult[]
+  summary: ProjectSummary
+}>;
+export declare interface AnalysisResult {
+  file: string
+  metrics: TemplateMetrics
+  issues: Issue[]
+  suggestions: Suggestion[]
+  performance: PerformanceMetrics
+}
+export declare interface TemplateMetrics {
+  lines: number
+  characters: number
+  directives: DirectiveCount
+  expressions: number
+  components: number
+  layouts: number
+  scriptLines: number
+  complexity: number
+}
+export declare interface DirectiveCount {
+  conditionals: number
+  loops: number
+  includes: number
+  custom: number
+  total: number
+}
+export declare interface Issue {
+  type: 'error' | 'warning' | 'info'
+  category: 'performance' | 'security' | 'maintainability' | 'accessibility' | 'syntax'
+  message: string
+  line?: number
+  column?: number
+  suggestion?: string
+}
+export declare interface Suggestion {
+  type: 'optimization' | 'best-practice' | 'refactor'
+  message: string
+  impact: 'low' | 'medium' | 'high'
+  effort: 'low' | 'medium' | 'high'
+}
+export declare interface PerformanceMetrics {
+  estimatedRenderTime: number
+  complexityScore: number
+  cacheability: 'high' | 'medium' | 'low'
+  recommendations: string[]
+}
+export declare interface ProjectSummary {
+  totalFiles: number
+  totalLines: number
+  avgComplexity: number
+  totalIssues: number
+  issuesByCategory: Record<string, number>
+  performanceScore: number
+  recommendations: string[]
+}

package/dist/animation.d.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import type { StxOptions } from './types';
+/**
+ * Process animation directives in the template
+ */
+export declare function processAnimationDirectives(template: string, context: Record<string, any>, filePath: string, options: StxOptions): string;
+/**
+ * Register animation directives
+ */
+export declare function registerAnimationDirectives(options: StxOptions): StxOptions;
+/**
+ * Default transition options
+ */
+export declare const DEFAULT_TRANSITION_OPTIONS: {
+  duration: number
+  delay: number
+  ease: string
+  direction: string
+};
+/**
+ * Transition directive for applying transitions to elements
+ */
+export declare const transitionDirective: CustomDirective;
+/**
+ * Scroll animation directive for triggering animations on scroll
+ */
+export declare const scrollAnimateDirective: CustomDirective;
+/**
+ * Animation group directive for coordinating multiple animations
+ */
+export declare const animationGroupDirective: CustomDirective;
+/**
+ * Motion preferences directive for controlling animation preferences
+ */
+export declare const motionDirective: CustomDirective;
+/**
+ * Available transition types that can be used with @transition directive
+ */
+export declare enum TransitionType {
+  Fade = 'fade',
+  Slide = 'slide',
+  Scale = 'scale',
+  Flip = 'flip',
+  Rotate = 'rotate',
+  Custom = 'custom',
+}
+/**
+ * Available transition directions that can be used with @transition directive
+ */
+export declare enum TransitionDirection {
+  In = 'in',
+  Out = 'out',
+  Both = 'both',
+}
+/**
+ * Available ease functions for transitions
+ */
+export declare enum TransitionEase {
+  Linear = 'linear',
+  Ease = 'ease',
+  EaseIn = 'ease-in',
+  EaseOut = 'ease-out',
+  EaseInOut = 'ease-in-out',
+  Spring = 'spring',
+}

package/dist/assets.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { StxOptions } from './types';
+/**
+ * Read and parse a markdown file with frontmatter
+ * @param filePath Path to the markdown file
+ * @param options stx options
+ * @returns Object containing parsed content and frontmatter data
+ */
+export declare function readMarkdownFile(filePath: string, options?: StxOptions): Promise<{ content: string, data: Record<string, any> }>;
+/**
+ * Process @markdown-file directive
+ * This directive includes markdown files in templates
+ */
+export declare function processMarkdownFileDirectives(template: string, context: Record<string, any>, filePath?: string, options?: StxOptions): Promise<string>;
+// Define a cache for markdown files to avoid repeated file reads
+export declare const markdownCache: Map<string, {
+  content: string
+  data: Record<string, any>
+  updatedAt: number
+}>;

package/dist/auth.d.ts CHANGED Viewed

@@ -1 +1,12 @@
+/**
+ * Module for handling authentication and authorization in templates
+ */
+/**
+ * Safely evaluates an auth expression within the given context
+ * Similar to evaluateExpression but specialized for auth conditionals
+ *
+ * @param {string} expression - The expression to evaluate
+ * @param {Record<string, any>} context - The context object containing variables
+ * @returns The evaluated result
+ */
 export declare function evaluateAuthExpression(expression: string, context: Record<string, any>): any;