Comparing version 0.4.2 to 0.5.0
@@ -20,3 +20,4 @@ /** | ||
* @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>>} | ||
@@ -23,0 +24,0 @@ */ |
@@ -504,3 +504,3 @@ import { Parser } from 'htmlparser2' | ||
if (component.script) { | ||
const computedValues = await parseScript(component, values, components, document) | ||
const computedValues = await parseScript(component, values, element, components, document) | ||
@@ -622,28 +622,8 @@ values = Object.assign(values, computedValues) | ||
* @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({ | ||
@@ -655,2 +635,3 @@ coralite: { | ||
* @param {Object.<string, (string | function)>} options.tokens | ||
* @param {Object.<string, Function>} options.slots | ||
* @returns {Promise<Object.<string, string>>} | ||
@@ -674,2 +655,42 @@ */ | ||
// 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 | ||
@@ -676,0 +697,0 @@ }, |
{ | ||
"name": "coralite", | ||
"version": "0.4.2", | ||
"version": "0.5.0", | ||
"description": "HTML modules static site generator", | ||
@@ -5,0 +5,0 @@ "main": "./lib/coralite.js", |
65606
16
1486