Skip to content

Commit d2a2ca2

Browse files
PlayBridgeJS: Update sample code to use log(message: string) instead of log: (message: string) => void
1 parent a57eafc commit d2a2ca2

File tree

4 files changed

+95
-43
lines changed

4 files changed

+95
-43
lines changed

Examples/PlayBridgeJS/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ Install Development Snapshot toolchain `DEVELOPMENT-SNAPSHOT-2024-07-08-a` from
55
```sh
66
$ swift sdk install https://github.com/swiftwasm/swift/releases/download/swift-wasm-DEVELOPMENT-SNAPSHOT-2024-07-09-a/swift-wasm-DEVELOPMENT-SNAPSHOT-2024-07-09-a-wasm32-unknown-wasi.artifactbundle.zip
77
$ ./build.sh
8-
$ npx serve
8+
$ npx serve --symlinks
99
```

Examples/PlayBridgeJS/Sources/JavaScript/app.js

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,48 @@
1-
// BridgeJS Playground Main Application
1+
// @ts-check
22
import { EditorSystem } from './editor.js';
33
import ts from 'typescript';
44
import { TypeProcessor } from './processor.js';
55

6+
/**
7+
* @typedef {import('../../.build/plugins/PackageToJS/outputs/Package/bridge-js.js').PlayBridgeJS} PlayBridgeJS
8+
*/
9+
10+
/**
11+
* The main controller for the BridgeJS Playground.
12+
*/
613
export class BridgeJSPlayground {
14+
/**
15+
* Creates a new instance of the BridgeJSPlayground.
16+
*/
717
constructor() {
818
this.editorSystem = new EditorSystem();
19+
/** @type {PlayBridgeJS | null} */
920
this.playBridgeJS = null;
21+
/** @type {ReturnType<typeof setTimeout> | null} */
1022
this.generateTimeout = null;
23+
/** @type {boolean} */
1124
this.isInitialized = false;
1225

13-
// DOM Elements
14-
this.errorDisplay = document.getElementById('errorDisplay');
15-
this.errorMessage = document.getElementById('errorMessage');
26+
const errorDisplay = document.getElementById('errorDisplay');
27+
if (!errorDisplay) {
28+
throw new Error('Error display element not found');
29+
}
30+
/** @type {HTMLElement} */
31+
this.errorDisplay = errorDisplay;
32+
33+
const errorMessage = document.getElementById('errorMessage');
34+
if (!errorMessage) {
35+
throw new Error('Error message element not found');
36+
}
37+
/** @type {HTMLElement} */
38+
this.errorMessage = errorMessage;
1639
}
1740

18-
// Initialize the application
19-
async initialize() {
41+
/**
42+
* Initializes the application.
43+
* @param {{swift: string, dts: string}} sampleCode - The sample code to initialize the application with.
44+
*/
45+
async initialize(sampleCode) {
2046
if (this.isInitialized) {
2147
return;
2248
}
@@ -32,7 +58,7 @@ export class BridgeJSPlayground {
3258
this.setupEventListeners();
3359

3460
// Load sample code
35-
this.editorSystem.loadSampleCode();
61+
this.editorSystem.setInputs(sampleCode)
3662

3763
this.isInitialized = true;
3864
console.log('BridgeJS Playground initialized successfully');
@@ -126,7 +152,9 @@ export class BridgeJSPlayground {
126152
}
127153
}
128154

129-
// Generate code through BridgeJS
155+
/**
156+
* Generates code through BridgeJS.
157+
*/
130158
async generateCode() {
131159
if (!this.playBridgeJS) {
132160
this.showError('BridgeJS is not initialized');
@@ -154,13 +182,18 @@ export class BridgeJSPlayground {
154182
}
155183
}
156184

157-
// Show error message
185+
/**
186+
* Shows an error message.
187+
* @param {string} message - The message to show.
188+
*/
158189
showError(message) {
159190
this.errorMessage.textContent = message;
160191
this.errorDisplay.classList.add('show');
161192
}
162193

163-
// Hide error message
194+
/**
195+
* Hides the error message.
196+
*/
164197
hideError() {
165198
this.errorDisplay.classList.remove('show');
166199
}

Examples/PlayBridgeJS/Sources/JavaScript/editor.js

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1+
// @ts-check
2+
3+
/**
4+
* The editor system for the BridgeJS Playground.
5+
*/
16
export class EditorSystem {
7+
/**
8+
* Creates a new instance of the EditorSystem.
9+
*/
210
constructor() {
311
this.editors = new Map();
412
this.config = {
@@ -70,7 +78,9 @@ export class EditorSystem {
7078

7179
async loadMonaco() {
7280
return new Promise((resolve) => {
81+
// @ts-ignore
7382
require.config({ paths: { vs: 'https://unpkg.com/[email protected]/min/vs' } });
83+
// @ts-ignore
7484
require(['vs/editor/editor.main'], resolve);
7585
});
7686
}
@@ -98,12 +108,15 @@ export class EditorSystem {
98108
return;
99109
}
100110

111+
// @ts-ignore
101112
const model = monaco.editor.createModel(
102113
config.placeholder,
103114
config.language,
115+
// @ts-ignore
104116
monaco.Uri.parse(config.modelUri)
105117
);
106118

119+
// @ts-ignore
107120
const editor = monaco.editor.create(element, {
108121
...commonOptions,
109122
value: config.placeholder,
@@ -140,7 +153,6 @@ export class EditorSystem {
140153
}
141154

142155
this.updateTabStates();
143-
this.updateLayout();
144156
}
145157

146158
updateTabStates() {
@@ -183,6 +195,15 @@ export class EditorSystem {
183195
};
184196
}
185197

198+
/**
199+
* Sets the inputs for the editor system.
200+
* @param {{swift: string, dts: string}} sampleCode - The sample code to set the inputs to.
201+
*/
202+
setInputs({ swift, dts }) {
203+
this.editors.get('swift')?.setValue(swift);
204+
this.editors.get('dts')?.setValue(dts);
205+
}
206+
186207
updateOutputs(result) {
187208
const outputMap = {
188209
'import-glue': () => result.importSwiftGlue(),
@@ -200,36 +221,6 @@ export class EditorSystem {
200221
});
201222
}
202223

203-
loadSampleCode() {
204-
const sampleSwift = `import JavaScriptKit
205-
206-
@JS public func calculateTotal(price: Double, quantity: Int) -> Double {
207-
return price * Double(quantity)
208-
}
209-
210-
@JS class ShoppingCart {
211-
private var items: [(name: String, price: Double, quantity: Int)] = []
212-
213-
@JS init() {}
214-
215-
@JS public func addItem(name: String, price: Double, quantity: Int) {
216-
items.append((name, price, quantity))
217-
}
218-
219-
@JS public func getTotal() -> Double {
220-
return items.reduce(0) { $0 + $1.price * Double($1.quantity) }
221-
}
222-
}`;
223-
224-
const sampleDts = `export type Console = {
225-
log: (message: string) => void;
226-
}
227-
export function console(): Console;`;
228-
229-
this.editors.get('swift')?.setValue(sampleSwift);
230-
this.editors.get('dts')?.setValue(sampleDts);
231-
}
232-
233224
addChangeListeners(callback) {
234225
this.config.input.forEach(config => {
235226
const editor = this.editors.get(config.key);

Examples/PlayBridgeJS/Sources/JavaScript/index.js

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,39 @@ import { BridgeJSPlayground } from './app.js';
33

44
Error.stackTraceLimit = Infinity;
55

6+
const SWIFT_INPUT = `import JavaScriptKit
7+
8+
@JS public func calculateTotal(price: Double, quantity: Int) -> Double {
9+
return price * Double(quantity)
10+
}
11+
12+
@JS class ShoppingCart {
13+
private var items: [(name: String, price: Double, quantity: Int)] = []
14+
15+
@JS init() {}
16+
17+
@JS public func addItem(name: String, price: Double, quantity: Int) {
18+
items.append((name, price, quantity))
19+
}
20+
21+
@JS public func getTotal() -> Double {
22+
return items.reduce(0) { $0 + $1.price * Double($1.quantity) }
23+
}
24+
}`
25+
26+
const DTS_INPUT = `export type Console = {
27+
log(message: string): void;
28+
}
29+
export function console(): Console;`
30+
631
// Initialize the playground when the page loads
732
document.addEventListener('DOMContentLoaded', async () => {
833
try {
934
const playground = new BridgeJSPlayground();
10-
await playground.initialize();
35+
await playground.initialize({
36+
swift: SWIFT_INPUT,
37+
dts: DTS_INPUT
38+
});
1139
} catch (error) {
1240
console.error('Failed to initialize playground:', error);
1341
}

0 commit comments

Comments
 (0)