We have reimagined your development experience with the use of Fooxly Spotlight. Have a multi-functional development tool which can take care of all your development tasks right from the browser. Fooxly Spotlight is a browser development tool which will help you to develop your web applications faster and easier.

📥 How to install

To install this tool, you need to run the following command in your project:

yarn add @fooxly/spotlight

🎬 Getting Started

To get started with Fooxly Spotlight, you need to import Fooxly spotlight in your project and initialize it.

import { Spotlight } from '@fooxly/spotlight';

const instance = Spotlight.create({
  // Your options
});

This will give you access to your own Fooxly Spotlight instance.

📖 Adding your first command or page

To add your first command or page, you need to add a new command or page in your Fooxly Spotlight instance.

instance.registerCommand('My command name', (response) => {
  // Your command
});

instance.registerPage('Settings page', '/settings');

Note: we support async functions as well. This will keep the UI loading until the command is completed.

🔭 Getting started with responses

The response we receive from a command has a couple of functionalities which you can use to make your command more interactive.

instance.registerCommand('Give random number', async (response) => {
    // Give an input for the lowest number (which can only be a number)
    const minimal = await response.question('Lowest number', {
        regex: /^\d+$/,
    });
    // Give an input for the highest number (which can only be a number)
    const maximal = await response.question('Highest number', {
        regex: /^\d+$/,
    });
    // Get a random number between the lowest and highest number
    const number = Math.floor(Math.random() * (Number(max) - Number(min) + 1)) + Number(min);
    // Show a toast with the random number
    res.toast(`Randomly selected number: ${number}`);
});

🪄 Customization

Every command and page has a couple of option which you can use to customize the command or page.

| Option | Type | Description | | --- | --- | --- | | group | string | The group where the command / page should be listed in | | icon | icon / URL / emoji / letters | The icon which should be used |

Shell access

You can also access the shell of your project. This will give you access to the terminal of your project. (You will need to have to make sure you have the spotlight server running in your project.)

Starting the spotlight server

There are 2 options to start the spotlight server:

• Have the Fooxly Spotlight package installed globally
• Add a custom script to your package.json which will start the spotlight server

Global installation

yarn global add @fooxly/spotlight

spotlight

Custom script

{
    "scripts": {
        ... // Your other scripts
        "spotlight": "node ./node_modules/@fooxly/spotlight/lib/esm/server.js",
        // OR
        "spotlight": "node ./node_modules/@fooxly/spotlight/lib/cjs/server.js",
    }
}

Accessing the shell

To access the shell, you can use the shell method in your response.

instance.registerCommand('Shell command', async (response) => {
    // Open the shell and run the command
    await response.shell('echo "Hello world"');
});

📟 Developer tools

Fooxly Spotlight provides a couple of developer tools which you can use to debug your application. To make use of these tools, you need to add the following code to your project.

import { addDeveloperTools } from '@fooxly/spotlight/developer-tools';

// ... Initialize your Fooxly Spotlight instance

// The instance is your Fooxly Spotlight instance
addDeveloperTools(instance);