Swift (Wasm)

Swift is a general-purpose programming language developed by Apple, designed for safety, performance and expressiveness.

In LiveCodes, Swift is compiled to WebAssembly by the Swift compiler itself, running on WebAssembly: swift-frontend compiles the source and LLVM's wasm-ld links the result, entirely in the browser. No backend is involved.

Note

The native swiftc is a driver that spawns the compiler frontend and the linker as separate processes, and WebAssembly cannot spawn processes. Here the two run as separate WebAssembly modules in the same result page, driven by JavaScript. The toolchain is about 70 MB and is downloaded on the first run, which can take some time.

Usage

Demo:

show code

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
createPlayground('#container', options);

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
</script>

<LiveCodes {...options} />

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "script",
    "script": {
      "language": "swift-wasm",
      "content": "struct Greeting {\n  let name: String\n  var message: String { \"Hello, \\(name)!\" }\n}\n\nfor name in [\"World\", \"LiveCodes\", \"Swift\"] {\n  print(Greeting(name: name).message)\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  };
</script>

Standard I/O

Swift code runs in the context of the result page. Standard output (e.g. print) is captured and displayed in the console. Standard input is passed by setting the livecodes.swift.input property in JavaScript and is read in the Swift code using readLine().

Communication with JavaScript

The Swift code runs in the context of the result page. A few helper properties and methods are available in the browser global livecodes.swift object:

livecodes.swift.input: The standard input passed to the Swift program. It can be set before the initial run, or passed to run for subsequent runs.
livecodes.swift.loaded: A promise that resolves when the Swift environment (compiler, linker and standard library) is fully loaded (and rejects if it fails to load). Other helpers should be used after this promise resolves.
livecodes.swift.ready: A boolean that is true once the environment is loaded and a run has completed.
livecodes.swift.output: The standard output of the last run.
livecodes.swift.error: The compiler diagnostics or runtime error of the last run, if any.
livecodes.swift.exitCode: The exit code of the last run.
livecodes.swift.run(input): Runs the code in the editor, optionally passing standard input, and returns a promise that resolves to { output, error, exitCode }.

await livecodes.swift.loaded;
const { output, error, exitCode } = await livecodes.swift.run(livecodes.swift.input);
console.log(output);

Language Info

Name

swift-wasm

Aliases / Extensions

swift, swift-wasm, wasm.swift

Editor

script

Compiler

The Swift compiler frontend (swift-frontend) and LLVM's wasm-ld linker, both compiled to WebAssembly and running in the browser. The build is provided by swift-toolchain-wasm.

Version

Swift 6.3.3

Code Formatting

Not supported.

Limitations

The compiler runs on WebAssembly, which affects what it can do:

Programs are single-file.
Macros and compiler plugins are not supported. Swift runs them as separate processes, and WebAssembly cannot spawn processes.
The Swift-implemented optimizer passes are disabled because C++ interop is not available for this target. This affects optimization quality, not correctness.
A 4 GiB address space limit applies. Single-file programs fit comfortably; very large modules may not.
The toolchain (about 70 MB) is downloaded on the first run.

Example Usage

This example passes standard input and runs the code again on each click, using the browser global livecodes.swift (also check the code in the HTML editor):

show code

import { createPlayground } from 'livecodes';

const options = {
  "template": "swift-wasm"
};
createPlayground('#container', options);

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "swift-wasm"
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "swift-wasm"
};
  return (<LiveCodes {...options} />);
}

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "swift-wasm"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "swift-wasm"
};
</script>

<LiveCodes {...options} />

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "swift-wasm"
};
  return (<LiveCodes {...options} />);
}

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "swift-wasm"
};
  return (<LiveCodes {...options} />);
}

<live-codes
  template="swift-wasm"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Live Reload

By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Swift WebAssembly environment. This behavior can be disabled by adding the code comment // __livecodes_reload__ to the Swift code, which forces a full page reload.

This comment can be added in the hiddenContent property of the editor for embedded playgrounds.

Starter Template

https://livecodes.io/?template=swift-wasm

Usage​

Standard I/O​

Communication with JavaScript​

Language Info​

Name​

Aliases / Extensions​

Editor​

Compiler​

Version​

Code Formatting​

Limitations​

Example Usage​

Live Reload​

Starter Template​

Links​