Vite & TypeScript Starter Guide

Vite provides instant server start, lightning-fast Hot Module Replacement (HMR), and native ES module bundling. Combined with Strelit UI Kit's built-in TypeScript type definitions, you get instant autocompletion and type safety for your entire layout configuration.

1. Create a New Vite + TypeScript Project

# Create project
npm create vite@latest my-docking-app -- --template vanilla-ts

# Enter directory and install dependencies
cd my-docking-app
npm install strelit-ui-kit
npm run dev

2. Set Up the Layout in `src/main.ts`

Import StrelitLayout and its configuration types directly from the package:

import { StrelitLayout, LayoutConfig, ComponentItemConfig } from 'strelit-ui-kit';
import 'strelit-ui-kit/dist/css/strelit-base.css';
import 'strelit-ui-kit/dist/css/themes/strelit-dark-theme.css';
import './style.css';

// Type-safe layout configuration
const config: LayoutConfig = {
  settings: {
    hasHeaders: true,
    showPopoutIcon: true,
    showMaximiseIcon: true,
    showCloseIcon: true
  },
  dimensions: {
    borderWidth: 5,
    minItemHeight: 120,
    minItemWidth: 180,
    headerHeight: 32
  },
  content: [{
    type: 'row',
    content: [
      {
        type: 'component',
        componentName: 'editorPanel',
        title: 'Source Code',
        width: 60,
        componentState: { initialCode: 'console.log("Hello Strelit!");' }
      } as ComponentItemConfig,
      {
        type: 'column',
        width: 40,
        content: [
          {
            type: 'component',
            componentName: 'terminalPanel',
            title: 'Output Terminal'
          },
          {
            type: 'component',
            componentName: 'metricsPanel',
            title: 'Telemetry'
          }
        ]
      }
    ]
  }]
};

const appRoot = document.getElementById('app');
if (!appRoot) throw new Error('Missing #app mount target');

const layout = new StrelitLayout(config, appRoot);

// Register components with full DOM control
layout.registerComponent('editorPanel', (container, state) => {
  const el = container.getElement()[0] || container.getElement();
  el.innerHTML = `
    <div class="panel-inner">
      <h3>Code Editor</h3>
      <textarea class="code-area">${state.initialCode || ''}</textarea>
    </div>
  `;
});

layout.registerComponent('terminalPanel', (container) => {
  const el = container.getElement()[0] || container.getElement();
  el.innerHTML = `<div class="panel-inner"><pre>[Ready] Vite HMR active.</pre></div>`;
});

layout.registerComponent('metricsPanel', (container) => {
  const el = container.getElement()[0] || container.getElement();
  el.innerHTML = `<div class="panel-inner"><p>Memory: 42MB | FPS: 60</p></div>`;
});

layout.init();

// Responsive auto-resizing
window.addEventListener('resize', () => layout.updateSize());

3. Fullscreen Workspace Styling (`src/style.css`)

Ensure the root HTML, body, and mount point stretch to 100% of the viewport:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b1220;
  color: #f0f4f8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.panel-inner {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.code-area {
  flex: 1;
  width: 100%;
  background: #070c16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #38bdf8;
  padding: 12px;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  border-radius: 6px;
  resize: none;
}

4. Production Build

When ready to ship, build an optimized production bundle with tree-shaken assets:

npm run build