WASM과 플레이그라운드

브라우저용 패키지를 빌드하고 JavaScript에서 토파즈 함수에 45와 20을 넣어 호출하세요. 아래 예제로 남은 시간 25를 얻고 타입이 표시된 결과를 읽습니다.

로컬 빌드에는 토파즈 CLI, Rust와 Cargo, wasm32-unknown-unknown이 필요합니다. JavaScript 예제는 Node.js로 실행합니다. 완성된 브라우저 패키지는 토파즈나 Rust 없이 실행됩니다.

플레이그라운드에서 소스 실행하기

CLI 설치 없이 브라우저에서 토파즈를 편집·검사·실행하려면 플레이그라운드를 사용하세요. 컴파일러와 인터프리터 WASM을 Worker 안에 로드합니다. 직접 만든 JavaScript 애플리케이션에서 토파즈 함수를 호출하려면 아래 Web 패키지를 빌드하세요.

Web 패키지 빌드하기

새 폴더에 다음 프로그램 전체를 main.tpz로 저장하세요.

export function 남은시간(전체: int, 사용: int) -> int {
    전체 - 사용
}

그 폴더에서 빌드하세요.

topaz build --target web main.tpz --release --out-dir web-product

빌드가 끝나면 topaz-web.wasm과 로더 topaz-web.js의 경로가 출력됩니다. 빌드는 web-product 폴더에 topaz-web.js, topaz-web.d.ts, topaz-web.wasm과 공통 파일을 만듭니다. JavaScript 애플리케이션에서 UI를 마련하고 생성된 모듈을 통해 내보낸 함수를 호출합니다.

JavaScript에서 함수 호출하기

main.tpz 옆에 다음 package.json을 저장하세요. Node.js가 생성된 .js 파일을 ES 모듈로 읽게 합니다.

{ "type": "module" }

같은 폴더에 다음 내용을 call.mjs로 저장하세요.

import { readFile } from 'node:fs/promises';
import { instantiateTopaz } from './web-product/topaz-web.js';

const wasm = await readFile(
  new URL('./web-product/topaz-web.wasm', import.meta.url)
);
const app = await instantiateTopaz(wasm);
const result = app.exports.남은시간(
  { $: 'int', value: '45' },
  { $: 'int', value: '20' }
);
console.log(JSON.stringify(result));

main.tpz가 있는 폴더에서 JavaScript 파일을 실행하세요.

node call.mjs

호출 결과는 다음과 같습니다.

{"status":"ok","value":{"$":"int","value":"25"}}

status: "ok"는 호출이 성공했다는 뜻입니다. 결과는 십진 문자열 "25"로 표현한 토파즈 정수입니다. 각 입력에도 int 태그와 십진 문자열을 넣습니다. JavaScript를 거칠 때 정숫값을 보존하기 위한 형식입니다.

생성된 topaz-web.d.ts가 이 인수·결과 형식인 ABI를 설명합니다. value를 읽기 전에 status를 확인하세요. fault 결과에는 오류 코드·메시지·소스 범위가 들어 있습니다. error 결과에는 메시지가 들어 있습니다. 함수 이름·인수·표시된 토파즈 소스를 고친 뒤 다시 호출하세요.

브라우저에서는 제품 전체를 HTTP로 제공하세요. 모듈 스크립트에서 instantiateTopaz를 가져와 topaz-web.wasm의 URL을 전달합니다. 내보낸 함수의 인수에는 같은 태그 형식을 사용합니다. 브라우저는 이 패키지를 file://로 직접 로드하는 방식을 지원하지 않습니다.

메인 스레드 밖에서 Worker로 호출하기

브라우저 메인 스레드 밖에서 함수를 실행하려면 같은 main.tpz를 Worker용으로 빌드하세요.

topaz build main.tpz --target web-worker --release --out-dir worker-product

이 빌드는 Web 파일에 topaz-web-worker.js와 topaz-web-worker-client.js를 더합니다. 클라이언트는 같은 인수·결과 형식으로 요청과 응답을 주고받습니다. 호출은 비동기로 처리합니다. UI와 권한은 계속 JavaScript 애플리케이션에서 마련합니다. Worker가 추가 권한을 부여하지는 않습니다.

로딩과 빌드 오류 복구하기

관련 문서

• 첫 프로그램
• 애플리케이션 루프
• 아티팩트와 배포