SSJSF

(Super Simple Javascript Framework)

Installation

To use this framework in your project, install it from NPM:

npm install ssjsframework

Overview

| File | Purpose | |------|--------------------------------------------------------------------------- |vite.config.js |Configures the build process.Resolves paths for ES Modules. | |package.json |Define project as ES Module.Includes Vite as dev dependency. | |index.html |Main entrypoint for the application. | |src/main.js |The JS entrypoint for the application. | |src/router.js |Lightweight client-side router class. | |src/component.js|Defines base class with setState, mount, and render methods| |src/store.js |Centralized state management (Pub/Sub). | |src/template.js|Tagged template literal helper for HTML rendering. |

Build Tools

• Powerered by Vite.
• Supports ES Modules natively
• Supports Multi-Page Application (MPA) structures via vite.config.js, for minimal overhead and maximum performance.

Routing

• Custom lightweight Router class that uses the browser's History API for navigation.
• Features async data loaders with in-memory caching to fetch and store data before rendering, preventing "waterfall" loading effects and ensuring instant subsequent page loads.

Component System

• Base Component Class: Provides state management (setState) and lifecycle hooks (mount, afterRender).
• Reactivity: Automatically updates the DOM when state changes, re-attaching event listeners defined in afterRender.

State Management

• Centralized Store: Implements a Publisher/Subscriber pattern to manage global application state.
• Subscription Model: Components can subscribe to state changes, allowing for automatic updates across the application whenever the global store is modified.

Dynamic Route Parameters

• Pattern Matching: Supports routes with parameters (e.g., /user/:id).
• Parameter Extraction: Automatically extracts values from the URL and passes them as props to the component or loader.

Virtual DOM

Scoped CSS

• CSS Modules: Leverages Vite's built-in support for *.module.css files.
• Isolation: Class names are hashed at build time (e.g., _title_1a2b3), ensuring styles defined for one component do not leak into others.

Server-Side Rendering

Templating

• Tagged Templates: Includes an html tag function to handle array joining and conditional rendering (null/false) automatically.
• Native Performance: Uses standard JavaScript template literals without the overhead of a Virtual DOM or compilation step.