coralite 0.4.2 → 0.5.0

package/lib/coralite.js

@@ -17,7 +17,8 @@ export const tokens = {}
  *
  * @param {Object} options
  * @param {string} [options.id] - Optional component id, if not defined, the id will be extracted from the first top level element with the id attribute
- * @param {Object.<string, (string | function)>} options.tokens - A map where keys are token names and values are either strings or functions representing the corresponding tokens' content or behavior.
+ * @param {Object.<string, (string | Function)>} options.tokens - Token names and values are either strings or functions representing the corresponding tokens' content or behavior.
+ * @param {Object.<string, Function>} options.slots - Middleware for slot content
  * @returns {Promise<Object.<string, string>>}
  */
 export async function defineComponent (options) {

package/lib/parse.js

@@ -501,7 +501,7 @@ export async function createComponent ({
 
   // merge values from component script
   if (component.script) {
-    const computedValues = await parseScript(component, values, components, document)
+    const computedValues = await parseScript(component, values, element, components, document)
 
     values = Object.assign(values, computedValues)
 
@@ -618,38 +618,19 @@ export async function createComponent ({
  *
  * @param {CoraliteModule} component - The Coralite module to parse
  * @param {CoraliteModuleValues} values - Replacement tokens for the component
+ * @param {CoraliteElement} element - Element
  * @param {Object.<string, CoraliteModule>} components - Mapping of other components that might be referenced
  * @param {CoraliteDocument} document - The current document being processed
  * @returns {Promise<Object.<string,(string|(CoraliteElement|CoraliteTextNode)[])>>}
- *
- * @example
- * ```
- * // Example usage:
- * const parsedResult = await parseScript({
- *   id: 'my-component',
- *   template: `<div>Hello World</div>`,
- *   script: `export default function () {
- *     return '<div>Hello World</div>';
- *   }`,
- *   tokens: { 'hello': 'Hello' }
- * }, {
- *   'my-component': {
- *     id: 'my-component',
- *     template: `<div>${tokens.hello}</div>`,
- *     script: `export default function () {
- *       return '<div>Hello</div>';
- *     }`
- *   }
- * }, document);
- * ```
  */
-export async function parseScript (component, values, components, document) {
+export async function parseScript (component, values, element, components, document) {
   const contextifiedObject = vm.createContext({
     coralite: {
       tokens: values,
       /**
        * @param {Object} options
        * @param {Object.<string, (string | function)>} options.tokens
+       * @param {Object.<string, Function>} options.slots
        * @returns {Promise<Object.<string, string>>}
        */
       async defineComponent (options) {
@@ -668,6 +649,46 @@ export async function parseScript (component, values, components, document) {
           }
         }
 
+        // process computed slots
+        if (options.slots) {
+          for (const name in options.slots) {
+            if (Object.prototype.hasOwnProperty.call(options.slots, name)) {
+              const computedSlot = options.slots[name]
+              // slot content to compute
+              const slotContent = []
+              // new slot elements
+              const elementSlots = []
+
+              for (let i = 0; i < element.slots.length; i++) {
+                const slot = element.slots[i]
+
+                if (slot.name === name) {
+                  // slot content to compute
+                  slotContent.push(slot.node)
+                } else {
+                  elementSlots.push(slot)
+                }
+              }
+
+              // compute slot nodes
+              const result = computedSlot(slotContent)
+
+              // append new slot nodes
+              for (let index = 0; index < result.length; index++) {
+                const node = result[index]
+
+                elementSlots.push({
+                  name,
+                  node
+                })
+              }
+
+              // update element slots
+              element.slots = elementSlots
+            }
+          }
+        }
+
         return values
       },
       /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coralite",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "HTML modules static site generator",
   "main": "./lib/coralite.js",
   "type": "module",

package/.github/release.yml

@@ -1,22 +0,0 @@
-changelog:
-  categories:
-    - title: Breaking Changes 🛠
-      labels:
-        - Semver-Major
-        - breaking-change
-    - title: Exciting New Features 🎉
-      labels:
-        - Semver-Minor
-        - enhancement
-    - title: 🏕 Features
-      labels:
-        - '*'
-      exclude:
-        labels:
-          - dependencies
-    - title: 👒 Dependencies
-      labels:
-        - dependencies
-    - title: Other Changes
-      labels:
-        - "*"

package/.github/workflows/publish.yml

@@ -1,45 +0,0 @@
-name: Publish
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          version: 9
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint
-        run: pnpm run lint
-
-  
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          registry-url: https://registry.npmjs.org/
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-

package/.github/workflows/test-e2e.yml

@@ -1,45 +0,0 @@
-name: Test e2e
-
-on:
-  - push
-  - pull_request
-
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-
-    - uses: pnpm/action-setup@v4
-      name: Install pnpm
-      with:
-        version: 9
-        run_install: false
-
-    - name: Install Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 22
-        cache: "pnpm"
-
-    - name: Install dependencies
-      run: pnpm install
-
-    - name: Build HTML from templates
-      run: pnpm run html
-
-    - name: Install Playwright Browser
-      run: pnpm exec playwright install firefox --with-deps
-
-    - name: Run Playwright tests
-      run: pnpm exec playwright test
-
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

package/docs/basic-templating.md

@@ -1,128 +0,0 @@
-# Getting Started: Basic templating
-
-This guide will walk you through creating your first page using Coralite, a static site generator built around HTML modules.
-
-## Project Structure
-
-Create a new project directory with the following structure:
-
-```
-my-coralite-site/
-├── src/
-│   ├── templates/
-│   │   ├── header.html
-│   │   └── footer.html
-│   └── pages/
-│       └── index.html
-└── dist/
-```
-
-## Creating Templates
-
-Coralite uses HTML templates with mustache-style tokens for dynamic content. Let's create two basic templates:
-
-### 1. Header Template (src/templates/header.html)
-
-```html
-<template id="coralite-header">
-  <h1>{{ title }}</h1>
-  <slot name="subtitle"></slot>
-  <slot></slot>
-</template>
-```
-
-### 2. Footer Template (src/templates/footer.html)
-
-```html
-<template id="coralite-footer">
-  <footer>
-    Just keep swimming.
-  </footer>
-</template>
-```
-
-## Building Your First Page
-
-Create your main page in `src/pages/index.html`:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>My First Coralite Page</title>
-</head>
-<body>
-  <coralite-header title="Welcome to My Site">
-    <span slot="subtitle">A Coralite Creation</span>
-    <p>This is my first page built with Coralite!</p>
-  </coralite-header>
-
-  <coralite-footer></coralite-footer>
-</body>
-</html>
-```
-
-## Template Features
-
-1. **Dynamic Content**: Use `{{ variableName }}` syntax to insert dynamic content passed through component attributes.
-2. **Slots**: 
-   - Named slots: Use `slot="name"` to target specific areas in your template
-   - Default slots: Content without a slot attribute goes into the default `<slot>`
-
-## Building Your Site
-
-Generate your site using the Coralite CLI:
-
-```bash
-coralite --templates ./src/templates --pages ./src/pages --output ./dist
-```
-
-To preview changes without generating files, use the dry-run mode:
-
-```bash
-coralite --templates ./src/templates --pages ./src/pages --output ./dist --dry
-```
-
-## Template Tips
-
-1. Every template must have an `id` attribute that matches its usage in pages:
-   ```html
-   <template id="coralite-header">
-   ```
-
-2. Component names in pages must match template IDs:
-   ```html
-   <coralite-header title="My Title">
-   ```
-
-3. Data can be passed via attributes and accessed using mustache syntax:
-   ```html
-   <!-- In your page -->
-   <coralite-header title="Hello World">
-   
-   <!-- In your template -->
-   <h1>{{ title }}</h1>
-   ```
-
-## Next Steps
-
-- Try creating more complex templates with multiple slots
-- Explore nested components by using one component inside another
-- Use the dry-run mode to debug template issues
-- Check the [full documentation](https://github.com/tjdav/coralite) for advanced features
-
-## Common Issues
-
-1. If your templates aren't rendering, ensure:
-   - Template IDs match the component names in your pages
-   - All required attributes are provided
-   - The Node.js `--experimental-vm-modules` flag is enabled
-
-2. Missing content might indicate:
-   - Incorrect slot names
-   - Missing slot definitions in templates
-   - Malformed template syntax
-
-Remember to keep your templates modular and reusable for the best development experience with Coralite!

package/tests/e2e/index.spec.js

@@ -1,66 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('has title', async ({ page }) => {
-  await page.goto('/')
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Home page/)
-})
-
-test('has compiled coralite-header custom element', async ({ page }) => {
-  await page.goto('/')
-
-  // Check if the custom coralite-header element exists and contains the expected text
-  await expect(page.locator('body')).toMatchAriaSnapshot(`
-    - text: Hello
-    - banner: This is the mighty header
-    - text: world
-  `)
-})
-
-test('has custom element with default slot', async ({ page }) => {
-  await page.goto('/about.html')
-
-  await expect(page.locator('body')).toMatchAriaSnapshot(`
-    - text: test
-  `)
-})
-
-test('has aggregate content', async ({ page }) => {
-  await page.goto('/blog/index.html')
-
-  await expect(page.locator('body')).toMatchAriaSnapshot(`
-    - text: Hello
-    - banner: This is the mighty header
-    - heading "Post 1" [level=2]
-    - text: Nemo
-    - time: Wed, 8 Jan 25
-    - img "Photo of a cat"
-    - text: short description
-    - banner: This is the mighty header
-    - heading "Post 2" [level=2]
-    - text: Nemo
-    - time: Thu, 9 Jan 25
-    - img "Photo of a dog"
-    - text: short description
-    - banner: This is the mighty header
-    - text: world
-  `)
-})
-
-test('has named slots', async ({ page }) => {
-  await page.goto('/blog/index.html')
-
-  const metaName = page.locator('meta[name="name"]')
-  const metaDescription = page.locator('meta[name="description"]')
-  const metaDefaultHello = page.locator('meta[name="default-hello"]')
-  const metaDefaultWorld = page.locator('meta[name="default-world"]')
-
-  // named slots
-  await expect(metaName).toHaveAttribute('content', 'coralite')
-  await expect(metaDescription).toHaveAttribute('content', 'look mum, no database!')
-  // default slots
-  await expect(metaDefaultHello).toHaveAttribute('content', 'hello')
-  await expect(metaDefaultWorld).toHaveAttribute('content', 'world')
-})
-

package/tests/fixtures/pages/about.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta name="title" content="About">
-    <title>About</title>
-  </head>
-  <body>
-    <coralite-layout>
-      test
-    </coralite-layout>
-  </body>
-</html>

package/tests/fixtures/pages/blog/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Blog posts</title>
-  <coralite-head>
-    <meta slot="meta" name="name" content="coralite">
-    <meta slot="meta" name="description" content="look mum, no database!">
-    <meta name="default-hello" content="hello">
-    <meta name="default-world" content="world">
-  </coralite-head>
-</head>
-<body>
-  Hello
-
-  <coralite-header></coralite-header>
-  <coralite-posts path="blog"></coralite-posts>
-  world
-</body>
-</html>

package/tests/fixtures/pages/blog/post-1.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-  <meta name="title" content="Post 1">
-  <meta name="author" content="Nemo">
-  <meta name="image" content="image.png">
-  <meta name="image_alt" content="Photo of a cat">
-  <meta name="description" content="short description">
-  <meta name="published_time" content="2025-01-08T20:23:07.645Z">
-</head>
-<body>
-  Hello
-
-  <coralite-header></coralite-header>
-  <coralite-author name="Nemo" datetime="2025-01-08T20:23:07.645Z"></coralite-author>
-
-  world
-</body>
-</html>

package/tests/fixtures/pages/blog/post-2.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-  <meta name="title" content="Post 2">
-  <meta name="author" content="Nemo">
-  <meta name="image" content="image.png">
-  <meta name="image_alt" content="Photo of a dog">
-  <meta name="description" content="short description">
-  <meta name="published_time" content="2025-01-09T20:23:07.645Z">
-</head>
-<body>
-  <coralite-header></coralite-header>
-  <coralite-author name="Nemo" datetime="2025-01-08T20:23:07.645Z"></coralite-author>
-</body>
-</html>

package/tests/fixtures/pages/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Home page</title>
-</head>
-<body>
-  Hello
-
-  <coralite-header></coralite-header>
-
-  world
-</body>
-</html>

package/tests/fixtures/templates/components/author.html

@@ -1,24 +0,0 @@
-<template id="coralite-author">
-  <span>{{ name }}</span>
-  <time datetime="{{ datetime }}">
-    {{ localeDate }}
-  </time>
-</template>
-
-<script type="module">
-  import { defineComponent, tokens } from 'coralite'
-
-  export default defineComponent({
-    id: 'coralite-author',
-    tokens: {
-      localeDate () {
-        return new Date(tokens.datetime).toLocaleDateString('en-AU', {
-          weekday: 'short',
-          year: '2-digit',
-          month: 'short',
-          day: 'numeric'
-        })
-      }
-    }
-  })
-</script>

package/tests/fixtures/templates/components/head.html

@@ -1,15 +0,0 @@
-<template id="coralite-head">
-  <slot name="meta">
-    <meta name="meta" content="default">
-  </slot>
-  <slot name="css">
-    <link href="styles.css" rel="stylesheet">
-  </slot>
-  <slot name="script">
-    <script>
-      console.log('hello')
-    </script>
-  </slot>
-  <slot name="empty"></slot>
-  <slot></slot>
-</template>

package/tests/fixtures/templates/components/header.html

@@ -1,5 +0,0 @@
-<template id="coralite-header">
-  <header>
-    This is the mighty header
-  </header>
-</template>

package/tests/fixtures/templates/components/post.html

@@ -1,7 +0,0 @@
-<template id="coralite-post">
-  <h2>{{ title }}</h2>
-  <coralite-author name="{{ author }}" datetime="{{ published_time }}"></coralite-author>
-  <img src="{{ image }}" alt="{{ image_alt }}">
-  {{ description }}
-  <coralite-header></coralite-header>
-</template>

package/tests/fixtures/templates/components/posts.html

@@ -1,29 +0,0 @@
-<template id="coralite-posts">
-  {{ posts }}
-</template>
-
-<script type="module">
-  import { defineComponent, tokens, aggregate } from 'coralite'
-
-  export default defineComponent({
-    id: 'coralite-posts',
-    tokens: {
-      posts () {
-        return aggregate({
-          path: tokens.path,
-          componentId: 'coralite-post',
-          pages: 10,
-          sortBy: 'published_time',
-          tokens: {
-            aliases: {
-              datetime: ['published_time']
-            },
-            values: {
-              image: 'default.png'
-            }
-          }
-        })
-      }
-    }
-  })
-</script>

package/tests/fixtures/templates/components/title.html

@@ -1,3 +0,0 @@
-<template id="coralite-title">
-  <h1>{{ title }}</h1>
-</template>

package/tests/fixtures/templates/layouts/layout.html

@@ -1,5 +0,0 @@
-<template id="coralite-layout">
-  <div>
-    <slot></slot>
-  </div>
-</template>