msyn - Multi-Framework Asset Synchronization Tool

A comprehensive asset management and synchronization tool for multi-framework projects. Efficiently manage and optimize assets across web, mobile, and native applications.

Features

• Automatic Framework Detection: Automatically detects frameworks in your project
• Multiple Asset Types: Supports images, icons, fonts, and custom asset types
• Asset Synchronization: Syncs assets from common directories to framework-specific locations
• Multi-stage Synchronization: Supports complex asset pipelines with multiple synchronization stages
• SVG Optimization: Optimizes SVGs for better compatibility and performance
• Watch Mode: Automatically detects and syncs file changes
• Interactive Configuration: User-friendly setup wizard with smart defaults
• Multi-language Support: English and Japanese interfaces
• Enhanced Configuration Management: Improved configuration file handling with automatic updates
• Temporary File-based Optimization: Uses temporary files for optimization to keep your project directory clean
• User-Friendly Feedback: Clear, colored output with relative paths for better readability
• Automatic SVGO Installation: Detects and installs SVGO when needed for SVG optimization

Installation

# Global installation with npm
npm install -g msyn

# Or, install as a project dependency
npm install --save-dev msyn

# With pnpm
pnpm install --save-dev msyn

Usage

Initial Setup

When using for the first time, run the configuration wizard:

npx msyn config

This interactive wizard will guide you through:

• Setting up asset directories (images, icons, fonts)
• Detecting and configuring frameworks
• Setting watch mode parameters

Asset Synchronization

# Basic synchronization
npx msyn sync

# Detailed output
npx msyn sync --verbose

# Force overwrite
npx msyn sync --force

Watch Mode

# Start watch mode
npx msyn watch

# With detailed output
npx msyn watch --verbose

SVG Optimization

# Optimize SVG files
npx msyn optimize

# Force overwrite existing optimized files
npx msyn optimize --force

# Disable automatic SVGO installation
npx msyn optimize --no-auto-install-svgo

Note: SVGO is now an optional dependency. When you run the optimize command, msyn will automatically install SVGO if it's not already installed. You can disable this behavior with the --no-auto-install-svgo flag.

Configuration

Asset Directory Structure

msyn v1.4.2 uses a simplified asset directory structure:

assets/
  ├── images/
  ├── icons/
  └── fonts/

These directories are automatically created during configuration and used for synchronization. SVG optimization is now performed using temporary files, eliminating the need for persistent optimization directories.

Framework Detection

msyn automatically detects frameworks in your project by analyzing:

• Package dependencies
• Configuration files
• Directory structures

Supported frameworks include:

Web Frameworks:

• Next.js
• React
• Remix
• Vue
• Nuxt.js
• Angular
• Svelte
• SvelteKit
• SolidJS
• Astro

Mobile Frameworks:

• React Native
• Expo
• Flutter
• Ionic
• Capacitor

Native Frameworks:

• Swift (iOS)
• Kotlin (Android)
• Xamarin

Default Asset Paths

msyn uses these recommended paths for various frameworks:

• Next.js/React/Remix: public/images/, public/icons/, public/fonts/
• SvelteKit: static/images/, static/icons/, static/fonts/
• Angular: src/assets/images/, src/assets/icons/, src/assets/fonts/
• React Native: src/assets/images/, src/assets/icons/, src/assets/fonts/
• Flutter: assets/images/, assets/icons/, assets/fonts/
• Swift: Resources/Images/, Resources/Icons/, Resources/Fonts/
• Kotlin: res/drawable/, res/drawable/, res/font/

Configuration File

Configuration is stored in .msyn.json in your project root. Example:

{
  "version": "1.4.2",
  "language": "en",
  "assets": {
    "images": {
      "source": "assets/images/"
    },
    "icons": {
      "source": "assets/icons/"
    },
    "fonts": {
      "source": "assets/fonts/"
    }
  },
  "modules": [
    {
      "name": "web",
      "framework": "nextjs",
      "assets": {
        "images": {
          "source": "assets/images/",
          "destination": "public/images"
        },
        "icons": {
          "source": "assets/icons/",
          "destination": "public/icons"
        },
        "fonts": {
          "source": "assets/fonts/",
          "destination": "public/fonts"
        }
      },
      "enabled": true
    },
    {
      "name": "mobile",
      "framework": "reactnative",
      "assets": {
        "images": {
          "source": "public/images/",
          "destination": "src/assets/images"
        },
        "icons": {
          "source": "public/icons/",
          "destination": "src/assets/icons"
        },
        "fonts": {
          "source": "public/fonts/",
          "destination": "src/assets/fonts"
        }
      },
      "enabled": true
    }
  ],
  "options": {
    "autoOptimize": true,
    "watch": true,
    "watchDelay": 2000
  }
}

Multi-stage Synchronization

msyn v1.4.2 introduces multi-stage synchronization, allowing you to create complex asset pipelines:

1. Source → Framework A: Synchronize assets from your source directory to Framework A
2. Framework A → Framework B: Use Framework A's assets as the source for Framework B
3. Framework A → Framework C: Use the same assets for multiple target frameworks

This is particularly useful for:

• Using web assets as a source for mobile applications
• Sharing optimized assets between multiple frameworks
• Creating complex asset transformation pipelines

Example configuration for multi-stage synchronization:

"modules": [
  {
    "name": "web",
    "framework": "nextjs",
    "assets": {
      "images": {
        "source": "assets/images/",
        "destination": "public/images"
      }
    }
  },
  {
    "name": "mobile",
    "framework": "reactnative",
    "assets": {
      "images": {
        "source": "public/images/",
        "destination": "src/assets/images"
      }
    }
  },
  {
    "name": "ios",
    "framework": "ios",
    "assets": {
      "images": {
        "source": "src/assets/images/",
        "destination": "ios/MyApp/Images.xcassets"
      }
    }
  }
]

Environment Variables

• MSYN_LANG: Set language (en/ja)

Dependencies

• Node.js 14 or higher
• chokidar (file watching)
• inquirer (interactive interface)
• commander (command line parsing)
• glob (file pattern matching)

License

MIT

日本語版のREADMEはこちら