@ou-imdt/create

Create

Introduction

Create is a command line interface tool that assists in the creation of new widgets intended for distribution to the VLE.

The intention of the tool is to automate the creation of boilerplate code required by the VLE and provide a streamlined, modern, consistent and efficient development experience.

For the detailed boilerplate features, check the boilerplate README file.

Features

• Creates a new widget with the boilerplate code, with two optional templates (Vanilla JS or VUE).
• Populates the README file, index.html and package.json with dynamic templating.
• Checks Node.js version and notifies if Long Term Support (LTS) version is not used.
• History to maintain the last input data like author email.

Compatibility Note: Requires Node.js LTS version.

Installation

npm install -g @ou-imdt/create 

Update to the latest version

npm update -g @ou-imdt/create

Usage

Run the create using:

create

Then answer the following questions to generate a boilerplate.

Template? (Vanilla Javascript/VUE.js)
Widget name?
Widget description?
Widget developer name? **
Widget developer email? **
Install deps? (yes/no)

** These will be fetched from git config, if they do not exist you will be prompted to enter them.

Commands

help  Prints help info

Options

-c, --clear    Clear the console Default: true
-v, --version  Print CLI version Default: false

Template Stores

Stores found in the two templates contain methods to help with common tasks whilst interfacing with the VLE.

Examples include:

• Saving data to the VLE
• Retrieving save data from the VLE
• Parsing Query parameters from URLs
• Loading SCXML attachments and folders
• Logging utilities to prevent development messages getting to live

Save Global Data

store.globalSaveData = {
    default: {
        valueOne: "Hi",
        valueTwo: "Example",
        valueThree: "Message"
    }
}

store.saveGlobalData()

Save Single Data

store.singleSaveData = {
    default: {
        valueOne: "Hi",
        valueTwo: "Example",
        valueThree: "Message"
    }
}

store.saveSingleData()

Get All Single Save Data

store.getAllSingleData()
// Result stored in store.singleSaveData

Get All Global Save Data

store.getAllGlobalData()
// Result stored in store.globalSaveData

VLE Safe Log

store.log("Message")

VLE Safe Warn

store.warn("Message")

VLE Safe Error

store.error("Message")

Access VLE Parameters

store.vleParams["_u"]
store.vleParams["_i"]
store.vleParams["_a"]
store.vleParams["_c"]
store.vleParams["param1"]

Access VLE Attachments

store.activityAttachments["ref"]

Access VLE Folders

store.activityFolders["ref"]

Check Online

store.isOnline

Offline support (SISE)

If you need support for SISE (Students in Secure Environments), there is a vite plugin you can use vite-plugin-singlefile. To use the plugin, it needs to be added to the devDependencies of the project and included in the plugins array in the vite.config.js config file.

npm i vite-plugin-singlefile --save-dev

Then update vite.config.js file by adding these in the config:

//import plugin
import { viteSingleFile } from "vite-plugin-singlefile"
//add plugin to plugins array
plugins: [ viteSingleFile()]

Changelog

❯ Read the changelog here

Issue reporting

• Use the issue tracker.
• Provide a clear and descriptive title.
• Describe the steps to reproduce the issue (for bugs).
• Explain the expected and actual behavior (for bugs).
• Describe why the feature is needed (for feature requests).

Licence

This project is licensed under the MIT License - see the LICENSE for details.

Contributing

See contributing for more details.

Contact

Edwin, Mustafa