Framework Features

The StoneJS Framework provides a comprehensive set of features for building modern web applications with a component-based architecture.

1. Component-Based Architecture

File Types

StoneJS handles different file types intelligently:

• Interpreted Files: .htm, .html, .css, .js, .ejs - Processed as EJS templates
• Binary with Dhandler Support: .png, .pdf, .xls, .xlsx - Served as static or handled by dhandler
• Pure Static: All other extensions - Served as-is or 404

Example Component

Define component logic and render HTML:

<%
const greeting = 'Hello from StoneJS!';
const items = ['Feature 1', 'Feature 2', 'Feature 3'];
%>

<h1><%= greeting %></h1>

<ul>
  <% items.forEach(item => { %>
    <li><%= item %></li>
  <% }); %>
</ul>

2. Include System

Reuse components across your application with the powerful include system. Includes process through the full autohandler/dhandler chain.

Include with absolute path:

<% await include('/shared/header.ejs') %>

Include with relative path:

<% await include('/demo/components/widget.html') %>

Include with parameters:

<% await include('components/card.ejs', {
  title: 'Card Title',
  content: 'Card content here'
}) %>

See include examples and documentation →

3. Global Context Access

Every component has access to a rich global context:

Explore the context system →

4. Hierarchical Layouts (Autohandlers)

Create nested layouts that automatically wrap child components:

Learn about autohandlers →

5. Dynamic Routing (Dhandlers)

Handle missing files dynamically with dhandlers - perfect for:

• REST APIs
• Dynamic file generation
• Custom 404 pages
• URL routing patterns

Learn more about Dhandlers →

6. Built-in Caching

Improve performance with the integrated caching system. The callback function only runs if cache is empty:

<%
const data = await $cache.remember('key', 3600, async () => {
  return await fetchExpensiveData();
});
%>

See caching in action →

7. Session Management

Built-in session support for user state management.

Read session:

<%
const userId = $session.userId;
%>

Write session:

<%
$session.cart = ['item1', 'item2'];
%>

Delete session data:

<%
delete $session.tempData;
%>

Try the session demo →

8. Database Integration

Connect to PostgreSQL databases and query data directly from your components:

<%
const result = await $db.query('SELECT * FROM users WHERE id = $1', [userId]);
const user = result.rows[0];
%>

The framework provides a pre-configured database connection pool accessible via $db in all components.

See database examples →

9. NPM Module Support

Use any Node.js built-in module or installed npm package directly in your components:

<%
const crypto = require('crypto');
const hash = crypto.createHash('md5').update('text').digest('hex');

const path = require('path');
const fileName = path.basename(__filename);
%>

All components have access to require(), __filename, and __dirname.

Explore NPM module usage →

10. Section Tags

Organize your component code with special section tags:

Example with multiple tags:

<%%doc>
User profile component
Displays user information with caching
</doc%%>

<%%once>
const DEFAULT_AVATAR = '/images/avatar.png';
</once%%>

<%%init>
const userId = $req.params.id;
const user = await $db.query('SELECT * FROM users WHERE id = $1', [userId]);
</init%%>

<h1><%= user.name %></h1>

<%%cleanup>
await logProfileView(userId);
</cleanup%%>

See section tags in action →

11. Development Features

Performance

Current framework statistics:

• Environment: production
• Component Path: /data/embedded-apps/pages/demo/features.html
• Active Autohandlers: 1