classes.mdx

title
It begins with a class

Classes and methods are the fundamental building blocks of metz. A class gets rendered as a box, and its methods as smaller boxes inside it. The only methods that are skipped are private ones.

A method can call other methods, from the same class, as well as others and that call gets rendered as a line between the caller and callee boxes.

And that's it. It's that simple!

But let's create a hello world program, just to drive the point home. And also because what kind of tutorial doesn't have a hello world?!

<iframe width="900px" height="600px" src="https://app.metz.sh/play/924372b4b43042a09d261999ad057e8c?minimal=true" />

And here's the code for it:

class Main {
    /**
     * Is reponsible for many important things.
    */
    hello() {
        const result = this.world('Hello');
        std.log(result);
    }

    /**
     * Does all the heavy lifting!
    */
    world(arg: string) {
        return `${arg} World!`
    }
}

Notice that the comments and input/output types also get rendered.

So it's not just a dumb box. It has other essential properties that help us understand the component at a glance.

Try playing with it in the playground, and see what happens when you add comments to the Main class.

So, we have a class and and some methods. But what do we do with it? Who is instantiating it and running the code?

Let's answer that in the next section with Stories.