Skip to content

Latest commit

 

History

History
306 lines (269 loc) · 9.47 KB

extensions-API.md

File metadata and controls

306 lines (269 loc) · 9.47 KB

Extension API

IDE

These APIs are used to interact with the IDE and retrieve data.

  • General

  • ide.isConnected (Boolean)
  • ide.fontPath

    Returns the path to editors fonts

  • ide.getPath()

    Returns the current directory path

  • ide.isBusy (Boolean)

    Used to check if, message have been returned from the phone to browser

  • ide.getTabLength()

    Returns the number of opened tabs

  • ide.unpackedList (array)

    Returns list of extensions that haven't been built

  • ide.unpackedPath

    Returns unpacked extension path

  • ide.reloadProjectList()

    Refreshes project directory

  • ide.projectList (array)

    Returns all the files & folders in your project directory

  • ide.getActiveFile()

    Returns the name of the current file you are editing

  • ide.setOutput(outputName)

    e.g ide.setOutput("Console")

  • ide.registerFileType(type, options, callback) 
        ide.registerFileType('py',{
         mode:"python",
         icon:"fab fa-python text-green-400"
      }, ()=>{
            try{
                //Function to execute any .py file 
            }catch(err){
                //onerror
            }
     });
  • ide.registerPreviewComponent(type, options, callback) 
        let component = {
         view:()=>{
             return m(`iframe.w-full.h-full[src=./extensions/ipynb-viewer/assets/index.html]`);
         }
     };
     ide.registerPreviewComponent("ipynb",{ toolbar: true }, component)
  • ide.showOutput()
  • ide.hideOutput()
  • ide.log(msg,type)

    type => warn/error/success/info

      ide.log("log to mobile console","warn")
  • ide.getColorScheme()

    Is current theme light/dark mode

  • Modals

    • ide.showMessageModal(options) 
         ide.showMessageModal({
        title: "Modal title",
        desc: "",//optional 
        text: "Modal content",
        yes: "Okay"
    });
    • ide.showConfirmationModal(options) 
         ide.showConfirmationModal({
       title: "Do you want to exit?",
       text: "All changes have been saved",
       yes: "Yes",
       yesClass: "btn-primary",//optional 
       yesOnClick:()=>{
             //Do something 
       }
   });
    • ide.showCustomModal(options)
    • ide.showInputModal(options)

  • Statusbar

  • ide.addToStatusBar(id?string, component?object) 
     ide.addToStatusBar("UpdateBrowser", {
        view:()=>{
            return m(".ml-2.badge.badge-warning", 
                    m("span.text-xs.z-30",[
                        m("i.fab.pr-2.fa-chrome"), 
                        "Update your browser"
                    ])
                )
        }
    })
  • ide.clearStatusbar(id?string)

  • Saving

    • ide.isSaved (Boolean)
    • ide.save() (Function)

      Saves current file that is being edited

  • Extensions(mcx)

    • ide.installExtension(pathToExtension?string)
    • ide.uninstallExtension(extensionName?string)

  • Extension view

    • ide.onExtensionClose = () =>{}
    • ide.closeExtension()
    • ide.hideSidePanel()
    • ide.showSidePanel()
    • ide.mountSidePanel(component)
    • ide.mountMainPanel(component)
    • ide.isExtensionVisible(name)
    • ide.getExtensionName()

      Returns the name of the active extension

    • ide.addExtensionOutput({name: OutputName, content: OutputComponent})

      used for extension, to add custom view to the output panel

        ide.addExtensionOutput({
      name:"Sample",
      icon: "USE A FONTAWESOME CLASS HERE",
      content:{
        view:()=>{
          return m("small", "Sample content");
        }
      }
  });

Device

These APIs are used to communicate with your device.

  • Saving

    • device.saveData(key?string, value?any) (Function)
    • device.getData(key?string) (Function)

      Return saved data.

         device.getData("AUTOSAVE_DELAY").then((e)=>console.log(e))

  • Device info

    • device.getFreeSpace()
    • device.getBatteryLevel()
    • device.getMemoryInfo()

  • Vibration

    • device.vibrate(pattern)

      Triggers vibration

         device.vibrate("0,100,30,100,50,300")

  • Files & Folders

    • Files

      • device.writeFile(path?string, content?string, replaceExisting? boolean)
      • device.readFile(pathToFile)
        device.readFile("hello-world.html").then(e=>console.log(e)).catch(e=>console.error(e));
      • device.fileExists(pathToFile)
          device.fileExists("output/bundle.min.js").then((e)=>console.log(e)).catch(()=>console.error("failed"))
      • device.renameFile(source, destination)
          device.renameFile("old_name.txt","new_name.txt")
      • device.copyFile(source, destination, replace)
          device.copyFile("fldr/text.txt","text.txt").then(e=>console.log(e))
      • device.deleteFile(pathToFile)
          device.deleteFile("fldr/text.txt").then((e)=>console.log(e))
      • device.replaceInFile(pathToFile, oldText, newText)
          device.replaceInFile("text.txt","Hello John","Howdy David").then((e)=>console.log(e))
      • device.downloadFile(source, destination)
      • device.convertBlobToFile(path?string)

    • Folders

      • device.zipFolder(path,name,ext,msg);

        Compress a folder to a zip file using this automatically creates folder

      • device.listFolder(path)
          device.listFolder("/").then((e)=>console.log(e)).catch(()=>console.error("failed"))
      • device.folderExists(pathToFile)
          device.folderExists("output").then((e)=>console.log(e)).catch(()=>console.error("failed"));
      • device.createFolder(path)
          device.createFolder("new_folder").then((e)=>console.log(e)).catch(()=>console.error("failed"));
      • device.renameFolder(source, destination)
          device.renameFolder("old_name","new_name")
      • device.copyFolder(source, destination, replace)
          device.copyFolder("fldr/img","img").then(e=>console.log(e))
      • device.deleteFolder(pathToFolder)
          device.deleteFolder("fldr/").then((e)=>console.log(e))

Others

  • include(pathToScript)

    e.g include("assets/scripts/components.js").then(e=>eval(e)).catch(e=>console.error(e));

    • Note: when using include, dont forget to use a variable, to show that the file has loaded

  • importScript(urls?array or string)

    import script(s) on ide load e.g importScript([ "lib/require.min.js", "https://code.jquery.com/jquery-3.7.1.min.js" ]) Currently 'importScript' does'nt work with backtick

  • "Layout","CenterLayout","Button","Txt","Input"

Help for building extensions

  • It's advisable to use async & await, when making many api calls. 
        //For example 
    async function getDownloadFldr() {
      try {
        const folderExists = await device.folderExists(downloadPath);

        if (!folderExists) {
          const created = await device.createFolder(downloadPath);
        }

        const listDownloads = await device.listFolder(downloadPath);
      
        if(listDownloads.length > 0){
          const allowedExtensions = [".mp3", ".ogg", ".m4a", ".wav"];
          const filteredFiles = listDownloads.filter(file => {
              const extension = file.toLowerCase().substring(file.lastIndexOf("."));
              return allowedExtensions.includes(extension);
          });
          downloads = filteredFiles;
        }
       } catch (e) {
          console.error(e);
       }
     }

     getDownloadFldr();
  • Always remember to use ide.isConnected, when building extensions.
  • It's not advisable to use device.replaceInFile, to replace content in heavy files.
  • When git.json is large, it takes a long time before it loads the ide. (Will work on a fix)
  • using assets folder is advisable for extension with extra files. (mcs uses "assets" fldr internally)

GLOBAL VARIABLES

  • ide
  • device
  • notify
  • getIcon
  • beautifyOptions
  • glob
  • aceEditor