@rocket/js 0.0.0 → 0.1.0

package/src/markdownHook.js

@@ -0,0 +1,148 @@
+/** Runs on: import-hook */
+import path, { relative } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { makeAsyncPort } from './asyncMessage.js';
+import { compileMarkdownLoad, compileMarkdownSetup } from './markdownCompiler.js';
+import { randomBytes } from 'node:crypto';
+
+/** @type {import("./asyncMessage.js").AsyncPort} */
+// @ts-ignore
+let sendPort = null;
+
+let lastReload = new Date().getTime();
+
+/** @type {(data: {port: import('./asyncMessage.js').AsyncPort}) => Promise<void>} */
+export async function initialize({ port }) {
+  sendPort = makeAsyncPort(port);
+  sendPort.on('message', message => {
+    if (message === 'reload') {
+      lastReload = new Date().getTime();
+    }
+  });
+}
+
+/** @type {import("module").LoadHook} */
+export async function load(url, context, nextLoad) {
+  const attrs = structuredClone(context.importAttributes);
+  // Server-Side Rendering
+  if (context.importAttributes?.type?.startsWith('rocketSetupMd')) {
+    const module = await nextLoad(url, {
+      ...context,
+      format: 'module',
+      importAttributes: {},
+    });
+    const finalSource = await compileMarkdownSetup(module.source?.toString() || '');
+    if (finalSource === null) {
+      throw new Error(
+        'No server code found in markdown file: ' + relative(process.cwd(), fileURLToPath(url)),
+      );
+    }
+    return {
+      format: 'module',
+      shortCircuit: true,
+      source: finalSource,
+    };
+  } else if (context.importAttributes?.type?.startsWith('rocketLoadMd')) {
+    // Client Side Rendering
+    const module = await nextLoad(url, {
+      ...context,
+      format: 'module',
+      importAttributes: {},
+    });
+    if (module.source === undefined) {
+      return module;
+    }
+    const code = await compileMarkdownLoad(module.source.toString(), {
+      singleDemo: attrs.singleDemo,
+    });
+    return { format: 'module', shortCircuit: true, source: code };
+  } else if (url.endsWith('.md')) {
+    throw new Error(
+      "Markdown files must be imported with type: 'rocketSetupMd'not " +
+        context.importAttributes.type +
+        ', import to ' +
+        url,
+    );
+    // Javascript or other files that ignore the cache
+  } else if (context.importAttributes.type?.match(/^(rocket(Setup|Load)Js)|^cache/)) {
+    return await nextLoad(url, {
+      ...context,
+      format: 'module',
+      importAttributes: {},
+    });
+  }
+  return nextLoad(url);
+}
+
+/** @type {import("module").ResolveHook} */
+export async function resolve(specifier, context, nextResolve) {
+  const regex = /^rocket(Setup|Load)(Md|Js)/;
+  const match = context.importAttributes?.type?.match(regex) ?? null;
+  if (match !== null) {
+    const parentURL = /** @type {string} */ (context.parentURL);
+    // if importing from page scan, import from root
+    const filePath = context.importAttributes.type?.endsWith('Initial')
+      ? specifier
+      : path.join(path.dirname(fileURLToPath(parentURL)), specifier);
+    const url = pathToFileURL(filePath).href;
+    /** @type {import("module").ResolveFnOutput} */
+    const resolve = {
+      format: 'module',
+      shortCircuit: true,
+      url,
+      importAttributes: {
+        ...context.importAttributes,
+        type:
+          'rocket' +
+          match[1] +
+          match[2] +
+          (context.importAttributes.type?.includes('Load')
+            ? randomBytes(8).toString('base64')
+            : lastReload.toString(36)),
+      },
+    };
+    if (match[0] === 'Setup' && isLocalFile(url)) {
+      await sendPort.sendAndWait({
+        parent: getPath(/** @type {string} */ (context.parentURL)),
+        url: getPath(resolve.url),
+      });
+    }
+    return resolve;
+  } else {
+    // Non-Rocket files
+    const resolve = await nextResolve(specifier, context);
+    if (isLocalFile(resolve.url)) {
+      resolve.importAttributes = {
+        ...resolve.importAttributes,
+        type: 'cache' + lastReload.toString(36),
+      };
+      await sendPort.sendAndWait({
+        parent: getPath(/** @type {string} */ (context.parentURL)),
+        url: getPath(resolve.url),
+      });
+    }
+    return resolve;
+  }
+}
+
+/**
+ * not node_modules
+ * @param {string} url
+ * @returns {boolean}
+ */
+function isLocalFile(url) {
+  if (!url.startsWith('file:///')) {
+    return false;
+  }
+  const localPath = relative(process.cwd(), fileURLToPath(url));
+  return !localPath.includes('node_modules');
+}
+
+/**
+ * absolute url to relative path
+ * @param {string} url
+ * @returns {string}
+ */
+function getPath(url) {
+  return relative(process.cwd(), fileURLToPath(url));
+}

package/src/menu.js

@@ -0,0 +1,210 @@
+/** Runs on: imported-md-string */
+import { html, nothing } from 'lit';
+import { join } from 'lit/directives/join.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+/**
+ * @param {import('@rocket/js/types.js').PageRegistry} pages
+ * @returns {import('@rocket/js/types.js').PageTree}
+ */
+export function treeFromPages(pages) {
+  /** @type {import('@rocket/js/types.js').PageTree[]} */
+  const children = [];
+  /** @type {import('@rocket/js/types.js').PageTree | undefined} */
+  let root = undefined;
+  for (const [url, page] of pages.entries()) {
+    const { file, module, metadata } = page;
+    const { title, linkText } = metadata;
+    if (url === '/') {
+      // we can't exclude the root page, so at least make it no link
+      const menuNoLink = module.config.menu === false ? true : module.config.menu?.noLink;
+      root = {
+        name: '',
+        url,
+        file,
+        module,
+        children,
+        linkText: linkText || title,
+        menuNoLink,
+        ...menuIcon(module),
+      };
+      continue;
+    }
+    if (module.config.menu === false) {
+      continue;
+    }
+    const parts = getMenuParts(url, module);
+    let obj = children;
+    /** @type {any} */
+    let last = {};
+    for (const part of parts) {
+      if (part.startsWith(':')) {
+        break;
+      }
+      const get = obj.find(leaf => leaf.name === part);
+      if (!get) {
+        /** @type {import('@rocket/js/types.js').PageTree[]} */
+        const children = [];
+        last = {
+          name: part,
+          url: '',
+          file: '',
+          module: { config: { path: '' } },
+          children,
+          linkText: pathPartToTitle(part),
+          menuNoLink: true,
+        };
+        obj.push(last);
+        obj = children;
+      } else {
+        last = get;
+        obj = get.children;
+      }
+    }
+    last.url = url;
+    last.file = file;
+    last.module = module;
+    last.linkText = linkText || title;
+    last.menuNoLink = module.config.menu?.noLink;
+    const iconName = menuIcon(module).iconName;
+    if (iconName) {
+      last.iconName = iconName;
+    } else {
+      delete last.iconName;
+    }
+  }
+  if (root) {
+    sortRecursive(children);
+    return root;
+  }
+  throw new Error('No root page was found');
+}
+
+/**
+ * @param {import('@rocket/js/types.js').Module} module
+ * @returns {{ iconName?: string }}
+ */
+function menuIcon(module) {
+  const menu = module.config.menu;
+  return typeof menu === 'object' && menu?.iconName ? { iconName: menu.iconName } : {};
+}
+
+/**
+ * @param {string} url
+ * @param {import('@rocket/js/types.js').Module} module
+ * @returns {string[]}
+ */
+function getMenuParts(url, module) {
+  const parts = url.split('/').filter(Boolean);
+  const menu = module.config.menu;
+  if (typeof menu !== 'object' || !menu?.parent) {
+    return parts;
+  }
+  const parentParts = menu.parent.split('/').filter(Boolean);
+  const leaf = parts.at(-1);
+  return leaf ? [...parentParts, leaf] : parentParts;
+}
+
+/**
+ * @param {string} part
+ */
+function pathPartToTitle(part) {
+  return part
+    .split('-')
+    .filter(Boolean)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+/**
+ * @param {import('@rocket/js/types.js').PageTree[]} children
+ */
+function sortRecursive(children) {
+  children.sort((a, b) => {
+    if (
+      typeof a.module.config?.menu === 'object' &&
+      a.module.config.menu?.order &&
+      typeof b.module.config?.menu === 'object' &&
+      b.module.config.menu?.order
+    ) {
+      return a.module.config.menu.order - b.module.config.menu.order;
+    }
+    return (a.linkText || a.name).localeCompare(b.linkText || b.name);
+  });
+  for (const child of children) {
+    sortRecursive(child.children);
+  }
+}
+
+/**
+ * @param {import("@rocket/js/types.js").PageTree} tree
+ * @param {string} listTagName
+ * @param {(name: string, url: string, module: import("@rocket/js/types.js").Module, linkText: string) => import("lit").TemplateResult} itemFn
+ */
+export function treeToHtml(tree, listTagName, itemFn) {
+  return html`${unsafeHTML(`<${listTagName}>`)}${join(
+    tree.children.map(page => {
+      let a = itemFn(page.name, page.url, page.module, page.linkText);
+      if (page.children.length) {
+        a = html`${a}${treeToHtml(page, listTagName, itemFn)}`;
+      }
+      return a;
+    }),
+    nothing,
+  )}${unsafeHTML(`</${listTagName}>`)}`;
+}
+
+/**
+ * @param {import('@rocket/js/types.js').PageTree} pageTree
+ */
+export function defaultHtmlMenu(pageTree) {
+  return treeToHtml(
+    pageTree,
+    'ul',
+    (_name, url, _module, linkText) =>
+      html`<li>
+        <a href=${url}>${linkText}</a>
+      </li>`,
+  );
+}
+
+/** Runs on: import-hook */
+/**
+ * @param {import('@rocket/js/types.js').Headline[]} headlines
+ * @returns {import('@rocket/js/types.js').TableOfContents}
+ */
+export function headLinesToTree(headlines) {
+  /** @type {import('@rocket/js/types.js').HeadlineTree[]} */
+  let entries = [];
+  const subHeadings = entries;
+  let stack = [];
+  let root = null;
+  let level = 2;
+  for (const headline of headlines) {
+    if (headline.level === 1) {
+      if (root === null) {
+        root = headline;
+      } else {
+        throw new Error('Could not create table of contents, multiple h1 headlines were found');
+      }
+    } else if (headline.level <= level) {
+      while (level > headline.level) {
+        level--;
+        entries = /** @type {import('@rocket/js/types.js').HeadlineTree[]} */ (stack.pop());
+      }
+      entries.push({ ...headline, children: [] });
+    } else if (headline.level === level + 1 && entries.length) {
+      entries[entries.length - 1].children.push({ ...headline, children: [] });
+      level++;
+      stack.push(entries);
+      const last = entries.at(-1);
+      if (!last) {
+        throw new Error('Could not create table of contents, empty headline found');
+      }
+      entries = last.children;
+    } else {
+      throw new Error('Could not create table of contents, jump in headline level is too high');
+    }
+  }
+  return { ...root, children: subHeadings };
+}

package/src/menus/MainMenu.js

@@ -0,0 +1,58 @@
+import { LitElement, css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+export class MainMenu extends LitElement {
+  static properties = {
+    pageTree: { type: Array },
+    currentPath: { type: String },
+  };
+
+  constructor() {
+    super();
+    /** @type {import('@rocket/js/types.js').PageTree} */
+    // @ts-ignore
+    this.pageTree = undefined;
+    this.currentPath = '';
+  }
+
+  render() {
+    if (!this.pageTree) {
+      return;
+    }
+    return html`<ul>
+      ${this.pageTree.children.map(page => this.list(page, 1))}
+    </ul>`;
+  }
+
+  /**
+   * @param {import('@rocket/js/types.js').PageTree} page
+   * @param {number} depth
+   * @returns {import('lit').TemplateResult}
+   */
+  list(page, depth = 0) {
+    const title = page.linkText;
+    /** @type {any} */
+    const classes = { current: page.url === this.currentPath };
+    const level = `lvl-${depth}`;
+    classes[level] = true;
+    return html`
+      <li>
+        <a href=${ifDefined(page.menuNoLink ? undefined : page.url)} class=${classMap(classes)}
+          >${title}</a
+        >
+        ${page.children.length > 0
+          ? html`<ul>
+              ${page.children.map(child => this.list(child, depth + 1))}
+            </ul>`
+          : ''}
+      </li>
+    `;
+  }
+
+  static styles = css`
+    a[href] {
+      color: var(--link-color);
+    }
+  `;
+}

package/src/menus/RocketMenu.js

@@ -0,0 +1,191 @@
+import { LitElement, css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+export class RocketMenu extends LitElement {
+  static properties = {
+    pageTree: { type: Array },
+    currentPath: { type: String },
+  };
+
+  constructor() {
+    super();
+    /** @type {import('@rocket/js/types.js').PageTree} */
+    // @ts-ignore
+    this.pageTree = undefined;
+    this.currentPath = '';
+  }
+
+  render() {
+    if (!this.pageTree) {
+      return;
+    }
+    return html`<ul class="menu-list">
+      ${this.pageTree.children.map(page => this.list(page, 1))}
+    </ul>`;
+  }
+
+  /**
+   * @param {import('@rocket/js/types.js').PageTree} page
+   * @param {number} depth
+   * @returns {import('lit').TemplateResult}
+   */
+  list(page, depth = 0) {
+    const title = page.linkText;
+    const isCurrent = page.url === this.currentPath;
+    const isSection = depth === 1;
+    /** @type {any} */
+    const classes = {
+      current: isCurrent,
+      section: isSection,
+      'no-link': page.menuNoLink,
+      'nav-link': !isSection,
+    };
+    const level = `lvl-${depth}`;
+    classes[level] = true;
+    const itemClasses = { 'section-item': isSection };
+
+    return html`
+      <li class=${classMap(itemClasses)}>
+        ${page.menuNoLink
+          ? html`<span class=${classMap(classes)}>${title}</span>`
+          : html`<a
+              href=${ifDefined(page.url)}
+              class=${classMap(classes)}
+              aria-current=${ifDefined(isCurrent ? 'page' : undefined)}
+              >${page.iconName
+                ? html`<rocket-icon
+                    class="nav-icon"
+                    name=${page.iconName}
+                    aria-hidden="true"
+                  ></rocket-icon>`
+                : ''}<span class="nav-text">${title}</span></a
+            >`}
+        ${page.children.length > 0
+          ? html`<ul>
+              ${page.children.map(child => this.list(child, depth + 1))}
+            </ul>`
+          : ''}
+      </li>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      --rocket-menu-heading-color: var(--primary-color);
+      --rocket-menu-text-color: var(--primary-text-color);
+      --rocket-menu-hover-text-color: var(--primary-text-color);
+      --rocket-menu-hover-background: #ffffff;
+      --rocket-menu-active-background: #fff0f0;
+      --rocket-menu-active-color: var(--primary-color);
+    }
+
+    a,
+    span {
+      text-decoration: none;
+      user-select: none;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style-type: none;
+    }
+
+    :host > .menu-list {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      position: relative;
+    }
+
+    li {
+      margin: 0;
+      padding: 0;
+    }
+
+    li > ul {
+      display: grid;
+      gap: 0.125rem;
+      margin-top: 0.4rem;
+    }
+
+    .section {
+      display: block;
+      padding: 0 0.6rem;
+      color: var(--rocket-menu-heading-color);
+      font-size: 0.78rem;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      line-height: 1.2;
+      text-transform: uppercase;
+    }
+
+    .nav-link {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0.7rem;
+      min-height: 2.35rem;
+      padding: 0.45rem 0.75rem 0.45rem 0.95rem;
+      border-radius: 9px;
+      color: var(--rocket-menu-text-color);
+      font-size: 0.9rem;
+      font-weight: 500;
+      line-height: 1.25;
+      transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        box-shadow 0.2s ease;
+    }
+
+    .nav-link:hover {
+      color: var(--rocket-menu-hover-text-color);
+      background: var(--rocket-menu-hover-background);
+    }
+
+    .nav-link.current {
+      color: var(--rocket-menu-active-color);
+      font-weight: 700;
+      background: var(--rocket-menu-active-background);
+      box-shadow: inset 0 0 0 1px hsl(358 88% 47% / 7%);
+    }
+
+    .nav-link:focus-visible {
+      outline: 2px solid hsl(358 88% 47% / 45%);
+      outline-offset: 2px;
+    }
+
+    .nav-text {
+      min-width: 0;
+    }
+
+    rocket-icon.nav-icon {
+      width: 1rem;
+      height: 1rem;
+      flex: 0 0 1rem;
+      color: currentColor;
+    }
+
+    .nav-link.current::before {
+      position: absolute;
+      top: 0.45rem;
+      bottom: 0.45rem;
+      left: 0.35rem;
+      width: 3px;
+      border-radius: 999px;
+      background: var(--rocket-menu-active-color);
+      content: '';
+    }
+
+    .lvl-3 {
+      margin-left: 0.7rem;
+      font-size: 0.84rem;
+    }
+  `;
+}

package/src/menus/RocketNextPage.js

@@ -0,0 +1,25 @@
+import { LitElement, nothing } from 'lit';
+import { nextPageNode, pageNavigationStyles, renderPageNavigationCard } from './pageNavigation.js';
+
+export class RocketNextPage extends LitElement {
+  static properties = {
+    pageTree: { type: Array },
+    currentPath: { type: String },
+  };
+
+  constructor() {
+    super();
+    /** @type {import('@rocket/js/types.js').PageTree} */
+    // @ts-ignore
+    this.pageTree = undefined;
+    this.currentPath = '';
+  }
+
+  render() {
+    if (!this.pageTree) {
+      return nothing;
+    }
+    return renderPageNavigationCard(nextPageNode(this.pageTree, this.currentPath), 'next');
+  }
+  static styles = pageNavigationStyles;
+}

package/src/menus/RocketPreviousPage.js

@@ -0,0 +1,29 @@
+import { LitElement, nothing } from 'lit';
+import {
+  pageNavigationStyles,
+  previousPageNode,
+  renderPageNavigationCard,
+} from './pageNavigation.js';
+
+export class RocketPreviousPage extends LitElement {
+  static properties = {
+    pageTree: { type: Array },
+    currentPath: { type: String },
+  };
+
+  constructor() {
+    super();
+    /** @type {import('@rocket/js/types.js').PageTree} */
+    // @ts-ignore
+    this.pageTree = undefined;
+    this.currentPath = '';
+  }
+
+  render() {
+    if (!this.pageTree) {
+      return nothing;
+    }
+    return renderPageNavigationCard(previousPageNode(this.pageTree, this.currentPath), 'previous');
+  }
+  static styles = pageNavigationStyles;
+}