coralite 0.1.1 → 0.2.0

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

@@ -0,0 +1,11 @@
+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/.github/workflows/publish.yml

@@ -0,0 +1,46 @@
+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: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+

package/.idea/coralite.iml

@@ -0,0 +1,12 @@
+<?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

@@ -0,0 +1,6 @@
+<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

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

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?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

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

package/README.md

@@ -1,9 +1,58 @@
 # Coralite
 
-A simple static site generator based on `HTML modules`
+coralite is a static site generator library built around the emerging [HTML modules proposal](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md).
 
 ## Installation
 
+Before using the Coralite CLI, ensure that it's installed on your system. You can install it globally using **npm**:
+
+```bash
+npm install -g coralite
+# or
+yarn global add coralite
+# or
+pnpm add -g coralite
+```
+You can also install coralite as a development dependency:
+
+```bash
+npm install --save-dev coralite
+# or
+yarn add -D coralite
+# or
+pnpm add -D coralite
+```
+
+## Basic Syntax
+
+Coralite is executed using the following command:
+
+```bash
+coralite [options]
+```
+
+Replace `[options]` with the desired flags and arguments.
+
+## Required Options
+
+To generate a website using Coralite, you must provide three essential options:
+
+- **-c or --components**: The path to your components directory containing reusable UI elements (e.g., `-c ./src/components`).
+- **-p or --pages**: The path to your pages directory where static HTML files reside (e.g., `-p ./src/pages`).
+- **--output or -o**: The output directory for the generated site (e.g., `--output ./dist`).
+
+Here's an example of how these options might look:
+
+```bash
+coralite --components ./src/components --pages ./src/pages --output ./dist
+```
+
+## Optional Options
+
+### -d or --dry
+
+Run the CLI in dry-run mode to preview the actions that would be performed without actually generating the website. This is useful for debugging or when you want to check potential issues before committing changes:
+
+```bash
+coralite --components ./src/components --pages ./src/pages --output ./dist --dry
 ```
-npm install coralite --save-dev
-```

package/bin/coralite.js

@@ -1,11 +1,14 @@
 #!/usr/bin/env node
 
-import { getHTML, getComponentFromString, mergeComponentToDocument, getSubDirectory } from '../lib/index.js'
+import { render } from 'dom-serializer'
+import { getHTML, parseHTMLDocument, parseModule, createComponent, getSubDirectory } from '#lib'
 import { Command } from 'commander'
-import { resolve, join } from 'node:path'
+import { join } from 'node:path'
 import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'node:fs'
 
-/** @import { CoraliteComponent } from '#types' */
+/**
+ * @import { CoraliteModule } from '#types'
+ */
 
 const pkg = JSON.parse(readFileSync(`./package.json`, 'utf-8'))
 const program = new Command()
@@ -19,7 +22,7 @@ program
   .requiredOption('-o, --output <path>', 'Output directory for the generated site')
   .option('-d, --dry', 'Run in dry-run mode')
 
-program.parse()
+program.parse(process.argv)
 program.on('error', (err) => {
   console.error(err)
 })
@@ -39,23 +42,43 @@ const htmlPages = await getHTML({
   recursive: true
 })
 
-/** @type {Object.<string, CoraliteComponent>} */
+/** @type {Object.<string, CoraliteModule>} */
 const components = {}
 
+// create components
 for (let i = 0; i < htmlComponents.length; i++) {
   const html = htmlComponents[i]
-  const component = getComponentFromString(html.content)
+  const component = parseModule(html.content)
+
   components[component.id] = component
 }
 
 for (let i = 0; i < htmlPages.length; i++) {
   const html = htmlPages[i]
-
-  const content = await mergeComponentToDocument(html, components, {
-    pages: resolve(pagesPath),
-    components: resolve(componentsPath)
+  const document = parseHTMLDocument(html, {
+    pages: pagesPath,
+    components: componentsPath
   })
 
+  for (let i = 0; i < document.customElements.length; i++) {
+    const customElement = document.customElements[i]
+    const component = await createComponent({
+      id: customElement.name,
+      values: customElement.attribs,
+      customElementSlots: document.customElementSlots,
+      components,
+      document
+    })
+
+    // replace custom element with component
+    customElement.parent.children.splice(customElement.parentChildIndex, 1, ...component.children)
+    component.parent = customElement.parent
+  }
+
+  // render document
+  // @ts-ignore
+  const content = render(document.root)
+
   if (!dryRun) {
     // get pages sub directory
     const subDir = getSubDirectory(pagesPath, html.parentPath)

package/commitlint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@commitlint/config-conventional']
+}

package/jsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "checkJs": true,
     "module": "NodeNext",
-    "target": "ES2020",
+    "target": "ES2022",
     "moduleResolution": "nodenext",
   }
 }

package/lib/coralite.js

@@ -0,0 +1,38 @@
+/**
+ * @import { CoraliteElement, CoraliteTextNode } from '#types'
+ */
+
+/**
+ * These exports are placeholder for types
+ * The HTML module code is run in the `parseScript` function in parse.js
+ */
+
+/**
+ * @type {Object.<string, string>}
+ */
+export const tokens = {}
+
+/**
+ * Defines a Coralite component
+ *
+ * @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.
+ * @returns {Promise<Object.<string, string>>}
+ */
+export async function defineComponent (options) {
+  /** @type {Object.<string, string>} */
+  return {}
+}
+
+/**
+ * Aggregates HTML content from specified paths into a single collection of components.
+ *
+ * @param {Object} options - Configuration object for the aggregation process
+ * @param {string} options.componentId - Unique identifier for the component used for each document
+ * @param {string} options.path - The path to aggregate, relative to pages directory
+ * @returns {Promise<(CoraliteElement | CoraliteTextNode)[]>}
+ */
+export async function aggregate (options) {
+  return []
+}

package/lib/get-html.js

@@ -7,13 +7,21 @@ import { readdir, readFile } from 'node:fs/promises'
 
 /**
  * Get HTML
- * @param {Object} options - html directory
- * @param {string} options.path - html directory
- * @param {boolean} [options.recursive] - If true, reads the contents of a directory recursively. In recursive mode, it will list all files, sub files and directories. Default: false.
- * @param {string[]} [options.exclude = []] - Exclude file by name
- * @returns {Promise<HTMLData[]>}
+ * @param {Object} options - Options for searching HTML files
+ * @param {string} options.path - Path to the directory containing HTML files
+ * @param {boolean} [options.recursive=false] - Whether to search recursively in subdirectories
+ * @param {string[]} [options.exclude=[]] - Files or directories to exclude from search
+ * @returns {Promise<HTMLData[]>} Array of HTML file data including parent path, name, and content
+ *
+ * @example
+ * // Example usage:
+ * const htmlFiles = await getHTML({
+ *  path: 'src',
+ *  recursive: true,
+ *  exclude: ['index.html', 'subdir/file2.html']
+ * })
  */
-export default function getHTML ({ path, recursive, exclude = [] }) {
+export default function getHTML ({ path, recursive = false, exclude = [] }) {
   return new Promise((resolve, reject) => {
     const html = []
 

package/lib/html-module.js

@@ -0,0 +1,75 @@
+import { join } from 'node:path'
+import getHTML from './get-html.js'
+import { createComponent, parseHTMLMeta } from './parse.js'
+
+/**
+ * @import { CoraliteTokenOptions, CoraliteModule, CoraliteDocument } from '#types'
+ */
+
+/**
+ * Aggregates HTML content from specified paths into a single collection of components.
+ *
+ * @param {Object} options - Configuration object for the aggregation process
+ * @param {string} options.path - The path to aggregate, relative to pages directory
+ * @param {string} options.componentId - Unique identifier for the component
+ * @param {boolean} [options.recursive] - Whether to recursively search subdirectories
+ * @param {CoraliteTokenOptions} [options.tokens] - Token configuration options
+ * @param {Object.<string, string>} values - Default token values
+ * @param {Object.<string, CoraliteModule>} components - Available components library
+ * @param {CoraliteDocument} document - Current document being processed
+ *
+ * @example
+ * ```javascript
+ * // Aggregating content from pages under 'components' directory into a component with id 'my-component'
+ * aggregate({
+ *   path: 'button',
+ *   recursive: true,
+ *   componentId: 'my-component'
+ * }, {
+ *   className: 'btn'
+ * }, components, document);
+ * ```
+ */
+export async function aggregate (options, values, components, document) {
+  const pages = await getHTML({
+    path: join(document.path.pages, options.path),
+    recursive: options.recursive,
+    exclude: [document.name]
+  })
+
+  let result = []
+
+  for (let i = 0; i < pages.length; i++) {
+    const page = pages[i]
+    const meta = parseHTMLMeta(page.content)
+    const pageValues = Object.assign({}, values)
+
+    for (const key in meta) {
+      if (Object.prototype.hasOwnProperty.call(meta, key)) {
+        const data = meta[key]
+
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i]
+          let suffix = ''
+
+          if (i > 0) {
+            suffix = '_' + i
+          }
+
+          pageValues[item.name + suffix] = item.content
+        }
+      }
+    }
+
+    const component = await createComponent({
+      id: options.componentId,
+      values: pageValues,
+      components,
+      document
+    })
+
+    result = result.concat(component.children)
+  }
+
+  return result
+}

package/lib/index.js

@@ -1,19 +1,8 @@
-import getComponentFromString from './get-component-from-string.js'
 import getHTML from './get-html.js'
-import mergeComponentToDocument from './merge-component-to-document.js'
-import getTokensFromString from './get-tokens-from-string.js'
-import getScriptFromString from './get-script-from-string.js'
-import getMetadataFromDocument from './get-metadata-from-document.js'
-import getSubDirectory from './get-subdirectory.js'
-import evalComputedTokens from './eval-computed-tokens.js'
+
+export * from './parse.js'
+export * from './path-utils.js'
 
 export {
-  evalComputedTokens,
-  getSubDirectory,
-  getMetadataFromDocument,
-  getScriptFromString,
-  getTokensFromString,
-  getComponentFromString,
-  mergeComponentToDocument,
   getHTML
 }