Windows 93 Documentation

website·Indexed 30 days ago

https://docs.win93.xyz

Developer documentation for Windows 93, covering app creation via app.manifest.json5, the Component base class for UI elements, and system internals including the filesystem (fs), clipboard, and various managers for themes, users, and mimetypes. Includes guides on folder structure, .desktop files, and the Plan reactive system.

Tokens
21.5K
Snippets
134
Records
194
Agent score
50%

What's inside Windows 93

  1. Overview of the Win93 Dock component

    The dock is a system component located within the taskbar (footer#taskbar) that lists all open windows. It provides buttons for users to activate, minimize, maximize, and close windows. It also manages context menus for window title bars. Because it is a system component created by the desktop, developers do not need to instantiate it manually.
  2. Overview of win93 System Managers

    Managers in win93 are singleton services that extend the ConfigFile class. Each manager is responsible for a specific system domain, maintains its own persistent configuration file (typically in .json5 format), and is accessible via the os API (defined in 42/api/os.js).
  3. Understand the Windows93 boot entry point logic

    The primary entry point for Windows93 is /bios/bios.js. This script determines the initial state of the system by performing one of three actions: showing the users manager screen (if the active user is undefined), routing directly to the desktop (loading /desktop.js on reloads), or initiating the boot sequence via /bios/boot.js. Additionally, the BIOS layer preloads user configuration and timestamp metadata used for system upgrades.
  4. Import and access the mimetypesManager

    The mimetypesManager is used to map file extensions and basenames to MIME types and the applications capable of opening them. Base mappings are sourced from /42/lib/constant/FILE_TYPES.js.
    import { mimetypesManager } from "/42/api/os/managers/mimetypesManager.js"
    // Or
    const mimetypesManager = sys42.mimetypes
  5. Implement a file and folder grid with ui-folder

    The ui-folder component displays a list of files and folders in a grid layout. It supports drag-and-drop, context menus, fuzzy search, and standard file operations. Note that this is a low-level component; for a complete file explorer dialog, use the explorer component instead.
    // Modular usage
    import { folder } from "/42/ui/media/folder.js"
    
    const myFolder = folder({
      value: "~/documents/",
    })
    // Plan usage
    {
      tag: "ui-folder",
      value: "~/documents/",
    }
  6. Obtain an App object

    Depending on the app architecture, use the following methods to retrieve the App object. Do not create new instances of App manually; instead, use the exec API or the Apps Manager to spawn apps.
    // In document-based apps
    const app = window.parent.os.apps.launched.get(APP_INIT.id);
    
    // In module-based apps
    // The App object is passed through module exports
  7. Define UI components using the Plan reactive system

    Plan is a reactive system used to define UI components using JSON objects within JavaScript modules. It is intended for creating complex windows in JavaScript apps (it cannot be used with HTML documents). For simple alert dialogs or prompts, use invocables instead.
  8. Access the appsManager

    The appsManager is responsible for maintaining the list of installed apps and launching them. It can be accessed via a module import or through the global sys42 object.
    import { appsManager } from "/42/api/os/managers/appsManager.js"
    // Or
    const appsManager = sys42.apps
  9. Add help and about information to an app

    Adding any of the following properties will trigger a ? button in the app, which opens a help dialog. authors is an array of objects containing name, web, and description.
    {
      "about": "docs/about.md",
      "description": "This app does amazing things.",
      "license": "MIT",
      "authors": [
        { "name": "Developer Name", "web": "https://example.com" }
      ]
    }
  10. Use ConfigFile to manage persistent system settings

    The ConfigFile class serves as the base for system configuration managers. It handles reading and writing a single data file via the persist API. Supported file extensions are .json, .json5, and .cbor.

    File Path Resolution:

    • Relative paths (e.g., "config/apps.json5"): Resolved to the current user's $HOME directory. These are user-specific configurations.
    • Absolute paths (e.g., "/users.json5"): Resolved as global files shared by all users.
  11. Import and access the trashManager

    The trashManager is used to move deleted files to the /trash/ directory and restore them. It can be imported as a module or accessed via the global sys42 object.
    import { trashManager } from "/42/api/os/managers/trashManager.js"
    // Or
    const trashManager = sys42.trash
  12. Use the persist module for filesystem-backed storage

    The persist module provides a low-level key-value storage system backed by the filesystem, acting as a registry for application configuration and state data. For higher-level needs, consider using the keep.js module or the ConfigFile class (used for system configuration managers).
    import { persist } from "/42/api/persist.js"