XCon Studio

Appearance

🚀 Quick Start Guide ​

Create your first widget with XCON Studio Widget Framework in 5 minutes!

📋 Requirements ​

  • Node.js 18+
  • NPM 9+
  • Basic TypeScript knowledge

🎯 1. Create Widget ​

bash
# Create widget
npx @xcons/cli web create -n my-awesome

# Enter directory
cd my-awesome

# Install dependencies
npm install

# Start development
npm run dev

Go to http://localhost:4201 in your browser.

📝 2. Widget Code ​

Separate Template File ​

typescript
@Widget({
    selector: '.my-widget',
    templateUrl: './widget.html',
    styleUrls: ['./widget.css']
})
export class MyWidget {
    @xproperty() name: string = 'World';
}

🚀 3. Build and Usage ​

bash
# Build
npm run build

# Preview
npm run preview

Usage in HTML ​

html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="widget.css">
</head>
<body>
<div class="my-first-widget"></div>

<script src="https://unpkg.com/@xcons/core@latest/dist/core.js"></script>
<script src="https://unpkg.com/@xcons/common@latest/dist/common.js"></script>
<script src="widget.js"></script>

<script>
    XConBootstrap.run({
        widgets: [{ widget: MyFirstWidget, initMode: 'auto' }]
    });
</script>
</body>
</html>

🎯 Basic Features ​

Decorators ​

  • @xproperty() - Reactive property
  • @xcomputed() - Computed value
  • @xinject() - Service injection
  • @xsingleton() - Singleton service

Template Directives ​

  • x:text="value" - Text display
  • x:model="property" - Two-way data binding
  • x:on:click="method" - Event binding
  • x:if="condition" - Conditional display
  • x:for="item in items" - List rendering
  • x:class:active="isActive" - Class binding

🛠️ NPM Commands ​

bash
npm run dev      # Development server
npm run build    # Production build
npm run preview  # Build preview
npm run clean    # Clean

📚 Next Steps ​