webf-native-plugin-dev_skill

Overview

This skill teaches how to develop custom WebF native plugins by wrapping Flutter packages or platform APIs and exposing them as JavaScript modules. It covers the plugin architecture, TypeScript definition authoring, Dart module implementation, CLI code generation, testing, and publishing. Use it to create reusable, type-safe plugins that bridge native capabilities to WebF JavaScript code.

How this skill works

You implement a Dart module class that extends generated bindings and register it with WebF, write a .d.ts TypeScript interface that describes the JS API, then run the WebF CLI to generate Dart bindings and an npm wrapper. The generated npm package calls webf.invokeModuleAsync under the hood; the Dart side maps those calls to strongly-typed methods. Testing requires installing the Flutter package and the generated npm package in your app and registering the module in main.dart.

When to use it

• You need platform capabilities not available through standard web APIs (camera, sensors, Bluetooth, file access).
• An official WebF plugin does not exist for the feature you require.
• You want to wrap an existing Flutter package and expose it to JavaScript consumers.
• You need background or platform-level functionality (payments, biometrics, native storage).
• You’re building a reusable functional library (not a native UI component).

Best practices

• Prefer standard web APIs when they suffice; create plugins only for missing native functionality.
• Define clear, type-safe .d.ts interfaces with JSDoc and separate interfaces for complex types.
• Keep module public surface minimal and implement robust error handling and resource cleanup in dispose().
• Use the WebF CLI (webf module-codegen) to generate bindings and npm artifacts to avoid manual mapping errors.
• Test both Dart and JS sides: register the module in main.dart and exercise the npm wrapper in a real WebF context.

Example use cases

• Wrap a Flutter camera package to expose photo and video APIs to JavaScript apps.
• Provide Bluetooth or BLE device scanning and communication methods to web code inside WebF.
• Bridge payment SDKs or biometric authentication and return structured results to TypeScript clients.
• Implement file system access or background tasks that need native scheduling and native permissions.
• Create a company-internal plugin that wraps proprietary Flutter logic for reuse across projects.