swiftwasm · kateinoigakukun · Mar 9, 2025 · Apr 2, 2025 · Apr 3, 2025
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -52,6 +52,7 @@ jobs:
           make regenerate_swiftpm_resources
           git diff --exit-code Sources/JavaScriptKit/Runtime
       - run: swift test --package-path ./Plugins/PackageToJS
+      - run: swift test --package-path ./Plugins/BridgeJS
 
   native-build:
     # Check native build to make it easy to develop applications by Xcode

diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ xcuserdata/
 Examples/*/Bundle
 Examples/*/package-lock.json
 Package.resolved
+Plugins/BridgeJS/Sources/JavaScript/package-lock.json
diff --git a/Examples/ExportSwift/Package.swift b/Examples/ExportSwift/Package.swift
@@ -0,0 +1,25 @@
+// swift-tools-version:6.0
+
+import PackageDescription
+
+let package = Package(
+    name: "MyApp",
+    platforms: [
+        .macOS(.v14)
+    ],
+    dependencies: [.package(name: "JavaScriptKit", path: "../../")],
+    targets: [
+        .executableTarget(
+            name: "MyApp",
+            dependencies: [
+                "JavaScriptKit"
+            ],
+            swiftSettings: [
+                .enableExperimentalFeature("Extern")
+            ],
+            plugins: [
+                .plugin(name: "BridgeJS", package: "JavaScriptKit")
+            ]
+        )
+    ]
+)
diff --git a/Examples/ExportSwift/Sources/main.swift b/Examples/ExportSwift/Sources/main.swift
@@ -0,0 +1,34 @@
+import JavaScriptKit
+
+// Mark functions you want to export to JavaScript with the @JS attribute
+// This function will be available as `renderCircleSVG(size)` in JavaScript
+@JS public func renderCircleSVG(size: Int) -> String {
+    let strokeWidth = 3
+    let strokeColor = "black"
+    let fillColor = "red"
+    let cx = size / 2
+    let cy = size / 2
+    let r = (size / 2) - strokeWidth
+    var svg = "<svg width=\"\(size)px\" height=\"\(size)px\">"
+    svg +=
+        "<circle cx=\"\(cx)\" cy=\"\(cy)\" r=\"\(r)\" stroke=\"\(strokeColor)\" stroke-width=\"\(strokeWidth)\" fill=\"\(fillColor)\" />"
+    svg += "</svg>"
+    return svg
+}
+
+// Classes can also be exported using the @JS attribute
+// This class will be available as a constructor in JavaScript: new Greeter("name")
+@JS class Greeter {
+    var name: String
+
+    // Use @JS for initializers you want to expose
+    @JS init(name: String) {
+        self.name = name
+    }
+
+    // Methods need the @JS attribute to be accessible from JavaScript
+    // This method will be available as greeter.greet() in JavaScript
+    @JS public func greet() -> String {
+        "Hello, \(name)!"
+    }
+}
diff --git a/Examples/ExportSwift/index.html b/Examples/ExportSwift/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Getting Started</title>
+</head>
+
+<body>
+  <script type="module" src="index.js"></script>
+</body>
+
+</html>
diff --git a/Examples/ExportSwift/index.js b/Examples/ExportSwift/index.js
@@ -0,0 +1,14 @@
+import { init } from "./.build/plugins/PackageToJS/outputs/Package/index.js";
+const { exports } = await init({});
+
+const Greeter = exports.Greeter;
+const greeter = new Greeter("World");
+const circle = exports.renderCircleSVG(100);
+
+// Display the results
+const textOutput = document.createElement("div");
+textOutput.innerText = greeter.greet()
+document.body.appendChild(textOutput);
+const circleOutput = document.createElement("div");
+circleOutput.innerHTML = circle;
+document.body.appendChild(circleOutput);
diff --git a/Examples/ImportTS/Package.swift b/Examples/ImportTS/Package.swift
@@ -0,0 +1,29 @@
+// swift-tools-version:6.0
+
+import PackageDescription
+
+let package = Package(
+    name: "MyApp",
+    platforms: [
+        .macOS(.v10_15),
+        .iOS(.v13),
+        .tvOS(.v13),
+        .watchOS(.v6),
+        .macCatalyst(.v13),
+    ],
+    dependencies: [.package(name: "JavaScriptKit", path: "../../")],
+    targets: [
+        .executableTarget(
+            name: "MyApp",
+            dependencies: [
+                "JavaScriptKit"
+            ],
+            swiftSettings: [
+                .enableExperimentalFeature("Extern")
+            ],
+            plugins: [
+                .plugin(name: "BridgeJS", package: "JavaScriptKit")
+            ]
+        )
+    ]
+)
diff --git a/Examples/ImportTS/Sources/bridge.d.ts b/Examples/ImportTS/Sources/bridge.d.ts
@@ -0,0 +1,24 @@
+// Function definition to expose console.log to Swift
+// Will be imported as a Swift function: consoleLog(message: String)
+export function consoleLog(message: string): void
+
+// TypeScript interface types are converted to Swift structs
+// This defines a subset of the browser's HTMLElement interface
+type HTMLElement = Pick<globalThis.HTMLElement, "innerText"> & {
+    // Methods with object parameters are properly handled
+    appendChild(child: HTMLElement): void
+}
+
+// TypeScript object type with read-only properties
+// Properties will become Swift properties with appropriate access level
+type Document = {
+    // Regular property - will be read/write in Swift
+    title: string
+    // Read-only property - will be read-only in Swift
+    readonly body: HTMLElement
+    // Method returning an object - will become a Swift method returning an HTMLElement
+    createElement(tagName: string): HTMLElement
+}
+// Function returning a complex object
+// Will be imported as a Swift function: getDocument() -> Document
+export function getDocument(): Document
diff --git a/Examples/ImportTS/Sources/main.swift b/Examples/ImportTS/Sources/main.swift
@@ -0,0 +1,26 @@
+import JavaScriptKit
+
+// This function is automatically generated by the @JS plugin
+// It demonstrates how to use TypeScript functions and types imported from bridge.d.ts
+@JS public func run() {
+    // Call the imported consoleLog function defined in bridge.d.ts
+    consoleLog("Hello, World!")
+
+    // Get the document object - this comes from the imported getDocument() function
+    let document = getDocument()
+
+    // Access and modify properties - the title property is read/write
+    document.title = "Hello, World!"
+
+    // Access read-only properties - body is defined as readonly in TypeScript
+    let body = document.body
+
+    // Create a new element using the document.createElement method
+    let h1 = document.createElement("h1")
+
+    // Set properties on the created element
+    h1.innerText = "Hello, World!"
+
+    // Call methods on objects - appendChild is defined in the HTMLElement interface
+    body.appendChild(h1)
+}
diff --git a/Examples/ImportTS/index.html b/Examples/ImportTS/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Getting Started</title>
+</head>
+
+<body>
+  <script type="module" src="index.js"></script>
+
+  <div id="exports-result"></div>
+  <div id="imports-result"></div>
+  <pre id="code"></pre>
+</body>
+
+</html>
diff --git a/Examples/ImportTS/index.js b/Examples/ImportTS/index.js
@@ -0,0 +1,13 @@
+import { init } from "./.build/plugins/PackageToJS/outputs/Package/index.js";
+const { exports } = await init({
+    imports: {
+        consoleLog: (message) => {
+            console.log(message);
+        },
+        getDocument: () => {
+            return document;
+        },
+    }
+});
+
+exports.run()
diff --git a/Examples/Multithreading/Package.resolved b/Examples/Multithreading/Package.resolved
@@ -1,5 +1,5 @@
 {
-  "originHash" : "e66f4c272838a860049b7e3528f1db03ee6ae99c2b21c3b6ea58a293be4db41b",
+  "originHash" : "072d03a6e24e01bd372682a6090adb80cf29dea39421e065de6ff8853de704c9",
   "pins" : [
     {
       "identity" : "chibi-ray",
@@ -8,6 +8,15 @@
       "state" : {
         "revision" : "c8cab621a3338dd2f8e817d3785362409d3b8cf1"
       }
+    },
+    {
+      "identity" : "swift-syntax",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/swiftlang/swift-syntax",
+      "state" : {
+        "revision" : "0687f71944021d616d34d922343dcef086855920",
+        "version" : "600.0.1"
+      }
     }
   ],
   "version" : 3

diff --git a/Package.swift b/Package.swift
@@ -1,5 +1,6 @@
 // swift-tools-version:6.0
 
+import CompilerPluginSupport
 import PackageDescription
 
 // NOTE: needed for embedded customizations, ideally this will not be necessary at all in the future, or can be replaced with traits
@@ -9,12 +10,24 @@ let useLegacyResourceBundling =
 
 let package = Package(
     name: "JavaScriptKit",
+    platforms: [
+        .macOS(.v10_15),
+        .iOS(.v13),
+        .tvOS(.v13),
+        .watchOS(.v6),
+        .macCatalyst(.v13),
+    ],
     products: [
         .library(name: "JavaScriptKit", targets: ["JavaScriptKit"]),
         .library(name: "JavaScriptEventLoop", targets: ["JavaScriptEventLoop"]),
         .library(name: "JavaScriptBigIntSupport", targets: ["JavaScriptBigIntSupport"]),
         .library(name: "JavaScriptEventLoopTestSupport", targets: ["JavaScriptEventLoopTestSupport"]),
         .plugin(name: "PackageToJS", targets: ["PackageToJS"]),
+        .plugin(name: "BridgeJS", targets: ["BridgeJS"]),
+        .plugin(name: "BridgeJSCommandPlugin", targets: ["BridgeJSCommandPlugin"]),
+    ],
+    dependencies: [
+        .package(url: "https://github.com/swiftlang/swift-syntax", "600.0.0"..<"601.0.0")
     ],
     targets: [
         .target(
@@ -98,7 +111,40 @@ let package = Package(
             capability: .command(
                 intent: .custom(verb: "js", description: "Convert a Swift package to a JavaScript package")
             ),
-            sources: ["Sources"]
+            path: "Plugins/PackageToJS/Sources"
+        ),
+        .plugin(
+            name: "BridgeJS",
+            capability: .buildTool(),
+            dependencies: ["BridgeJSTool"],
+            path: "Plugins/BridgeJS/Sources/BridgeJSBuildPlugin"
+        ),
+        .plugin(
+            name: "BridgeJSCommandPlugin",
+            capability: .command(
+                intent: .custom(verb: "bridge-js", description: "Generate bridging code"),
+                permissions: [.writeToPackageDirectory(reason: "Generate bridging code")]
+            ),
+            dependencies: ["BridgeJSTool"],
+            path: "Plugins/BridgeJS/Sources/BridgeJSCommandPlugin"
+        ),
+        .executableTarget(
+            name: "BridgeJSTool",
+            dependencies: [
+                .product(name: "SwiftParser", package: "swift-syntax"),
+                .product(name: "SwiftSyntax", package: "swift-syntax"),
+                .product(name: "SwiftBasicFormat", package: "swift-syntax"),
+                .product(name: "SwiftSyntaxBuilder", package: "swift-syntax"),
+            ],
+            path: "Plugins/BridgeJS/Sources/BridgeJSTool"
+        ),
+        .testTarget(
+            name: "BridgeJSRuntimeTests",
+            dependencies: ["JavaScriptKit"],
+            exclude: ["Generated/JavaScript"],
+            swiftSettings: [
+                .enableExperimentalFeature("Extern")
+            ]
         ),
     ]
 )
diff --git a/Plugins/BridgeJS/Package.swift b/Plugins/BridgeJS/Package.swift
@@ -0,0 +1,29 @@
+// swift-tools-version: 6.0
+
+import PackageDescription
+
+let package = Package(
+    name: "BridgeJS",
+    platforms: [.macOS(.v13)],
+    dependencies: [
+        .package(url: "https://github.com/swiftlang/swift-syntax", from: "600.0.1")
+    ],
+    targets: [
+        .target(name: "BridgeJSBuildPlugin"),
+        .target(name: "BridgeJSLink"),
+        .executableTarget(
+            name: "BridgeJSTool",
+            dependencies: [
+                .product(name: "SwiftParser", package: "swift-syntax"),
+                .product(name: "SwiftSyntax", package: "swift-syntax"),
+                .product(name: "SwiftBasicFormat", package: "swift-syntax"),
+                .product(name: "SwiftSyntaxBuilder", package: "swift-syntax"),
+            ]
+        ),
+        .testTarget(
+            name: "BridgeJSToolTests",
+            dependencies: ["BridgeJSTool", "BridgeJSLink"],
+            exclude: ["__Snapshots__", "Inputs"]
+        ),
+    ]
+)