Modules Writing your first module

Writing your first module with FLSE is designed to be easy and accommodate your existing JS knowledge. This tutorial will work you through learning and writing your first module with FLSE.

Creating A Module

Today we're creating a module that will return the time. Let's call it timeWarper for reference.

Create File, Setup Import

Create Your File

To get started with creating our module, we'll need to create a new JS file. We're going to call it timeWarper.js and drop it into the same folder as our FLSE-enabled page.

Inline support for modules and components are not available yet.

We're going to add some boilerplate to our JS file just so we can confirm everything works after, we recommend you also do so:

console.log("It Works!");
return "It Works!";

Whenever a module is placed onto a page, this code will run, console log "It Works", then return "It Works" as the element. Use return to indicate what you want being placed down into the DOM. Bear in mind, return can only be called once and no more code will be able to run, you can use asynchronous methods to still run code after sending a return.

Add Your Module

Now, we're going to add our module to the page using a <flseimport>, just as we would with a component, except for type we provide module instead. <flseimport src="timeWarper.js" type="module" name="timewarper" /> Now FLSE will import the module and set it up ready for use, in order to use the module, you can put down a simple <timewarper></timewarper> and refresh your page.

In the console and page, you should see the following:

Work On Logic

Now, we want to work on some module logic that makes everything work, this is self explanatory if you use JS.

This will be our timeWarper.js file after adding in some logic:

const a = new Date();
const hour = a.getHours().toString().padStart(2, '0');
const minute = a.getMinutes().toString().padStart(2, '0');

return `${hour}:${minute}`;

This is asking the Date API for the current hour and minute, which will then be returned as a formatted result back to FLSE, where it handles the element.

If everything works, you should see the current time:

Conclusion

That was it! You covered importing, creating, writing and successfully returning a module.