npm - mvc-kit - Versions diffs - 2.13.0 → 2.13.1 - Mend

mvc-kit 2.13.0 → 2.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

package/examples/react/AuthExample/tsconfig.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": false,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "mvc-kit": ["../../../src/index.ts"],
+      "mvc-kit/react": ["../../../src/react/index.ts"]
+    }
+  },
+  "include": ["src"]
+}

package/examples/react/AuthExample/vite.config.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+export default defineConfig({
+  root: import.meta.dirname,
+  define: {
+    __MVC_KIT_DEV__: true,
+  },
+  resolve: {
+    alias: {
+      'mvc-kit/react': resolve(import.meta.dirname, '../../../src/react/index.ts'),
+      'mvc-kit': resolve(import.meta.dirname, '../../../src/index.ts'),
+    },
+  },
+  server: {
+    port: 3002,
+  },
+});

package/examples/react/ComplexApp/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>mvc-kit Complex Example</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/examples/react/ComplexApp/src/App.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { Navbar } from './components/layout/Navbar';
+import { DashboardPage } from './components/dashboard/DashboardPage';
+import { ActivityFeed } from './components/activity/ActivityFeed';
+import { Toast } from './components/shared/Toast';
+export function App() {
+  return (
+    <div className="app">
+      <Navbar />
+      <main className="main-content">
+        <DashboardPage />
+        <ActivityFeed />
+      </main>
+      <Toast />
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/channels/ActivityChannel.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { Channel } from 'mvc-kit';
+import { MockWebSocket } from '../mock-remote/MockWebSocket';
+import { getActivityWSConfig } from '../mock-remote/activity-api';
+import type { ActivityItem } from '../types/activity';
+export interface ActivityMessages {
+  activity: ActivityItem;
+}
+export class ActivityChannel extends Channel<ActivityMessages> {
+  static override MAX_ATTEMPTS = 5;
+  private ws: MockWebSocket | null = null;
+  protected open(signal: AbortSignal): void {
+    this.ws = new MockWebSocket(getActivityWSConfig());
+    this.ws.connect((data) => this.receive('activity', data), signal);
+  }
+  protected close(): void {
+    this.ws?.close();
+    this.ws = null;
+  }
+}

package/examples/react/ComplexApp/src/channels/DashboardChannel.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { Channel } from 'mvc-kit';
+import { MockWebSocket } from '../mock-remote/MockWebSocket';
+import { getDashboardConfig } from '../mock-remote/dashboard-generators';
+import type { DashboardDataPoint } from '../types/dashboard';
+export interface DashboardMessages {
+  data: DashboardDataPoint;
+}
+export abstract class DashboardChannel extends Channel<DashboardMessages> {
+  static SERVICE_ID: string;
+  static override MAX_ATTEMPTS = 5;
+  private ws: MockWebSocket | null = null;
+  protected open(signal: AbortSignal): void {
+    const serviceId = (this.constructor as typeof DashboardChannel).SERVICE_ID;
+    this.ws = new MockWebSocket(getDashboardConfig(serviceId));
+    this.ws.connect((data) => this.receive('data', data), signal);
+  }
+  protected close(): void {
+    this.ws?.close();
+    this.ws = null;
+  }
+}

package/examples/react/ComplexApp/src/channels/ErrorsChannel.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+export class ErrorsChannel extends DashboardChannel {
+  static override SERVICE_ID = 'errors';
+}

package/examples/react/ComplexApp/src/channels/LatencyChannel.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+export class LatencyChannel extends DashboardChannel {
+  static override SERVICE_ID = 'latency';
+}

package/examples/react/ComplexApp/src/channels/OrdersChannel.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+export class OrdersChannel extends DashboardChannel {
+  static override SERVICE_ID = 'orders';
+}

package/examples/react/ComplexApp/src/channels/RevenueChannel.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+export class RevenueChannel extends DashboardChannel {
+  static override SERVICE_ID = 'revenue';
+}

package/examples/react/ComplexApp/src/channels/TrafficChannel.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+export class TrafficChannel extends DashboardChannel {
+  static override SERVICE_ID = 'traffic';
+}

package/examples/react/ComplexApp/src/channels/UsersMetricChannel.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+export class UsersMetricChannel extends DashboardChannel {
+  static override SERVICE_ID = 'active-users';
+}

package/examples/react/ComplexApp/src/collections/DashboardCollection.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { Collection } from 'mvc-kit';
+import type { DashboardDataPoint } from '../types/dashboard';
+export class DashboardCollection extends Collection<DashboardDataPoint> {
+  static override MAX_SIZE = 50;
+}

package/examples/react/ComplexApp/src/collections/ErrorsCollection.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+export class ErrorsCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/LatencyCollection.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+export class LatencyCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/OrdersCollection.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+export class OrdersCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/RevenueCollection.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+export class RevenueCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/TrafficCollection.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+export class TrafficCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/UsersMetricCollection.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+export class UsersMetricCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/components/activity/ActivityFeed.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { useLocal } from 'mvc-kit/react';
+import { ActivityFeedViewModel } from '../../viewmodels/ActivityFeedViewModel';
+import { ActivityItemRow } from './ActivityItemRow';
+import { StatusIndicator } from '../shared/StatusIndicator';
+import { Spinner } from '../shared/Spinner';
+export function ActivityFeed() {
+  const [, vm] = useLocal(ActivityFeedViewModel);
+  const { loading, error } = vm.async.load;
+  return (
+    <div className="activity-feed">
+      <div className="section-header">
+        <h2>Activity Feed</h2>
+        <StatusIndicator connected={vm.isConnected} label={vm.isOnline ? 'Live' : 'Offline'} />
+        <span className="item-count">{vm.itemCount} items</span>
+      </div>
+      {loading && vm.itemCount === 0 && (
+        <div className="loading-center"><Spinner /></div>
+      )}
+      {error && (
+        <div className="error-banner">{error}</div>
+      )}
+      <div className="activity-list">
+        {vm.items.map(item => (
+          <ActivityItemRow key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/components/activity/ActivityItemRow.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import type { ActivityItem } from '../../types/activity';
+interface ActivityItemRowProps {
+  item: ActivityItem;
+}
+export function ActivityItemRow({ item }: ActivityItemRowProps) {
+  const timeAgo = getTimeAgo(item.timestamp);
+  return (
+    <div className="activity-row">
+      <img
+        className={`activity-avatar ${item.userOnline ? '' : 'avatar-offline'}`}
+        src={item.userAvatar}
+        alt={item.userName}
+        width={36}
+        height={36}
+      />
+      <div className="activity-content">
+        <span className="activity-text">{item.text}</span>
+        <span className="activity-time">{timeAgo}</span>
+      </div>
+    </div>
+  );
+}
+function getTimeAgo(timestamp: string): string {
+  const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1000);
+  if (seconds < 5) return 'just now';
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ago`;
+}

package/examples/react/ComplexApp/src/components/dashboard/DashboardCard.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import { useLocal } from 'mvc-kit/react';
+import type { DashboardCardViewModel } from '../../viewmodels/DashboardCardViewModel';
+import { StatusIndicator } from '../shared/StatusIndicator';
+interface DashboardCardProps {
+  VMClass: new () => DashboardCardViewModel;
+  title: string;
+  icon: string;
+  unit?: string;
+}
+export function DashboardCard({ VMClass, title, icon, unit }: DashboardCardProps) {
+  const [, vm] = useLocal(VMClass);
+  const trendArrow = vm.trend === 'up' ? '\u2191' : vm.trend === 'down' ? '\u2193' : '\u2192';
+  const trendClass = `trend-${vm.trend}`;
+  return (
+    <div className={`card ${vm.isOnline ? '' : 'card-disconnected'}`}>
+      <div className="card-header">
+        <span className="card-icon">{icon}</span>
+        <span className="card-title">{title}</span>
+        <StatusIndicator connected={vm.isConnected} />
+      </div>
+      <div className="card-value">
+        <span className="card-number">
+          {vm.latestValue.toLocaleString()}
+        </span>
+        {unit && <span className="card-unit">{unit}</span>}
+        <span className={`card-trend ${trendClass}`}>{trendArrow}</span>
+      </div>
+      <div className="card-footer">
+        {vm.dataPointCount} data points
+      </div>
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/components/dashboard/DashboardPage.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { DashboardCard } from './DashboardCard';
+import type { DashboardCardViewModel } from '../../viewmodels/DashboardCardViewModel';
+import { OrdersCardViewModel } from '../../viewmodels/OrdersCardViewModel';
+import { RevenueCardViewModel } from '../../viewmodels/RevenueCardViewModel';
+import { UsersMetricCardViewModel } from '../../viewmodels/UsersMetricCardViewModel';
+import { ErrorsCardViewModel } from '../../viewmodels/ErrorsCardViewModel';
+import { LatencyCardViewModel } from '../../viewmodels/LatencyCardViewModel';
+import { TrafficCardViewModel } from '../../viewmodels/TrafficCardViewModel';
+interface CardConfig {
+  VMClass: new () => DashboardCardViewModel;
+  title: string;
+  icon: string;
+  unit?: string;
+}
+const cards: CardConfig[] = [
+  { VMClass: OrdersCardViewModel, title: 'Orders', icon: '\uD83D\uDCE6', unit: '/hr' },
+  { VMClass: RevenueCardViewModel, title: 'Revenue', icon: '\uD83D\uDCB0', unit: '$' },
+  { VMClass: UsersMetricCardViewModel, title: 'Active Users', icon: '\uD83D\uDC65' },
+  { VMClass: ErrorsCardViewModel, title: 'Errors', icon: '\u26A0\uFE0F', unit: '/min' },
+  { VMClass: LatencyCardViewModel, title: 'Latency', icon: '\u23F1\uFE0F', unit: 'ms' },
+  { VMClass: TrafficCardViewModel, title: 'Traffic', icon: '\uD83C\uDF10', unit: 'req/s' },
+];
+export function DashboardPage() {
+  return (
+    <div className="dashboard-grid">
+      {cards.map(({ VMClass, title, icon, unit }) => (
+        <DashboardCard key={title} VMClass={VMClass} title={title} icon={icon} unit={unit} />
+      ))}
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/components/layout/Navbar.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+import { useSingleton } from 'mvc-kit/react';
+import { AppStateViewModel } from '../../viewmodels/AppStateViewModel';
+import { StatusIndicator } from '../shared/StatusIndicator';
+import { SocialFeedPanel } from './SocialFeedPanel';
+export function Navbar() {
+  const [state, vm] = useSingleton(AppStateViewModel);
+  return (
+    <>
+      <nav className="navbar">
+        <span className="navbar-brand">ComplexApp</span>
+        <div className="navbar-actions">
+          <StatusIndicator connected={state.online} label={state.online ? 'Online' : 'Offline'} />
+          <button
+            className={`btn ${state.online ? 'btn-danger' : 'btn-success'}`}
+            onClick={() => vm.toggleOnline()}
+          >
+            {state.online ? 'Go Offline' : 'Go Online'}
+          </button>
+          <button
+            className={`btn btn-secondary ${state.socialPanelOpen ? 'btn-active' : ''}`}
+            onClick={() => vm.toggleSocialPanel()}
+          >
+            Social Feed
+          </button>
+        </div>
+      </nav>
+      {state.socialPanelOpen && <SocialFeedPanel />}
+    </>
+  );
+}

package/examples/react/ComplexApp/src/components/layout/SocialFeedPanel.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+import { useLocal } from 'mvc-kit/react';
+import { InfiniteScroll, CardList } from 'mvc-kit/react';
+import { SocialFeedViewModel } from '../../viewmodels/SocialFeedViewModel';
+import { Spinner } from '../shared/Spinner';
+import type { SocialPost } from '../../types/social';
+function PostCard({ post }: { post: SocialPost }) {
+  return (
+    <div className="social-post">
+      <div className="social-post-header">
+        <img
+          className="social-avatar"
+          src={post.avatarUrl}
+          alt={post.author}
+          width={32}
+          height={32}
+        />
+        <span className="social-author">{post.author}</span>
+      </div>
+      <p className="social-content">{post.content}</p>
+      <div className="social-footer">
+        <span className="social-likes">{'\u2764\uFE0F'} {post.likes}</span>
+        <span className="social-time">
+          {new Date(post.timestamp).toLocaleTimeString()}
+        </span>
+      </div>
+    </div>
+  );
+}
+export function SocialFeedPanel() {
+  const [state, vm] = useLocal(SocialFeedViewModel, { page: 0 });
+  const { loading } = vm.async.loadMore;
+  return (
+    <div className="social-feed-panel">
+      <h3 className="social-feed-title">Social Feed</h3>
+      <InfiniteScroll
+        hasMore={vm.hasMore}
+        loading={loading}
+        onLoadMore={() => vm.loadMore()}
+        renderLoading={() => (
+          <div className="loading-center"><Spinner /></div>
+        )}
+        renderEnd={() =>
+          vm.postCount > 0 ? <p className="end-of-feed">No more posts</p> : null
+        }
+      >
+        <CardList
+          items={vm.posts}
+          keyOf={(post: SocialPost) => post.id}
+          renderItem={(post: SocialPost) => <PostCard post={post} />}
+        />
+      </InfiniteScroll>
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/components/shared/Spinner.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export function Spinner() {
+  return <span className="spinner" />;
+}

package/examples/react/ComplexApp/src/components/shared/StatusIndicator.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+interface StatusIndicatorProps {
+  connected: boolean;
+  label?: string;
+}
+export function StatusIndicator({ connected, label }: StatusIndicatorProps) {
+  return (
+    <span className="status-indicator">
+      <span className={`status-dot ${connected ? 'status-dot-online' : 'status-dot-offline'}`} />
+      {label && <span className="status-label">{label}</span>}
+    </span>
+  );
+}

package/examples/react/ComplexApp/src/components/shared/Toast.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import { useState, useCallback } from 'react';
+import { useSingleton, useEvent } from 'mvc-kit/react';
+import { AppEventBus } from '../../events/AppEventBus';
+interface ToastItem {
+  id: number;
+  message: string;
+  type: 'info' | 'success' | 'error';
+}
+let nextId = 0;
+export function Toast() {
+  const bus = useSingleton(AppEventBus);
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const addToast = useCallback((item: Omit<ToastItem, 'id'>) => {
+    const id = nextId++;
+    setToasts(prev => [...prev, { ...item, id }]);
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id));
+    }, 3000);
+  }, []);
+  useEvent(bus, 'toast:show', ({ message, type }) => {
+    addToast({ message, type: type ?? 'info' });
+  });
+  if (toasts.length === 0) return null;
+  return (
+    <div className="toast-container">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast toast-${t.type}`}>
+          {t.message}
+        </div>
+      ))}
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/env.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+declare const __MVC_KIT_DEV__: boolean;
+declare module 'react-dom/client' {
+  import type { ReactNode } from 'react';
+  interface Root {
+    render(children: ReactNode): void;
+    unmount(): void;
+  }
+  export function createRoot(container: Element): Root;
+}

package/examples/react/ComplexApp/src/events/AppEventBus.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { EventBus } from 'mvc-kit';
+export interface AppEvents {
+  'toast:show': { message: string; type?: 'info' | 'success' | 'error' };
+}
+export class AppEventBus extends EventBus<AppEvents> {}

package/examples/react/ComplexApp/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/examples/react/ComplexApp/src/mock-remote/MockWebSocket.ts ADDED Viewed

@@ -0,0 +1,38 @@
+export interface MockWSConfig {
+  minInterval: number;
+  maxInterval: number;
+  generator: () => any;
+}
+export class MockWebSocket {
+  private timer: ReturnType<typeof setTimeout> | null = null;
+  private closed = false;
+  constructor(private config: MockWSConfig) {}
+  connect(onMessage: (data: any) => void, signal?: AbortSignal): void {
+    if (signal?.aborted) return;
+    signal?.addEventListener('abort', () => this.close(), { once: true });
+    this.scheduleNext(onMessage);
+  }
+  close(): void {
+    if (this.closed) return;
+    this.closed = true;
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
+  private scheduleNext(onMessage: (data: any) => void): void {
+    if (this.closed) return;
+    const { minInterval, maxInterval, generator } = this.config;
+    const interval = minInterval + Math.random() * (maxInterval - minInterval);
+    this.timer = setTimeout(() => {
+      if (this.closed) return;
+      onMessage(generator());
+      this.scheduleNext(onMessage);
+    }, interval);
+  }
+}

package/examples/react/ComplexApp/src/mock-remote/activity-api.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import type { ActivityItem } from '../types/activity';
+import type { MockWSConfig } from './MockWebSocket';
+import { mockFetch } from './delay';
+const NAMES = [
+  'Alice Johnson', 'Bob Smith', 'Carol White', 'Dave Brown', 'Eve Davis',
+  'Frank Wilson', 'Grace Lee', 'Hank Taylor', 'Ivy Martin', 'Jack Anderson',
+];
+const ACTIONS = [
+  'created a new order', 'updated their profile', 'submitted a report',
+  'closed a ticket', 'uploaded a document', 'left a comment',
+  'approved a request', 'joined the team', 'completed a task', 'shared a file',
+];
+function randomItem<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)]!;
+}
+let activitySeq = 0;
+function generateActivity(): ActivityItem {
+  const name = randomItem(NAMES);
+  return {
+    id: `act-${++activitySeq}`,
+    text: `${name} ${randomItem(ACTIONS)}`,
+    userName: name,
+    userAvatar: `https://api.dicebear.com/7.x/initials/svg?seed=${encodeURIComponent(name)}`,
+    userOnline: Math.random() > 0.3,
+    timestamp: new Date().toISOString(),
+  };
+}
+export async function fetchInitialActivity(signal?: AbortSignal): Promise<ActivityItem[]> {
+  const items: ActivityItem[] = [];
+  for (let i = 0; i < 50; i++) {
+    items.push(generateActivity());
+  }
+  return mockFetch(items, 600, signal);
+}
+export function getActivityWSConfig(): MockWSConfig {
+  return {
+    minInterval: 1000,
+    maxInterval: 3000,
+    generator: generateActivity,
+  };
+}