# BadGUI bg.script() Component Implementation Summary
## Overview
The `bg.script()` component has been successfully implemented in BadGUI v0.2.0, providing a clean and flexible way to include custom JavaScript in your applications. This component bridges Python declarative UI code with JavaScript runtime functionality.
## Usage Patterns
### 1. Inline JavaScript
```python
# Simple inline script
bg.script("""
console.log('Hello from BadGUI!');
window.myFunction = function() {
alert('Custom function executed!');
};
""")
```
### 2. External JavaScript Files
```python
# From file path
bg.script(src="/path/to/script.js")
# From URL
bg.script(src="https://cdn.example.com/library.js")
```
### 3. Script Attributes
```python
# Deferred execution
bg.script("console.log('Deferred script');", defer=True)
# ES6 module
bg.script("export const myVar = 'test';", type="module")
# Async loading (using **kwargs to avoid Python keyword conflict)
bg.script("console.log('Async script');", **{"async": True})
```
### 4. Vue.js Integration
```python
# Vue 3 Composition API integration
bg.script("""
// Reactive data
const counter = ref(0);
const message = ref('Hello BadGUI!');
// Computed properties
const doubled = computed(() => counter.value * 2);
// Methods
const increment = () => counter.value++;
// Lifecycle hooks
onMounted(() => {
console.log('Component mounted with BadGUI scripts!');
});
""")
```
## Implementation Details
### Component Architecture
- **Component Type**: `script`
- **Props Handling**: Special `_script_content`, `_external_file`, `_is_inline` props
- **Template Generation**: Custom `_generate_script_template()` method
- **Build Integration**: Scripts processed during Vue.js project generation
### Generator Integration
- **Script Collection**: `_process_page_scripts()` method collects all scripts per page
- **File Copying**: External files copied to `public/js/` directory
- **HTML Injection**: External scripts added to `index.html` as `
```
### Index.html Integration
```html
```
### Project Structure
```
project-output/
├── src/
│ ├── pages/
│ │ └── PageName.vue (with integrated scripts)
│ └── ...
├── public/
│ ├── js/
│ │ └── external-script.js (copied external files)
│ └── ...
└── index.html (with script tags)
```
## Key Features
### ✅ Implemented
- Inline JavaScript code inclusion
- External file inclusion with automatic copying
- Script attributes (defer, async, type, etc.)
- Vue.js 3 Composition API integration
- Global function definitions
- Automatic window object access in templates
- HTML injection for external scripts
- Build-time script processing
### 🔧 Technical Highlights
- **No Template Rendering**: Script components render as HTML comments in templates
- **Build-Time Processing**: Scripts processed during project generation, not runtime
- **Vue Integration**: Seamless integration with Vue 3 reactive system
- **File Management**: Automatic copying and path resolution for external files
- **Conflict Resolution**: Proper handling of reserved Python keywords (`async`)
### 🎯 Use Cases
- Custom utility functions
- External library integration
- Vue.js reactive data and methods
- DOM manipulation and event handling
- API integration patterns
- Complex business logic
- Third-party service integration
## Example Integration
```python
import badgui as bg
with bg.page("/", "ScriptDemo", "Script Demo"):
with bg.column().classes("q-pa-lg"):
bg.label("BadGUI Script Integration").classes("text-h3")
# Inline reactive data
bg.script("""
const count = ref(0);
const increment = () => count.value++;
""")
# External utilities
bg.script(src="./utils.js")
# UI with JavaScript integration
bg.label("Count: {{ count }}").classes("text-h4")
bg.button_with_handler("Increment", js_handler="increment")
bg.button_with_handler("External Function", js_handler="() => window.myUtility()")
if __name__ == "__main__":
bg.dev()
```
## Next Steps
The `bg.script()` component provides a solid foundation for JavaScript integration. Future enhancements could include:
- **TypeScript Support**: Type checking for inline scripts
- **Module System**: Better ES6 module integration
- **Server Communication**: Python callback patterns for backend integration
- **Hot Reload**: Script changes trigger browser updates
- **Validation**: JavaScript syntax checking during build
- **Minification**: Script optimization for production builds
The implementation successfully bridges the gap between Python's declarative UI approach and JavaScript's runtime interactivity, enabling developers to build rich, interactive web applications with BadGUI.