vite-wp 0.1.0

package/dist/commands/types.js

@@ -0,0 +1,67 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, relative, resolve } from 'node:path';
+import { loadViteWpConfig } from '../config.js';
+export async function runTypes() {
+    const config = await loadViteWpConfig();
+    const schema = await fetchBridgeTypes(config.wordpress.url);
+    const output = resolve(config.root, config.types.output);
+    mkdirSync(dirname(output), { recursive: true });
+    writeFileSync(output, renderTypes(schema), 'utf8');
+    console.log(`✓ Generated WordPress types at ${relative(config.root, output)}`);
+}
+async function fetchBridgeTypes(baseUrl) {
+    const url = `${baseUrl.replace(/\/$/, '')}/wp-json/vitewp/v1/types`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Could not fetch WordPress type metadata from ${url}: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+}
+function renderTypes(schema) {
+    const postTypeUnion = union(schema.postTypes.map((postType) => postType.name));
+    const taxonomyUnion = union(schema.taxonomies.map((taxonomy) => taxonomy.name));
+    const restBaseMap = objectType(schema.postTypes.map((postType) => [postType.name, stringLiteral(postType.restBase)]));
+    const archiveSlugMap = objectType(schema.postTypes.map((postType) => [postType.name, postType.archiveSlug ? stringLiteral(postType.archiveSlug) : 'null']));
+    const taxonomyRestBaseMap = objectType(schema.taxonomies.map((taxonomy) => [taxonomy.name, stringLiteral(taxonomy.restBase)]));
+    return `// Generated by ViteWP. Do not edit by hand.
+
+export type WpPostType = ${postTypeUnion};
+export type WpTaxonomy = ${taxonomyUnion};
+
+export type WpRestBaseByPostType = ${restBaseMap};
+export type WpArchiveSlugByPostType = ${archiveSlugMap};
+export type WpRestBaseByTaxonomy = ${taxonomyRestBaseMap};
+
+export interface WpRenderedField {
+  rendered: string;
+  protected?: boolean;
+}
+
+export interface WpContentItem<PostType extends WpPostType = WpPostType> {
+  id: number;
+  slug: string;
+  type: PostType;
+  link: string;
+  title: WpRenderedField;
+  content: WpRenderedField;
+  excerpt?: WpRenderedField;
+  date?: string;
+  modified?: string;
+}
+
+export interface WpArchiveItem<PostType extends WpPostType = WpPostType> extends WpContentItem<PostType> {}
+`;
+}
+function union(values) {
+    if (values.length === 0)
+        return 'never';
+    return values.map(stringLiteral).join(' | ');
+}
+function objectType(entries) {
+    if (entries.length === 0)
+        return 'Record<string, never>';
+    return `{\n${entries.map(([key, value]) => `  ${JSON.stringify(key)}: ${value};`).join('\n')}\n}`;
+}
+function stringLiteral(value) {
+    return JSON.stringify(value);
+}

package/dist/config.d.ts

@@ -0,0 +1,71 @@
+export type WordPressRuntimeMode = 'local' | 'external';
+export interface ViteWpConfig {
+    database?: {
+        driver?: 'mysql' | 'mariadb';
+        host?: string;
+        port?: number;
+        name?: string;
+        user?: string;
+        password?: string;
+        tablePrefix?: string;
+    };
+    wordpress?: {
+        mode?: WordPressRuntimeMode;
+        url?: string;
+        docroot?: string;
+        contentDir?: string;
+    };
+    composer?: {
+        install?: boolean;
+        wordpressPackage?: string;
+    };
+    templates?: {
+        directory?: string;
+    };
+    types?: {
+        output?: string;
+    };
+    dev?: {
+        phpHost?: string;
+        phpPort?: number;
+        astroHost?: string;
+        astroPort?: number;
+    };
+}
+export interface LoadedViteWpConfig {
+    root: string;
+    configFile?: string;
+    database: {
+        driver: 'mysql' | 'mariadb';
+        host: string;
+        port: number;
+        name: string;
+        user: string;
+        password: string;
+        tablePrefix: string;
+    };
+    wordpress: {
+        mode: WordPressRuntimeMode;
+        url: string;
+        docroot: string;
+        contentDir: string;
+    };
+    composer: {
+        install: boolean;
+        wordpressPackage: string;
+    };
+    templates: {
+        directory: string;
+    };
+    types: {
+        output: string;
+    };
+    dev: {
+        phpHost: string;
+        phpPort: number;
+        astroHost: string;
+        astroPort: number;
+    };
+}
+export declare function defineConfig(config: ViteWpConfig): ViteWpConfig;
+export declare function loadViteWpConfig(root?: string): Promise<LoadedViteWpConfig>;

package/dist/config.js

@@ -0,0 +1,74 @@
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { loadConfigFromFile, loadEnv } from 'vite';
+const configFiles = [
+    'vitewp.config.ts',
+    'vitewp.config.mts',
+    'vitewp.config.js',
+    'vitewp.config.mjs',
+];
+export function defineConfig(config) {
+    return config;
+}
+export async function loadViteWpConfig(root = process.cwd()) {
+    loadDotEnv(root);
+    const configFile = configFiles
+        .map((file) => resolve(root, file))
+        .find((file) => existsSync(file));
+    let userConfig = {};
+    if (configFile) {
+        const loaded = await loadConfigFromFile({ command: 'serve', mode: 'development' }, configFile, root);
+        userConfig = (loaded?.config ?? {});
+    }
+    return {
+        root,
+        configFile,
+        database: {
+            driver: userConfig.database?.driver ?? env('WP_DB_DRIVER', 'mysql'),
+            host: userConfig.database?.host ?? env('WP_DB_HOST', '127.0.0.1'),
+            port: userConfig.database?.port ?? Number(env('WP_DB_PORT', '3306')),
+            name: userConfig.database?.name ?? env('WP_DB_NAME', 'vitewp'),
+            user: userConfig.database?.user ?? env('WP_DB_USER', 'root'),
+            password: userConfig.database?.password ?? env('WP_DB_PASSWORD', ''),
+            tablePrefix: userConfig.database?.tablePrefix ?? env('WP_DB_TABLE_PREFIX', 'wp_'),
+        },
+        wordpress: {
+            mode: userConfig.wordpress?.mode ?? 'local',
+            url: userConfig.wordpress?.url ?? 'http://localhost:3000',
+            docroot: userConfig.wordpress?.docroot ?? 'wordpress/public',
+            contentDir: userConfig.wordpress?.contentDir ?? 'wordpress/content',
+        },
+        composer: {
+            install: userConfig.composer?.install ?? true,
+            wordpressPackage: userConfig.composer?.wordpressPackage ?? 'johnpbloch/wordpress',
+        },
+        templates: {
+            directory: userConfig.templates?.directory ?? 'src/templates',
+        },
+        types: {
+            output: userConfig.types?.output ?? 'src/wordpress/generated-types.ts',
+        },
+        dev: {
+            phpHost: userConfig.dev?.phpHost ?? env('VITEWP_PHP_HOST', '127.0.0.1'),
+            phpPort: userConfig.dev?.phpPort ?? envPort('VITEWP_PHP_PORT'),
+            astroHost: userConfig.dev?.astroHost ?? env('VITEWP_ASTRO_HOST', '127.0.0.1'),
+            astroPort: userConfig.dev?.astroPort ?? envPort('VITEWP_ASTRO_PORT'),
+        },
+    };
+}
+function env(name, fallback) {
+    return process.env[name] ?? fallback;
+}
+function envPort(name) {
+    const value = process.env[name];
+    if (!value || value === 'auto') {
+        return 0;
+    }
+    return Number(value);
+}
+function loadDotEnv(root) {
+    const values = loadEnv(process.env.NODE_ENV ?? 'development', root, '');
+    for (const [key, value] of Object.entries(values)) {
+        process.env[key] ??= value;
+    }
+}

package/dist/content.d.ts

@@ -0,0 +1,44 @@
+import type { CacheHint, LiveDataCollection, LiveDataEntry } from 'astro';
+import type { LiveLoader as AstroLiveLoader } from 'astro/loaders';
+import { type WpMenu } from './wordpress/menus.js';
+import { type WpContentItem, type WpResolvedRoute } from './wordpress/client.js';
+export type LiveCacheHint = CacheHint;
+export type LiveEntry<TData extends Record<string, any>> = LiveDataEntry<TData>;
+export type LiveCollection<TData extends Record<string, any>> = LiveDataCollection<TData>;
+export type LiveLoader<TData extends Record<string, any>, TEntryFilter extends Record<string, any> | never, TCollectionFilter extends Record<string, any> | never> = AstroLiveLoader<TData, TEntryFilter, TCollectionFilter>;
+export interface WpRouteEntryFilter {
+    path?: string;
+    id?: string;
+}
+export interface WpRouteCollectionFilter {
+    paths?: string[];
+}
+export declare function wpRouteLoader(): LiveLoader<WpResolvedRouteData, WpRouteEntryFilter, WpRouteCollectionFilter>;
+export interface WpPostTypeLoaderOptions {
+    postType: string;
+    restBase?: string;
+}
+export interface WpPostEntryFilter {
+    id?: string | number;
+    slug?: string;
+}
+export interface WpPostCollectionFilter {
+    page?: number;
+    perPage?: number;
+    search?: string;
+    slug?: string;
+}
+export declare function wpPostTypeLoader(options: WpPostTypeLoaderOptions): LiveLoader<WpContentItemData, WpPostEntryFilter, WpPostCollectionFilter>;
+export interface WpMenuEntryFilter {
+    id?: string | number;
+    slug?: string;
+    location?: string;
+}
+export interface WpMenuCollectionFilter {
+    location?: string;
+}
+export declare function wpMenuLoader(): LiveLoader<WpMenuData, WpMenuEntryFilter, WpMenuCollectionFilter>;
+type WpResolvedRouteData = WpResolvedRoute & Record<string, unknown>;
+type WpContentItemData = WpContentItem & Record<string, unknown>;
+type WpMenuData = WpMenu & Record<string, unknown>;
+export {};

package/dist/content.js

@@ -0,0 +1,190 @@
+import { getMenus } from './wordpress/menus.js';
+import { getWordPressApiBase, resolveWordPressRoute, } from './wordpress/client.js';
+export function wpRouteLoader() {
+    return {
+        name: 'vitewp:routes',
+        async loadEntry({ filter }) {
+            const path = filter.path ?? filter.id ?? '/';
+            const route = await resolveWordPressRoute(path);
+            if (!route) {
+                return undefined;
+            }
+            return {
+                id: normalizeRouteId(path),
+                data: route,
+                cacheHint: routeCacheHint(path, route),
+            };
+        },
+        async loadCollection({ filter }) {
+            const paths = filter?.paths ?? ['/'];
+            const entries = [];
+            for (const path of paths) {
+                const route = await resolveWordPressRoute(path);
+                if (route) {
+                    entries.push({
+                        id: normalizeRouteId(path),
+                        data: route,
+                        cacheHint: routeCacheHint(path, route),
+                    });
+                }
+            }
+            return {
+                entries,
+                cacheHint: mergeCacheHints(entries.map((entry) => entry.cacheHint)),
+            };
+        },
+    };
+}
+export function wpPostTypeLoader(options) {
+    const restBase = options.restBase ?? defaultRestBase(options.postType);
+    return {
+        name: `vitewp:${options.postType}`,
+        async loadEntry({ filter }) {
+            const item = filter.id !== undefined
+                ? await fetchWordPressItemById(restBase, filter.id)
+                : filter.slug
+                    ? await fetchWordPressItemBySlug(restBase, filter.slug)
+                    : undefined;
+            if (!item) {
+                return undefined;
+            }
+            return contentEntry(item);
+        },
+        async loadCollection({ filter }) {
+            const url = new URL(`${getWordPressApiBase()}/${restBase}`);
+            url.searchParams.set('_embed', '1');
+            url.searchParams.set('page', String(filter?.page ?? 1));
+            url.searchParams.set('per_page', String(filter?.perPage ?? 10));
+            if (filter?.search) {
+                url.searchParams.set('search', filter.search);
+            }
+            if (filter?.slug) {
+                url.searchParams.set('slug', filter.slug);
+            }
+            const { items } = await fetchWordPressList(url);
+            const entries = items.map(contentEntry);
+            return {
+                entries,
+                cacheHint: mergeCacheHints(entries.map((entry) => entry.cacheHint)),
+            };
+        },
+    };
+}
+export function wpMenuLoader() {
+    return {
+        name: 'vitewp:menus',
+        async loadEntry({ filter }) {
+            const payload = await getMenus();
+            const locationId = filter.location ? payload.locations[filter.location] : undefined;
+            const menu = payload.menus.find((candidate) => {
+                return candidate.id === Number(filter.id ?? locationId)
+                    || candidate.slug === filter.slug;
+            });
+            return menu ? menuEntry(menu) : undefined;
+        },
+        async loadCollection({ filter }) {
+            const payload = await getMenus();
+            const locationId = filter?.location ? payload.locations[filter.location] : undefined;
+            const menus = locationId
+                ? payload.menus.filter((menu) => menu.id === locationId)
+                : payload.menus;
+            return {
+                entries: menus.map(menuEntry),
+                cacheHint: { tags: ['wordpress:menus'] },
+            };
+        },
+    };
+}
+function defaultRestBase(postType) {
+    if (postType === 'post') {
+        return 'posts';
+    }
+    if (postType === 'page') {
+        return 'pages';
+    }
+    return postType;
+}
+async function fetchWordPressItemById(restBase, id) {
+    const url = new URL(`${getWordPressApiBase()}/${restBase}/${id}`);
+    url.searchParams.set('_embed', '1');
+    return fetchWordPressJson(url, [404]);
+}
+async function fetchWordPressItemBySlug(restBase, slug) {
+    const url = new URL(`${getWordPressApiBase()}/${restBase}`);
+    url.searchParams.set('_embed', '1');
+    url.searchParams.set('slug', slug);
+    const { items } = await fetchWordPressList(url);
+    return items[0];
+}
+async function fetchWordPressList(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`WordPress REST request failed: ${response.status} ${response.statusText}`);
+    }
+    const items = await response.json();
+    return {
+        items,
+        total: Number(response.headers.get('x-wp-total') ?? items.length),
+        totalPages: Number(response.headers.get('x-wp-totalpages') ?? 1),
+    };
+}
+async function fetchWordPressJson(url, emptyStatuses = []) {
+    const response = await fetch(url);
+    if (emptyStatuses.includes(response.status)) {
+        return undefined;
+    }
+    if (!response.ok) {
+        throw new Error(`WordPress REST request failed: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+}
+function contentEntry(item) {
+    return {
+        id: String(item.id),
+        data: item,
+        cacheHint: {
+            tags: [`wordpress:${item.type}`, `wordpress:${item.type}:${item.id}`],
+            lastModified: item.modified ? new Date(item.modified) : undefined,
+        },
+    };
+}
+function menuEntry(menu) {
+    return {
+        id: String(menu.id),
+        data: menu,
+        cacheHint: {
+            tags: ['wordpress:menus', `wordpress:menu:${menu.slug}`],
+        },
+    };
+}
+function routeCacheHint(path, route) {
+    if (route.kind === 'page' || route.kind === 'single') {
+        return {
+            tags: [`wordpress:route:${normalizeRouteId(path)}`, `wordpress:${route.postType}:${route.item.id}`],
+            lastModified: route.item.modified ? new Date(route.item.modified) : undefined,
+        };
+    }
+    return {
+        tags: [`wordpress:route:${normalizeRouteId(path)}`, `wordpress:${route.kind}`],
+    };
+}
+function mergeCacheHints(hints) {
+    const tags = new Set();
+    let lastModified;
+    for (const hint of hints) {
+        hint?.tags?.forEach((tag) => tags.add(tag));
+        if (hint?.lastModified && (!lastModified || hint.lastModified > lastModified)) {
+            lastModified = hint.lastModified;
+        }
+    }
+    if (tags.size === 0 && !lastModified) {
+        return undefined;
+    }
+    return {
+        tags: [...tags],
+        lastModified,
+    };
+}
+function normalizeRouteId(path) {
+    return path || '/';
+}

package/dist/dev-toolbar/vitewp-toolbar.d.ts

@@ -0,0 +1,23 @@
+interface ViteWpRouteInfo {
+    candidateTemplates: string[];
+    kind: string;
+    liveCollection: {
+        collection: string;
+        entryId: string;
+        cacheHint: unknown;
+    } | null;
+    matched: boolean;
+    page: number | null;
+    path: string;
+    postType: string | null;
+    slug: string | null;
+    template: string | null;
+    totalPages: number | null;
+}
+declare global {
+    interface Window {
+        __VITEWP_ROUTE_INFO__?: ViteWpRouteInfo;
+    }
+}
+declare const _default: import("astro").DevToolbarApp;
+export default _default;

package/dist/dev-toolbar/vitewp-toolbar.js

@@ -0,0 +1,144 @@
+import { defineToolbarApp } from 'astro/toolbar';
+export default defineToolbarApp({
+    init(canvas) {
+        render(canvas);
+        window.addEventListener('vitewp:route-info', () => render(canvas));
+        document.addEventListener('astro:after-swap', () => render(canvas));
+    },
+});
+function render(canvas) {
+    const info = window.__VITEWP_ROUTE_INFO__;
+    canvas.innerHTML = '';
+    const panel = document.createElement('astro-dev-toolbar-window');
+    panel.innerHTML = `
+    <style>
+      :host astro-dev-toolbar-window {
+        width: min(520px, calc(100vw - 48px));
+        max-height: min(640px, calc(100vh - 120px));
+        overflow-y: auto;
+        color-scheme: dark;
+      }
+
+      header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 18px;
+      }
+
+      h1 {
+        color: #fff;
+        font-size: 22px;
+        line-height: 1.2;
+        margin: 0;
+      }
+
+      .badge {
+        border: 1px solid rgba(145, 152, 173, 0.4);
+        border-radius: 999px;
+        color: rgba(204, 206, 216, 1);
+        font-size: 12px;
+        padding: 4px 8px;
+      }
+
+      .grid {
+        display: grid;
+        gap: 10px;
+      }
+
+      .row {
+        border: 1px solid rgba(52, 56, 65, 1);
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.04);
+        padding: 10px 12px;
+      }
+
+      .label {
+        color: rgba(145, 152, 173, 1);
+        display: block;
+        font-size: 12px;
+        margin-bottom: 4px;
+      }
+
+      code {
+        color: rgba(224, 204, 250, 1);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 13px;
+        overflow-wrap: anywhere;
+      }
+
+      ul {
+        display: grid;
+        gap: 6px;
+        margin: 8px 0 0;
+        padding-left: 18px;
+      }
+
+      li {
+        color: rgba(204, 206, 216, 1);
+      }
+
+      p {
+        color: rgba(204, 206, 216, 1);
+        line-height: 1.5;
+        margin: 0;
+      }
+    </style>
+    ${info ? renderInfo(info) : renderEmptyState()}
+  `;
+    canvas.append(panel);
+}
+function renderInfo(info) {
+    return `
+    <header>
+      <h1>ViteWP route</h1>
+      <span class="badge">${escapeHtml(info.matched ? info.kind : '404')}</span>
+    </header>
+    <section class="grid">
+      ${row('URL path', info.path)}
+      ${row('Selected template', info.template ?? 'No template matched')}
+      ${row('Live collection', info.liveCollection ? `${info.liveCollection.collection} → ${info.liveCollection.entryId}` : '—')}
+      ${row('Post type', info.postType ?? '—')}
+      ${row('Slug', info.slug ?? '—')}
+      ${row('Pagination', paginationLabel(info))}
+      <div class="row">
+        <span class="label">Template candidates</span>
+        <ul>
+          ${info.candidateTemplates.map((candidate) => `<li><code>${escapeHtml(candidate)}</code></li>`).join('')}
+        </ul>
+      </div>
+    </section>
+  `;
+}
+function renderEmptyState() {
+    return `
+    <header>
+      <h1>ViteWP route</h1>
+      <span class="badge">No route data</span>
+    </header>
+    <p>Open an Astro-rendered WordPress frontend route to see template hierarchy information here.</p>
+  `;
+}
+function row(label, value) {
+    return `
+    <div class="row">
+      <span class="label">${escapeHtml(label)}</span>
+      <code>${escapeHtml(value)}</code>
+    </div>
+  `;
+}
+function paginationLabel(info) {
+    if (!info.page && !info.totalPages) {
+        return '—';
+    }
+    return `${info.page ?? 1}${info.totalPages ? ` / ${info.totalPages}` : ''}`;
+}
+function escapeHtml(value) {
+    return value
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#039;');
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { defineConfig } from './config.js';
+export type { ViteWpConfig, LoadedViteWpConfig } from './config.js';
+export { wpMenuLoader, wpPostTypeLoader, wpRouteLoader } from './content.js';
+export type { LiveCacheHint, LiveCollection, LiveEntry, LiveLoader, WpMenuCollectionFilter, WpMenuEntryFilter, WpPostCollectionFilter, WpPostEntryFilter, WpPostTypeLoaderOptions, WpRouteCollectionFilter, WpRouteEntryFilter, } from './content.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { defineConfig } from './config.js';
+export { wpMenuLoader, wpPostTypeLoader, wpRouteLoader } from './content.js';