Does the Gleam compiler verify external JavaScript types?

No, the compiler cannot verify that JavaScript code matches your Gleam type annotations; you are responsible for ensuring type alignment and writing unit tests.

What is the best way to handle DOM manipulation in Gleam?

The skill recommends using the Lustre framework for comprehensive frontend applications, or using FFI to wrap specific browser APIs like getElementById.

What is the @external attribute in Gleam?

The @external attribute is used to link a Gleam function signature to a JavaScript implementation, allowing Gleam to call external JS code via FFI.

How does Gleam handle JavaScript Promises?

Gleam utilizes the 'gleam/javascript/promise' module to map JavaScript's async/await behavior into Gleam's type system for safe asynchronous execution.

Can I use NPM packages with this skill?

Yes, this skill provides patterns for installing NPM packages and wrapping them in type-safe Gleam functions using the external attribute.

Gleam JavaScript Interop

Name: Gleam JavaScript Interop
Author: renatillas

byrenatillas

0•

API開発

Integrates Gleam code with JavaScript environments using Foreign Function Interface (FFI) and external function calls.

This skill empowers developers to bridge the gap between Gleam's type-safe environment and the vast JavaScript ecosystem. It provides comprehensive guidance on using the @external attribute, managing NPM packages, interacting with browser APIs, and utilizing the JavaScript target build process. By enforcing strict type-safety patterns and mandatory testing requirements for externals, it ensures that Gleam projects remain robust and maintainable even when interfacing with dynamic JavaScript libraries, the DOM, or Node.js modules.

主な機能

01Foreign Function Interface (FFI) implementation via the @external attribute

02Asynchronous operation support using JavaScript Promises within Gleam

03Mapping Gleam data types like Lists, Results, and Options to JavaScript

04Native NPM package integration and browser API interaction guides

05Integration workflows for Lustre frontend framework and esbuild

060 GitHub stars

ユースケース

01Building type-safe frontend web applications using Gleam and the DOM

02Wrapping existing JavaScript or NPM libraries for use in Gleam projects

03Accessing platform-specific Node.js features not available in pure Gleam

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add renatillas/gleam gleam-javascript-interop

For use in Claude.ai and ChatGPT

Download Skill