# Using Code Snippets to Instantly Load Offline Component Definitions

This document is intended to show you, how to improve testing of content in development and testing phases by means of doing what is described in the Hello world example. You must have VS Code with the Live Server extension (see Environment Setup), or another local HTTP server running on your computer. We will show this on the example of the Google Chrome browser.

  1. Open the Configurator Test Site (opens new window).

  2. Open the developer console using Cmd+Shift+J (or Ctrl+Shift+I) and navigate to the Sources bar, Snippets, click the new snippet button and choose a name for it (for example: loadersnippet)

  3. Paste the following code

(async function () {
    const iframe = document.querySelector('iframe');
    let iframeContentWindow = null;
    if (!iframe) {
        await RoomleConfigurator.init('demoConfigurator', 'roomle-configurator', 'usm:frame', {
            __overrideServerUrl: 'https://www.roomle.com/t/configurator/'
        });
        iframeContentWindow = document.querySelector('iframe').contentWindow;
    } else {
        iframeContentWindow = document.querySelector('iframe').contentWindow;
        iframeContentWindow.RoomleConfigurator._kernelAccess._kernelInstance.clearAll();
    }
    // fill in the URLs you want to load
    const prefix = 'http://127.0.0.1:5500/'
    const urls = [
    ];
    const responses = await Promise.all(urls.map((url) => fetch(prefix + url)))
    const components = await Promise.all(responses.map((response) => response.text()));
    let lastComponentId = '';
    components.forEach((component) => {
        const cleanComponent = component.replace(/\n/g, '');
        iframeContentWindow.RoomleConfigurator._kernelAccess._kernelInstance.loadComponentDefinition(10, cleanComponent);
        lastComponentId = JSON.parse(cleanComponent).id;
        console.log(`loaded ${lastComponentId} into kernel`);
    });

   RoomleConfigurator.loadConfiguration(`{"componentId":"${lastComponentId}"}`);

}());
  1. Go to VS Code, open your working folder and start the Live Server extension (button "Go Live" at the right side of the bottom bar or the "Live Server: Open with Live Server")

  2. Navigate to a component definition JSON, open its context menu using a right click on the file and choose Copy relative path.

  3. Paste this as an entry into the urls array. Example:

    const urls = [
        'componentdefinitions/examples/40_helloworld.json'
    ];

Hint 1: You can load more components at once. Put the component you want to load in the configurator as the root of the configuration to the last position (see what the lastComponentId variable in the snippet code is for)
Hint 2: You can load any configuration. Just replace the argument in the last line.
Hint 3: You can set the path of the folder containing component definitions to the prefix variable, letting you use only the filenames in the urls array. See the same code as above modified like this:

    const prefix = 'http://127.0.0.1:5500/componentdefinitions/examples/'
    const urls = [
        '40_helloworld.json'
    ];
  1. In the lower right area, run the script.

  2. The configurator loads the content from your local HTTP server, letting you safely and quickly test the content.