Extensions

This is a whole documentation to add an extension for WebServerAI.

Adding Extensions

Copy the following code and replace with the correct information

   // Make sure this is added inside of the WebServerAI object!
   extensions:{
      extension_name:{
         active: true, //true to activate
         config:{
            //configuration (optional, if extension doesn't require it)
         },
         startup:{
            styles:[], // Extensions style files
            scripts:[], // Extensions script files
            assets:[{
               type: "{style/script}", // "style" or "script"
               url: "{url}" // External URL
            }]
         }
      }
      //... Add more extensions here
   }

Creating an extension

Create your extension in the /WebServerAI/build/{your_extension_name}

Note: Excepted rendered files

• info.yaml (Required)
• HTML
• CSS
• JS
• Media files: (Images, Videos, Audios, ...)

Extra codes can be placed, but will need to be requested from JS by using the Events.request()

Now this is pretty simple part.

All you have to do is import the extensions file. For this I am going to use the clock extension.

You do not need to have any templates, but this is if you are going to create a new object.

FYI: ALL extensions use the build keyword /WebServerAI/build/{extension_name}/info.yaml

lang-country:
  name: project_name
  updated: date_format
  version: extension_version
  # Any text goes here
ai_version: "ai_version_support"

/WebServerAI/build/{extension_name}/{extension_name}.html

<!--START HTML TEMPLATE-->
...
<!--END HTML TEMPLATE-->

/WebServerAI/build/{extension_name}/{extension_name}.css

   /*START STYLESHEET CODE*/

   /*END STYLESHEET CODE*/

/WebServerAI/build/{extension_name}/{extension_name}.js

/*
   * Import "Extensions" from extension.js to allow usages.
   * You can import more componetents under the import Extensions.
*/
import Extensions from "/WebServerAI/assets/AI/js/components/extenstions.js";

// START LOAD-UP (Required)
const url = new URL(import.meta.url),
//Load the "Extensions" class
ext = new Extensions(),
//Gets build name
buildName = ext.getBuildName(url),
//Gets build ID
buildID = ext.getBuildID(url),
//url, {configNames}, {configNullValues}
config = ext.configSearch(url,[],[]);
// Save the HTML template and parses the HTML to be executed to the page
ext.saveTemplate(buildName,ext.parse(buildName));

const info = getInfo(buildName); // All information will be stored here in a JSON object based on users language
// END LOAD-UP
//USE "wsa-build" to trigger on build-submit
if(ext.isAllowed(buildName)){

/**
  // Requires Events componement to be imported!
  // Gets data on submit and does not wait for build function to occur.
  events.submit((e)=>{
      console.log(e);
  });
*/

window.addEventListener('wsa-build',(e)=>{
    // Your code goes in here

    // Give elements based on your build name a unique ID
    ext.update(buildName);
   }else
      ext.noSupport(buildName);
});