coralite 0.2.1 → 0.3.0

package/.github/workflows/publish.yml

@@ -37,9 +37,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/bin/coralite.js

@@ -43,14 +43,14 @@ const htmlPages = await getHTML({
 })
 
 /** @type {Object.<string, CoraliteModule>} */
-const components = {}
+const coraliteModules = {}
 
 // create components
 for (let i = 0; i < htmlComponents.length; i++) {
   const html = htmlComponents[i]
-  const component = parseModule(html.content)
+  const coraliteModule = parseModule(html.content)
 
-  components[component.id] = component
+  coraliteModules[coraliteModule.id] = coraliteModule
 }
 
 for (let i = 0; i < htmlPages.length; i++) {
@@ -65,8 +65,8 @@ for (let i = 0; i < htmlPages.length; i++) {
     const component = await createComponent({
       id: customElement.name,
       values: customElement.attribs,
-      customElementSlots: document.customElementSlots,
-      components,
+      element: customElement,
+      components: coraliteModules,
       document
     })
 

package/lib/parse.js

@@ -13,10 +13,10 @@ import { invalidCustomTags, validTags } from './tags.js'
  *  CoraliteModule,
  *  CoraliteTextNode,
  *  CoraliteElement,
- *  CoraliteSlotElement,
  *  CoraliteModuleSlotElement,
  *  CoraliteDocumentTokens,
  *  CoraliteDocumentRoot,
+ *  CoraliteAnyNode,
  * } from '#types'
  */
 
@@ -32,7 +32,7 @@ const customElementTagTokenRegExp = /^[^-].*[-._a-z0-9\u00B7\u00C0-\u00D6\u00D8-
  * @returns {CoraliteDocument} An object representing the parsed document structure
  *
  * @example
- * ```javascript
+ * ```
  * // Example usage:
  * const html = {
  *   name: 'index.html',
@@ -57,10 +57,8 @@ export function parseHTMLDocument (html, path) {
     children: []
   }
   // stack to keep track of current element hierarchy
-  const stack = []
+  const stack = [root]
   const customElements = []
-  /** @type {Object.<string, CoraliteSlotElement[]>} */
-  const customElementSlots = {}
 
   const parser = new Parser({
     onprocessinginstruction (name, data) {
@@ -71,25 +69,7 @@ export function parseHTMLDocument (html, path) {
       })
     },
     onopentag (originalName, attributes) {
-      const element = createElement(originalName, attributes, customElements, stack, root)
-
-      if (attributes.slot) {
-        const customElement = customElements[customElements.length - 1]
-        const slot = {
-          name: attributes.slot,
-          customElement,
-          element
-        }
-
-        if (!customElementSlots[customElement.name]) {
-          customElementSlots[customElement.name] = [slot]
-        } else {
-          customElementSlots[customElement.name].unshift(slot)
-        }
-
-        // remove slot attribute
-        delete attributes.slot
-      }
+      createElement(originalName, attributes, customElements, stack)
     },
     ontext (text) {
       if (text.trim()) {
@@ -100,10 +80,10 @@ export function parseHTMLDocument (html, path) {
       // remove current element from stack as we're done with its children
       stack.pop()
     },
-    oncomment (comment) {
+    oncomment (data) {
       stack[stack.length - 1].children.push({
         type: 'comment',
-        data: comment,
+        data,
         parent: stack[stack.length - 1]
       })
     }
@@ -112,12 +92,32 @@ export function parseHTMLDocument (html, path) {
   parser.write(html.content)
   parser.end()
 
+  for (let i = 0; i < customElements.length; i++) {
+    const customElement = customElements[i]
+
+    for (let i = 0; i < customElement.children.length; i++) {
+      const childNode = customElement.children[i]
+      let slotName = 'default'
+
+      if (childNode.attribs && childNode.attribs.slot) {
+        slotName = childNode.attribs.slot
+
+        // clean up slot attribute
+        delete childNode.attribs.slot
+      }
+
+      customElement.slots.push({
+        name: slotName,
+        node: childNode
+      })
+    }
+  }
+
   return {
     name: html.name,
     parentPath: html.parentPath,
     root,
     customElements,
-    customElementSlots,
     path
   }
 }
@@ -145,6 +145,7 @@ export function parseHTMLMeta (string) {
   const stack = []
   /** @type {Object.<string, CoraliteToken[]>} */
   const meta = {}
+  let hasHead = false
 
   const parser = new Parser({
     onopentag (name, attributes) {
@@ -162,6 +163,7 @@ export function parseHTMLMeta (string) {
     },
     onclosetag (name) {
       if (name === 'head') {
+        hasHead = true
         // end on closing head tag
         return parser.end()
       }
@@ -173,6 +175,10 @@ export function parseHTMLMeta (string) {
   parser.write(string)
   parser.end()
 
+  if (!hasHead) {
+    throw new Error('Document requires a head element')
+  }
+
   return meta
 }
 
@@ -184,7 +190,7 @@ export function parseHTMLMeta (string) {
  * @returns {CoraliteModule} - Parsed module information, including template, script, tokens, and slot configurations
  *
  * @example
- * ```javascript
+ * ```
  * // Example usage:
  * const html = `<template id="home">
  *   <slot name="default">Hello</slot>
@@ -216,7 +222,7 @@ export function parseModule (string) {
     children: []
   }
   // stack to keep track of current element hierarchy
-  const stack = []
+  const stack = [root]
   const customElements = []
   /** @type {Object.<string, Object.<string,CoraliteModuleSlotElement>>} */
   const slotElements = {}
@@ -230,7 +236,7 @@ export function parseModule (string) {
 
   const parser = new Parser({
     onopentag (originalName, attributes) {
-      const element = createElement(originalName, attributes, customElements, stack, root)
+      const element = createElement(originalName, attributes, customElements, stack)
       const attributeNames = Object.keys(attributes)
 
       // collect tokens
@@ -315,10 +321,10 @@ export function parseModule (string) {
       console.log(csb)
     },
 
-    oncomment (comment) {
+    oncomment (data) {
       stack[stack.length - 1].children.push({
         type: 'comment',
-        data: comment,
+        data,
         parent: stack[stack.length - 1]
       })
     }
@@ -374,11 +380,12 @@ export function parseModule (string) {
  * @param {Object.<string, (string | (CoraliteTextNode | CoraliteElement)[])>} options.values - Token values available for replacement
  * @param {Object.<string, CoraliteModuleSlotElement[]>} [options.customElementSlots = {}] - Custom slots and their configurations for the component
  * @param {Object.<string, CoraliteModule>} options.components - Mapping of component IDs to their module definitions
+ * @param {CoraliteElement} options.element - Mapping of component IDs to their module definitions
  * @param {CoraliteDocument} options.document - Current document being processed
  * @returns {Promise<CoraliteElement>}
  *
  * @example
- * ```javascript
+ * ```
  * // Example usage:
  * const component = await createComponent({
  *   id: 'my-component',
@@ -405,7 +412,7 @@ export function parseModule (string) {
 export async function createComponent ({
   id,
   values,
-  customElementSlots = {},
+  element,
   components,
   document
 }) {
@@ -429,8 +436,9 @@ export async function createComponent ({
       if (value == null) {
         if (component.script) {
           computedTokens.push({
-            type: 'element',
+            type: 'attribute',
             node: item.element,
+            attribute: item.name,
             name: token.name,
             content: token.content
           })
@@ -487,8 +495,7 @@ export async function createComponent ({
       const value = values[computedToken.name]
 
       if (computedToken.type === 'attribute') {
-        // replace token string
-        node.attribs[computedToken.name] = node.attribs[computedToken.name].replace(computedToken.content, value)
+        node.attribs[computedToken.attribute] = node.attribs[computedToken.attribute].replace(computedToken.content, value)
       } else {
         if (Array.isArray(value)) {
           // inject nodes
@@ -508,7 +515,7 @@ export async function createComponent ({
               parent: node.parent
             }
           )
-        } else if (node.data) {
+        } else {
           // replace token string
           node.data = node.data.replace(computedToken.content, value)
         }
@@ -525,7 +532,7 @@ export async function createComponent ({
     const component = await createComponent({
       id: customElement.name,
       values: Object.assign(values, customElement.attribs),
-      customElementSlots,
+      element: customElement,
       components,
       document
     })
@@ -541,57 +548,46 @@ export async function createComponent ({
     children.splice(childIndex, 1, ...component.children)
   }
 
-  const slots = customElementSlots[id]
+  const slots = component.slotElements[id]
 
+  // replace slot content
   if (slots) {
-    const componentSlots = component.slotElements[id]
-    const usedSlots = {}
-    const slotIndexes = {}
-
-    for (let i = 0; i < slots.length; i++) {
-      const slot = slots[i]
-      const name = slot.name
-
-      if (componentSlots[name]) {
-        const componentSlot = componentSlots[name]
-        const parentChildren = componentSlot.element.parent.children
-        let slotIndex = slotIndexes[name]
-        let deleteCount = 0
-
-        if (slotIndex == null) {
-          slotIndex = parentChildren.indexOf(componentSlot.element, componentSlot.element.parentChildIndex)
-          deleteCount = 1
-          slotIndexes[name] = slotIndex
-        }
+    const slotChildren = {}
+    const slotNames = Object.keys(slots)
 
-        parentChildren.splice(slotIndex, deleteCount, slot.element)
-        usedSlots[slot.name] = true
-      }
+    // sort slot content by name
+    for (let i = 0; i < slotNames.length; i++) {
+      const slotName = slotNames[i]
+      slotChildren[slotName] = []
     }
 
-    for (const name in componentSlots) {
-      if (Object.prototype.hasOwnProperty.call(componentSlots, name)) {
-        if (!usedSlots[name]) {
-          const componentSlot = componentSlots[name]
-          const element = componentSlot.element
-          const parent = element.parent
-          const children = element.children || [{
-            type: 'text',
-            data: ''
-          }]
-          const slotIndex = parent.children.indexOf(componentSlot.element, componentSlot.element.parentChildIndex)
-
-
-          for (let i = 0; i < children.length; i++) {
-            const childNode = children[i]
-            childNode.parent = parent
-          }
+    // insert slot content by name
+    if (element) {
+      for (let i = 0; i < element.slots.length; i++) {
+        const elementSlotContent = element.slots[i]
+        const slotName = elementSlotContent.name
+        const slot = slots[slotName]
 
-          // replace unused slots with default values
-          parent.children.splice(slotIndex, 1, ...children)
+        if (slot) {
+          slotChildren[slotName].push(elementSlotContent.node)
         }
       }
     }
+
+    for (let i = 0; i < slotNames.length; i++) {
+      const slotName = slotNames[i]
+      let slotNodes = slotChildren[slotName]
+      const slot = slots[slotName]
+      const slotIndex = slot.element.parent.children.indexOf(slot.element)
+
+      if (!slotNodes.length) {
+        // set default content
+        slotNodes = slot.element.children || []
+      }
+
+      // replace slot element with content
+      slot.element.parent.children.splice(slotIndex, 1, ...slotNodes)
+    }
   }
 
   return template
@@ -607,7 +603,7 @@ export async function createComponent ({
  * @returns {Promise<Object.<string,(string|(CoraliteElement|CoraliteTextNode)[])>>}
  *
  * @example
- * ```javascript
+ * ```
  * // Example usage:
  * const parsedResult = await parseScript({
  *   id: 'my-component',
@@ -750,18 +746,20 @@ function addMetadata (meta, name, content) {
  * @param {string} name
  * @param {Object.<string, string>} attributes
  * @param {CoraliteElement[]} customElements
- * @param {CoraliteElement[]} stack
- * @param {CoraliteDocumentRoot} root
+ * @param {CoraliteAnyNode[]} stack
  */
-function createElement (name, attributes, customElements, stack, root) {
+function createElement (name, attributes, customElements, stack) {
   const sanitisedName = name.toLowerCase()
-  const parentIndex = stack.length - 1
+  const parent = stack[stack.length - 1]
+
   /** @type {CoraliteElement} */
   const element = {
     type: 'tag',
     name: sanitisedName,
     attribs: attributes,
-    children: []
+    children: [],
+    parent,
+    parentChildIndex: parent.children.length
   }
 
   if (!validTags[sanitisedName]) {
@@ -772,23 +770,14 @@ function createElement (name, attributes, customElements, stack, root) {
     if (customElementTagRegExp.test(sanitisedName)) {
       // store custom elements
       customElements.push(element)
+      element.slots = []
     } else {
       throw new Error('Invalid custom element tag name: "' + sanitisedName + '" https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name')
     }
   }
 
-  if (parentIndex === -1) {
-    root.children.push(element)
-    element.parent = root
-  } else {
-    const parent = stack[parentIndex]
-
-    element.parent = parent
-    element.parentChildIndex = parent.children.length
-
-    // add element to its parent's children
-    parent.children.push(element)
-  }
+  // add element to its parent's children
+  parent.children.push(element)
 
   // push element to stack as it may have children
   stack.push(element)

package/package.json

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

package/types/index.js

@@ -66,7 +66,7 @@
  * @property {'tag'} type - Element type
  * @property {string} name - Tag name
  * @property {Object.<string, string>} attribs - Element attributes
- * @property {(CoraliteElement | CoraliteTextNode)[]} children - Child nodes of the element
+ * @property {CoraliteAnyNode[]} children - Child nodes of the element
  * @property {CoraliteElement | CoraliteDocumentRoot} parent - Parent element
  * @property {number} [parentChildIndex] - Position in parent's child list
  */
@@ -79,6 +79,10 @@
  * @property {CoraliteElement} parent - Parent element of the text node
  */
 
+/**
+ * @typedef {CoraliteDirective | CoraliteElement | CoraliteTextNode} CoraliteAnyNode
+ */
+
 /**
  * @typedef {Object} CoraliteSlotElement
  * @property {string} name - Slot's unique identifier
@@ -96,7 +100,7 @@
 /**
  * @typedef {Object} CoraliteDocumentRoot
  * @property {'root'} type - Node type
- * @property {(CoraliteDirective | CoraliteElement | CoraliteTextNode)[]} children - Document list
+ * @property {CoraliteAnyNode[]} children - Document list
  */
 
 /**

package/.github/docs/continue-commit-convention.md

@@ -1,11 +0,0 @@
-Based on the provided Git diff above, create a git commit message by strictly following these rules:
-
-1. Use one of the predefined prefixes (feat, fix, perf, build, chore, ci, docs, style, refactor, test, types, wip) or a custom prefix for non-changelog related tasks.
-2. The commit message must have a header, which includes a type and subject, separated by a colon.
-3. Follow the imperative present tense for both the subject and body of the commit message:
-   - Use concise and descriptive subjects.
-   - Avoid including implementation details in the body unless necessary for understanding context.
-4. Include an optional footer to provide information about breaking changes using the format "BREAKING CHANGE:" followed by additional details.
-5. Limit line length to 72 characters and maintain consistent use of whitespace for better readability and uniformity.
-6. If changes are about JSDoc, the prefix should be 'types'.
-7. Use any suggestion below this to help with the context.

package/.idea/coralite.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/jsLibraryMappings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <includedPredefinedLibrary name="Node.js Core" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/coralite.iml" filepath="$PROJECT_DIR$/.idea/coralite.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "cSpell.words": [
-    "coralite"
-  ]
-}