5.9 KiB

Raw Permalink Blame History

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

# Simple inline script
bg.script("""
    console.log('Hello from BadGUI!');
    
    window.myFunction = function() {
        alert('Custom function executed!');
    };
""")

2. External JavaScript Files

# From file path
bg.script(src="/path/to/script.js")

# From URL
bg.script(src="https://cdn.example.com/library.js")

3. Script Attributes

# 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

# 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 <script src=""> tags
Vue Integration: Inline scripts included in component <script setup> section

Vue.js Template Integration

Global Access: window object made available via const window = globalThis.window
Quasar Integration: useQuasar() provides $q for notifications/dialogs
Event Handlers: Button handlers can call global functions with () => window.myFunction()

Generated Output Structure

Vue Component Template

<template>
  <q-page class="row items-center justify-evenly">
    <!-- Component templates -->
    <!-- Script components show as HTML comments -->
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useQuasar } from 'quasar'

// Component state
const state = ref({})
const $q = useQuasar()

// Make window object available to template
const window = globalThis.window

// Inline script content inserted here
// Vue component reactive data and methods
</script>

Index.html Integration

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta tags -->
    <script src="/js/external-script.js"></script>
  </head>
  <body>
    <!-- quasar:entry-point -->
  </body>
</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

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.

5.9 KiB Raw Permalink Blame History