FreeSchema Widget Editor

A VSCode extension for editing widgets stored in your FreeSchema online database. Edit widgets like in AppBuilder, but directly within VS Code!

Features

• Authentication: Secure login to your FreeSchema account
• Multi-File Widget Editing: Edit HTML, CSS, JavaScript, and lifecycle files in separate tabs
• Lifecycle Hooks: Full support for before_render, after_render, update, mount_child, and dependency files
• Customizable Layout: Configure which tabs open automatically and how they're arranged
• Live Editing: Edit widget components with syntax highlighting and IntelliSense
• Auto-save: Save changes directly to the FreeSchema database with Ctrl+S

Setup

Installation

1. Install dependencies:

   npm install
   

2. Compile the extension:

   npm run compile
   

3. Press F5 in VSCode to run the extension in debug mode

Configuration

You can configure the FreeSchema extension in your VSCode settings:

{
  "freeschema.apiEndpoint": "https://boomconsole.com",
  "freeschema.autoOpenTabs": ["html", "css", "js", "lifecycle"],
  "freeschema.tabLayout": "horizontal"
}

Configuration Options:

• freeschema.apiEndpoint: FreeSchema API endpoint URL (default: https://boomconsole.com)
• freeschema.autoOpenTabs: Array of tabs to automatically open when loading a widget
  • Available options: html, css, js, lifecycle, before_render, after_render, update, mount_child, dependency
  • lifecycle: Recommended - Opens a single consolidated file with all lifecycle hooks (before_render, after_render, update, mount_child, dependency) clearly separated
  • Default: ["html", "css", "js", "lifecycle"]
• freeschema.tabLayout: Layout style for widget editor tabs
  • horizontal: Side-by-side (default)
  • grid: 2x3 grid layout
  • vertical: Stacked vertically

Usage

1. Login

First, authenticate with your FreeSchema account:

• Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
• Run: FreeSchema: Login
• Enter your email and password

2. Open a Widget

To edit a widget:

• Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
• Run: FreeSchema: Open Widget by ID
• Enter the widget ID
• 4 tabs will open automatically with the widget files:
  • HTML - Widget HTML structure
  • CSS - Widget styles
  • JavaScript - Main widget logic and interactivity
  • Lifecycle - ALL lifecycle hooks in one file!
    • Custom Functions
    • Before Render
    • After Render
    • Update
    • Mount Child
    • Dependency
• Edit any file and save with Ctrl+S (Cmd+S on Mac)
• Changes are automatically saved to the FreeSchema database

Why the consolidated Lifecycle file? Instead of juggling 6+ tabs, all your lifecycle code is in one scrollable file with clear section markers. Much cleaner than AppBuilder's separate tabs!

2.1 Open Individual Widget Files

You can also open individual widget files for an already-loaded widget:

• FreeSchema: Open Before Render File
• FreeSchema: Open After Render File
• FreeSchema: Open Update File
• FreeSchema: Open Mount Child File
• FreeSchema: Open Dependency File

These commands work when you have a widget tab open, or you can enter a widget ID.

3. Create a New Widget

To create a new widget:

• Open Command Palette
• Run: FreeSchema: Create New Widget
• Enter a name for the widget
• The new widget will be created and opened for editing

4. Logout

To logout:

• Open Command Palette
• Run: FreeSchema: Logout

API Configuration

This extension expects the following API endpoints (update these in the source code to match your FreeSchema API):

• POST /auth/login - Login endpoint

  • Request: { "email": string, "password": string }
  • Response: { "token": string }

• GET /widgets/:id - Get widget by ID

  • Headers: Authorization: Bearer <token>
  • Response: { "id": string, "name": string, "data": any, "createdAt": string, "updatedAt": string }

• PUT /widgets/:id - Update widget

  • Headers: Authorization: Bearer <token>
  • Request: { "data": any }

• POST /widgets - Create new widget

  • Headers: Authorization: Bearer <token>
  • Request: { "name": string, "data": any }
  • Response: { "id": string, "name": string, "data": any, "createdAt": string, "updatedAt": string }

Development

Building

npm run compile

Watch Mode

npm run watch

Package

npm install -g @vscode/vsce
vsce package

Security

• Authentication tokens are stored securely using VSCode's Secret Storage API
• Tokens expire after 24 hours and require re-authentication
• Passwords are never stored locally

License

MIT