Table of Contents:
-Short Description:
-Definitions-Main parts
-How to use
-Usage
-Start and Run the Server
-Setup your plugins
-Components
-Testing with Jest

Primary-repo

Plugin System Toolkit

Short Description:

The purpose of the project was to build a plugin system/toolkit to help developers create new plugins in the proper form and test them before the real hosting, in addition to produce a hosting application for plugins. It also can help the host application operators to test foreign plug-ins and implement them into their working webpages.

Main repository of the project

Definitions-Main parts

• Toolkit: The main part of the plugin system. It does most of the jobs and connects all the other parts
• Live editors: One for the viewer and one for the editor plugin. They are part of the toolkit as codemirror textfields. They take up the left part of the screen abd are used to make live editing of the plugins easier.
• Editor iframe: hosted by node; inside a seamless iframe that is running an editor plugin html file. This displays the content of the editor plugin.
• Viewer iframe: hosted by node; inside a seamless iframe that is running a viewer plugin html file. This displays the content of the viewer plugin.
• DATA section: Visually represents the data in a user friendly way that is being sent from editor to viewer

Used libraries:
For the live code editor: https://codemirror.net/ ; https://github.com/codemirror/CodeMirror/blob/master/LICENSE
For the inheritance and message sending: https://www.npmjs.com/package/seamless ; https://github.com/travist/seamless.js/blob/master/LICENSE.txt
For the server: https://nodejs.org/en/

How to use

Usage

1. The user opens a plugin for the editor. They can do this via a link Src-Code into Editor Section or just by opening a local file choose a file
2. After entering the link or selecting a file, the user needs to load the code to the live editor with the respective buttons Load Editor-Codemirror Load the first editor
3. On the fly adjustments can be made in the live editor, saving time reopening files after every modification
4. Next, the editor iframe can be loaded with the Reload editor button.
5. Then, the user has to do the same process with the viewer plugin with the buttons found under the Viewer label.
6. Depending on the type of plugin the user needs to input some data into the editor section
7. With the button inside the iframe, the data is sent to the toolkit and being shown in the DATA section.
8. In the DATA section using the Send data to viewer button, we send the data from the toolkit to the viewer iframe
9. Also depending of the viewer plugin implementation, the data is shown accordingly.
10. Finally, we can upload a stylesheet to match the look of the website where the plugin is developed to. After the file is uploaded, its content is shown in a placeholder text field. Next to that field with pushing the Submit button the style is injected.

The user is also able to download the edited codes

To use the toolkit copy the directory to your computer

Start and Run the Server/Toolkit

1. Copy the Primary-repo-Folder to your computer as it is.
2. cd to the Primary-repo-Folder with a Terminal or Powershell
3. Check if the server.js and package.json are inside the Primary-repo-Folder
4. Go to your Terminal/Powershell again and type npm i
5. Then type node server.js
6. Go to any browser and enter http://localhost:8080/
7. When you are finished you can stop the toolkit with pressing CTRL+C in the terminal

You should then see the successfully loaded Content Plugin System.

To start the toolkit next time you can leave out doing steps 1,3 and 4

Setup your plugins

The plugin consists of two parts. The editor and viewer, both a separate html file.

Editor-Viewer communication is being done through the toolkit with help of a server.

Therefor there are some adjustments the plugin developers need to make for the toolkit to work

• Linking the seamless library from the toolkit libraries. Include this script in both plugin headers

<script src='http://localhost:8080/node_modules/seamless/build/seamless.child.min.js'></script>

• User needs to estabilish a connection between parents and children. Include this code in beginning of the body

var parent = window.seamless.connect({
          url: 'http://localhost:8080/',
          allowStyleInjection: true,
      }); 

• The editor needs a seamless function to send data to the toolkit. This infomation can be sent according to the seamless documentaion

Sending a title input and question input. More detailed code in demo-plugins folder

  // Send a message
        window.sendToParent = function(event) {
                event.preventDefault();
                parent.send({
                    // type helps the parent recognise message type
                    type: 'toViewer',
                    // data you send to viewer
                    title: document.getElementById('title').value,
                    question : document.getElementById('question').value
                    });
                };

• The toolkit can receive and handle any number of data
• The viewer needs a seamless function to receive this information. Here the receiving differs from typical seamless. The use needs to handle the data as data.main[0]. This is an array of arrays that if you loop through can get the desired information.

connection.receive(function(data) {
          switch(data.type) {
              case 'setContent':
                  // parent for varying type of input sends data as special object; data.main[0] is the array of arrays with your message inside
                  for (var i = 1; i < data.main[0].length+1; i++){
                      // fill your viewer content with the recieved things
                      if (data.main[0][i][0]==('title')) {
                          // gets the input from the title
                          document.getElementById('title').innerHTML = data.main[0][i][1];
                      }
                      else if (data.main[0][i][0]==('question')) {
                          document.getElementById('question').innerHTML = data.main[0][i][1];
                      }
                      
                      
                  } 
                  break;     
          }
          });

For more information visit the seamless documentation: https://github.com/travist/seamless.js#readme

For an example for our system see the example plugins and test them with the system.

Components

LiveEdit.html

Basically the main part of the whole toolkit. It contains the html of the toolkit and some functions for seamless and codemirror.

Functions

• initIframeEditor: This function is called when the reload editor is clicked. Transforms the iframe into seamless, but also contains another subroutine, handling the receiving of the data from the editor: Since the number of inputs depends on the editor, it handles the data as an object.
• initIframeViewer: It is called when reloading the viewer iframe. Transforms the iframe into seamless, and a subfunction handles the data sending to the viewer. This function is called when the user clicked send data to viewer. The type of data is setContent; the viewer has to handle the message accordingly. The data can be accessed with data.main[0] as an array of arrays-(contentType:content); The other subfunction is a similar sending protocol but with different type because it is used for injection.
• loadData: displays a user friendly representation of the sent data
• readFileAsString: This function is placed outside the script file and immidiately after the button that triggers it. It reads the css file that is to be injected to the viewer. After reading it places it into a placeholder text field.
• Codemirror.fromTextAre: is called in two places. This tranforms the simple textares to codemorror editors and sets the basic settings like autocorrection. The functionality of the codemirror parts is expandable.

script.js

Contains the main JS script that is not strictly seamless related, but more related with the server and all the buttonclicks. All important user-defined JavaScript functions will be exectued inside this file.

Functions

• loadFileAsTextEditor: This function is called when the 'Load the first editor'-button is clicked after uploading the editor plugin file. This function will read the plugin file. The function will extract the full complete content out of the file and then the extracted code will be placed into the first CodeMirror.


• loadFileAsTextViewer: This function is very similar to the loadFIleAsTextEditor function. But this function will read the viewer file and then the extracted code will be placed into the second CodeMirror instead of the first CodeMirror.


• saveTextAsFile: This function is called when the respective button (Download Editor / Download Viewer) is clicked. Saves the content of one of the code mirrors, depending on which button has been clicked as a file


• loadCodemirrorFromUrl: This function is called when a URL to any public raw plugin code is placed into the input bar and the respective button is clicked. Then the process is also similar to the loadFileAsText. This function will read the public raw plugin code. The function will extract the full complete content out of the URL and then the extracted code will be placed into the first CodeMirror.


• loadCodemirrorViewerFromUrl: This function is very similar to the loadCodemirrorFromUrl. But this function will read the public raw plugin code for the viewer part and the extracted code will be placed into the second CodeMirror.


• reloadEditor: This function is called when the respective button is clicked. This function will ouput the code from the first CodeMirror into the editor iframe through a network connection with the node.js server. The connection will be carried out through the localhost network.


• reloadEditor: This function is very similar to the reloadEditor. This function will ouput the code from the second CodeMirror into the editor iframe through a network connection with the node.js server. The connection to the server is realized through ports of the server which are different from the ports of the network connection carried out by the reloadEditor.

server.js

Contains the ports from which the server is listening to. The node.js file is the server which is responsible for handling the connection with the client and different requests from the client.

Server with different ports:

• 8081: The server with this port will send the HTML without the JS and CSS because CORS is being restricted


• 8080: The server with this port will send the HTML including JS and CSS because CORS is implemented, some mimeTypes are supported on this port and the response is more advanced and improved to even include JS and CSS


• 9010: Through this port the editor code from the first CodeMirror will arrive here. After extracting the data out of the request, the URL to the port 9011 will be sent to the client.


• 9011: Through this port the data from the previous request on port 9010 will be displayed on the editor iframe


• 9012: Through this port the viewer code from the second CodeMirror will arrive here. After extracting the data out of the request, the URL to the port 9013 will be sent to the client.


• 9013: Through this port the data from the previous request on port 9013 will be displayed on the viewer iframe

Testing with Jest

To set it up:

1. You need to go to the testing folder 'test'
2. Open the terminal and type the following command: npm init to install json folder inside
3. Then type: install --save-dev jest -> now you shall see json folder package-lock.json inside
4. Open package.json and in the scripts:-section change "test":"test" to "test":"jest"
5. Finally, to test the code, type in the terminal: npm test and it should run properly

Optional:

If you want to keep track of all the functions, branches and line of execution and testing, you can:

1. Open once again package.json file
2. Insted of writing "test":"jest", you have to write "test":"jest --coverage"

Thus, when testing the code with npm test, you can now see a table with details about all the functions being tested. If you need more details and visualisations, you can go to the folder coverage. Then you open folder lcov-report and there you can see a file called index.html. When opening it in the browser, you can have a deeper look at the functions and when clicking on the testing file, you can see them visualised in code and whether a mistake is made.