Modules Overview

54VIE Super App is divided into multiple packages, each with a clear responsibility.

Package Map

                    ┌─────────────────┐
                    │    app-host     │
                    │   (Host App)    │
                    └────────┬────────┘
                             │
           ┌─────────────────┼─────────────────┐
           │                 │                 │
    ┌──────▼──────┐  ┌───────▼───────┐  ┌─────▼─────┐
    │miniapp-sdk  │  │miniapp-runtime│  │   core    │
    │  (SDK)      │  │  (Runtime)    │  │ (Shared)  │
    └──────┬──────┘  └───────────────┘  └─────┬─────┘
           │                                   │
           └───────────────┬───────────────────┘
                           │
    ┌──────────────────────┼──────────────────────┐
    │          │           │           │          │
┌───▼───┐ ┌───▼───┐ ┌─────▼─────┐ ┌───▼───┐ ┌───▼───┐
│  kit  │ │  api  │ │ analytics │ │storage│ │device │
└───────┘ └───────┘ └───────────┘ └───────┘ └───────┘

┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐
│  location   │ │    media    │ │  push-notification  │
└─────────────┘ └─────────────┘ └─────────────────────┘

Package List

Core Packages

Package	Description	Link
@54vie/core	Shared dependencies & presets	View details
@54vie/kit	UI Component Library	View details
@54vie/storage	Persistent storage (MMKV)	View details

Mini-App System

Package	Description	Link
app-host	Host application	View details
miniapp-sdk	SDK for mini-apps	View details
miniapp-runtime	Mini-app runtime	View details

Services

Package	Description	Link
@54vie/api	API client, caching, WebSocket	View details
@54vie/analytics	Analytics & tracking	View details
@54vie/push	Push notifications	View details

Device & Platform

Package	Description	Link
@54vie/device	Device info, network, haptics	View details
@54vie/location	Location & geocoding	View details
@54vie/media	Camera, gallery, processing	View details

Dependency Graph

@54vie/kit ─────────────▶ @54vie/core
@54vie/api ─────────────▶ @54vie/core, @54vie/storage
@54vie/analytics ───────▶ @54vie/core, @54vie/device, @54vie/storage
@54vie/storage ─────────▶ @54vie/core
@54vie/device ──────────▶ @54vie/core
@54vie/location ────────▶ @54vie/core
@54vie/media ───────────▶ @54vie/core
@54vie/push ────────────▶ @54vie/core

miniapp-sdk ────────────▶ (bridge to host services)
miniapp-runtime ────────▶ @54vie/core

app-host ───────────────▶ ALL packages

Versioning Strategy

All packages follow semantic versioning (semver):

• Major (x.0.0): Breaking changes
• Minor (0.x.0): New features, backward compatible
• Patch (0.0.x): Bug fixes

# Check versions
pnpm -r exec -- cat package.json | grep '"version"'

How to Use

In Host App

// Import directly
import { Button, Toast } from '@54vie/kit';
import { apiClient, useQuery } from '@54vie/api';
import { useAnalytics } from '@54vie/analytics';
import { StorageManager } from '@54vie/storage';
import { DeviceInfo, useNetwork } from '@54vie/device';
import { useLocation } from '@54vie/location';
import { useCamera } from '@54vie/media';
import { usePush } from '@54vie/push';

In Mini-Apps

// Use through SDK
import {
  useHostAuth,
  useHostDevice,
  storage,
  analytics,
  location,
  media,
} from '@54vie/miniapp-sdk';

// UI components can be imported directly
import { Button, Input, Card } from '@54vie/kit';

Creating a New Package

# 1. Create new folder
mkdir packages/my-package
cd packages/my-package

# 2. Initialize package.json
pnpm init

# 3. Configure package.json
{
  "name": "@54vie/my-package",
  "version": "0.1.0",
  "main": "src/index.ts",
  "types": "src/index.ts",
  "dependencies": {
    "@54vie/core": "workspace:*"
  }
}

# 4. Add to pnpm-workspace.yaml if needed

Best Practices

1. Single Responsibility

Each package should do one thing and do it well.

2. Minimal Dependencies

Only depend on what is actually needed.

3. Clear Public API

Export clearly through index.ts:

// src/index.ts
export { Button } from './components/Button';
export { useTheme } from './hooks/useTheme';
export type { ButtonProps } from './types';

4. Documentation

Each package should have a README.md with:

• Description
• Installation
• Usage examples
• API reference