vite-wp 0.1.0

package/starter/.env.example

@@ -0,0 +1,15 @@
+# ViteWP database settings
+WP_DB_HOST=127.0.0.1
+WP_DB_PORT=3306
+WP_DB_NAME=vitewp
+WP_DB_USER=root
+WP_DB_PASSWORD=
+WP_DB_TABLE_PREFIX=wp_
+
+# ViteWP internal dev runtime listeners
+# The site itself is served from wordpress.url in vitewp.config.ts.
+# Leave these as auto unless you are debugging ViteWP internals.
+VITEWP_PHP_HOST=127.0.0.1
+VITEWP_PHP_PORT=auto
+VITEWP_ASTRO_HOST=127.0.0.1
+VITEWP_ASTRO_PORT=auto

package/starter/astro.config.mjs

@@ -0,0 +1,16 @@
+import { defineConfig } from 'astro/config';
+import vitewp from 'vitewp/astro';
+
+export default defineConfig({
+  output: 'server',
+  integrations: [vitewp()],
+  vite: {
+    server: {
+      ws: {
+        protocol: 'ws',
+        host: 'localhost',
+        clientPort: 3000,
+      },
+    },
+  },
+});

package/starter/composer.json

@@ -0,0 +1,37 @@
+{
+  "name": "vitewp/project",
+  "description": "Composer-managed WordPress runtime for a ViteWP project.",
+  "type": "project",
+  "require": {
+    "php": ">=8.2",
+    "johnpbloch/wordpress": "^7.0",
+    "composer/installers": "^2.3"
+  },
+  "repositories": [
+    {
+      "type": "composer",
+      "url": "https://wpackagist.org"
+    }
+  ],
+  "extra": {
+    "wordpress-install-dir": "wordpress/public",
+    "installer-paths": {
+      "wordpress/content/plugins/{$name}/": [
+        "type:wordpress-plugin"
+      ],
+      "wordpress/content/mu-plugins/{$name}/": [
+        "type:wordpress-muplugin"
+      ],
+      "wordpress/content/themes/{$name}/": [
+        "type:wordpress-theme"
+      ]
+    }
+  },
+  "config": {
+    "allow-plugins": {
+      "composer/installers": true,
+      "johnpbloch/wordpress-core-installer": true
+    },
+    "sort-packages": true
+  }
+}

package/starter/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/starter/src/live.config.ts

@@ -0,0 +1,22 @@
+import { defineLiveCollection } from 'astro/content/config';
+import { wpMenuLoader, wpPostTypeLoader, wpRouteLoader } from 'vitewp/content';
+import { wpContentItemSchema, wpMenuSchema, wpResolvedRouteSchema } from './wordpress/schemas.js';
+
+export const collections = {
+  routes: defineLiveCollection({
+    loader: wpRouteLoader(),
+    schema: wpResolvedRouteSchema,
+  }),
+  posts: defineLiveCollection({
+    loader: wpPostTypeLoader({ postType: 'post', restBase: 'posts' }),
+    schema: wpContentItemSchema,
+  }),
+  pages: defineLiveCollection({
+    loader: wpPostTypeLoader({ postType: 'page', restBase: 'pages' }),
+    schema: wpContentItemSchema,
+  }),
+  menus: defineLiveCollection({
+    loader: wpMenuLoader(),
+    schema: wpMenuSchema,
+  }),
+};

package/starter/src/pages/[...slug].astro

@@ -0,0 +1,101 @@
+---
+export const prerender = false;
+
+import { getLiveEntry } from 'astro:content';
+import type { WpResolvedRoute } from '../wordpress/client.js';
+import { createTemplateContext, templateCandidates } from '../wordpress/templates.js';
+
+type TemplateModule = {
+  default: unknown;
+};
+
+const slug = Astro.params.slug ?? '';
+const routePath = `${Astro.url.pathname}${Astro.url.search}`;
+const routeResult = await getLiveEntry('routes', { path: routePath });
+
+if (routeResult.error && routeResult.error.name !== 'LiveEntryNotFoundError') {
+  throw routeResult.error;
+}
+
+const route = routeResult.entry?.data as WpResolvedRoute | undefined;
+let candidates: string[] = [];
+
+if (!route) {
+  Astro.response.status = 404;
+  Astro.response.statusText = 'Not Found';
+}
+
+const templates = import.meta.glob<TemplateModule>('../templates/**/*.astro');
+let Template: any = null;
+let templatePath = '';
+const showDebug = import.meta.env.DEV;
+let context = null;
+
+if (route) {
+  context = createTemplateContext(route);
+  candidates = templateCandidates(route);
+
+  for (const candidate of candidates) {
+    const path = `../templates/${candidate}`;
+    const loader = templates[path];
+
+    if (loader) {
+      Template = (await loader()).default;
+      templatePath = candidate;
+      break;
+    }
+  }
+} else {
+  candidates = ['404.astro'];
+  const loader = templates['../templates/404.astro'];
+  if (loader) {
+    Template = (await loader()).default;
+    templatePath = '404.astro';
+  }
+}
+
+const toolbarRouteInfo = showDebug ? {
+  path: routePath,
+  matched: Boolean(route),
+  kind: context?.route.kind ?? '404',
+  liveCollection: routeResult.entry ? {
+    collection: 'routes',
+    entryId: routeResult.entry.id,
+    cacheHint: routeResult.cacheHint ?? null,
+  } : null,
+  postType: context?.postType ?? null,
+  slug: context?.slug ?? null,
+  page: context?.page ?? null,
+  totalPages: context?.totalPages ?? null,
+  template: templatePath || null,
+  candidateTemplates: candidates,
+} : null;
+const toolbarRouteInfoJson = toolbarRouteInfo
+  ? JSON.stringify(toolbarRouteInfo).replaceAll('<', '\\u003c')
+  : '';
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{context?.title ? `${context.title.replace(/<[^>]+>/g, '')} · ViteWP` : 'Not found · ViteWP'}</title>
+    {toolbarRouteInfoJson && (
+      <script is:inline set:html={`window.__VITEWP_ROUTE_INFO__ = ${toolbarRouteInfoJson}; window.dispatchEvent(new CustomEvent('vitewp:route-info', { detail: window.__VITEWP_ROUTE_INFO__ }));`} />
+    )}
+  </head>
+  <body>
+    <main>
+      {Template && context ? (
+        <>
+          <Template {...context} />
+        </>
+      ) : Template ? (
+        <Template slug={slug} />
+      ) : (
+        <article>
+          <h1>Not found</h1>
+          <p>No WordPress route matched <code>{Astro.url.pathname}</code>.</p>
+        </article>
+      )}
+    </main>
+  </body>
+</html>

package/starter/src/templates/404.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+  slug?: string;
+}
+
+const { slug = '' } = Astro.props;
+---
+<article>
+  <h1>Not found</h1>
+  <p>No WordPress route matched <code>/{slug}</code>.</p>
+</article>

package/starter/src/templates/pages/default.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  title?: string;
+  content?: string;
+}
+
+const { title = 'Untitled page', content = '' } = Astro.props;
+---
+<article>
+  <h1>{title}</h1>
+  <div set:html={content} />
+</article>

package/starter/src/templates/pages/front-page.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  title?: string;
+  content?: string;
+}
+
+const { title = 'Home', content = '' } = Astro.props;
+---
+<article>
+  <p style="font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #666; text-transform: uppercase; letter-spacing: .08em;">Front page</p>
+  <h1>{title}</h1>
+  <div set:html={content} />
+</article>

package/starter/src/templates/partials/Header.astro

@@ -0,0 +1,23 @@
+---
+import { getMenuByLocation, getMenuBySlug } from '../../wordpress/menus.js';
+
+interface Props {
+  location?: string;
+  slug?: string;
+}
+
+const { location = 'primary', slug } = Astro.props;
+const menu = slug ? await getMenuBySlug(slug) : await getMenuByLocation(location);
+---
+<header>
+  <a href="/">ViteWP</a>
+  {menu && (
+    <nav aria-label={menu.name}>
+      <ul>
+        {menu.items.filter((item) => item.parent === 0).map((item) => (
+          <li><a href={item.url}>{item.title}</a></li>
+        ))}
+      </ul>
+    </nav>
+  )}
+</header>

package/starter/src/templates/partials/Pagination.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+  page?: number;
+  totalPages?: number;
+}
+
+const { page = 1, totalPages = 1 } = Astro.props;
+const currentPath = Astro.url.pathname.replace(/\/page\/\d+\/?$/, '').replace(/\/$/, '') || '/';
+const query = Astro.url.search;
+const pageHref = (nextPage: number) => {
+  const path = nextPage <= 1 ? currentPath : `${currentPath === '/' ? '' : currentPath}/page/${nextPage}`;
+  return `${path}${query}`;
+};
+---
+{totalPages > 1 && (
+  <nav aria-label="Pagination" style="display: flex; gap: 12px; margin-top: 32px;">
+    {page > 1 && <a href={pageHref(page - 1)}>Previous</a>}
+    <span>Page {page} of {totalPages}</span>
+    {page < totalPages && <a href={pageHref(page + 1)}>Next</a>}
+  </nav>
+)}

package/starter/src/templates/posts/archive.astro

@@ -0,0 +1,25 @@
+---
+import Pagination from '../partials/Pagination.astro';
+import type { WpContentItem } from '../../wordpress/client.js';
+
+interface Props {
+  title?: string;
+  items?: WpContentItem[];
+  page?: number;
+  totalPages?: number;
+}
+
+const { title = 'Posts', items = [], page = 1, totalPages = 1 } = Astro.props;
+---
+<section>
+  <h1>{title}</h1>
+  <div>
+    {items.map((item) => (
+      <article>
+        <h2><a href={new URL(item.link).pathname}>{item.title.rendered}</a></h2>
+        {item.excerpt?.rendered && <div set:html={item.excerpt.rendered} />}
+      </article>
+    ))}
+  </div>
+  <Pagination page={page} totalPages={totalPages} />
+</section>

package/starter/src/templates/posts/single.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  title?: string;
+  content?: string;
+}
+
+const { title = 'Untitled post', content = '' } = Astro.props;
+---
+<article>
+  <h1>{title}</h1>
+  <div set:html={content} />
+</article>

package/starter/src/templates/search.astro

@@ -0,0 +1,30 @@
+---
+import Pagination from './partials/Pagination.astro';
+import type { WpContentItem } from '../wordpress/client.js';
+
+interface Props {
+  title?: string;
+  search?: string;
+  items?: WpContentItem[];
+  page?: number;
+  totalPages?: number;
+}
+
+const { title = 'Search', search = '', items = [], page = 1, totalPages = 1 } = Astro.props;
+---
+<section>
+  <h1>{title}</h1>
+  <form action="/search" method="get" role="search">
+    <input type="search" name="s" value={search} placeholder="Search…" />
+    <button type="submit">Search</button>
+  </form>
+  <div>
+    {items.length === 0 ? <p>No results found.</p> : items.map((item) => (
+      <article>
+        <h2><a href={new URL(item.link).pathname}>{item.title.rendered}</a></h2>
+        {item.excerpt?.rendered && <div set:html={item.excerpt.rendered} />}
+      </article>
+    ))}
+  </div>
+  <Pagination page={page} totalPages={totalPages} />
+</section>

package/starter/src/templates/taxonomies/taxonomy-[taxonomy].astro

@@ -0,0 +1,28 @@
+---
+import Pagination from '../partials/Pagination.astro';
+import type { WpContentItem } from '../../wordpress/client.js';
+
+interface Props {
+  title?: string;
+  taxonomy?: string;
+  termName?: string;
+  items?: WpContentItem[];
+  page?: number;
+  totalPages?: number;
+}
+
+const { title = 'Archive', taxonomy = '', termName = title, items = [], page = 1, totalPages = 1 } = Astro.props;
+---
+<section>
+  <p style="font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #666; text-transform: uppercase; letter-spacing: .08em;">{taxonomy}</p>
+  <h1>{termName}</h1>
+  <div>
+    {items.map((item) => (
+      <article>
+        <h2><a href={new URL(item.link).pathname}>{item.title.rendered}</a></h2>
+        {item.excerpt?.rendered && <div set:html={item.excerpt.rendered} />}
+      </article>
+    ))}
+  </div>
+  <Pagination page={page} totalPages={totalPages} />
+</section>

package/starter/src/wordpress/client.ts

@@ -0,0 +1,263 @@
+export interface WpRenderedField {
+  rendered: string;
+}
+
+export interface WpContentItem {
+  id: number;
+  slug: string;
+  type: string;
+  link: string;
+  title: WpRenderedField;
+  content: WpRenderedField;
+  excerpt?: WpRenderedField;
+  date?: string;
+  modified?: string;
+}
+
+export interface WpArchivePayload {
+  items: WpContentItem[];
+  page: number;
+  perPage: number;
+  total: number;
+  totalPages: number;
+}
+
+interface BaseArchiveResolution {
+  found: true;
+  slug: string;
+  postType: string;
+  restBase: string;
+  title: string;
+  page?: number;
+}
+
+export type WpBridgeResolution =
+  | {
+      found: true;
+      kind: 'page' | 'single';
+      id: number;
+      slug: string;
+      postType: string;
+      restBase: string;
+      isFrontPage?: boolean;
+      isPostsPage?: boolean;
+    }
+  | (BaseArchiveResolution & {
+      kind: 'postsArchive' | 'postTypeArchive';
+    })
+  | (BaseArchiveResolution & {
+      kind: 'taxonomyArchive';
+      taxonomy: string;
+      taxonomyRestBase: string;
+      termId: number;
+      termName: string;
+    })
+  | (BaseArchiveResolution & {
+      kind: 'search';
+      search: string;
+    })
+  | {
+      found: false;
+      kind: 'notFound';
+    };
+
+export type WpResolvedRoute =
+  | {
+      kind: 'page';
+      postType: 'page';
+      restBase: 'pages';
+      slug: string;
+      item: WpContentItem;
+      isFrontPage?: boolean;
+    }
+  | {
+      kind: 'single';
+      postType: string;
+      restBase: string;
+      slug: string;
+      item: WpContentItem;
+    }
+  | {
+      kind: 'postsArchive' | 'postTypeArchive' | 'search';
+      postType: string;
+      restBase: string;
+      slug: string;
+      title: string;
+      items: WpContentItem[];
+      page: number;
+      perPage: number;
+      total: number;
+      totalPages: number;
+      search?: string;
+    }
+  | {
+      kind: 'taxonomyArchive';
+      postType: string;
+      restBase: string;
+      slug: string;
+      title: string;
+      items: WpContentItem[];
+      page: number;
+      perPage: number;
+      total: number;
+      totalPages: number;
+      taxonomy: string;
+      taxonomyRestBase: string;
+      termId: number;
+      termName: string;
+    };
+
+export async function resolveWordPressRoute(pathname: string): Promise<WpResolvedRoute | null> {
+  const resolution = await resolveViaWordPress(pathname);
+
+  if (!resolution.found) {
+    return null;
+  }
+
+  switch (resolution.kind) {
+    case 'postsArchive':
+    case 'postTypeArchive': {
+      const archive = await getArchive({
+        kind: resolution.kind,
+        postType: resolution.postType,
+        page: resolution.page ?? 1,
+      });
+      return {
+        kind: resolution.kind,
+        postType: resolution.postType,
+        restBase: resolution.restBase,
+        slug: resolution.slug,
+        title: resolution.title,
+        ...archive,
+      };
+    }
+    case 'taxonomyArchive': {
+      const archive = await getArchive({
+        kind: resolution.kind,
+        postType: resolution.postType,
+        taxonomy: resolution.taxonomy,
+        termId: resolution.termId,
+        page: resolution.page ?? 1,
+      });
+      return {
+        kind: 'taxonomyArchive',
+        postType: resolution.postType,
+        restBase: resolution.restBase,
+        slug: resolution.slug,
+        title: resolution.title,
+        taxonomy: resolution.taxonomy,
+        taxonomyRestBase: resolution.taxonomyRestBase,
+        termId: resolution.termId,
+        termName: resolution.termName,
+        ...archive,
+      };
+    }
+    case 'search': {
+      const archive = await getArchive({
+        kind: resolution.kind,
+        search: resolution.search,
+        page: resolution.page ?? 1,
+      });
+      return {
+        kind: 'search',
+        postType: resolution.postType,
+        restBase: resolution.restBase,
+        slug: resolution.slug,
+        title: resolution.title,
+        search: resolution.search,
+        ...archive,
+      };
+    }
+    case 'page':
+    case 'single':
+      break;
+  }
+
+  if (resolution.isPostsPage) {
+    const archive = await getArchive({ kind: 'postsArchive', postType: 'post', page: 1 });
+    return {
+      kind: 'postsArchive',
+      postType: 'post',
+      restBase: 'posts',
+      slug: resolution.slug,
+      title: '',
+      ...archive,
+    };
+  }
+
+  const item = await getById(resolution.restBase, resolution.id);
+
+  if (resolution.kind === 'page') {
+    return {
+      kind: 'page',
+      postType: 'page',
+      restBase: 'pages',
+      slug: resolution.slug,
+      item,
+      isFrontPage: resolution.isFrontPage,
+    };
+  }
+
+  return {
+    kind: 'single',
+    postType: resolution.postType,
+    restBase: resolution.restBase,
+    slug: resolution.slug,
+    item,
+  };
+}
+
+export function getWordPressApiBase() {
+  const base = getWordPressBaseUrl();
+  return `${base}/wp-json/wp/v2`;
+}
+
+export function getWordPressBaseUrl() {
+  return (process.env.VITEWP_PUBLIC_URL ?? process.env.WP_URL ?? 'http://localhost:3000').replace(/\/$/, '');
+}
+
+async function resolveViaWordPress(pathname: string) {
+  const url = new URL(`${getWordPressBaseUrl()}/wp-json/vitewp/v1/resolve`);
+  url.searchParams.set('path', pathname || '/');
+
+  const response = await fetch(url);
+
+  if (response.status === 404) {
+    return { found: false, kind: 'notFound' } satisfies WpBridgeResolution;
+  }
+
+  if (!response.ok) {
+    throw new Error(`ViteWP route resolution failed: ${response.status} ${response.statusText}`);
+  }
+
+  return response.json() as Promise<WpBridgeResolution>;
+}
+
+async function getById(restBase: string, id: number) {
+  const url = new URL(`${getWordPressApiBase()}/${restBase}/${id}`);
+  url.searchParams.set('_embed', '1');
+
+  return getJson<WpContentItem>(url);
+}
+
+async function getArchive(params: Record<string, string | number | undefined>) {
+  const url = new URL(`${getWordPressBaseUrl()}/wp-json/vitewp/v1/archive`);
+
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined) {
+      url.searchParams.set(key, String(value));
+    }
+  }
+
+  return getJson<WpArchivePayload>(url);
+}
+
+async function getJson<T>(url: URL): Promise<T> {
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`WordPress REST request failed: ${response.status} ${response.statusText}`);
+  }
+
+  return response.json() as Promise<T>;
+}