@rocket/js 0.0.0 → 0.1.1

package/src/cli/RocketStart.js

@@ -0,0 +1,145 @@
+/* eslint-disable no-console */
+import { spawn } from 'child_process';
+import { watch } from 'fs';
+import { debounce } from '../debounce.js';
+import path from 'path';
+
+export class RocketStart {
+  /** @type {RocketStartOptions} */
+  startOptions = {};
+
+  /**
+   * @param {import('commander').Command} program
+   * @param {import('./RocketCli.js').RocketCli} cli
+   */
+  async setupCommand(program, cli) {
+    this.cli = cli;
+
+    program
+      .command('start')
+      .option('-p, --port <port>', 'port for the development server')
+      .option('--no-open', 'do not open the browser')
+      .option('--no-watch', 'disable automatic file watching and reloads')
+      .action(async options => {
+        const startOptions = normalizeStartOptions(options);
+        await cli.getConfig();
+        await this.start(startOptions);
+      });
+  }
+
+  /**
+   * @param {RocketStartOptions} [options]
+   */
+  spawnServer(options = {}) {
+    process.stdin.setRawMode?.(true);
+    return spawn(
+      'node',
+      startServerArgs({
+        configFilePath: this.cli?.configFilePath,
+        options,
+      }),
+      {
+        stdio: 'inherit',
+        cwd: process.cwd(),
+      },
+    );
+  }
+
+  restartServer() {
+    this.server?.kill();
+    this.server = this.spawnServer(this.startOptions);
+    console.clear();
+    console.log('Restarting rocket server...');
+  }
+
+  /**
+   * @param {RocketStartOptions} [options]
+   */
+  async start(options = {}) {
+    this.startOptions = options;
+    this.server = this.spawnServer(options);
+
+    if (options.watch !== false) {
+      // watch config
+      watch(
+        path.join(process.cwd(), this.cli?.configFilePath || 'rocket-config.js'),
+        debounce(async (_, filename) => {
+          if (!filename) {
+            return;
+          }
+          this.restartServer();
+        }, 100),
+      );
+
+      // watch src
+      watch(
+        import.meta.dirname,
+        { recursive: true },
+        debounce(async (_, filename) => {
+          if (!filename) {
+            return;
+          }
+          this.restartServer();
+        }, 100),
+      );
+    }
+
+    process.stdin.on('data', data => {
+      const char = data.toString();
+      if (char === '\u0003' || char === '\u0004') {
+        // Ctrl+C or Ctrl+D
+        this.server?.kill();
+        process.exit(0);
+      } else if (char === '\u0012') {
+        // Ctrl+R
+        this.restartServer();
+      }
+    });
+    console.log('Restart the server with Ctrl+R');
+  }
+}
+
+/**
+ * @typedef {{ port?: number; open?: boolean; watch?: boolean }} RocketStartOptions
+ */
+
+/**
+ * @param {{ port?: string; open?: boolean; watch?: boolean }} options
+ * @returns {RocketStartOptions}
+ */
+export function normalizeStartOptions(options) {
+  return {
+    ...(options.port !== undefined ? { port: parsePortOption(options.port) } : {}),
+    ...(options.open !== undefined ? { open: options.open } : {}),
+    ...(options.watch !== undefined ? { watch: options.watch } : {}),
+  };
+}
+
+/**
+ * @param {{ configFilePath?: string; options?: RocketStartOptions }} input
+ */
+export function startServerArgs({ configFilePath, options = {} }) {
+  return [
+    path.join(import.meta.dirname, '../main.js'),
+    configFilePath || '',
+    JSON.stringify(options),
+  ];
+}
+
+/**
+ * @param {string} value
+ */
+function parsePortOption(value) {
+  if (!/^\d+$/.test(value)) {
+    throw new Error(
+      `Invalid --port ${JSON.stringify(value)}. Expected an integer from 1 to 65535.`,
+    );
+  }
+  const port = Number(value);
+  if (port < 1 || port > 65535) {
+    throw new Error(
+      `Invalid --port ${JSON.stringify(value)}. Expected an integer from 1 to 65535.`,
+    );
+  }
+  return port;
+}

package/src/cli/cli.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+import { RocketCli } from './RocketCli.js';
+
+const cli = new RocketCli();
+
+await cli.start();

package/src/component-hydration.js

@@ -0,0 +1,86 @@
+/**
+ * @typedef {import('@rocket/js/types.js').Components} Components
+ * @typedef {Record<string, CustomElementConstructor>} ComponentModule
+ * @typedef {(file: string) => Promise<ComponentModule>} LoadComponentModule
+ * @typedef {(file: string) => string} ResolveBrowserImport
+ */
+
+/**
+ * @param {{
+ *   customElementsRegistry?: CustomElementRegistry;
+ *   loadComponentModule: LoadComponentModule;
+ *   resolveBrowserImport: ResolveBrowserImport;
+ *   hydrationLoaderSpecifier: string;
+ * }} options
+ * @returns {(components: Components) => Promise<string>}
+ */
+export function createComponentHydration({
+  customElementsRegistry,
+  loadComponentModule,
+  resolveBrowserImport,
+  hydrationLoaderSpecifier,
+}) {
+  return async function parseComponents(components) {
+    const serverOnlyComponents = [];
+    const clientComponents = [];
+    const hydratedComponents = [];
+    for (const [name, { file, className, loading }] of Object.entries(components)) {
+      if (loading === 'server') {
+        const module = await loadComponentModule(file);
+        serverOnlyComponents.push({ name, file, className, module });
+      } else if (loading === 'client') {
+        clientComponents.push({ name, file, className });
+      } else if (loading.startsWith('hydrate:')) {
+        const module = await loadComponentModule(file);
+        hydratedComponents.push({
+          name,
+          file,
+          className,
+          module,
+          strategy: loading.slice('hydrate:'.length),
+        });
+      }
+    }
+
+    const registry = customElementsRegistry || customElements;
+    registry.__definitions.clear();
+    // @ts-ignore
+    registry.__reverseDefinitions.clear();
+    for (const component of serverOnlyComponents.concat(hydratedComponents)) {
+      if (!component.module[component.className]) {
+        throw new Error(
+          `Component ${component.name} does not export a class named ${component.className}`,
+        );
+      }
+      registry.define(component.name, component.module[component.className]);
+    }
+
+    let clientCode = clientComponents
+      .map(
+        component =>
+          `import('${resolveBrowserImport(
+            component.file,
+          )}').then(module => customElements.get('${component.name}') || customElements.define('${
+            component.name
+          }', module.${component.className}));\n`,
+      )
+      .join('');
+    if (hydratedComponents.length) {
+      clientCode += [
+        `import {HydrationLoader} from '${hydrationLoaderSpecifier}';`,
+        'const hydratedComponents = {',
+        ...hydratedComponents.map(
+          component =>
+            `'${component.name}': {getter: () => import('${resolveBrowserImport(
+              component.file,
+            )}').then(m => m.${component.className}),
+        strategy: ${JSON.stringify(component.strategy)}},`,
+        ),
+        '};',
+        'const hydrationLoader = new HydrationLoader(hydratedComponents);',
+        'hydrationLoader.init();',
+      ].join('\n');
+    }
+    return clientCode;
+  };
+}

package/src/components/FeatureList.js

@@ -0,0 +1,114 @@
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+/** @typedef {import('@rocket/js/types.js').Feature} Feature */
+
+export class FeatureList extends LitElement {
+  static properties = {
+    features: { type: Array },
+  };
+
+  constructor() {
+    super();
+    /** @type {Feature[]} */
+    this.features = [];
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      margin: 4rem auto 200px auto;
+      max-width: 1200px;
+      width: 100%;
+      --color-white: white;
+    }
+    .features {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+      gap: 2.5rem;
+    }
+    .feature-card {
+      background: var(--color-white);
+      padding: 2rem 3rem;
+      border-radius: 1rem;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+      transition: transform 0.2s ease-in-out;
+    }
+    .feature-card:hover {
+      transform: translateY(-4px);
+    }
+    .feature-card span {
+      font-size: 1.8rem;
+      margin-right: 0.5rem;
+    }
+    .feature-card h3 {
+      font-size: 1.6rem;
+      margin: 0.5rem 0;
+      color: var(--primary-text-color);
+    }
+    .feature-card p {
+      font-size: 1.2rem;
+    }
+    /* stagger every even card downwards */
+    .feature-card:nth-child(2n) {
+      transform: translateY(50%);
+    }
+    .feature-card:nth-child(2n):hover {
+      transform: translateY(calc(50% - 4px));
+    }
+    span svg {
+      width: 1em;
+      transform: translateY(5px);
+    }
+
+    @media (max-width: 910px) {
+      :host {
+        margin-bottom: 100px;
+      }
+
+      .features {
+        grid-template-columns: 1fr;
+        padding: 0 1.5rem;
+        gap: 1.5rem;
+      }
+
+      .feature-card {
+        padding: 1.5rem 2rem;
+      }
+
+      .feature-card:nth-child(2n) {
+        transform: none; /* disable stagger */
+      }
+
+      .feature-card:nth-child(2n):hover {
+        transform: translateY(-4px);
+      }
+
+      .feature-card h3 {
+        font-size: 1.4rem;
+      }
+
+      .feature-card p {
+        font-size: 1rem;
+      }
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="features">
+        ${this.features.map(
+          card => html`
+            <div class="feature-card">
+              <h3>
+                <span> ${card.icon.startsWith('<svg') ? unsafeHTML(card.icon) : card.icon} </span>
+                ${card.title}
+              </h3>
+              <p>${card.description}</p>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  }
+}

package/src/components/Footer.js

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from 'lit';
+
+/** @typedef {import('@rocket/js/types.js').FooterSection} FooterSection */
+
+export class Footer extends LitElement {
+  static properties = {
+    data: { type: Array },
+  };
+
+  constructor() {
+    super();
+    /** @type {FooterSection[]} */
+    this.data = [];
+  }
+
+  /** @param {FooterSection} section */
+  renderSection(section) {
+    return html`
+      <nav>
+        <h3>${section.title}</h3>
+        <ul>
+          ${section.links.map(link => html`<li><a href=${link.href}>${link.text}</a></li>`)}
+        </ul>
+      </nav>
+    `;
+  }
+
+  render() {
+    return html`
+      <footer class="main-footer">
+        <div class="footer-menu">${this.data?.map(section => this.renderSection(section))}</div>
+      </footer>
+    `;
+  }
+
+  static styles = [
+    css`
+      .main-footer {
+        margin-top: 112px;
+        border-top: 1px solid #edf1f6;
+        background-color: #f8fafc;
+        color: var(--primary-text-color);
+        padding: 30px 0 32px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .footer-menu {
+        display: flex;
+        justify-content: center;
+        gap: clamp(2.5rem, 7vw, 5.5rem);
+        flex-direction: row;
+        max-width: 1200px;
+        width: 100%;
+        padding: 0 20px;
+        text-align: center;
+        flex-wrap: wrap;
+      }
+
+      .footer-menu nav {
+        min-width: 150px;
+      }
+
+      .footer-menu nav h3 {
+        margin: 0 0 10px;
+        color: var(--primary-text-color-dark);
+        font-size: 0.9rem;
+        font-weight: 700;
+      }
+
+      .footer-menu ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .footer-menu li {
+        margin-bottom: 4px;
+      }
+
+      .footer-menu a {
+        text-decoration: none;
+        color: var(--secondary-text-color, #4b5563);
+        padding: 5px 0;
+        display: block;
+        font-size: 0.84rem;
+        font-weight: 400;
+        line-height: 1.4;
+        transition: opacity 0.2s;
+      }
+
+      .footer-menu a:hover {
+        opacity: 0.7;
+      }
+
+      @media (max-width: 768px) {
+        .footer-menu {
+          flex-direction: column;
+          align-items: center;
+          padding: 0 10px;
+          gap: 1.5rem;
+          text-align: center;
+        }
+
+        nav {
+          width: 100%;
+        }
+
+        .footer-menu a {
+          padding: 7px 0;
+        }
+      }
+    `,
+  ];
+}

package/src/components/Header.js

@@ -0,0 +1,122 @@
+import { css, html, LitElement } from 'lit';
+
+export class Header extends LitElement {
+  render() {
+    return html`
+      <header>
+        <div id="content-area">
+          <slot name="logo"></slot>
+          <slot name="search"></slot>
+          <slot id="content"></slot>
+          <slot name="mobile-menu"></slot>
+          <slot name="navigation"></slot>
+          <slot name="social"></slot>
+        </div>
+      </header>
+    `;
+  }
+
+  static styles = [
+    css`
+      header {
+        padding: 20px 0;
+        position: sticky;
+        top: 0;
+        --shadow-color-dark: 220 3% 15%;
+        box-shadow:
+          0 3px 5px -2px hsl(var(--shadow-color-dark) / 4%),
+          0 7px 14px -5px hsl(var(--shadow-color-dark) / 6%);
+        background-color: hsl(0 0% 100% / 0.6);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        z-index: 999;
+      }
+
+      #content-area {
+        max-height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+      }
+
+      slot[name='logo']::slotted(*) {
+        margin-right: auto;
+      }
+      slot[name='social']::slotted(*) {
+        margin-right: 15px;
+      }
+      slot[name='social']::slotted(*:last-child) {
+        margin-right: 0;
+      }
+
+      slot[name='social'],
+      slot[name='logo'],
+      slot[name='search'],
+      slot[name='navigation'] {
+        display: flex;
+      }
+      slot[name='navigation'] {
+        align-items: center;
+        margin-left: auto;
+        margin-right: 28px;
+      }
+      slot[name='mobile-menu'] {
+        display: none;
+      }
+
+      #content {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-right: auto;
+      }
+      #content::slotted(a) {
+        text-decoration: none;
+        color: var(--primary-text-color);
+        transition: color 0.3s ease-in-out;
+        font-weight: bold;
+      }
+      #content::slotted(a:hover),
+      #content::slotted(a[aria-current='page']) {
+        color: var(--primary-color);
+      }
+
+      @media (max-width: 768px) {
+        slot[name='social'] {
+          display: flex;
+        }
+        slot[name='social']::slotted(*:nth-of-type(n + 3)) {
+          display: none;
+        }
+        slot[name='social']::slotted(*:nth-of-type(n + 2)) {
+          margin-right: 0;
+        }
+        :host([hide-social-mobile]) slot[name='social'] {
+          display: none;
+        }
+        slot[name='navigation'] {
+          display: none;
+        }
+        slot[name='mobile-menu'] {
+          display: flex;
+          order: 1;
+        }
+      }
+
+      :host([hide-logo]) slot[name='logo'] {
+        visibility: hidden;
+      }
+      :host([no-background]) {
+        background-color: transparent;
+        box-shadow: none;
+      }
+      :host([not-sticky]) header {
+        position: static;
+      }
+    `,
+  ];
+}