DSI CodeSwing Playground

A local CodePen-like development environment for VS Code, powered by the custom DSI CodeSwing extension.

Important

Automatic Extension Installation: Opening this workspace will automatically build and install the DSI CodeSwing extension to your current VS Code profile. To avoid cluttering your main environment, it is highly recommended to use a dedicated VS Code profile for this project.

Features

• Automated Workflow: Bootstrap script handles environment setup, including packaging and installing the extension from local source.
• Integrated Watcher: The extension contains a native asset watcher that compiles shared resources and logs to the DSI.Watcher output channel.
• Live Preview: Real-time updates as you code with automatic HTML wrapping, SCSS compilation, and TypeScript transpilation.
• Console Redirection: console.log, alert, and errors are redirected to the DSI.Console output channel or native VS Code notifications.
• Swing Navigator: A dedicated VS Code sidebar for browsing, creating, and opening playgrounds with integrated search and context menus.
• HTML Snippets: Custom auto-completion for HTML chunks stored in the project.
• Session Persistence: Automatically restores the last opened swing when VS Code is restarted.

Project Structure

• swings/: Contains all your playground projects.
• snippets/: User-defined HTML snippets for auto-completion.
• shared/:
  • scss/: Shared SCSS variables and partials.
  • css/: Compiled shared styles (automated).
  • ts/: Shared TypeScript source.
  • js/: Compiled shared scripts (automated).
• extensions/:
  • dsi-codeswing/: Source code for the custom DSI CodeSwing extension.
• scripts/:
  • bootstrap.js: Single script to setup environment and install the extension.
  • new-swing.js: CLI script for creating new swings.

Getting Started

Prerequisites

Before you begin, ensure you have Git and Node.js (LTS recommended) installed on your system.

1. Clone and Open

Clone the repository to your local machine and open it using a dedicated VS Code profile (named "CodeSwing") to ensure the playground extension doesn't interfere with your main development environment:

git clone https://git.twixed.net/twix/DSI.CodeSwing.git
cd DSI.CodeSwing
code --profile CodeSwing .

Opening the workspace should trigger the automatic installation of the DSI CodeSwing extension. Every subsequent opnening of the workspace would trigger extension update check and recompilation and installation if needed.

2. Create a New Swing

Use the DSI CodeSwing sidebar (+) button or run:

npm run new-swing my-cool-idea

3. Open a Swing

In the DSI CodeSwing sidebar (Library icon), double-click on any swing to open it.

HTML Snippets (Macros)

You can define custom HTML chunks to be quickly inserted into your index.html editors.

1. Create a Snippet: Add any .html file to the snippets/ folder in the root of the project (e.g., snippets/aeon-card.html).
2. Use in Editor: In any swing's index.html, type : followed by the snippet name (e.g., :aeon).
3. IntelliSense: VS Code will offer a completion menu. Press Tab or Enter to replace the trigger with the full content of the snippet file.

Development Workflow

1. Code directly: Edit script.ts, style.scss, and index.html in the swing's root directory.
2. Configure Swing: Use the Settings tab (next to Preview) to enable libraries like jQuery, Bootstrap 5, FontAwesome 6 Pro, Lottie, or jQuery Validation, and to select shared CSS/JS files.
3. Use Snippets: Type : in index.html to quickly insert predefined HTML structures from the snippets/ folder.
4. Monitor Progress: Check the DSI.Watcher and DSI.Console output channels for build logs and runtime output.
5. Import Shared Resources:
   • SCSS: @import "variables"; (resolves to shared/scss).
   • TS: import { ... } from "swingutils"; (resolves to shared/ts/swingutils.ts).
6. Live Preview: The environment reloads the preview as you save or type in your source files.