Feature/add wasmjs support #1
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…the settings eager in sample app.
add support for iOS isInspectable property vis webSettings
This commit introduces new run configurations for the `androidApp` and `iosApp` modules. It also updates the existing `desktopApp` run configuration.
This commit updates various dependencies to their latest versions: - Kotlin: 1.9.23 -> 2.1.20 - AGP: 8.1.1 -> 8.9.3 - Compose: 1.7.1 -> 1.8.0 - Coroutines: 1.8.0 -> 1.10.2 - Voyager: 1.0.0-rc10 -> 1.1.0-beta01 - Android AppCompat: 1.6.1 -> 1.7.0 - Android Activity Compose: 1.8.2 -> 1.10.1 - Android WebKit: 1.10.0 -> 1.13.0 - Compose Navigation: 2.8.0-alpha08 -> 2.8.0-alpha13 - AtomicFU: 0.23.2 -> 0.27.0 - Kotlin Serialization JSON: 1.6.0 -> 1.8.1 It also introduces `kotlin-compose` plugin and `material-icons-core` dependency. Build configuration changes: - `android.compileSdk` and `android.targetSdk` bumped from 34 to 36. - `targetHierarchy.default()` replaced with `applyDefaultHierarchyTemplate()` in `sample/shared/build.gradle.kts`. - JVM target for Android in `sample/shared/build.gradle.kts` set to 17 using `compilerOptions`. Android sample app changes: - `MainActivity` now inherits from `ComponentActivity` instead of `AppCompatActivity`. - `enableEdgeToEdge()` is called in `MainActivity`. - `AndroidManifest.xml` updated, including theme change to `@android:style/Theme.Material.Light.NoActionBar`. - Minor null check improvement in `FileChooseWebViewSample.android.kt`. Additionally, `.kotlin` directory is added to `.gitignore`.
Updated instances of "KMM" to "KMP" in the README, sample code, and documentation to reflect the current terminology for Kotlin Multiplatform.
This commit resolves an issue where local HTML files were not loading correctly on desktop platforms using KCEF.
The fix involves:
- Implementing the `loadHtmlFile` method in `DesktopWebView.kt` to read the HTML file from resources.
- Inlining external CSS and JavaScript resources directly into the HTML content. This is necessary because KCEF's `loadHtml` does not support custom base URLs for local files, preventing relative paths from resolving correctly.
- Adding error handling to display an error page if the file cannot be loaded or resources cannot be inlined.
- Removing the unused `fileContent` state and related logic from `WebView.desktop.kt`.
- Updating the desktop sample app (`main.kt`) with an improved loading screen and restart required screen for a better user experience during KCEF initialization.
- Adding `@file:Suppress("EXPECT_ACTUAL_CLASSIFIERS_ARE_IN_BETA_WARNING")` to relevant files.
This commit adds the `@ObjCSignatureOverride` annotation to several methods in the `WKNavigationDelegate` class. This is necessary because these methods override Objective-C methods with the same signature, and the annotation clarifies this for the Kotlin compiler. The affected methods are: - `webView(webView:didStartProvisionalNavigation:)` - `webView(webView:didCommitNavigation:)` - `webView(webView:didFinishNavigation:)`
This commit streamlines the content loading logic in `WebView.kt` by removing the platform-specific check (`!getPlatform().isDesktop()`). Now, the same `LaunchedEffect` block handles content loading for all platforms, including desktop. This change also applies to the JavaScript bridge injection, which will now occur for desktop platforms as well.
This commit wraps the main content of each sample screen with `Scaffold` to prevent the `TopAppBar` from overlapping with the system status bar. Additionally, padding is added to the `TopAppBar` to account for the status bar height.
This commit introduces a new enum `WebViewFileReadType` to allow more flexible loading of HTML files in the WebView. This enum specifies whether the HTML file should be loaded from platform-specific asset resources or from the Compose Multiplatform `composeResources/files` directory.
- `WebViewFileReadType.ASSET_RESOURCES`: Loads HTML files from the traditional platform asset/resource folders.
- `WebViewFileReadType.COMPOSE_RESOURCE_FILES`: Loads HTML files using `Res.getUri()`, enabling access to files in `composeResources/files`.
Changes include:
- Added `WebViewFileReadType` enum.
- Updated `WebContent.File` to include `readType`.
- Modified `IWebView.loadHtmlFile` and its platform implementations (Android, Desktop) to accept and handle `readType`.
- Android: Loads via `file:///android_asset/` for `ASSET_RESOURCES` or the provided URI for `COMPOSE_RESOURCE_FILES`.
- Desktop:
- For `ASSET_RESOURCES`, extracts the HTML and its associated resources from the JAR's `assets/` directory to a temporary folder before loading.
- For `COMPOSE_RESOURCE_FILES`, extracts the HTML and its associated resources (based on the `jar:file:` URI from `Res.getUri()`) to a temporary folder before loading.
- Added a shutdown hook to clean up the temporary directory.
- Updated `rememberWebViewStateWithHTMLFile` to accept `readType`.
- Updated samples to demonstrate loading HTML files from `composeResources/files`.
- Moved sample HTML, CSS, and JS files to `composeResources/files/samples/`.
- Added a new `styles.css` for the sample HTML.
This change enhances the flexibility of loading local HTML content, particularly by supporting the recommended Compose Multiplatform resource handling.
The `rememberWebViewStateWithHTMLFile` composable that doesn't explicitly take a `WebViewFileReadType` is now deprecated. Users should migrate to the overload that requires specifying the `readType` to make the loading source explicit. For previous behavior, pass `WebViewFileReadType.ASSET_RESOURCES`.
This commit introduces support for the `wasmJs` target in the KMP WebView library. This allows the WebView component to be used in Kotlin/WasmJs applications, rendering web content within an HTML `iframe` element.
**Key changes:**
- **WasmJs Platform Implementation:**
- Added `WasmJsWebView`, `HtmlView`, `HtmlViewNavigator`, and `WasmJsCookieManager` to provide the core WebView functionality for the WasmJs target.
- Utilizes an `iframe` element for rendering web content.
- Implemented navigation (back, forward, reload, load URL, load HTML), JavaScript evaluation, and cookie management.
- Introduced `JsInterop.kt` for JavaScript interop functions.
- **Gradle Configuration:**
- Added `wasmJs` target configuration in `webview/build.gradle.kts`.
- Configured webpack dev server to serve static content from root and project directories.
- **WebSettings:**
- Added `PlatformWebSettings.WasmJSWebSettings` to allow customization of iframe-specific properties like border, sandboxing, fullscreen, and custom styles.
- Integrated these settings into the `createWebViewWithSettings` factory function.
- **State Management:**
- Introduced `HtmlViewState` and `WasmJsWebViewState` for managing the state of the HTML view and the WasmJs WebView respectively.
- Implemented `WebViewStateAdapter` to synchronize state between the common `WebViewState` and the platform-specific WasmJs state.
- **JavaScript Bridge:**
- Implemented `WebViewJsBridge.kt` for WasmJs, enabling two-way communication between Kotlin and JavaScript within the iframe.
- Provided `createJsBridgeScript` and `injectJsBridgeToHtml` helper functions for injecting the bridge script.
- **File Loading:**
- `loadHtmlFile` now supports loading files from `assets/` (for traditional setups) and directly by filename (assuming they are served by the WasmJs environment).
- **Composable API:**
- `ActualWebView` implementation for `wasmJs` uses the new `HtmlView` composable.
- Introduced `rememberHtmlViewNavigator` and `rememberHtmlViewState`.
- **Utilities:**
- Added `getPlatform.kt` for WasmJs.
- `WebViewBundle.kt` for WasmJs (currently a simple implementation).
**How it works:**
The `HtmlView` composable creates and manages an `iframe` element. The `HtmlViewNavigator` handles navigation events by interacting with the `iframe`'s history and location. Content is loaded by setting the `src` or `srcdoc` attribute of the `iframe`. The JavaScript bridge allows Kotlin code to call JavaScript functions within the `iframe` and vice-versa, facilitating more complex interactions.
This addition significantly expands the reach of the KMP WebView library, enabling its use in web applications built with Kotlin/WasmJs.
Add addTempDirectoryRemovalHook for removing extracted html file
… feature/add-wasmjs-support # Conflicts: # webview/src/iosMain/kotlin/com/multiplatform/webview/web/WebView.ios.kt
This commit updates the sample application to better handle edge-to-edge display on Android and iOS. On Android: - The status bar style is set to `SystemBarStyle.dark(Color.TRANSPARENT)` to ensure content draws behind it. In the shared UI: - A `TopAppBar` is added to the `MainScreen`. - Padding is applied to the `TopAppBar` to account for the status bar height, preventing overlap. These changes provide a more consistent and visually appealing experience when the app is displayed edge-to-edge.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ Add WASM & Desktop Enhancements, Bug Fixes, and Upgrades
This PR includes a variety of new features, improvements, and fixes:
⸻
🧩 WASM JS Support via iframe:
• Load HTML from a file or raw HTML data
• Limited support for raw links (due to iframe security restrictions)
• JSBridge integration for cross-platform scripting
• Basic navigation support (limited for raw links)
⸻
💻 Desktop Improvements:
• Fixed file-loading issues by using a temporary folder with automatic cleanup
• Enhanced loading UI for a smoother user experience
⸻
🧪 HTML Sample Enhancements:
• Updated to demonstrate style support
• File picker now supports media preview across all types
⸻
🔌 Platform Integration:
• Added JSBridge support to both Desktop and WASM platforms
• Added WebViewFileReadType to support files from both resources and composeResources/files
• Added run configurations for all platforms
⸻
🧹 Maintenance & Upgrades:
⬆️ Upgraded:
• Android Gradle Plugin (AGP)
• Kotlin Multiplatform (KMP)
• Jetpack Compose
• Kotlin version
• Other dependencies
🗑️ Removed deprecated code
📱 Increased Android compiled SDK to 36 and implemented EdgeToEdge screen handling
🔧 Updated all references from KMM to KMP in strings