Swift framework to interact with JavaScript through WebAssembly.
This JavaScript code
const alert = window.alert; const document = window.document; const divElement = document.createElement("div"); divElement.innerText = "Hello, world"; const body = document.body; body.appendChild(divElement); const pet = { age: 3, owner: { name: "Mike", }, }; alert("JavaScript is running on browser!");
Can be written in Swift using JavaScriptKit
import JavaScriptKit let document = JSObject.global.document var divElement = document.createElement("div") divElement.innerText = "Hello, world" _ = document.body.appendChild(divElement) struct Owner: Codable { let name: String } struct Pet: Codable { let age: Int let owner: Owner } let jsPet = JSObject.global.pet let swiftPet: Pet = try JSValueDecoder().decode(from: jsPet) _ = JSObject.global.alert!("Swift is running in the browser!")
Starting with SwiftWasm 5.5 you can use async
/await
with JSPromise
objects. This requires a few additional steps though (you can skip these steps if your app depends on Tokamak):
JavaScriptEventLoop
in your Packages.swift
:.target( name: "JavaScriptKitExample", dependencies: [ "JavaScriptKit", .product(name: "JavaScriptEventLoop", package: "JavaScriptKit"), ] )
await
and/or Task
APIs (most likely in main.swift
):import JavaScriptEventLoop
await
and/or Task
APIs (again, most likely in main.swift
):JavaScriptEventLoop.installGlobalExecutor()
Then you can await
on the value
property of JSPromise
instances, like in the example below:
import JavaScriptKit import JavaScriptEventLoop let alert = JSObject.global.alert.function! let document = JSObject.global.document private let jsFetch = JSObject.global.fetch.function! func fetch(_ url: String) -> JSPromise { JSPromise(jsFetch(url).object!)! } JavaScriptEventLoop.installGlobalExecutor() struct Response: Decodable { let uuid: String } var asyncButtonElement = document.createElement("button") asyncButtonElement.innerText = "Fetch UUID demo" asyncButtonElement.onclick = .object(JSClosure { _ in Task { do { let response = try await fetch("https://httpbin.org/uuid").value let json = try await JSPromise(response.json().object!)!.value let parsedResponse = try JSValueDecoder().decode(Response.self, from: json) alert(parsedResponse.uuid) } catch { print(error) } } return .undefined }) _ = document.body.appendChild(asyncButtonElement)
JavaScriptEventLoop
activation in XCTest suites
If you need to execute Swift async functions that can be resumed by JS event loop in your XCTest suites, please add JavaScriptEventLoopTestSupport
to your test target dependencies.
.testTarget( name: "MyAppTests", dependencies: [ "MyApp", + "JavaScriptEventLoopTestSupport", ] )
Linking this module automatically activates JS event loop based global executor by calling JavaScriptEventLoop.installGlobalExecutor()
.unsafeFlags(["-Xfrontend", "-disable-availability-checking"])
in Package.swift
manifest of your package that depends on JavaScriptKit. You can also use Xcode 13.0 and 13.1 on macOS Monterey, since this OS does not need back-deployment.Any recent browser that supports WebAssembly and required JavaScript features should work, which currently includes:
If you need to support older browser versions, you'll have to build with the JAVASCRIPTKIT_WITHOUT_WEAKREFS
flag, passing -Xswiftc -DJAVASCRIPTKIT_WITHOUT_WEAKREFS
flags when compiling. This should lower browser requirements to these versions:
Not all of these versions are tested on regular basis though, compatibility reports are very welcome!
Usage in a browser applicationThe easiest way to get started with JavaScriptKit in your browser app is with the carton
bundler. Add carton to your swift package dependencies:
dependencies: [ + .package(url: "https://github.com/swiftwasm/carton", from: "1.0.0"), ],
Now you can activate the package dependency through swift:
If you have multiple products in your package, you can also used the product flag:
swift run carton dev --product MyApp
Warning
carton
before 0.x.x versions via Homebrew, you can remove it with brew uninstall carton
and install the new version as a SwiftPM dependency..build
directory before using the new carton
As a part of these steps you'll install carton
via Homebrew on macOS (you can also use the ghcr.io/swiftwasm/carton
Docker image if you prefer to run the build steps on Linux). Assuming you already have Homebrew installed, you can create a new app that uses JavaScriptKit by following these steps:
carton
:brew install swiftwasm/tap/carton
If you had carton
installed before this, make sure you have version 0.6.1 or greater:
mkdir SwiftWasmApp && cd SwiftWasmApp
carton
:carton init --template basic
carton dev
can be kept running during development:Open http://127.0.0.1:8080/ in your browser and a developer console within it. You'll see Hello, world!
output in the console. You can edit the app source code in your favorite editor and save it, carton
will immediately rebuild the app and reload all browser tabs that have the app open.
You can also build your project with webpack.js and a manually installed SwiftWasm toolchain. Please see the following sections and the Example directory for more information in this more advanced use case.
Become a gold or platinum sponsor and contact maintainers to add your logo on our README on Github with a link to your site.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4