StrideJS Live Demo Examples

<div id="app-core" class="box">
    <h2 s-text="title">Loading Title...</h2>
    <button s-click="increment">
      Clicks: <span s-text="count">0</span>
    </button>
  </div>

Stride.create('#app-core', {
      state: {
        title: "StrideJS Reactive State Engine Operational",
        count: 0
      },
      updated() {
        console.log(`StrideJS Telemetry Hook: DOM re-painted! Current count metric is now: ${this.state.count}`);
      },
      methods: {
        increment() {
          this.state.count++;
        }
      }
    });

<div id="app-list" class="box">
    <h2>Two-Way Binding & Lists</h2>
    <input type="text" s-model="newItemText" placeholder="Add a developer requirement...">
    <button s-click="addItem">Add Item</button>
    <p>
      Live Input Model State: <strong s-text="newItemText"></strong>
    </p>
    <ul>
      <li s-loop="items">
        <span s-text="item.name">Placeholder Item</span>
      </li>
    </ul>
  </div>

Stride.create('#app-list', {
     state: {
       newItemText: "", // 1. Registers the live string state track
       items: [
         { name: "Zero build configurations" },
         { name: "Zero legacy package fatigue" }
       ]
     },
     methods: {
       addItem() {
         // 2. Reject execution if the user tries to submit empty text
         if (this.state.newItemText.trim() === "") return;
         // 3. Dynamic payload injection pulling straight from your model state
         this.state.items.push({
           name: this.state.newItemText
         });
         // 4. Reset state model back to empty (Two-way binding automatically clears the physical input box)
         this.state.newItemText = "";
       }
     }
   });

<div id="app-conditional" class="box">
    <h2>Structural Conditionals</h2>
    <button s-click="toggleAlert">Toggle Alert Box</button>
    <div s-if="showAlert">
      <strong>Success!</strong> The reactive state manager is natively tracking and rendering conditionals.
    </div>
  </div>

Stride.create('#app-conditional', {
      state: {
        showAlert: true // The initial layout state
      },
      methods: {
        toggleAlert() {
          // Simply flip the boolean value
          this.state.showAlert = !this.state.showAlert;
        }
      }
    });

<div id="app-form" class="box">
    <h2>Forms & Native Validation</h2>
    <form s-submit="handleRegistration" novalidate>
      <div>
        <input type="text" name="username" required minlength="5" placeholder="Username (Min 5 chars)">
      </div>
      <div>
        <input type="email" name="email" required placeholder="Email Address">
      </div>
      <button type="submit">Register Account</button>
    </form>
    <p>
      Intercepted Submission Output: <span id="form-debugger">Waiting for input...</span>
    </p>
  </div>

Stride.create('#app-form', {
      state: {}, // No state properties needed; it handles form data fields on demand
      methods: {
        handleRegistration(payload, event) {
          // payload holds a clean object mapping name attributes directly to user input values
          const output = `User: ${payload.username} | Email: ${payload.email}`;
          document.getElementById('form-debugger').textContent = output;
          // Clear inputs natively using standard HTML reset mechanisms
          event.target.reset();
        }
      }
    });

<div id="app-attributes" class="box">
    <h2>Reactive Attributes</h2>
    <p>
      <a s-attr:href="linkUrl" target="_blank">
        Click to visit our documentation portal
      </a>
    </p>
    <div>
      <button s-click="toggleSubmitState">
        Toggle Lockdown Action State
      </button>
      <button s-attr:disabled="isLocked">
        Secure Submission Pipeline Target
      </button>
    </div>
    <p>
      Lockdown Status value in memory: <strong s-text="isLocked"></strong>
    </p>
  </div>

Stride.create('#app-attributes', {
      state: {
        linkUrl: "/docs.html",
        isLocked: false
      },
      methods: {
        toggleSubmitState() {
          this.state.isLocked = !this.state.isLocked;
        }
      }
    });

<div id="app-classes" class="box">
    <h2>Reactive Classes</h2>
    <div class="state-box" s-class:is-active-state="isActive">
      System Status: <span s-text="statusText">Standard Standby Mode</span>
    </div>
    <button s-click="toggleSystemStatus">Toggle System State</button>
  </div>

Stride.create('#app-classes', {
      state: {
        isActive: false,
        statusText: "System in Standby Mode"
      },
      methods: {
        toggleSystemStatus() {
          this.state.isActive = !this.state.isActive;
          this.state.statusText = this.state.isActive
            ? "System Operational — Live Class Attached!"
            : "System in Standby Mode";
        }
      }
    });

<div id="app-keyboard" class="box">
    <h2>Keyboard Input & Lifecycle</h2>
    <p>
      Component State Log: <span s-text="lifecycleMessage"></span>
    </p>
    <input type="text" s-model="currentNote" s-keyup:enter="appendNote" placeholder="Type a note and hit ENTER...">
    <p>Active Session Notes:</p>
    <ul>
      <li s-loop="notes">
        <span s-text="item.text"></span>
      </li>
    </ul>
  </div>

Stride.create('#app-keyboard', {
      state: {
        lifecycleMessage: "Awaiting initialization signal...",
        currentNote: "",
        notes: []
      },
      mounted() {
        this.state.lifecycleMessage = "Stride Runtime Mounted Successfully!";
        this.state.notes.push({ text: "Baseline framework telemetry operational." });
      },
      methods: {
        appendNote() {
          if (this.state.currentNote.trim() === "") {
            return;
          }
          this.state.notes.push({ text: this.state.currentNote });
          this.state.currentNote = "";
        }
      }
    });

<div id="app-modifiers" class="box" s-cloak>
    <h2>Event Modifiers & Cloaking</h2>
    <p>
      Cloak status: <span>Uncloaked successfully (Zero layout flashing)</span>
    </p>
    <a href="https://google.com" s-click.prevent="trackClick">
      Intercept Anchor Trigger — Clicks: <span s-text="clickCounter">0</span>
    </a>
    <p>
      *Note: Clicking this anchor will increment state metrics rather than executing its raw href redirect routing destination.
    </p>
  </div>

Stride.create('#app-modifiers', {
      state: {
        clickCounter: 0
      },
      methods: {
        trackClick() {
          this.state.clickCounter++;
        }
      }
    });

<div id="app-provisional" class="box">
    <h2>Visibility & Change Events</h2>
    <button s-click="togglePanel">Toggle Inline Panel View</button>
    <div s-show="panelOpen">
      <strong>CSS Display Active!</strong> This box is handled via high-speed styling toggles.
    </div>
    <div>
      <label for="theme-select">Select Framework Environment:</label>
      <select id="theme-select" s-change="updateSelectedValue">
        <option value="Production CDN Cloud Node">Production CDN</option>
        <option value="Staging Matrix Layer">Staging Sandbox</option>
        <option value="Local Machine Workstation">Local Node</option>
      </select>
    </div>
    <p>
      Selected Environment Variable: <strong s-text="activeEnv">Production CDN Cloud Node</strong>
    </p>
  </div>

Stride.create('#app-provisional', {
      state: {
        panelOpen: true,
        activeEnv: "Production CDN Cloud Node"
      },
      methods: {
        togglePanel() {
          this.state.panelOpen = !this.state.panelOpen;
        },
        updateSelectedValue(event) {
          // Captures value right off the dropdown menu target element payload
          this.state.activeEnv = event.target.value;
        }
      }
    });

<div id="app-lifecycle-unmount" class="box">
    <h2>Unmount Lifecycle</h2>
    <button s-click="toggleElement">Destroy Reactive Sub-Node</button>
    <p>
      System Clean Logging: <span id="unmount-debugger">Stable monitoring operational.</span>
    </p>
    <div s-if="visible">
      Active Structural DOM Element Zone
    </div>
  </div>

Stride.create('#app-lifecycle-unmount', {
      state: { visible: true },
      unmounted() {
        // Fires automatically when s-if drops to false and deletes the sub-node
        document.getElementById('unmount-debugger').textContent = "Garbage Collection Triggered: unmounted() executed cleanly!";
      },
      methods: {
        toggleElement() {
          this.state.visible = !this.state.visible;
          if (this.state.visible) {
            document.getElementById('unmount-debugger').textContent = "Stable monitoring operational.";
          }
        }
      }
    });

<div class="box">
    <h2>SPA Router</h2>
    <nav>
      <a href="/home" s-route>Home Panel</a>
      <a href="/about" s-route>About Panel</a>
      <a href="/aboutbadnotreal" s-route>Not real Document route</a>
      <a href="/profile/john_doe" s-route>Profile: John Doe</a>
      <a href="/profile/jane_smith" s-route>Profile: Jane Smith</a>
    </nav>
    <div s-view>
      Welcome to the StrideJS Workspace Dashboard Core. Select a navigation panel above to begin routing.
    </div>
  </div>

Stride.router({
      routes: {
        '/home': '/home.html',
        '/about': '/about.html',
        '/profile/:username': '/profile-view.html',
        '/404': '/404.html'
      }
    });

<div id="widget-sender" class="box">
    <h2>Shared Store — Control</h2>
    <input type="text" s-model="store.globalBroadcastMessage" placeholder="Broadcast to all widgets...">
    <button s-click="fireGlobalAction">Increment Central Metrics</button>
  </div>

Stride.store({
      state: {
        globalBroadcastMessage: "Hello from master store telemetry",
        centralClickCount: 0
      },
      methods: {
        fireGlobalAction() {
          // 'this' scope references the central store proxy root cleanly
          this.state.centralClickCount++;
        }
      }
    });
Stride.create('#widget-sender');

<div id="widget-receiver" class="box">
    <h2>Shared Store — Receiver</h2>
    <p>Live Broadcast Message value in central store: <strong s-text="store.globalBroadcastMessage"></strong></p>
    <p>Central System Metric value: <strong s-text="store.centralClickCount">0</strong></p>
  </div>

// Uses the same Stride.store(...) initialized by the control example.
Stride.create('#widget-receiver');

<div id="app-animations" class="box">
    <h2>CSS Transitions</h2>
    <button s-click="toggleBox">Animate Component Box</button>
    <div s-if="boxOpen" s-transition="fade" class="fade-element">
      <strong>Fluid CSS Pipeline!</strong> StrideJS delays DOM node cleanup cycles until the browser animation finishes.
    </div>
  </div>

Stride.create('#app-animations', {
      state: {
        boxOpen: true
      },
      methods: {
        toggleBox() {
          this.state.boxOpen = !this.state.boxOpen;
        }
      }
    });

<div id="app-components" class="box">
    <h2>HTML Includes</h2>
    <div s-include="card.html">Loading external template component...</div>
  </div>

Stride.create('#app-components', {
     state: {
       componentMessage: "Component parameters active!"
     }
   });

<div id="app-event-sender" class="box">
    <h2>Event Bus — Sender</h2>
    <button s-click="sendNotification">Emit Global Alert Signal</button>
  </div>

Stride.create('#app-event-sender', {
      methods: {
        sendNotification() {
          // Fire custom event name along with a payload object
          this.emit('broadcast-signal', {
            message: "System Alert: Wire pulse intercepted at " + new Date().toLocaleTimeString()
          });
        }
      }
    });

<div id="app-event-receiver" class="box">
    <h2>Event Bus — Receiver</h2>
    <p>Last Received Bus Event Data: <strong s-text="incomingAlert">Listening for wire pulses...</strong></p>
  </div>

Stride.create('#app-event-receiver', {
      state: {
        incomingAlert: "Listening for wire pulses..."
      },
      mounted() {
        // Register the event bus listener inside the initialization lifecycle block
        this.on('broadcast-signal', (payload) => {
          // Mutate the local proxy state with the incoming message data string
          this.state.incomingAlert = payload.message;
        });
      }
    });

<div id="app-network-client" class="box">
    <h2>Fetch Interceptors</h2>
    <button s-click="loadServerData('/about.html')">Trigger Intercepted API Fetch</button>
    <p>
      Server Data Response: <strong s-text="apiResponse">Awaiting network query...</strong>
    </p>
  </div>

Stride.interceptors.request = (config) => {
      console.log("StrideJS Interceptor: Catching request pipeline. Injecting credentials...");
      config.headers = config.headers || {};
      config.headers['Authorization'] = 'Bearer Stride_Secure_Token_ABC123';
      return config;
    };
Stride.interceptors.response = async (response) => {
      console.log("StrideJS Interceptor: Catching response telemetry. Status:", response.status);
      return response;
    };
Stride.create('#app-network-client', {
      state: {
        apiResponse: "Awaiting network query..."
      },
      methods: {
        async loadServerData(targetUrl) {
          // Verify that a real string was passed from the HTML layer rather than a native click event object
          const url = (typeof targetUrl === 'string') ? targetUrl.trim() : undefined;
          if (!url) {
            this.state.apiResponse = "Configuration Error: No valid target endpoint or file path defined.";
            console.warn("StrideJS Network Pipeline: Execution aborted due to an undefined target parameter.");
            return;
          }
          this.state.apiResponse = `Connecting to endpoint [${url}]...`;
          const controller = new AbortController();
          const timeoutId = setTimeout(() => controller.abort(), 5000); // 5-second safety timeout
          try {
            // Execute the connection using the precisely defined parameter
            const response = await this.fetch(url, { signal: controller.signal });
            clearTimeout(timeoutId);
            if (response.ok) {
              const html = await response.text();
              this.state.apiResponse = `Connected successfully! (Server Response Length for ${url}: ${html.length} characters)`;
            } else {
              this.state.apiResponse = `Server Error Encountered: Status for ${url} ${response.status} (${response.statusText})`;
            }
          } catch (e) {
            clearTimeout(timeoutId);
            if (e.name === 'AbortError') {
              this.state.apiResponse = "Network Request Interrupted: Connection Timed Out (5s).";
            } else {
              this.state.apiResponse = "Network Failure: Unable to establish server connection.";
            }
          }
        }
      }
    });