SenangStart Actions

English

Bahasa Melayu

English

Bahasa Melayu

Appearance

Getting Started ​

SenangStart Actions is a lightweight, declarative JavaScript framework for building reactive user interfaces without a build step.

Installation ​

Full Bundle ​

The easiest way to use SenangStart Actions is to include the full bundle, which contains the Core framework and all standard directives.

Add the script tag to your HTML:

html
<script src="https://unpkg.com/@bookklik/senangstart-actions"></script>

Or use jsDelivr:

html
<script src="https://cdn.jsdelivr.net/npm/@bookklik/senangstart-actions"></script>

Modular Bundle (Advanced) ​

For production applications where bundle size is critical, you can load only the Core framework and the specific directives you need.

html
<!-- 1. Load Core (Required) -->
<script src="https://cdn.jsdelivr.net/npm/@bookklik/senangstart-actions/dist/senangstart-actions-core.min.js"></script>

<!-- 2. Load Directives you need -->
<script src="https://cdn.jsdelivr.net/npm/@bookklik/senangstart-actions/dist/senangstart-actions-data.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bookklik/senangstart-actions/dist/senangstart-actions-text.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bookklik/senangstart-actions/dist/senangstart-actions-on.min.js"></script>

Each directive is available as a separate file in the dist/ directory. The Core bundle provides the reactivity system, while individual bundles add specific functionality (e.g., ss-data, ss-if, ss-for).

npm ​

bash
npm install @bookklik/senangstart-actions
javascript
import SenangStart from '@bookklik/senangstart-actions'

Basic Usage ​

Reactive Data with ss-data ​

The ss-data attribute defines a reactive scope with initial data:

html
<div ss-data="{ message: 'Hello, World!' }">
  <p ss-text="message"></p>
</div>

Text Binding with ss-text ​

Use ss-text to bind data to element text content:

html
<div ss-data="{ name: 'SenangStart' }">
  <h1 ss-text="'Welcome to ' + name"></h1>
</div>

Event Handling with ss-on ​

Handle DOM events with ss-on:eventname:

html
<div ss-data="{ count: 0 }">
  <p ss-text="count"></p>
  <button ss-on:click="count++">+</button>
  <button ss-on:click="count--">-</button>
</div>

Your First App ​

Here's a complete counter example:

html
<!DOCTYPE html>
<html>
<head>
  <title>My First SenangStart App</title>
</head>
<body>
  <div ss-data="{ count: 0 }">
    <h1>Counter: <span ss-text="count">0</span></h1>
    <button ss-on:click="count++">Increment</button>
    <button ss-on:click="count--">Decrement</button>
    <button ss-on:click="count = 0">Reset</button>
  </div>

  <script src="https://unpkg.com/@bookklik/senangstart-actions"></script>
</body>
</html>

For AI Assistants ​

If you are using AI coding assistants (like Cursor, Windsurf, or others), you can provide them with our specialized context file. This file contains the full list of available directives and properties in a format optimized for LLMs.

File location: https://bookklik-technologies.github.io/senangstart-actions/llms.txt

Next Steps ​