@rocket/js 0.0.0 → 0.1.1

package/src/config.js

@@ -0,0 +1,319 @@
+/** Runs on: server */
+import path from 'node:path';
+import { validateIconLibrariesConfig } from './icons.js';
+
+const REDIRECT_STATUSES = new Set([301, 302, 307, 308]);
+
+/**
+ * @param {string} [filePath]
+ * @returns {Promise<import("@rocket/js/types.js").ResolvedRocketConfig>}
+ */
+export async function readConfig(filePath) {
+  const configFile = await import(
+    filePath ? path.join(process.cwd(), filePath) : path.join(process.cwd(), 'rocket-config.js')
+  );
+  if (configFile.default === undefined) {
+    throw new Error('rocket-config.js must have a default export');
+  }
+  /** @type {import("@rocket/js/types.js").RocketConfig} */
+  const config = configFile.default;
+  validateRedirectConfig(config.urlLifecycle?.redirects);
+  const siteHeadMetadata = normalizeSiteHeadMetadataConfig(config.siteHeadMetadata);
+  validateIconLibrariesConfig(config.iconLibraries);
+  validateDefaultIconLibraryConfig(config.defaultIconLibrary);
+  const siteOrigin = siteHeadMetadata
+    ? requireSiteHeadMetadataSiteOrigin(config.siteOrigin)
+    : config.siteOrigin;
+  config.includeGlobs = config.includeGlobs.map(glob => {
+    if (!glob.includes('*') && !glob.includes('.')) {
+      // If the glob is a directory, include all files in the directory
+      return `${glob}${glob.endsWith('/') ? '' : '/'}**`;
+    }
+    return glob;
+  });
+
+  return {
+    excludeRegex: [],
+    adjustDevServerConfig: _ => _,
+    ...config,
+    ...(siteOrigin ? { siteOrigin } : {}),
+    ...(siteHeadMetadata ? { siteHeadMetadata } : {}),
+  };
+}
+
+/**
+ * @param {unknown} defaultIconLibrary
+ */
+function validateDefaultIconLibraryConfig(defaultIconLibrary) {
+  if (defaultIconLibrary === undefined) {
+    return;
+  }
+  if (typeof defaultIconLibrary !== 'string' || defaultIconLibrary.trim() === '') {
+    throw new Error(
+      'Invalid Icon Library Configuration: defaultIconLibrary must be a non-empty string',
+    );
+  }
+}
+
+const siteHeadMetadataFields = new Set([
+  'siteName',
+  'defaultDescription',
+  'language',
+  'icons',
+  'themeColor',
+  'socialPreview',
+]);
+const siteHeadMetadataIconFields = new Set(['ico', 'svg', 'appleTouchIcon']);
+const siteHeadMetadataSocialPreviewFields = new Set(['delivery', 'template']);
+const siteHeadMetadataSocialPreviewDeliveryValues = new Set(['static']);
+
+/**
+ * @param {unknown} siteHeadMetadata
+ * @returns {import("@rocket/js/types.js").SiteHeadMetadataConfig | undefined}
+ */
+function normalizeSiteHeadMetadataConfig(siteHeadMetadata) {
+  if (siteHeadMetadata === undefined) {
+    return undefined;
+  }
+  if (!isPlainRecord(siteHeadMetadata)) {
+    throw invalidSiteHeadMetadata('siteHeadMetadata', 'must be an object');
+  }
+  for (const field of Object.keys(siteHeadMetadata)) {
+    if (!siteHeadMetadataFields.has(field)) {
+      throw invalidSiteHeadMetadata(
+        `siteHeadMetadata.${field}`,
+        'is not a known Site Head Metadata field',
+      );
+    }
+  }
+  const normalized = /** @type {import("@rocket/js/types.js").SiteHeadMetadataConfig} */ ({
+    siteName: readRequiredSiteHeadMetadataString(siteHeadMetadata, 'siteName'),
+    defaultDescription: readRequiredSiteHeadMetadataString(siteHeadMetadata, 'defaultDescription'),
+    language: readRequiredSiteHeadMetadataString(siteHeadMetadata, 'language'),
+  });
+  if (hasOwn(siteHeadMetadata, 'icons')) {
+    normalized.icons = readSiteHeadMetadataIcons(siteHeadMetadata.icons);
+  }
+  if (hasOwn(siteHeadMetadata, 'themeColor')) {
+    normalized.themeColor = readSiteHeadMetadataString(
+      siteHeadMetadata.themeColor,
+      'siteHeadMetadata.themeColor',
+    );
+  }
+  if (hasOwn(siteHeadMetadata, 'socialPreview')) {
+    normalized.socialPreview = readSiteHeadMetadataSocialPreview(siteHeadMetadata.socialPreview);
+  }
+  return normalized;
+}
+
+/**
+ * @param {unknown} socialPreview
+ * @returns {NonNullable<import('@rocket/js/types.js').SiteHeadMetadataConfig['socialPreview']>}
+ */
+function readSiteHeadMetadataSocialPreview(socialPreview) {
+  if (!isPlainRecord(socialPreview)) {
+    throw invalidSiteHeadMetadata('siteHeadMetadata.socialPreview', 'must be an object');
+  }
+  for (const field of Object.keys(socialPreview)) {
+    if (!siteHeadMetadataSocialPreviewFields.has(field)) {
+      throw invalidSiteHeadMetadata(
+        `siteHeadMetadata.socialPreview.${field}`,
+        'is not a known Social Preview field',
+      );
+    }
+  }
+  if (
+    hasOwn(socialPreview, 'delivery') &&
+    !siteHeadMetadataSocialPreviewDeliveryValues.has(/** @type {string} */ (socialPreview.delivery))
+  ) {
+    throw invalidSiteHeadMetadata('siteHeadMetadata.socialPreview.delivery', "must be 'static'");
+  }
+  if (hasOwn(socialPreview, 'template') && typeof socialPreview.template !== 'function') {
+    throw invalidSiteHeadMetadata('siteHeadMetadata.socialPreview.template', 'must be a function');
+  }
+  const template =
+    /** @type {NonNullable<import('@rocket/js/types.js').SiteHeadMetadataConfig['socialPreview']>['template'] | undefined} */ (
+      socialPreview.template
+    );
+  return {
+    delivery: 'static',
+    ...(hasOwn(socialPreview, 'template') ? { template } : {}),
+  };
+}
+
+/**
+ * @param {Record<string, unknown>} siteHeadMetadata
+ * @param {'siteName' | 'defaultDescription' | 'language'} field
+ */
+function readRequiredSiteHeadMetadataString(siteHeadMetadata, field) {
+  return readSiteHeadMetadataString(siteHeadMetadata[field], `siteHeadMetadata.${field}`);
+}
+
+/**
+ * @param {unknown} icons
+ * @returns {import("@rocket/js/types.js").SiteHeadMetadataIconsConfig}
+ */
+function readSiteHeadMetadataIcons(icons) {
+  if (!isPlainRecord(icons)) {
+    throw invalidSiteHeadMetadata('siteHeadMetadata.icons', 'must be an object');
+  }
+  for (const field of Object.keys(icons)) {
+    if (!siteHeadMetadataIconFields.has(field)) {
+      throw invalidSiteHeadMetadata(
+        `siteHeadMetadata.icons.${field}`,
+        'is not a known Favicon Asset field',
+      );
+    }
+  }
+  return {
+    ...(hasOwn(icons, 'ico')
+      ? { ico: readSiteHeadMetadataString(icons.ico, 'siteHeadMetadata.icons.ico') }
+      : {}),
+    ...(hasOwn(icons, 'svg')
+      ? { svg: readSiteHeadMetadataString(icons.svg, 'siteHeadMetadata.icons.svg') }
+      : {}),
+    ...(hasOwn(icons, 'appleTouchIcon')
+      ? {
+          appleTouchIcon: readSiteHeadMetadataString(
+            icons.appleTouchIcon,
+            'siteHeadMetadata.icons.appleTouchIcon',
+          ),
+        }
+      : {}),
+  };
+}
+
+/**
+ * @param {unknown} value
+ * @param {string} field
+ */
+function readSiteHeadMetadataString(value, field) {
+  if (typeof value !== 'string' || value.trim() === '') {
+    throw invalidSiteHeadMetadata(field, 'must be a non-empty string');
+  }
+  return value;
+}
+
+/**
+ * @param {string} field
+ * @param {string} message
+ */
+function invalidSiteHeadMetadata(field, message) {
+  return new Error(`Invalid Site Head Metadata: ${field} ${message}`);
+}
+
+/**
+ * @param {string | undefined} siteOrigin
+ */
+function requireSiteHeadMetadataSiteOrigin(siteOrigin) {
+  if (typeof siteOrigin !== 'string' || siteOrigin.trim() === '') {
+    throw new Error(
+      `Site Head Metadata requires a Site Origin. ` +
+        `Add siteOrigin: 'https://example.com' to rocket-config.js.`,
+    );
+  }
+  return normalizeSiteOrigin(siteOrigin);
+}
+
+/**
+ * @param {string} siteOrigin
+ */
+function normalizeSiteOrigin(siteOrigin) {
+  let url;
+  try {
+    url = new URL(siteOrigin);
+  } catch {
+    throw invalidSiteOriginError(siteOrigin);
+  }
+
+  if (url.origin === 'null' || url.pathname !== '/' || url.search || url.hash) {
+    throw invalidSiteOriginError(siteOrigin);
+  }
+  return url.origin;
+}
+
+/**
+ * @param {string} siteOrigin
+ */
+function invalidSiteOriginError(siteOrigin) {
+  return new Error(
+    `Invalid Site Origin ${JSON.stringify(siteOrigin)}. ` +
+      `Use an absolute origin such as 'https://example.com'.`,
+  );
+}
+
+/**
+ * @param {import("@rocket/js/types.js").RedirectConfig[] | undefined} redirects
+ */
+function validateRedirectConfig(redirects = []) {
+  const sources = new Set();
+  for (const redirect of redirects) {
+    if (!isInternalAbsolutePath(redirect.source)) {
+      throw new Error(
+        `Invalid Redirect source ${JSON.stringify(
+          redirect.source,
+        )}. Redirect sources must be internal absolute paths.`,
+      );
+    }
+    if (sources.has(redirect.source)) {
+      throw new Error(`Duplicate Redirect source ${JSON.stringify(redirect.source)}.`);
+    }
+    sources.add(redirect.source);
+    if (!isInternalAbsolutePath(redirect.target) && !isAbsoluteHttpUrl(redirect.target)) {
+      throw new Error(
+        `Invalid Redirect target ${JSON.stringify(
+          redirect.target,
+        )}. Redirect targets must be internal absolute paths or absolute http: or https: URLs.`,
+      );
+    }
+    if (redirect.status !== undefined && !REDIRECT_STATUSES.has(redirect.status)) {
+      throw new Error(
+        `Invalid Redirect status ${JSON.stringify(
+          redirect.status,
+        )}. Redirect statuses must be 301, 302, 307, or 308.`,
+      );
+    }
+  }
+}
+
+/**
+ * @param {unknown} value
+ */
+function isInternalAbsolutePath(value) {
+  return typeof value === 'string' && value.startsWith('/') && !value.startsWith('//');
+}
+
+/**
+ * @param {unknown} value
+ */
+function isAbsoluteHttpUrl(value) {
+  if (typeof value !== 'string') {
+    return false;
+  }
+  try {
+    const url = new URL(value);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * @param {unknown} value
+ * @returns {value is Record<string, unknown>}
+ */
+function isPlainRecord(value) {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+
+/**
+ * @param {object} object
+ * @param {string} key
+ */
+function hasOwn(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}

package/src/debounce.js

@@ -0,0 +1,21 @@
+/**
+ * @template {(...args: any) => any} F
+ * @param {F} fn
+ * @param {number} timeout
+ * @returns {(...args: Parameters<F>) => ReturnType<F>}
+ */
+export function debounce(fn, timeout) {
+  const func = function (/** @type {Parameters<F>} */ ...args) {
+    if (ret._ready) {
+      ret._ready = false;
+      setTimeout(() => {
+        ret._ready = true;
+        return fn(...args);
+      }, timeout);
+    }
+  };
+  func._ready = true;
+  /** @type {((...args: any) => any) & {_ready: boolean}} */
+  const ret = func;
+  return ret;
+}

package/src/defaultSocialPreviewTemplate.js

@@ -0,0 +1,118 @@
+export const DEFAULT_SOCIAL_PREVIEW_IMAGE_WIDTH = 1200;
+export const DEFAULT_SOCIAL_PREVIEW_IMAGE_HEIGHT = 630;
+
+/**
+ * @param {{
+ *   site?: { language: string; name: string };
+ *   page?: { title: string; documentTitle?: string; description: string; canonicalUrl: string };
+ *   language?: string;
+ *   siteName?: string;
+ *   title?: string;
+ *   description?: string;
+ *   canonicalUrl?: string;
+ * }} facts
+ */
+export function defaultSocialPreviewTemplate({
+  site,
+  page,
+  language,
+  siteName,
+  title,
+  description,
+  canonicalUrl,
+}) {
+  language ??= site?.language;
+  siteName ??= site?.name;
+  title ??= page?.title;
+  description ??= page?.description;
+  canonicalUrl ??= page?.canonicalUrl;
+  if (!language || !siteName || !title || !description || !canonicalUrl) {
+    throw new Error('Default Social Preview Template requires complete site and Page facts.');
+  }
+  return `<!doctype html>
+<html lang="${escapeHtml(language)}">
+  <head>
+    <meta charset="utf-8">
+    <style>
+      * { box-sizing: border-box; }
+      html,
+      body {
+        width: ${DEFAULT_SOCIAL_PREVIEW_IMAGE_WIDTH}px;
+        height: ${DEFAULT_SOCIAL_PREVIEW_IMAGE_HEIGHT}px;
+        margin: 0;
+      }
+      body {
+        display: grid;
+        place-items: stretch;
+        padding: 54px;
+        color: #f8fafc;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        background:
+          radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.42), transparent 34%),
+          radial-gradient(circle at 84% 22%, rgba(168, 85, 247, 0.38), transparent 30%),
+          linear-gradient(135deg, #0f172a 0%, #111827 52%, #020617 100%);
+      }
+      main {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100%;
+        border: 1px solid rgba(248, 250, 252, 0.22);
+        border-radius: 42px;
+        padding: 58px 64px;
+        background: rgba(15, 23, 42, 0.68);
+        box-shadow: 0 24px 90px rgba(0, 0, 0, 0.32);
+      }
+      .site {
+        margin: 0;
+        color: #7dd3fc;
+        font-size: 34px;
+        font-weight: 800;
+        letter-spacing: 0.035em;
+        text-transform: uppercase;
+      }
+      h1 {
+        max-width: 930px;
+        margin: 38px 0 0;
+        font-size: 76px;
+        line-height: 0.98;
+        letter-spacing: -0.055em;
+      }
+      .description {
+        max-width: 900px;
+        margin: 28px 0 0;
+        color: #cbd5e1;
+        font-size: 36px;
+        line-height: 1.22;
+      }
+      .url {
+        margin: 46px 0 0;
+        color: #94a3b8;
+        font-size: 26px;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section>
+        <p class="site">${escapeHtml(siteName)}</p>
+        <h1>${escapeHtml(title)}</h1>
+        <p class="description">${escapeHtml(description)}</p>
+      </section>
+      <p class="url">${escapeHtml(canonicalUrl)}</p>
+    </main>
+  </body>
+</html>`;
+}
+
+/**
+ * @param {string} value
+ */
+function escapeHtml(value) {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;');
+}

package/src/development-page-module-loader.js

@@ -0,0 +1,29 @@
+import { normalizeLoadedPageModule } from './loaded-page-module.js';
+import { parseComponents } from './components.js';
+
+/** @typedef {import('./page-runtime.js').PageModuleLoaderOptions} PageModuleLoaderOptions */
+
+export function createDevelopmentPageModuleLoader() {
+  return {
+    /**
+     * @param {PageModuleLoaderOptions} options
+     */
+    async load({ page, variant }) {
+      if (!page.file.endsWith('.js')) {
+        const importAttributes = { type: 'rocketLoadMdInitial' };
+        if (typeof variant === 'object' && variant.kind === 'standalone-demo') {
+          Object.assign(importAttributes, { singleDemo: variant.demoName });
+        }
+        const module = await import(`./${page.file}`, {
+          with: importAttributes,
+        });
+        return normalizeLoadedPageModule({ kind: 'markdown', module, parseComponents });
+      }
+
+      const module = await import(`./${page.file}`, {
+        with: { type: 'rocketLoadJsInitial' },
+      });
+      return normalizeLoadedPageModule({ kind: 'javascript', module });
+    },
+  };
+}

package/src/extractCode.js

@@ -0,0 +1,41 @@
+/** Runs on: import-hook */
+import { remove } from 'unist-util-remove';
+
+/**
+ * @param {string} meta
+ */
+export function extractMdCode(meta) {
+  /** @type {import('unified').Plugin} */
+  return function unifiedProcessor() {
+    /** @type {string | null} */
+    let jsCode = null;
+
+    /** @type {import('unist-util-is').TestFunction} */
+    const removeFunction = _node => {
+      // technically not correct, but we check
+      const node = /** @type {import('mdast').Code} */ (_node);
+      if (node.type === 'code' && node.lang === 'js' && node.meta === meta) {
+        jsCode = jsCode === null ? node.value : jsCode + node.value + ';';
+        return true;
+      }
+      return false;
+    };
+
+    /**
+     * @param {import('unist').Node} tree
+     * @param {import('vfile').VFile} file
+     */
+    return function transformer(tree, file) {
+      remove(tree, removeFunction);
+      if (!file.data) {
+        file.data = {};
+      }
+      if (!file.data.code) {
+        file.data.code = {};
+      }
+      // @ts-ignore
+      file.data.code[meta] = jsCode;
+      return tree;
+    };
+  };
+}

package/src/hydration/evaluate.js

@@ -0,0 +1,54 @@
+/**
+ * From: https://github.com/modernweb-dev/rocket/blob/main/packages/engine/src/hydration/evaluate.js
+ * Runs on: client
+ */
+/**
+ * @param {object} options
+ * @param {string} options.strategyTemplate
+ * @param {import('@rocket/js/types.js').Strategy[]} options.strategies
+ * @returns {boolean}
+ */
+export function evaluate({ strategyTemplate, strategies }) {
+  // @ts-ignore
+  const conditions = strategyTemplate.replace(/{{(\d+)}}/g, (match, number) => {
+    if (strategies[number]) {
+      return strategies[number].resolveAble ? 1 : 0;
+    }
+    return match;
+  });
+  const result = evaluateConditions(conditions);
+  return result;
+}
+
+/**
+ * @param {string} input
+ * @returns {boolean}
+ */
+export function evaluateConditions(input) {
+  let state;
+  let mode = 'and';
+
+  const str = input.replace('&&', '&').replace('||', '|');
+
+  for (const char of str) {
+    if (char === ' ') {
+      continue;
+    }
+    if (char === '&') {
+      mode = 'and';
+    }
+    if (char === '|') {
+      mode = 'or';
+    }
+    // @ts-ignore
+    if (!isNaN(char)) {
+      // is number
+      const i = parseInt(char);
+      state = state === undefined ? i : mode === 'and' ? state & i : state | i;
+      if (mode === 'or' && state === 1) {
+        return true;
+      }
+    }
+  }
+  return !!state;
+}

package/src/hydration/extractStrategies.js

@@ -0,0 +1,91 @@
+/**
+ * From: https://github.com/modernweb-dev/rocket/blob/packages/engine/src/hydration/extractStrategies.js
+ * Runs on: client
+ */
+
+/**
+ * @param {string} str
+ * @returns {string[]}
+ */
+function getParts(str) {
+  const parts = [];
+  let captured = '';
+  for (const char of str.split('')) {
+    if ((char === '&' && captured.endsWith('&')) || (char === '|' && captured.endsWith('|'))) {
+      parts.push(captured.slice(0, -1).trim());
+      parts.push(char.repeat(2));
+      captured = '';
+    } else {
+      captured += char;
+    }
+  }
+
+  if (captured) {
+    parts.push(captured.trim());
+  }
+
+  return parts;
+}
+
+/**
+ *
+ * @param {string} part
+ * @param {string} type
+ * @returns {{ type: string; resolveAble: boolean; options?: string; }}
+ */
+function getStrategy(part, type) {
+  /** @type {{ type: string; resolveAble: boolean; options?: string; }} */
+  const strategy = {
+    type,
+    resolveAble: false,
+  };
+  if (part.length > type.length) {
+    const rawOptions = part.slice(type.length).trim();
+    if (rawOptions.startsWith("('") && rawOptions.endsWith("')")) {
+      const options = rawOptions.slice(2, -2);
+      strategy.options = options;
+    }
+  }
+  if (type === 'onIdle' || type === 'onDelay' || type === 'onClientLoad') {
+    strategy.resolveAble = true;
+  }
+  return strategy;
+}
+
+/**
+ * @param {string} input
+ */
+export function extractStrategies(input) {
+  const parts = getParts(input);
+
+  /** @type {import('@rocket/js/types.js').LoadingStrategy} */
+  const result = {
+    strategyAttribute: input,
+    strategies: [],
+    strategyTemplate: '',
+  };
+
+  let templatePartsIndex = 0;
+  for (const [i, part] of parts.entries()) {
+    const type = part.includes('(') ? part.substring(0, part.indexOf('(')) : part;
+    switch (type) {
+      // global events
+      case 'onClientLoad':
+      case 'onClick':
+      case 'onFocus':
+      // element events               eslint fall through
+      case 'onHover':
+      case 'onMedia':
+      case 'onVisible':
+      // modifiers                    eslint fall through
+      case 'onIdle':
+      case 'onDelay':
+        result.strategies.push(getStrategy(part, type));
+        parts[i] = `{{${templatePartsIndex}}}`;
+        templatePartsIndex += 1;
+    }
+  }
+  result.strategyTemplate = parts.join(' ');
+
+  return result;
+}