Webf Native Plugin Dev

Difference: Native Plugins vs Hybrid UI

When to use which:

• Native Plugin: Accessing camera, handling payments, geolocation, file system, background tasks
• Hybrid UI: Building native-looking buttons, forms, date pickers, navigation bars

When to Create a Native Plugin

Decision Workflow

Step 1: Check if standard web APIs work

• Can you use fetch(), localStorage, Canvas 2D, etc.?
• If YES → Use standard web APIs (no plugin needed)

Step 2: Check if an official plugin exists

• Visit https://openwebf.com/en/native-plugins
• Search for the capability you need
• If YES → Use the webf-native-plugins skill to install and use it

Step 3: If no official plugin exists, build your own!

• ✅ The official plugin registry doesn't have what you need
• ✅ You need a custom platform-specific capability
• ✅ You want to wrap an existing Flutter package for WebF
• ✅ You're building a reusable plugin for your organization

Use Cases:

• ✅ You need to access platform-specific APIs (camera, sensors, Bluetooth)
• ✅ You want to wrap an existing Flutter package for WebF use
• ✅ You need to perform native background tasks
• ✅ You're building a functional capability (not a UI component)
• ✅ You want to provide platform features to web developers
• ✅ Official WebF plugins don't include the feature you need

Don't Create a Native Plugin When:

• ❌ You're building UI components (use webf-hybrid-ui-dev skill instead)
• ❌ Standard web APIs already provide the functionality
• ❌ An official plugin already exists (use webf-native-plugins skill)
• ❌ You're building a one-off feature (use direct module invocation)

Architecture Overview

A native plugin consists of three layers:

┌─────────────────────────────────────────┐
│  JavaScript/TypeScript                  │  ← Generated by CLI
│  @openwebf/webf-my-plugin               │
│  import { MyPlugin } from '...'         │
├─────────────────────────────────────────┤
│  TypeScript Definitions (.d.ts)         │  ← You write this
│  interface MyPlugin { ... }             │
├─────────────────────────────────────────┤
│  Dart (Flutter)                         │  ← You write this
│  class MyPluginModule extends ...       │
│  webf_my_plugin package                 │
└─────────────────────────────────────────┘

Development Workflow

Overview

# 1. Create Flutter package with Module class
# 2. Write TypeScript definition file
# 3. Generate npm package with WebF CLI
# 4. Test and publish

webf module-codegen my-plugin-npm --flutter-package-src=./flutter_package

Step-by-Step Guide

Step 1: Create Flutter Package Structure

Create a standard Flutter package:

# Create Flutter package
flutter create --template=package webf_my_plugin

cd webf_my_plugin

Directory structure:

webf_my_plugin/
├── lib/
│   ├── webf_my_plugin.dart       # Main export file
│   └── src/
│       ├── my_plugin_module.dart # Module implementation
│       └── my_plugin.module.d.ts # TypeScript definitions
├── pubspec.yaml
└── README.md

pubspec.yaml dependencies: