bun-plugin-stx 0.0.9 → 0.1.0

package/README.md

@@ -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';
 
 ## Server-Side Rendering Optimizations
 
-STX supports advanced server-side rendering features including streaming and partial hydration.
+stx supports advanced server-side rendering features including streaming and partial hydration.
 
 ### Streaming Rendering
 
@@ -569,7 +569,7 @@ Streaming allows you to send parts of your HTML to the client as they become ava
 
 #### Basic Usage
 
-STX templates can be rendered as streams using the `stream()` method:
+stx templates can be rendered as streams using the `stream()` method:
 
 ```ts
 import { streamTemplate } from 'bun-plugin-stx'
@@ -577,8 +577,8 @@ import template from './templates/home.stx'
 
 // Create a streaming response
 const stream = await streamTemplate(template, {
-  title: "Streaming Example",
-  items: ["Apple", "Banana", "Cherry"]
+  title: 'Streaming Example',
+  items: ['Apple', 'Banana', 'Cherry']
 })
 
 // Use with Bun's server
@@ -608,12 +608,12 @@ Bun.serve({
   async fetch(req) {
     // Create a new ReadableStream
     const stream = new ReadableStream({
-      type: "direct",
+      type: 'direct',
       async start(controller) {
         // Render the page shell immediately
         controller.write(await renderer.renderShell({
-          title: "Dashboard",
-          user: { name: "John" }
+          title: 'Dashboard',
+          user: { name: 'John' }
         }))
 
         // Simulate fetching data and stream sections as they're ready
@@ -722,11 +722,11 @@ Organize your templates for streaming by using section comments:
 
 ### Partial Hydration
 
-STX supports partial hydration to minimize the amount of JavaScript sent to the client and improve performance. This technique allows you to selectively hydrate only the interactive parts of your page.
+stx supports partial hydration to minimize the amount of JavaScript sent to the client and improve performance. This technique allows you to selectively hydrate only the interactive parts of your page.
 
 #### Configuration
 
-Enable partial hydration in your STX configuration:
+Enable partial hydration in your stx configuration:
 
 ```ts
 // stx.config.ts
@@ -794,7 +794,7 @@ export default function hydrate(el: HTMLElement, props: any) {
   const addButton = el.querySelector('.add-to-cart-btn') as HTMLButtonElement
 
   addButton.addEventListener('click', () => {
-    const quantity = parseInt(quantityInput.value)
+    const quantity = Number.parseInt(quantityInput.value)
 
     // Add to cart logic
     console.log(`Adding ${quantity} items to cart`)
@@ -811,7 +811,7 @@ This approach ensures that only the necessary JavaScript is loaded for interacti
 
 ### Async Data Fetching
 
-STX supports async data fetching within templates for efficient server-side rendering:
+stx supports async data fetching within templates for efficient server-side rendering:
 
 ```html
 <script>
@@ -837,7 +837,7 @@ STX supports async data fetching within templates for efficient server-side rend
 
 ## Example Server
 
-Run a development server with your STX templates:
+Run a development server with your stx templates:
 
 ```ts
 // serve.ts
@@ -950,7 +950,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
 
@@ -994,12 +994,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
 <!--
@@ -1045,7 +1045,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/client.d.ts

@@ -1,42 +1,33 @@
-export declare const version: unknown;
+/**
+ * Hydrate all islands with the given handlers
+ */
+export declare function hydrateIslands(handlers: IslandHandlers): void;
+/**
+ * Add preload links for island scripts
+ */
+export declare function preloadIslandHandlers(handlers: IslandHandlers): void;
+/**
+ * Initialize island hydration with the given handlers
+ */
+export declare function initIslands(handlers: IslandHandlers, config?: HydrationConfig): void;
+/**
+ * Client-side functionality for bun-plugin-stx
+ * This file is meant to be used in the browser
+ */
+// Version info
+export declare const version: '1.0.0';
+/**
+ * Configuration for island hydration
+ */
 export declare interface HydrationConfig {
   autoStart?: boolean
   preload?: 'none' | 'eager' | 'lazy'
 }
-export declare type IslandHandlers = Record<string, () => Promise<any>>
-
-export type HydrationFunction = (element: HTMLElement, props: any) => void | Promise<void>
-
-const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'
-
-async function hydrateIsland(
-  element: HTMLElement,
-  name: string,
-  handler: () => Promise<any>,
-): Promise<void> {
-  if (!isBrowser) return
-
-  try {
-    const id = element.getAttribute('data-island-id')
-    const propsScript = document.querySelector(`script[data-island-props="${id}"]`) as HTMLScriptElement
-    const props = propsScript ? JSON.parse(propsScript.textContent || '{}') : {}
-
-    const module = await handler()
-    const hydrateFn: HydrationFunction = module.default || module.hydrate
-
-    if (typeof hydrateFn !== 'function') {
-      console.error(`Island handler for "${name}" does not export a valid hydration function`)
-      return
-    }
-
-    await hydrateFn(element, props)
-
-    element.setAttribute('data-hydrated', 'true')
-  }
-  catch (error) {
-    console.error(`Failed to hydrate island "${name}":`, error)
-  }
-}
-export declare function hydrateIslands(handlers: IslandHandlers): void;
-export declare function preloadIslandHandlers(handlers: IslandHandlers): void;
-export declare function initIslands(handlers: IslandHandlers, config: HydrationConfig = {}): void;
+/**
+ * Island handler registry
+ */
+export type IslandHandlers = Record<string, () => Promise<any>>
+/**
+ * Island hydration function type
+ */
+export type HydrationFunction = (element: HTMLElement, props: any) => void | Promise<void>

package/dist/client.js

@@ -15,7 +15,6 @@ var __toESM = (mod, isNodeMode, target) => {
       });
   return to;
 };
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
@@ -26,6 +25,7 @@ var __export = (target, all) => {
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __promiseAll = (args) => Promise.all(args);
 var __require = import.meta.require;
 
 // src/client.ts

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import type { BunPlugin } from 'bun';
-
-export declare let plugin: BunPlugin;
-
-export default plugin;
+import type { StxOptions } from '@stacksjs/stx';
+export declare function stxPlugin(userOptions?: StxOptions): BunPlugin;
+export default stxPlugin;