How app preview module works - ashrfras/jinni-ide GitHub Wiki

Jinni includes a special class named خادمتطوير.جني(literally, DevelopmentServer.jinni), which functions as a Service Worker responsible for intercepting requests to a specific preview path and dynamically serving content from the local database.

How It Works

The خادمتطوير.جني class acts as a middleware between the browser and the application’s local storage. It is registered as a service worker and is programmed to intercept all fetch requests that begin with the /ئختبر path. When such a request is detected, the service worker does not forward it to the network. Instead, it queries the local database to retrieve the corresponding file and responds directly with its contents.

This setup allows developers to preview their applications in real time without requiring a server or external deployment. It also ensures that the previewed content is always consistent with the current saved state in the local development environment.

Manual Access to Preview Links

Users can manually test their application by typing URLs that begin with /ئختبر directly into the browser’s address bar. These URLs correspond to files or resources stored in the local development database and are served instantly by the خادمتطوير.جني service worker.

For example:

https://localhost/ئختبر/رئيسية

This would serve the رئيسية page file from the local database if it exists.

Integrated Preview

In addition to manual access, Jinni also provides an automatic mechanism to streamline the preview experience. The component مشهدمعاينة.جني is responsible for requesting a live preview each time the user saves changes to the application.

After every successful save operation, this component automatically triggers a request to /ئختبر, allowing users to immediately see their updates in action without needing to reload or navigate manually. This tight integration enhances the development workflow by minimizing friction and supporting rapid iterations.

Summary

  • خادمتطوير.جني is a Jinni class that registers a service worker.
  • It intercepts requests to /ئختبر/* and serves corresponding files from the local database.
  • Users can type /ئختبر links manually or use the مشهدمعاينة.جني component for automatic previews.
  • This system ensures fast, offline-capable application previews tailored for smooth local development.