Getting Started

Strvct is designed to be integrated directly into your application codebase as a Git submodule. It runs as a client-side single-page application in the browser and requires no compile-step template transforms, virtual DOM bundlers, or complex build toolchains.

Quick Workflow Overview:

1. Add Submodule: Link Strvct as a git submodule in your repository.
2. Declare Imports: List application source files in _imports.json.
3. Run Build: Generate CAM catalog artifacts (_index.json and _cam.json.zip).
4. Start Server: Launch CliWebServer.js locally.
5. Create Nodes: Author annotated domain models inheriting from SvStorableNode.
6. Debug: Inspect live state and set breakpoints in Chrome DevTools or Cursor/VSCode.

Before starting, ensure you have the following installed:

• Git (with submodule support)
• Node.js (v18+ recommended)
• Cursor / VSCode (for Chrome DevTools debugging support)

From your project's root directory, add Strvct as a Git submodule:

git submodule add https://github.com/stevedekorte/strvct.net.git strvct

If deploying your application to GitHub Pages or static hosts that run Jekyll by default, create a .nojekyll file in your root folder:

touch .nojekyll

A standard Strvct application uses the following directory layout:

your-project/
├── strvct/              # Framework submodule
├── app/                 # Application domain models & source code
│   ├── _imports.json    # Declares app source files
│   └── Character.js     # Your domain classes
├── resources/           # Binary assets (icons, images, sounds)
├── build/               # Generated CAM artifacts (git-ignored)
│   ├── _index.json      # Resource metadata catalog with SHA-256 hashes
│   └── _cam.json.zip    # Zip bundle of hashed assets
├── _imports.json        # Root imports file (links strvct + app)
├── index.html           # HTML entry point
└── .nojekyll            # Prevents GitHub Pages Jekyll processing

Strvct uses _imports.json files to discover source files and manage dependency order instead of standard ES module imports. Every folder containing JavaScript or CSS resources specifies an _imports.json array:

[
    "_css.css",
    "strvct/_imports.json",
    "app/_imports.json"
]

Import Rules:

• Paths are relative to the directory containing the _imports.json file.
• Direct file paths (e.g., "Character.js", "_css.css") are included in order.
• Nested _imports.json paths (e.g., "app/_imports.json") are resolved recursively.

Strvct uses a Content-Addressable Memory (CAM) build system. The build process scans the root _imports.json tree and generates runtime resource bundles in the build/ directory.

Running the Build Command:

To run the source code indexer manually:

node ./strvct/source/boot/index-builder/ImportsIndexer.js

To index non-code media resources (icons, audio):

node ./strvct/source/boot/index-builder/SvResourceIndexer.js ./resources/icons ./resources/sounds

If your project includes a justfile, you can run:

just build

Strvct includes a lightweight local HTTP/HTTPS web server (CliWebServer.js).

Start the development server:

node ./strvct/webserver/CliWebServer.js --port 8000 --secure false

Command Flags:

• --port <number>: Sets the local server port (default: 8000).
• --secure <true|false>: Enables HTTPS with self-signed certificates or HTTP mode.
• --config <path>: Optional server configuration file path.

Open http://localhost:8000 in your browser to load the application.

Because Strvct evaluates source files dynamically via the CAM loader, it appends sourceURL annotations to evaluated scripts. This enables full native browser debugging in Chrome DevTools or Cursor/VSCode:

• Breakpoints: Set breakpoints directly in your source JavaScript files in Chrome DevTools Sources tab.
• Call Stacks: Complete stack traces map directly back to original file paths and line numbers.

Cursor / VSCode launch.json Configuration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Strvct App",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Create your first domain model class inheriting from SvStorableNode:

// app/Task.js
(class Task extends SvStorableNode {

    initPrototypeSlots () {
        {
            const slot = this.newSlot("title", "New Task");
            slot.setSlotType("String");
            slot.setShouldStoreSlot(true);   // Persists to IndexedDB
            slot.setSyncsToView(true);       // Live UI updates
            slot.setCanEditInspection(true); // Editable in Property Inspector
        }
        {
            const slot = this.newSlot("isCompleted", false);
            slot.setSlotType("Boolean");
            slot.setShouldStoreSlot(true);
            slot.setSyncsToView(true);
            slot.setCanEditInspection(true);
        }
    }

    initPrototype () {
        this.setTitle("Task");
        this.setShouldStore(true);
    }

}.initThisClass());

Add "app/Task.js" to your app/_imports.json, run just build, and reload your browser. Strvct will automatically generate editable form tiles, handle local persistence, and make your task node navigable in the Miller column browser!

• Technical Overview: High-level architecture and design philosophy.
• Nodes: Deep dive into SvNode inheritance and subnode management.
• Slots: Complete guide to property declaration and metadata annotations.