PlayBridgeJS: Setup basic structure for BridgeJS integration

Author: kateinoigakukun

Examples/PlayBridgeJS/Package.swift

@@ -7,13 +7,33 @@ let package = Package(
     platforms: [
         .macOS(.v14)
     ],
-    dependencies: [.package(name: "JavaScriptKit", path: "../../")],
+    dependencies: [
+        .package(name: "JavaScriptKit", path: "../../"),
+        .package(url: "https://github.com/swiftlang/swift-syntax", from: "600.0.1"),
+    ],
     targets: [
         .executableTarget(
             name: "PlayBridgeJS",
             dependencies: [
                 "JavaScriptKit",
                 .product(name: "JavaScriptEventLoop", package: "JavaScriptKit"),
+                .product(name: "SwiftParser", package: "swift-syntax"),
+                .product(name: "SwiftSyntax", package: "swift-syntax"),
+                .product(name: "SwiftBasicFormat", package: "swift-syntax"),
+                .product(name: "SwiftSyntaxBuilder", package: "swift-syntax"),
+            ],
+            swiftSettings: [
+                .enableExperimentalFeature("Extern")
+            ],
+            linkerSettings: [
+                .unsafeFlags(
+                    [
+                        "-Xlinker", "--stack-first",
+                        "-Xlinker", "--global-base=524288",
+                        "-Xlinker", "-z", "-Xlinker", "stack-size=524288",
+                    ],
+                    .when(platforms: [.wasi])
+                )
             ]
         )
     ]

Examples/PlayBridgeJS/Sources/JavaScript/app.js

@@ -0,0 +1,165 @@
+// BridgeJS Playground Main Application
+import { EditorSystem } from './editor.js';
+import ts from 'typescript';
+import { TypeProcessor } from './processor.js';
+
+export class BridgeJSPlayground {
+    constructor() {
+        this.editorSystem = new EditorSystem();
+        this.playBridgeJS = null;
+        this.generateTimeout = null;
+        this.isInitialized = false;
+
+        // DOM Elements
+        this.errorDisplay = document.getElementById('errorDisplay');
+        this.errorMessage = document.getElementById('errorMessage');
+    }
+
+    // Initialize the application
+    async initialize() {
+        if (this.isInitialized) {
+            return;
+        }
+
+        try {
+            // Initialize editor system
+            await this.editorSystem.init();
+
+            // Initialize BridgeJS
+            await this.initializeBridgeJS();
+
+            // Set up event listeners
+            this.setupEventListeners();
+
+            // Load sample code
+            this.editorSystem.loadSampleCode();
+
+            this.isInitialized = true;
+            console.log('BridgeJS Playground initialized successfully');
+        } catch (error) {
+            console.error('Failed to initialize BridgeJS Playground:', error);
+            this.showError('Failed to initialize application: ' + error.message);
+        }
+    }
+
+    // Initialize BridgeJS
+    async initializeBridgeJS() {
+        try {
+            // Import the BridgeJS module
+            const { init } = await import("../../.build/plugins/PackageToJS/outputs/Package/index.js");
+            const { exports } = await init({
+                imports: {
+                    createTS2Skeleton: this.createTS2Skeleton
+                }
+            });
+            this.playBridgeJS = new exports.PlayBridgeJS();
+            console.log('BridgeJS initialized successfully');
+        } catch (error) {
+            console.error('Failed to initialize BridgeJS:', error);
+            throw new Error('BridgeJS initialization failed: ' + error.message);
+        }
+    }
+
+    // Set up event listeners
+    setupEventListeners() {
+        // Add change listeners for real-time generation
+        this.editorSystem.addChangeListeners(() => {
+            // Debounce generation to avoid excessive calls
+            if (this.generateTimeout) {
+                clearTimeout(this.generateTimeout);
+            }
+            this.generateTimeout = setTimeout(() => this.generateCode(), 300);
+        });
+    }
+
+    createTS2Skeleton() {
+        return {
+            convert: (dtsCode) => {
+                const virtualFilePath = "bridge-js.d.ts"
+                const virtualHost = {
+                    fileExists: fileName => fileName === virtualFilePath,
+                    readFile: fileName => dtsCode,
+                    getSourceFile: (fileName, languageVersion) => {
+                        const sourceText = dtsCode;
+                        if (sourceText === undefined) return undefined;
+                        return ts.createSourceFile(fileName, sourceText, languageVersion);
+                    },
+                    getDefaultLibFileName: options => "lib.d.ts",
+                    writeFile: (fileName, data) => {
+                        console.log(`[emit] ${fileName}:\n${data}`);
+                    },
+                    getCurrentDirectory: () => "",
+                    getDirectories: () => [],
+                    getCanonicalFileName: fileName => fileName,
+                    getNewLine: () => "\n",
+                    useCaseSensitiveFileNames: () => true
+                }
+                // Create TypeScript program from d.ts content
+                const tsProgram = ts.createProgram({
+                    rootNames: [virtualFilePath],
+                    host: virtualHost,
+                    options: {
+                        noEmit: true,
+                        declaration: true,
+                    }
+                })
+
+                // Create diagnostic engine for error reporting
+                const diagnosticEngine = {
+                    print: (level, message, node) => {
+                        console.log(`[${level}] ${message}`);
+                        if (level === 'error') {
+                            this.showError(`TypeScript Error: ${message}`);
+                        }
+                    }
+                };
+
+                // Process the TypeScript definitions to generate skeleton
+                const processor = new TypeProcessor(tsProgram.getTypeChecker(), diagnosticEngine);
+
+                const skeleton = processor.processTypeDeclarations(tsProgram, virtualFilePath);
+
+                return JSON.stringify(skeleton);
+            }
+        }
+    }
+
+    // Generate code through BridgeJS
+    async generateCode() {
+        if (!this.playBridgeJS) {
+            this.showError('BridgeJS is not initialized');
+            return;
+        }
+
+        try {
+            this.hideError();
+
+            const inputs = this.editorSystem.getInputs();
+            const swiftCode = inputs.swift;
+            const dtsCode = inputs.dts;
+
+            // Process the code and get PlayBridgeJSOutput
+            const result = this.playBridgeJS.update(swiftCode, dtsCode);
+
+            // Update outputs using the PlayBridgeJSOutput object
+            this.editorSystem.updateOutputs(result);
+
+            console.log('Code generated successfully');
+
+        } catch (error) {
+            console.error('Error generating code:', error);
+            this.showError('Error generating code: ' + error.message);
+        }
+    }
+
+    // Show error message
+    showError(message) {
+        this.errorMessage.textContent = message;
+        this.errorDisplay.classList.add('show');
+    }
+
+    // Hide error message
+    hideError() {
+        this.errorDisplay.classList.remove('show');
+    }
+}