Global Type Augmentations with automagic IntelliSense

Sindre Aarsaether — Thu, 01 Jul 2021 12:38:32 +0000

Automatic global type augmentations with intellisense

If you ever wanted to add methods to a built-in type like Number or String in JavaScript, you could extend the prototype directly:

// Add helper function to number
Object.defineProperty(Number.prototype,'clamp',{

    enumerable: false,
    value: function(min, max) {
        return Math.min(Math.max(min, this), max);
    }
});

// Add setter to allow defining shortcuts for dom elements
Object.defineProperty(HTMLElement.prototype,'shortcut',{
    enumerable: false,
    set: function() {
        this._shortcut = value;
        // register key-bindings etc
    }
});

Now, if we try to use these functions, the type-checker will flag it as errors, and intellisense will not work:

(10).clamp(5,15) // Property 'clamp' does not exist on type number

let el = document.createElement('my-component');
el.shortcut = 'ctrl+a' // Property 'shortcut' does not exist on type HTMLElement

To enable type-checking and intellisense you will have to create a separate file where you declare the added methods:

// types/extensions.d.ts
declare global {
    interface Number {
        clamp(min:number, max: number) : number;
    }

    interface HTMLElement {
        set shortcut(value: string);
    }
}

Now, if you make sure the .d.ts file is referenced in your project, the squiggly lines should disappear, and completions should start to work!

It is not considered good practice to extend global types like this anyways, but extending (re-opening) your own classes, and augmenting interfaces of external libraries is even more clunky, and there might be good reasons for you to do it.

In Imba, where dom elements are first-class citizens and it is rather easy to create large projects that do not depend on a bunch of external web components and libraries, extending the functionality of tags and objects is not discouraged. This is how you would do it in imba:

extend class Number
    def clamp(min\number, max\number)
        return Math.min(Math.max(min,self),max)

extend tag element
    set shortcut value
        # register key-bindings etc

let el = <div shortcut='ctrl+a'> <span> 10.clamp(5,15)

That is all you need. Imba generates the correct typescript declarations (with type inference). Type-checking, goto definitions, auto-completions etc just works. If your project includes a mix of imba, js, and typescript it will work across all your files.

10.clamp(5,15)
let el = <div shortcut='ctrl+a'>

This is even better than it seems. Imba also does type inference from your actual declarations, which makes things a lot less verbose. Let's allow all custom components to easily access a shared api:

import API from './api'
const api = new API

extend tag component
    get api
        api

Now, all components Imba will have direct access to the api. Again, with intellisense.

# define a custom button
tag edit-user-button < button
    <self @click=api.editUser(data)> 'edit user'

# use it in another custom component
tag user-modal
    <self>
        <h1> "User"
        <.actions>
            <edit-user-button data=user>
            ...

# No need to pass the api down into children, or import it from every file.

If you want to add functionality to your api without writing it all in one file, you can simply extend the class:

import API from './api'

extend class API
    def broadcast event\string, data = {}
        # do something here ...
        self

If you would like to know more about Imba, read the latest dev.to post or go to imba.io :)

Imba - a JavaScript alternative for increased developer productivity

Sindre Aarsaether — Thu, 10 Jun 2021 13:39:46 +0000

I'm Sindre, CTO at Scrimba.com. We're about to launch a major overhaul of Imba, the programming language we use for everything here at Scrimba. The language has been developed over many years, and it powers both the frontend and backend of Scrimba (100K+ monthly users). Imba is not an academic exercise or a toy project. Check out https://imba.io for more details!

Since we've been flying under the radar for several years I thought I should post about it here now that we are approaching beta of this major update.

The main benefit of Imba is speed. Both in development and performance.

Imba's Memoized DOM approach is an order of magnitude faster than Virtual DOMs (Vue, React). See this article for a short introduction to the approach.
Imba's time-saving syntax with built-in tags and styles results in less typing and switching files
Imba works with node and the npm ecosystem, and integrates tightly with both js and typescript

Here are some of the features worth mentioning 👇

Minimal syntax

Imba's syntax is minimal, beautiful, and packed with clever features. It combines logic, markup and styling in a powerful way. Less keystrokes, and less switching files means you'll be able to build things fast.

Runs on both server and client

Imba powers both the frontend and the backend of Scrimba.com, our learning platform with 100K+ monthly active users. On the frontend, Imba replaces e.g. Vue or React, and on the backend, it works with the Node ecosystem (e.g. npm).

Integrated styling

Inspired by tailwind, Imba brings styles directly into your code. Styles can be scoped to files, components, and even parts of your tag trees. Style modifiers like @hover, @lg, @landscape and @dark can be used for extremely concise yet powerful styling.

Blazing fast, Zero config

Imba comes with a built-in bundler based on the blazing fast esbuild. Import stylesheets, images, typescript, html, workers and more without any configuration. Bundling is so fast that there is no difference between production and development mode - it all happens on-demand.

When you run your app with the imba command it automatically bundles and compiles your imba code, along with typescript, css and many other file types. It provides automatic reloading of both the server and client.

Typing and tooling

The tooling is implemented as a typescript server plugin giving us great intellisense, diagnostics, and even cross-file refactorings that works with js/ts files in the same project. You can import types just like in typescript, and annotate variables, parameters and expressions. Like the language, the tooling is still in alpha, but improving every day.

Get involved!

If you'd like to learn more about Imba, please join our Discord server. We also host community meetings (watch recordings of here).

Imba has been under active development for 6+ years now, and activity is only ramping up. We're looking for contributors who would like to help improve documentation and the ecosystem around Imba.

We really think Imba will add a lot of value in an already crowded space of languages and frameworks. if you're the type who loves to tinker with new things, I'd wholeheartedly recommend you to check it out :)

DEV Community: Sindre Aarsaether