Spry LogoSpry Docs

Templates & Partials

An overview of the Reusable code snippets and template interpolation in Spry.

Reusable code snippets and template interpolation in Spry

Template Interpolation

Use JavaScript template literals inside your SQL code blocks for dynamic content generation:

```sql users.sql
SELECT 'table' AS component;
SELECT ${paginate("users", 20)} AS page_size;
```

Built-in Template Functions

Spry provides several built-in template functions:

Pagination

Add pagination to your queries:

SELECT ${paginate("table_name", 25)} AS component;

Generate navigation menu items:

SELECT ${md.link("route", ["param1", "param2"], "label")} AS content;

Automatically generate breadcrumb navigation:

SELECT ${md.breadcrumbs()} AS component;

Partials System

Partials are reusable code snippets that can be injected into multiple places:

# Partials

```sql _partial_header.sql
SELECT 'shell' AS component,
       'My App' AS title,
       'menu' AS menu_component;
```

# Use the partial

```sql index.sql
${include('_partial_header')}

SELECT 'hero' AS component,
       'Welcome!' AS title;
```

Auto-Injection with Globs

Use glob patterns to automatically inject partials into matching files:

```sql _partial_auth.sql { inject: "admin/**/*.sql" }
-- Check if user is authenticated
SELECT CASE 
  WHEN NOT EXISTS (SELECT 1 FROM sessions WHERE active = 1)
  THEN sqlpage.redirect('/login')
END;
```

This partial will be automatically injected at the top of all SQL files in the admin/ directory.

Variable Substitution

Define variables and use them throughout your Spryfile:

# Configuration

```javascript config
export const APP_NAME = "My Application";
export const VERSION = "1.0.0";
export const ITEMS_PER_PAGE = 25;
```

# Use variables

```sql index.sql
SELECT 'hero' AS component,
       '${APP_NAME}' AS title,
       'Version ${VERSION}' AS subtitle;
```

Partials starting with underscore (_) are not generated as standalone routes.

Practical Example

Here's a complete example using templates and partials:

# Shared Layout

```sql _layout.sql { inject: "**/*.sql" }
SELECT 'shell' AS component,
       'My App' AS title,
       'menu' AS menu_component;

SELECT 'menu' AS component;
SELECT '/' AS link, 'Home' AS title;
SELECT '/about' AS link, 'About' AS title;
SELECT '/contact' AS link, 'Contact' AS title;
```

# Homepage

```sql index.sql
SELECT 'hero' AS component,
       'Welcome!' AS title;

SELECT 'card' AS component, 3 AS columns;
${generateFeatureCards(['Fast', 'Simple', 'Powerful'])}
```

Template functions have access to all Deno APIs and can perform complex computations.

How is this guide?

Last updated on

On this page