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 three templates (Custom, Vanilla JS or VUE). The Custom template mirrors Vanilla but lets you toggle the optional components (store, iframe testing, SVG metadata cleaner and icons) — from a minimal core up to the full Vanilla feature set.
• 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

By default, you'll be prompted for inputs to generate a boilerplate:

Template? (Vanilla Javascript/VUE.js/Custom)
Components? (Custom template only — multi-select)
Widget name?
Widget description?
Widget developer name? **
Widget developer email? **
Install deps? (yes/no)

You can also provide non-interactive flags to skip prompts:

• --type, -t: Template type. Accepted values: vue, vanilla, custom (case-insensitive).
• --features, -f: For -t custom only. Comma-separated component ids, or all / none. Toggleable ids: store, iframe, svgclean, icons. The CSS library (css), auto-resize (resize), VLEAPI stub, release zip, ESLint and Prettier are always included and cannot be turned off (this also always pulls the @ou-imdt/css and @ou-imdt/utils dependencies). The local data.json is part of the store component. Selecting all reproduces the full Vanilla feature set (same files and package.json); none produces a core that still includes the always-on components above.
• --name, -n: Widget/App name.
• --desc, -d: Description.
• --install, -i: Whether to install dependencies. Accepted: yes/no, y/n, true/false, 1/0.

Examples:

Non-interactive (all flags):

create --type vue --name app_name --desc "App description" --install yes
create -t vanilla -n widget-hello -d "Simple widget" -i no
create -t custom --features store,iframe,svgclean -n widget-partial -d "Partial widget" -i no
create -t custom --features none -n widget-bare -d "Barebones widget" -i no

Partial (prompts for what’s missing):

create --type vue --name app_name            # prompts for description and install
create --name app_name -i yes                # prompts for type and description
create --desc "My app" --install no         # prompts for type and name

Interactive (no flags):

create

** 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

-t, --type      Template type (custom | vanilla | vue)
-f, --features  Custom components (ids | all | none)
-n, --name      Widget/App name
-d, --desc      Description
-i, --install   Whether to install dependencies (yes/no)
-c, --clear     Clear the console Default: true
-v, --version   Print CLI version Default: false

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

Addison, Mustafa