@webview-native-ui/engine 0.0.0-stage → 0.0.2

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 (51) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +51 -2
  3. package/WebViewNativeUIEngine.podspec +17 -0
  4. package/dist/dom/geometry.d.ts +2 -0
  5. package/dist/dom/geometry.js +25 -0
  6. package/dist/dom/overlays.d.ts +42 -0
  7. package/dist/dom/overlays.js +181 -0
  8. package/dist/dom/scroll-bindings.d.ts +11 -0
  9. package/dist/dom/scroll-bindings.js +55 -0
  10. package/dist/dom/scroll-placement.d.ts +5 -0
  11. package/dist/dom/scroll-placement.js +85 -0
  12. package/dist/dom/visibility.d.ts +6 -0
  13. package/dist/dom/visibility.js +29 -0
  14. package/dist/index.d.ts +10 -0
  15. package/dist/index.js +9 -0
  16. package/dist/ionic.d.ts +16 -0
  17. package/dist/ionic.js +31 -0
  18. package/dist/native/bootstrap.d.ts +8 -0
  19. package/dist/native/bootstrap.js +138 -0
  20. package/dist/native/bridge.d.ts +4 -0
  21. package/dist/native/bridge.js +15 -0
  22. package/dist/native/resource-url.d.ts +2 -0
  23. package/dist/native/resource-url.js +11 -0
  24. package/dist/native/session.d.ts +49 -0
  25. package/dist/native/session.js +520 -0
  26. package/dist/projection/events.d.ts +12 -0
  27. package/dist/projection/events.js +44 -0
  28. package/dist/projection/placement.d.ts +14 -0
  29. package/dist/projection/placement.js +18 -0
  30. package/dist/projection/scope.d.ts +6 -0
  31. package/dist/projection/scope.js +8 -0
  32. package/dist/projection/styles.d.ts +2 -0
  33. package/dist/projection/styles.js +14 -0
  34. package/dist/projection/web.d.ts +52 -0
  35. package/dist/projection/web.js +838 -0
  36. package/dist/types.d.ts +88 -0
  37. package/dist/types.js +1 -0
  38. package/docs/assets/hero.png +0 -0
  39. package/docs/capacitor-plugin.md +279 -0
  40. package/docs/cordova-plugin.md +198 -0
  41. package/docs/cordova.md +3 -0
  42. package/docs/maintenance.md +52 -0
  43. package/docs/projection.md +340 -0
  44. package/ios/Sources/WebViewNativeUIEngine/ClippedView.swift +16 -0
  45. package/ios/Sources/WebViewNativeUIEngine/CoveredSnapshots.swift +256 -0
  46. package/ios/Sources/WebViewNativeUIEngine/Frame.swift +15 -0
  47. package/ios/Sources/WebViewNativeUIEngine/NativeUIProjection.swift +314 -0
  48. package/ios/Sources/WebViewNativeUIEngine/Resources/native-ui-engine.js +14 -0
  49. package/ios/Sources/WebViewNativeUIEngine/ScrollBindings.swift +27 -0
  50. package/ios/Sources/WebViewNativeUIEngine/ScrollTracker.swift +117 -0
  51. package/package.json +63 -4
@@ -0,0 +1,88 @@
1
+ import type { WebProjectionScope } from './projection/scope.js';
2
+ /** All wire coordinates are CSS pixels, relative to the Web viewport. */
3
+ export interface Frame {
4
+ x: number;
5
+ y: number;
6
+ width: number;
7
+ height: number;
8
+ }
9
+ export interface ScrollPlacement {
10
+ id: string;
11
+ reuse?: boolean;
12
+ offsetX: number;
13
+ offsetY: number;
14
+ viewport: Frame;
15
+ clip: Frame;
16
+ contentWidth: number;
17
+ contentHeight: number;
18
+ frame: Frame;
19
+ }
20
+ /** A source and its native rendering. Kind/placement are opaque layout identity keys. */
21
+ export interface WebProjectionSource {
22
+ element: HTMLElement;
23
+ sources?: HTMLElement[];
24
+ scrollElement?: HTMLElement;
25
+ control: Frame & {
26
+ id: string;
27
+ kind?: string;
28
+ placement?: string;
29
+ dark?: boolean;
30
+ rtl?: boolean;
31
+ scroll?: ScrollPlacement;
32
+ };
33
+ }
34
+ /** Multiple fixed fallback elements sharing one Native capture/cover/restore transaction. */
35
+ export interface ScopedWebProjectionSource extends WebProjectionSource {
36
+ scope: WebProjectionScope;
37
+ }
38
+ export interface PreparedWebProjection {
39
+ token: string;
40
+ parts: (Frame & {
41
+ ids: string[];
42
+ url: string;
43
+ })[];
44
+ }
45
+ /** Each action carries only the fields required by that phase of handoff. */
46
+ export type WebProjectionRequest = {
47
+ action: 'prepare';
48
+ revision: number;
49
+ viewportWidth: number;
50
+ ids: string[];
51
+ } | {
52
+ action: 'cover';
53
+ token: string;
54
+ transient?: boolean;
55
+ } | {
56
+ action: 'restore';
57
+ token: string;
58
+ viewportWidth: number;
59
+ parts: (Frame & {
60
+ ids: string[];
61
+ })[];
62
+ } | {
63
+ action: 'prepared' | 'painted' | 'restored' | 'release';
64
+ token: string;
65
+ } | {
66
+ action: 'reset';
67
+ };
68
+ /** Empty prepare results mean capture is unavailable; a partial capture is never valid. */
69
+ export type WebProjectionResult<Request extends WebProjectionRequest> = Request extends {
70
+ action: 'prepare';
71
+ } ? PreparedWebProjection | {
72
+ token?: never;
73
+ parts?: never;
74
+ } : Request extends {
75
+ action: 'cover' | 'restore';
76
+ } ? {
77
+ shown: boolean;
78
+ } : void;
79
+ export interface ListenerHandle {
80
+ remove(): Promise<void> | void;
81
+ }
82
+ /** Implement with the owning plugin's existing ordered transport. No engine plugin registration. */
83
+ export interface WebProjectionTransport {
84
+ send<Request extends WebProjectionRequest>(request: Request): Promise<WebProjectionResult<Request>>;
85
+ listen(listener: (event: {
86
+ active: boolean;
87
+ }) => void): Promise<ListenerHandle>;
88
+ }
package/dist/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
Binary file
@@ -0,0 +1,279 @@
1
+ # Capacitor plugin integration
2
+
3
+ Add Web projection and restoration to an existing Capacitor plugin without changing its public `registerPlugin()` export. The plugin keeps its native renderer and application API; the Engine coordinates its native view with a DOM fallback.
4
+
5
+ This guide covers dependencies, registration, notifications and teardown. See [projection behavior](projection.md) for shared DOM requirements, capture policies and advanced integration.
6
+
7
+ ## Requirements
8
+
9
+ This package declares support for Capacitor 8 (`>=8.0.0 <9`). The Engine library requires iOS 15+ and Android API 23+; the consuming Capacitor version or SDK may require a higher minimum. Composited Android capture requires API 26+ and the WebView features described in the [projection reference](projection.md#dom-and-native-surface-requirements).
10
+
11
+ ## Install inside a plugin
12
+
13
+ ```sh
14
+ npm install --save-exact @webview-native-ui/engine@0.0.1
15
+ ```
16
+
17
+ The npm archive contains TypeScript declarations, ESM, Swift sources and a podspec. Native dependencies must also be declared by the consuming plugin; an npm dependency alone links neither the Swift library nor the Android AAR.
18
+
19
+ The primary native distribution is Swift Package Manager. Depend on the repository-root library from your plugin:
20
+
21
+ ```swift
22
+ .package(url: "https://github.com/webview-native-ui/engine.git", exact: "0.0.1")
23
+ // In the plugin target's dependencies:
24
+ .product(name: "WebViewNativeUIEngine", package: "engine")
25
+ ```
26
+
27
+ The new coordinates start at `0.0.1`. While the API is pre-1.0, pin the same Engine release across npm, SwiftPM, Gradle and CocoaPods, and upgrade deliberately. Applications should retain their dependency lockfiles for reproducible builds.
28
+
29
+ SwiftPM resolves this repository's version tags such as `v0.0.1`. For unreleased integration tests, use a local checkout or an explicit tested commit.
30
+
31
+ `import WebViewNativeUIEngine` requires no Capacitor registration. The npm companion supplies DOM measurement and Web image handoff; SwiftPM resolves the native dependency independently of npm hoisting.
32
+
33
+ ### Android: add the Maven dependency
34
+
35
+ In the consuming plugin's `android/build.gradle`, add the Engine version matching its npm dependency:
36
+
37
+ ```groovy
38
+ dependencies {
39
+ implementation 'io.github.webview-native-ui:engine:0.0.1'
40
+ }
41
+ ```
42
+
43
+ Ensure `google()` and `mavenCentral()` are present in the consuming build's dependency repositories. For a build using centralized repositories, merge them into `android/settings.gradle`:
44
+
45
+ ```groovy
46
+ dependencyResolutionManagement {
47
+ repositories {
48
+ google()
49
+ mavenCentral()
50
+ }
51
+ }
52
+ ```
53
+
54
+ If the build uses project-level repositories instead, add them to its existing `repositories` block. Installing the npm package does not add this Gradle dependency. Use a version whose POM and AAR are available from Central; `PUBLISHING` only confirms acceptance and does not yet guarantee downloads.
55
+
56
+ ### CocoaPods compatibility through npm
57
+
58
+ CocoaPods uses the Swift sources and podspec shipped in npm; no CocoaPods Trunk publication is required. The plugin maintainer declares the matching dependency in the plugin's podspec:
59
+
60
+ ```ruby
61
+ s.dependency 'WebViewNativeUIEngine', '0.0.1'
62
+ ```
63
+
64
+ The maintainer must also document this one-time application setup. Install the matching engine version as a direct npm dependency, then add the local pod **inside the application's target, outside `def capacitor_pods`**, which Capacitor regenerates:
65
+
66
+ ```sh
67
+ npm install --save-exact @webview-native-ui/engine@0.0.1
68
+ ```
69
+
70
+ ```ruby
71
+ # ios/App/Podfile; adjust the path for a different native project layout.
72
+ target 'App' do
73
+ capacitor_pods
74
+ pod 'WebViewNativeUIEngine', :path => '../../node_modules/@webview-native-ui/engine'
75
+ end
76
+ ```
77
+
78
+ Run `npx cap sync ios` and rebuild. Keep the direct engine version aligned with the consuming plugin's dependency when upgrading. With a nonstandard node_modules layout, point `:path` at the installed engine package directory. An npm dependency alone does not register a Pod, and a podspec dependency cannot specify this local path. The engine intentionally has no Capacitor plugin registration or Podfile rewriting hook. SwiftPM consumers do not need this CocoaPods setup.
79
+
80
+ ## Register from the native plugin
81
+
82
+ Keep the plugin's normal `registerPlugin()` export and public methods unchanged. Create and retain a registration after creating the native renderer. The engine ships its Web runtime with the Swift/Android library, starts it in the current document and future documents, finds the existing fallback DOM, and subscribes to the plugin's notifications. Applications do not call a separate JS initializer.
83
+
84
+ The integration has three responsibilities:
85
+
86
+ 1. The consumer provides an existing, laid-out Web fallback container in the correct layer. Pass this projection destination as the required `projectionSelector: string`; there is no `null` / automatic DOM creation mode.
87
+ 2. The plugin registers its native views and notification names once on each platform.
88
+ 3. The plugin emits notifications after its updates and releases the registration at teardown.
89
+
90
+ ### iOS: add the registration to your `CAPPlugin` class
91
+
92
+ In `ios/Sources/ExamplePlugin/ExamplePlugin.swift`, retain the registration as a property and initialize it in `load()`, **after your existing renderer creates and attaches its view**.
93
+
94
+ In this diff, `nativeView` is the `UIView` your plugin already owns; its existing rendering code is represented by comments.
95
+
96
+ Use the existing **`jsName`**, not `identifier`: Capacitor uses `jsName` for JS plugin calls and event subscriptions. Do not repeat the plugin name in the Engine configuration.
97
+
98
+ ```diff
99
+ import Capacitor
100
+ import UIKit
101
+ +import WebViewNativeUIEngine
102
+
103
+ @objc(ExamplePlugin)
104
+ public class ExamplePlugin: CAPPlugin, CAPBridgedPlugin {
105
+ public let identifier = "ExamplePlugin"
106
+ public let jsName = "Example"
107
+ public let pluginMethods: [CAPPluginMethod] = [
108
+ CAPPluginMethod(name: "setColors", returnType: CAPPluginReturnPromise)
109
+ ]
110
+ private var nativeView: UIView?
111
+ + private var projection: NativeUIProjection?
112
+
113
+ public override func load() {
114
+ // Existing code creates and attaches nativeView here.
115
+ + do {
116
+ + projection = try NativeUIProjection(
117
+ + webView: bridge?.webView,
118
+ + plugin: jsName,
119
+ + projectionSelector: "#native-ui-fallback",
120
+ + receiveListeners: .init(
121
+ + update: ["appearanceChanged"],
122
+ + projection: .init(
123
+ + native: ["shown"],
124
+ + web: ["transitionStarted"],
125
+ + none: ["hidden"]
126
+ + )
127
+ + ),
128
+ + view: { [weak self] in
129
+ + self?.nativeView
130
+ + }
131
+ + )
132
+ + } catch {
133
+ + CAPLog.print("Native UI projection unavailable: \(error)")
134
+ + }
135
+ }
136
+
137
+ @objc func setColors(_ call: CAPPluginCall) {
138
+ DispatchQueue.main.async {
139
+ // Existing code applies the requested colors to nativeView.
140
+ + self.notifyListeners("appearanceChanged", data: [:])
141
+ call.resolve()
142
+ }
143
+ }
144
+ +
145
+ + public override func notifyListeners(_ eventName: String, data: [String: Any]?, retainUntilConsumed: Bool) {
146
+ + projection?.receive(eventName, data: data)
147
+ + super.notifyListeners(eventName, data: data, retainUntilConsumed: retainUntilConsumed)
148
+ + }
149
+ +
150
+ + deinit {
151
+ + projection?.destroy()
152
+ + }
153
+ }
154
+ ```
155
+
156
+ Pass `bridge?.webView` directly. If the WebView is unavailable, the Engine throws an initialization error into the same `catch`; a separate guard or force unwrap is unnecessary.
157
+
158
+ If the view is created later in an existing `initialize` / `show` method, put the registration there after view creation instead of in `load()`. Retain one registration for that renderer's lifetime; do not create another on every update. When replacing a renderer, destroy its old registration before registering the replacement.
159
+
160
+ ### Android: add the registration to your `Plugin` class
161
+
162
+ Make the corresponding changes in `android/src/main/java/<your-package>/ExamplePlugin.kt`. **`pluginHandle.id`** is Capacitor's registered plugin name, derived from `@CapacitorPlugin`; no second name string is needed.
163
+
164
+ ```diff
165
+ import android.view.View
166
+ import com.getcapacitor.Plugin
167
+ import com.getcapacitor.PluginCall
168
+ import com.getcapacitor.PluginMethod
169
+ import com.getcapacitor.annotation.CapacitorPlugin
170
+ +import android.util.Log
171
+ +import com.getcapacitor.JSObject
172
+ +import io.github.webview_native_ui.engine.NativeUIProjection
173
+ +import io.github.webview_native_ui.engine.NativeUIProjection.ReceiveListeners
174
+
175
+ @CapacitorPlugin(name = "Example")
176
+ class ExamplePlugin : Plugin() {
177
+ private var nativeView: View? = null
178
+ + private var projection: NativeUIProjection? = null
179
+
180
+ override fun load() {
181
+ // Existing code creates and attaches nativeView here.
182
+ + projection = runCatching {
183
+ + NativeUIProjection.install(bridge.webView)
184
+ + NativeUIProjection(
185
+ + window = activity.window,
186
+ + webView = bridge.webView,
187
+ + plugin = pluginHandle.id,
188
+ + projectionSelector = "#native-ui-fallback",
189
+ + receiveListeners = ReceiveListeners(
190
+ + update = listOf("appearanceChanged"),
191
+ + projection = ReceiveListeners.Projection(
192
+ + native = listOf("shown"),
193
+ + web = listOf("transitionStarted"),
194
+ + none = listOf("hidden")
195
+ + )
196
+ + ),
197
+ + view = { nativeView }
198
+ + )
199
+ + }.onFailure {
200
+ + Log.e(javaClass.simpleName, "Native UI projection unavailable", it)
201
+ + }.getOrNull()
202
+ }
203
+
204
+ @PluginMethod
205
+ fun setColors(call: PluginCall) {
206
+ activity.runOnUiThread {
207
+ // Existing code applies the requested colors to nativeView.
208
+ + notifyListeners("appearanceChanged", JSObject())
209
+ call.resolve()
210
+ }
211
+ }
212
+ +
213
+ + override fun notifyListeners(eventName: String, data: JSObject, retainUntilConsumed: Boolean) {
214
+ + projection?.receive(eventName, data)
215
+ + super.notifyListeners(eventName, data, retainUntilConsumed)
216
+ + }
217
+ +
218
+ + override fun handleOnDestroy() {
219
+ + projection?.close()
220
+ + projection = null
221
+ + super.handleOnDestroy()
222
+ + }
223
+ }
224
+ ```
225
+
226
+ On Android, call `NativeUIProjection.install(bridge.webView)` in plugin `load()`,
227
+ before the first navigation, even when SDK views arrive later. Include installation
228
+ in the same error boundary as registration; if it fails, keep the existing Web
229
+ fallback and do not retry installation after navigation. Registrations then
230
+ share that main-frame, origin-restricted channel; they do not install new message
231
+ listeners into a loaded WebView. This avoids a WebView native crash reproduced when
232
+ registering an asynchronously loaded AdMob view. The registration constructor can
233
+ install the channel only on an un-navigated WebView; late installation fails with
234
+ an actionable error instead of attempting unsafe injection. All registrations on
235
+ the same WebView must use the same allowed origins. Closing a registration removes
236
+ only its owner from the channel, so other slots continue working. The shared channel
237
+ remains installed for the WebView lifetime; registrations must still be retained
238
+ and closed by their consuming plugin.
239
+
240
+ Both diffs add a private property, native registration, a notification override, an update notification and teardown. They add no Engine methods to `pluginMethods`, no public JS wrapper, and no application-side Engine initializer.
241
+
242
+ Keep your plugin's existing `registerPlugin()` export. Use the same event names in the registration and `notifyListeners`; if the plugin already emits a suitable event (such as `tabSelected`), list that event instead of emitting it twice.
243
+
244
+ ### Notifications during startup
245
+
246
+ The notification override above lets the Engine retain the latest matching projection destination before the Web runtime subscribes. No separate state variable or initial-state callback is needed. Forward every notification to `super` as usual: the Engine records state without replaying notifications, updates, or user actions. Without a destination notification, it infers the initial destination from native view visibility. Registration must exist before the notifications it should observe.
247
+
248
+ If your plugin owns multiple registrations, pass the notification to each registration; `receiveListeners.match` selects the owning surface. Appearance updates do not change the destination. The renderer still owns native placement and visibility before connection.
249
+
250
+ With the default Web fallback, scrolling without a prepared image or native scroll binding keeps the Web fallback visible until the renderer confirms current native placement with its native-destination notification. An appearance update alone is not that confirmation. Consumers choosing native failure recovery must keep their own native geometry current.
251
+
252
+ ### Which events to emit
253
+
254
+ All incoming event declarations belong to `receiveListeners`. Its `update` list refreshes the image, its `projection` lists select the destination, and its optional `match` filters notifications for the owning surface.
255
+
256
+ | Notification | Where to emit it in the existing plugin |
257
+ | --------------------------------------- | ------------------------------------------------------------------------------------- |
258
+ | `appearanceChanged` (an `update` event) | After a successful native appearance update, such as `setColors` |
259
+ | `transitionStarted` (`web`) | Before the fallback DOM starts moving or a Web layer covers the native view |
260
+ | `shown` (`native`) | After the plugin's existing show operation, or when returning from the Web projection |
261
+ | `hidden` (`none`) | After the plugin's existing hide operation |
262
+
263
+ The names in the examples are conventions you choose, not reserved Engine methods. An `update` event refreshes the prepared image without changing the requested destination. It does not call `setColors` again.
264
+
265
+ Emit `transitionStarted` before the DOM starts moving, `shown` when native projection is requested again, and `hidden` after the plugin's own hide operation. Native capture, URL conversion, image preparation, draw acknowledgement, image retirement and listener cleanup stay inside the engine. The engine never invokes the plugin's `show`, `hide`, selection or ad-loading methods. End the registration with `projection.destroy()` on iOS or `projection.close()` on Android when the renderer is destroyed. Retain the registration for its full lifetime and call native APIs on the UI thread.
266
+
267
+ ## DOM, scrolling and overlays
268
+
269
+ Provide one laid-out DOM container for each registration, in the layer where its Web projection belongs. It may be inserted after registration. The plugin still owns native view placement and sizing; the Engine does not create or size either view for you.
270
+
271
+ Read the [DOM and native surface requirements](projection.md#dom-and-native-surface-requirements) before integrating custom elements, SDK content or multiple surfaces. Scroll tracking and image handoff are internal to the registration. For Ionic applications, optionally enable [Ionic overlay support](projection.md#ionic-overlay-support-optional) once during application startup. Other frameworks emit the configured projection notifications from their own transition and overlay lifecycle.
272
+
273
+ ## Animated native controls
274
+
275
+ Native appearance updates prepare replacement images after a 50 ms debounce by default.
276
+ If your control continues animating after its update notification, set `captureDelayMs`
277
+ on the native registration (Swift: `captureDelayMs: 600`; Kotlin: `captureDelayMs = 600`).
278
+ This changes background image preparation, not overlay presentation timing.
279
+ See [capture timing](projection.md#capture-timing) for the cache behavior and measured guidance.
@@ -0,0 +1,198 @@
1
+ # Cordova plugin integration
2
+
3
+ The same npm package, Swift library and Android AAR support Capacitor and Cordova. Engine is a library used by plugin maintainers, not a separately registered Cordova plugin. A Cordova application does not need `@capacitor/core` or a Capacitor native SDK.
4
+
5
+ The consuming plugin still owns its native view and the corresponding DOM, including placement, size and stacking order. Supply an existing selector such as `native-ad` or `#player`. The DOM may be added after initialization. Image preparation, scroll handling, overlays and restoration use the common Engine implementation.
6
+
7
+ ## Requirements
8
+
9
+ The integration is verified with cordova-ios 8.1.1 and cordova-android 15.1.0 using their standard WebViews. The Engine itself requires iOS 15+ and Android API 23+; the Cordova host or SDK may require a higher minimum. Composited Android capture requires API 26+.
10
+
11
+ ## Dependencies
12
+
13
+ Use the same Engine release for the Web package and native libraries. The API is pre-1.0; pin versions and retain dependency lockfiles.
14
+
15
+ ```sh
16
+ npm install --save-exact @webview-native-ui/engine@0.0.1
17
+ ```
18
+
19
+ Declare the native dependencies in the consuming plugin as well. npm installation alone does not link either native library.
20
+
21
+ For Swift Package Manager:
22
+
23
+ ```swift
24
+ .package(url: "https://github.com/webview-native-ui/engine.git", exact: "0.0.1")
25
+ // In the plugin target's dependencies:
26
+ .product(name: "WebViewNativeUIEngine", package: "engine")
27
+ ```
28
+
29
+ For the plugin's Android Gradle configuration:
30
+
31
+ ```groovy
32
+ dependencies {
33
+ implementation 'io.github.webview-native-ui:engine:0.0.1'
34
+ }
35
+ ```
36
+
37
+ Keep `google()` and `mavenCentral()` in the consuming build's dependency repositories.
38
+
39
+ ## iOS
40
+
41
+ In a Cordova SwiftPM plugin, declare both Cordova and Engine as dependencies of the plugin target; neither framework becomes a dependency of the Engine target. Keep the plugin's existing SwiftPM product and source-file declarations.
42
+
43
+ In the iOS platform section of `plugin.xml`, register the plugin for startup if its renderer should appear before the first application call:
44
+
45
+ ```xml
46
+ <platform name="ios" package="swift">
47
+ <config-file target="config.xml" parent="/*">
48
+ <feature name="ExamplePlugin">
49
+ <param name="ios-package" value="ExamplePlugin" />
50
+ <param name="onload" value="true" />
51
+ </feature>
52
+ </config-file>
53
+ <!-- Keep the plugin's existing source-file declarations. -->
54
+ </platform>
55
+ ```
56
+
57
+ Merge these entries into the existing platform sections rather than adding duplicate sections. The [integration fixture](https://github.com/webview-native-ui/engine/tree/main/tests/cordova/plugin) includes complete plugin.xml, SwiftPM and Gradle wiring.
58
+
59
+ The examples extend an existing renderer: `nativeView` is its attached, positioned view, not a view created by the Engine.
60
+
61
+ ```swift
62
+ import Cordova
63
+ import WebKit
64
+ import WebViewNativeUIEngine
65
+
66
+ @objc(ExamplePlugin)
67
+ class ExamplePlugin: CDVPlugin {
68
+ private var projection: NativeUIProjection?
69
+ private var nativeView: UIView?
70
+
71
+ override func pluginInitialize() {
72
+ // Existing renderer creates, attaches and positions nativeView here.
73
+ do {
74
+ projection = try NativeUIProjection(
75
+ webView: webView as? WKWebView,
76
+ plugin: "ExamplePlugin",
77
+ projectionSelector: "#player",
78
+ receiveListeners: .init(
79
+ update: ["contentChanged"],
80
+ projection: .init(native: ["shown"], web: ["covered"], none: ["hidden"])
81
+ ),
82
+ runtime: .cordova,
83
+ view: { [weak self] in self?.nativeView }
84
+ )
85
+ } catch {
86
+ // Keep the existing Web fallback when registration is unavailable.
87
+ NSLog("Native UI projection unavailable: %@", String(describing: error))
88
+ }
89
+ }
90
+
91
+ override func dispose() {
92
+ projection?.destroy()
93
+ projection = nil
94
+ super.dispose()
95
+ }
96
+ }
97
+ ```
98
+
99
+ If the iOS renderer loads later, create the registration after its view is attached, and destroy the old registration before replacing the renderer.
100
+
101
+ Forward the plugin's existing presentation/content notifications with `projection?.receive("shown")`, `receive("hidden")` or `receive("contentChanged")`. Put this alongside the existing callback/event delivery, or in the plugin's shared notification method. `receive` updates the Engine session only: it does not deliver a second application callback. A matching destination emitted before JS startup is retained for the initial connection.
102
+
103
+ Cordova iOS's built-in `WkWebView.convertFilePath` serves the prepared PNGs. Engine resolves this internally. No file plugin, additional permission or author-provided URL converter is required. The default allowed origins include `app://localhost`; pass the actual trusted origin if the app changes its scheme or hostname.
104
+
105
+ ## Android
106
+
107
+ Declare the Maven dependency in the existing Cordova plugin Gradle configuration. Also declare `implementation 'androidx.webkit:webkit:1.14.0'` when using the `CordovaPluginPathHandler` signature; Cordova's internal WebKit dependency is not exposed on the plugin compile classpath. In the Android platform section of the plugin's `plugin.xml`, merge this registration so initialization runs before the first WebView navigation:
108
+
109
+ ```xml
110
+ <platform name="android">
111
+ <config-file target="res/xml/config.xml" parent="/*">
112
+ <feature name="ExamplePlugin">
113
+ <param name="android-package" value="com.example.ExamplePlugin" />
114
+ <param name="onload" value="true" />
115
+ </feature>
116
+ </config-file>
117
+ <!-- Keep existing source-file and Gradle framework declarations. -->
118
+ </platform>
119
+ ```
120
+
121
+ ```kotlin
122
+ import android.view.View
123
+ import android.webkit.WebView
124
+ import io.github.webview_native_ui.engine.NativeUIProjection
125
+ import org.apache.cordova.CordovaPlugin
126
+ import org.apache.cordova.CordovaPluginPathHandler
127
+
128
+ class ExamplePlugin : CordovaPlugin() {
129
+ private var projection: NativeUIProjection? = null
130
+ private var nativeView: View? = null
131
+
132
+ override fun pluginInitialize() {
133
+ val web = webView.view as WebView
134
+ projection = runCatching {
135
+ // One origin-restricted channel per WebView, shared with later registrations.
136
+ NativeUIProjection.install(web)
137
+ // Existing renderer creates, attaches and positions nativeView here.
138
+ NativeUIProjection(
139
+ window = cordova.activity.window,
140
+ webView = web,
141
+ plugin = serviceName,
142
+ projectionSelector = "#player",
143
+ receiveListeners = NativeUIProjection.ReceiveListeners(
144
+ update = listOf("contentChanged"),
145
+ projection = NativeUIProjection.ReceiveListeners.Projection(
146
+ native = listOf("shown"), web = listOf("covered"), none = listOf("hidden")
147
+ )
148
+ ),
149
+ runtime = NativeUIProjection.Runtime.CORDOVA,
150
+ view = { nativeView }
151
+ )
152
+ }.onFailure {
153
+ android.util.Log.e(javaClass.simpleName, "Native UI projection unavailable", it)
154
+ }.getOrNull()
155
+ }
156
+
157
+ override fun getPathHandler() = CordovaPluginPathHandler { path ->
158
+ projection?.handleResource(path)
159
+ }
160
+
161
+ override fun onDestroy() {
162
+ projection?.close()
163
+ projection = null
164
+ super.onDestroy()
165
+ }
166
+ }
167
+ ```
168
+
169
+ Use `projection?.receive(eventName, data)` at the existing notification point, as on iOS. Native view creation and placement remain on the UI thread. If the renderer loads asynchronously, keep `install(web)` in `pluginInitialize()` and create the registration after the view is ready. Close the old registration before replacing that renderer.
170
+
171
+ The `PathHandler` delegates same-origin image requests to Engine. It serves only the registration's PNG files in app-private cache storage; unrelated paths return `null`. If the plugin already has a handler, combine them with `projection?.handleResource(path) ?: existingHandler.handle(path)`. For multiple registrations, delegate to the matching owner. Keep the handler installed for the WebView lifetime. No WebViewClient replacement or storage permission is needed.
172
+
173
+ The defaults support Cordova's `https://localhost` and `http://localhost`. If the hostname changes, pass the same explicit origin set to `install` and each registration. Wildcard origins and `file://` app origins are not supported by this integration.
174
+
175
+ ## Lifetime and verification
176
+
177
+ Keep the registration for the WebView lifetime. Engine reconnects after a document reload and clears the old document's image state. If the plugin destroys its native UI in `onReset`, update its view provider and emit the appropriate destination; do not leave a registration pointing at a destroyed view. Dispose registrations when the plugin/WebView is destroyed.
178
+
179
+ Capacitor registrations retain their existing default. The Cordova integration requires the standard Cordova WebView resource handler. Running a Cordova plugin inside a Capacitor app is not covered by this integration; the host must use the Capacitor integration instead. See the shared [DOM and native surface requirements](projection.md#dom-and-native-surface-requirements) for selector, layout and capture rules. [Ionic overlay support](projection.md#ionic-overlay-support-optional) remains optional; plain Cordova apps need not enable it.
180
+
181
+ The integration fixture uses Cordova CLI 13, cordova-ios 8.1.1 and cordova-android 15.1.0 with their standard WebViews. It checks actual PNG handoff, native restoration and hidden-state retention across document reload, not merely JS bridge mocks. Older Cordova releases and custom WebView engines require separate verification.
182
+
183
+ Run the real consumer checks with an already booted simulator/emulator:
184
+
185
+ ```sh
186
+ npm run test:cordova -- ios SIMULATOR_UDID
187
+ npm run test:cordova -- android emulator-5554
188
+ ```
189
+
190
+ The script creates a disposable app, uses local SwiftPM/Maven Engine artifacts, and records the application result in the printed temporary directory. It never publishes to npm or Maven. Android requires JDK 21+, SDK 36 and `ANDROID_HOME`; iOS requires Xcode.
191
+
192
+ ## Animated native controls
193
+
194
+ Native appearance updates prepare replacement images after a 50 ms debounce by default.
195
+ If your control continues animating after its update notification, set `captureDelayMs`
196
+ on the native registration (Swift: `captureDelayMs: 600`; Kotlin: `captureDelayMs = 600`).
197
+ This changes background image preparation, not overlay presentation timing.
198
+ See [capture timing](projection.md#capture-timing) for the cache behavior and measured guidance.
@@ -0,0 +1,3 @@
1
+ # Cordova plugin integration
2
+
3
+ This guide has moved to [Cordova plugin integration](cordova-plugin.md).
@@ -0,0 +1,52 @@
1
+ # Development and releases
2
+
3
+ ## Development
4
+
5
+ The public entry points are `src/index.ts` and `src/ionic.ts`, with shared contracts in `src/types.ts`. Implementation is grouped by responsibility:
6
+
7
+ - `src/native/`: bridge transport, native sessions, startup and resource URLs.
8
+ - `src/projection/`: image handoff, projection ownership, events and styles.
9
+ - `src/dom/`: geometry, scrolling, visibility and overlay coordination.
10
+
11
+ `npm run build` bundles `src/native/bootstrap.ts` into `runtime/native-ui-engine.js`, the shared WebView runtime. Android packages this file directly as an asset. The build also copies it into `ios/Sources/WebViewNativeUIEngine/Resources` because SwiftPM requires resources inside the target directory. Both generated files are committed so native consumers do not need Node.js. Edit the TypeScript source, not either generated file; CI checks regeneration and verifies the runtime included in npm and Maven archives.
12
+
13
+ Browser tests mirror these groups under `tests/`. `tests/cordova/` contains the real native consumer fixture.
14
+
15
+ Use Node.js 24, matching CI. From this repository:
16
+
17
+ ```sh
18
+ npm ci
19
+ npm run build
20
+ npm run lint
21
+ npx playwright install chromium
22
+ npm test
23
+ xcodebuild -scheme WebViewNativeUIEngine -destination 'platform=iOS Simulator,id=<booted simulator UUID>' test
24
+ ```
25
+
26
+ Lint combines strict TypeScript checking, the standard ESLint/TypeScript recommended rules, and typed Promise checks for `src`. Scripts and tests receive syntax-level linting; Prettier owns formatting. `npm run format` applies formatting only. Bridge payloads and test doubles may use explicit `any`; production boundary validation remains necessary. An explicit `void` marks background work, but does not handle a rejected Promise. Android uses `lintRelease` with warnings treated as errors in CI; Swift is compiled and tested on an iOS simulator.
27
+
28
+ The engine is versioned independently of its consumers. Publish order is the native Maven artifact → npm engine; consumers upgrade separately. npm releases verify that the matching POM and AAR exist on Maven Central before publication. No publication is performed by build or test commands. Tests cover plain DOM, fractional/RTL geometry, stale ACKs, image ownership and native WKWebView scroll tracking; consumer tests remain responsible for Ionic/SDK integration.
29
+
30
+ CI-only setup, packaging commands and GitHub outputs are defined in `.github/workflows/`. Scripts retain the runtime build, reusable consumer/package verification, and tested publication logic (Central state handling and npm artifact comparison).
31
+
32
+ ## Maven publication
33
+
34
+ The `Native UI Engine Maven Release` workflow is manually dispatched on `main` with the exact engine package version. That commit must first pass `Native UI Engine` CI. It signs an AAR, source archive, generated Kotlin API documentation and Maven metadata, uploads once, and completes when Central reports `PUBLISHING` or `PUBLISHED`. The deployment ID and state changes are recorded in the run summary. `PUBLISHING` means validation passed and Central accepted publication; it does not guarantee that artifacts can already be downloaded. This workflow does not wait for distribution. The npm release still requires the matching POM and AAR to be available on Maven Central. Existing coordinates are never overwritten; if an upload times out, inspect the recorded deployment in Central before taking further action.
35
+
36
+ Configure the repository's Actions secrets with `CENTRAL_USERNAME`, `CENTRAL_PASSWORD` (a Central user token), `MAVEN_SIGNING_KEY` (ASCII-armored private key) and `MAVEN_SIGNING_PASSWORD`. The signing public key must be available to Central. GitHub secrets are scoped to this repository.
37
+
38
+ For local packaging verification, run `python3 scripts/native-ui-engine-release/verify.py` with JDK 21, Android SDK 36 and GnuPG. It creates a disposable key, validates signatures and checksums, and deletes its test ZIP without uploading. Publication always rebuilds from clean outputs with the real signing key. Publish its Maven artifact before the corresponding npm release, including prereleases.
39
+
40
+ ## Maintainer release setup
41
+
42
+ This repository starts from the merged Engine implementation at [ionic-theme-ios27 `b218d8b`](https://github.com/rdlabo-dev/ionic-theme-ios27/commit/b218d8bfe0c87c02addc668fee9c7aa333489486). Extraction preserves the merged implementation; Cordova host support is developed in this repository. The renamed package starts at version `0.0.1`. Publish the same version for npm, SwiftPM and Maven; do not reuse the old package coordinates.
43
+
44
+ The npm organization `webview-native-ui` and Maven Central namespace `io.github.webview-native-ui` are registered. Maintain npm trusted publishing for `webview-native-ui/engine`, workflow `release.yml`, and provision the Maven secrets above in this repository. Credentials are not copied by moving source files.
45
+
46
+ 1. Prepare the next version and release notes on `main`; use `npm run release` to create a standard `vX.Y.Z` tag/GitHub release. Keep the GitHub release as a draft until Maven is downloadable.
47
+ 2. After that main commit passes CI, dispatch `native-ui-engine-release.yml` with the exact package version.
48
+ 3. Central `PUBLISHING` is an accepted upload, not download readiness. Once the POM and AAR are available, publish the prepared GitHub release. `release.yml` verifies the tag, package version, CI and Maven artifacts before npm publication (`next` for prereleases, `latest` otherwise).
49
+
50
+ No build or test command publishes a package. Existing npm/Maven versions are never overwritten.
51
+
52
+ To rerun release verification for an existing tag, dispatch `release.yml` with that tag. It checks the original tagged commit and skips npm publication only when the existing package contents match. Keep the tag unchanged. Release tooling uses the Node.js 24 bundled npm, matching CI.