@wpnuxt/core 1.0.0-edge.9 → 2.0.0-alpha.2

package/dist/runtime/app/graphqlMiddleware.clientOptions.js

@@ -0,0 +1,12 @@
+import { defineGraphqlClientOptions } from "nuxt-graphql-middleware/client-options";
+import { useRoute } from "#imports";
+export default defineGraphqlClientOptions({
+  buildClientContext() {
+    const route = useRoute();
+    return {
+      // Context values must be strings - use 'true'/'false' instead of boolean
+      preview: route.query.preview === "true" ? "true" : void 0,
+      previewToken: route.query.token
+    };
+  }
+});

package/dist/runtime/components/WPNuxtLogo.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
-const props = defineProps<{
-  wpColor?: string
-}>()
-const wpLight = props.wpColor ? props.wpColor : 'back'
-const wpDark = props.wpColor ? props.wpColor : 'white'
+<script setup>
+const props = defineProps({
+  wpColor: { type: String, required: false }
+});
+const wpLight = props.wpColor ? props.wpColor : "black";
+const wpDark = props.wpColor ? props.wpColor : "white";
 </script>
 
 <template>
@@ -13,5 +13,5 @@ const wpDark = props.wpColor ? props.wpColor : 'white'
 </template>
 
 <style scoped>
-.wpnuxt-logo{display:inline-flex;font-size:1.5rem;font-weight:700;line-height:2rem}.wpnuxt-logo-wp{color:v-bind(wpLight);font-family:ui-serif,Times,serif}html.dark .wpnuxt-logo-wp{color:v-bind(wpDark);font-family:ui-serif,Times,serif}.wpnuxt-logo-nuxt{margin-top:-1px;--tw-text-opacity:1;color:rgb(186 175 78/var(--tw-text-opacity))}
+.wpnuxt-logo{display:inline-flex;font-size:2rem;font-weight:700;line-height:2rem}.wpnuxt-logo-wp{color:v-bind(wpLight);font-family:ui-serif,Times,serif}html.dark .wpnuxt-logo-wp{color:v-bind(wpDark);font-family:ui-serif,Times,serif}.wpnuxt-logo-nuxt{color:#baaf4e}
 </style>

package/dist/runtime/composables/useWPContent.d.ts

@@ -1,5 +0,0 @@
-import type { FetchError } from 'ofetch';
-export declare const useWPContent: <T>(queryName: string, nodes: string[], fixImagePaths: boolean, params?: T) => Promise<{
-    data: T;
-    error: import("vue").Ref<FetchError<any> | null>;
-}>;

package/dist/runtime/composables/useWPContent.js

@@ -1,30 +1,44 @@
 import { getRelativeImagePath } from "../util/images.js";
-const _useWPContent = async (queryName, nodes, fixImagePaths, params) => {
-  const { data, error } = await $fetch("/api/wpContent", {
-    method: "POST",
-    body: {
-      queryName,
-      params
-    }
+import { computed, useAsyncGraphqlQuery } from "#imports";
+export const useWPContent = (queryName, nodes, fixImagePaths, params, options) => {
+  const { data, pending, refresh, execute, clear, error, status } = useAsyncGraphqlQuery(
+    queryName,
+    params ?? {},
+    options
+  );
+  const transformedData = computed(() => {
+    const queryResult = data.value && typeof data.value === "object" && data.value !== null && "data" in data.value ? data.value.data : void 0;
+    return queryResult ? transformData(queryResult, nodes, fixImagePaths) : void 0;
   });
   return {
-    data: transformData(data, nodes, fixImagePaths),
-    error
+    data: transformedData,
+    pending,
+    refresh,
+    execute,
+    clear,
+    error,
+    status
   };
 };
 const transformData = (data, nodes, fixImagePaths) => {
   const transformedData = findData(data, nodes);
-  if (fixImagePaths && transformedData?.featuredImage?.node?.sourceUrl) {
-    transformedData.featuredImage.node.relativePath = getRelativeImagePath(transformedData.featuredImage.node.sourceUrl);
+  if (fixImagePaths && transformedData && typeof transformedData === "object" && "featuredImage" in transformedData) {
+    const featuredImage = transformedData.featuredImage;
+    if (featuredImage && typeof featuredImage === "object" && "node" in featuredImage) {
+      const node = featuredImage.node;
+      if (node && typeof node === "object" && "sourceUrl" in node && typeof node.sourceUrl === "string") {
+        node.relativePath = getRelativeImagePath(node.sourceUrl);
+      }
+    }
   }
   return transformedData;
 };
 const findData = (data, nodes) => {
   if (nodes.length === 0) return data;
-  if (nodes.length > 0) {
-    return nodes.reduce((acc, node) => {
+  return nodes.reduce((acc, node) => {
+    if (acc && typeof acc === "object" && node in acc) {
       return acc[node];
-    }, data);
-  }
+    }
+    return void 0;
+  }, data);
 };
-export const useWPContent = _useWPContent;

package/dist/runtime/plugins/graphqlConfig.js

@@ -0,0 +1,17 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { useGraphqlState, useRuntimeConfig } from "#imports";
+export default defineNuxtPlugin((_NuxtApp) => {
+  const state = useGraphqlState();
+  if (!state) {
+    return;
+  }
+  const { buildHash } = useRuntimeConfig().public;
+  state.fetchOptions = {
+    async onRequest({ options }) {
+      if (!options.params) {
+        options.params = {};
+      }
+      options.params.hash = buildHash;
+    }
+  };
+});

package/dist/runtime/plugins/graphqlErrors.js

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin, useNuxtApp } from "nuxt/app";
+export default defineNuxtPlugin(() => {
+  const nuxtApp = useNuxtApp();
+  nuxtApp.hook("nuxt-graphql-middleware:errors", (errors) => {
+    if (import.meta.dev) {
+      console.error("[WPNuxt] GraphQL errors:", errors);
+    }
+  });
+});

package/dist/runtime/queries/GeneralSettings.gql

@@ -1,5 +1,3 @@
-#import "~/.queries/fragments/GeneralSettings.fragment.gql"
-
 query GeneralSettings {
   generalSettings {
     ...GeneralSettings

package/dist/runtime/queries/Menu.gql

@@ -1,5 +1,3 @@
-#import "~/.queries/fragments/MenuItem.fragment.gql"
-
 query Menu($name: ID! = "main", $idType: MenuNodeIdTypeEnum! = NAME) {
   menu(id: $name, idType: $idType) {
     menuItems {

package/dist/runtime/queries/Node.gql

@@ -1,6 +1,3 @@
-#import "~/.queries/fragments/Page.fragment.gql"
-#import "~/.queries/fragments/Post.fragment.gql"
-
 query NodeByUri($uri: String!) {
   nodeByUri(uri: $uri) {
     ...Page

package/dist/runtime/queries/Pages.gql

@@ -1,5 +1,3 @@
-#import "~/.queries/fragments/Page.fragment.gql"
-
 query Pages($limit: Int = 10) {
   pages(first: $limit) {
     nodes {

package/dist/runtime/queries/Posts.gql

@@ -1,5 +1,3 @@
-#import "~/.queries/fragments/Post.fragment.gql"
-
 query Posts($limit: Int = 10) {
   posts(first: $limit) {
     nodes {
@@ -17,3 +15,18 @@ query PostById($id: ID!, $asPreview: Boolean = false) {
     ...Post
   }
 }
+
+query PostsByCategoryName($categoryName: String!, $limit: Int = 10) {
+  posts(first: $limit, where: {categoryName: $categoryName}) {
+    nodes {
+      ...Post
+    }
+  }
+}
+query PostsByCategoryId($categoryId: Int!, $limit: Int = 10) {
+  posts(first: $limit, where: {categoryId: $categoryId}) {
+    nodes {
+      ...Post
+    }
+  }
+}

package/dist/runtime/queries/Viewer.gql

@@ -1,12 +1,12 @@
 query Viewer {
   viewer {
-    username
-    userId
     id
-    email
-    description
+    userId
+    username
     firstName
     lastName
+    name
+    description
     locale
     url
     uri

package/dist/runtime/queries/fragments/GeneralSettings.fragment.gql

@@ -2,7 +2,6 @@ fragment GeneralSettings on GeneralSettings {
   title
   description
   url
-  email
   dateFormat
   language
   startOfWeek

package/dist/runtime/queries/fragments/NodeWithFeaturedImage.fragment.gql

@@ -1,5 +1,3 @@
-#import '~/.queries/fragments/NodeWithFeaturedImageToMediaItemConnectionEdge.fragment.gql';
-
 fragment NodeWithFeaturedImage on NodeWithFeaturedImage {
   featuredImage {
     ...NodeWithFeaturedImageToMediaItemConnectionEdge

package/dist/runtime/queries/fragments/NodeWithFeaturedImageToMediaItemConnectionEdge.fragment.gql

@@ -1,5 +1,3 @@
-#import '~/.queries/fragments/MediaItem.fragment.gql';
-
 fragment NodeWithFeaturedImageToMediaItemConnectionEdge on NodeWithFeaturedImageToMediaItemConnectionEdge {
   cursor
   node {

package/dist/runtime/queries/fragments/Page.fragment.gql

@@ -1,7 +1,3 @@
-#import '~/.queries/fragments/ContentNode.fragment.gql';
-#import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
-#import '~/.queries/fragments/NodeWithContentEditor.fragment.gql';
-
 fragment Page on Page {
   ...ContentNode
   ...NodeWithFeaturedImage

package/dist/runtime/queries/fragments/Post.fragment.gql

@@ -1,12 +1,15 @@
-#import "~/.queries/fragments/NodeWithExcerpt.fragment.gql";
-#import '~/.queries/fragments/ContentNode.fragment.gql';
-#import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
-#import '~/.queries/fragments/NodeWithContentEditor.fragment.gql';
-
 fragment Post on Post {
   ...NodeWithExcerpt
   ...ContentNode
   ...NodeWithFeaturedImage
   ...NodeWithContentEditor
   title
+  categories {
+    nodes {
+      id
+      name
+      uri
+      description
+    }
+  }
 }

package/dist/runtime/server/graphqlMiddleware.serverOptions.js

@@ -0,0 +1,18 @@
+import { defineGraphqlServerOptions } from "nuxt-graphql-middleware/server-options";
+import { getHeader } from "h3";
+export default defineGraphqlServerOptions({
+  async serverFetchOptions(event, _operation, _operationName, _context) {
+    return {
+      headers: {
+        // Forward WordPress auth cookies for previews
+        Cookie: getHeader(event, "cookie") || "",
+        // Forward authorization header if present
+        Authorization: getHeader(event, "authorization") || ""
+      }
+    };
+  },
+  async onServerError(event, error, _operation, operationName) {
+    const url = event.node.req.url || "unknown";
+    console.error(`[WPNuxt] GraphQL error in ${operationName} (${url}):`, error.message);
+  }
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

package/dist/runtime/types/stub.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Type stubs for Nuxt-generated imports.
+ * These are used during module development when .nuxt folder doesn't exist.
+ * Actual types are generated at runtime in consuming applications.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+// Stub for #imports
+export const computed: any
+export const useAsyncGraphqlQuery: any
+export const useGraphqlState: any
+export const useRuntimeConfig: any
+export const useRoute: any
+
+// Stub for #nuxt-graphql-middleware/operation-types
+export type Query = Record<string, any>
+
+// Stub for #build/graphql-operations
+export type PostFragment = any
+export type PageFragment = any
+export type MenuItemFragment = any

package/dist/runtime/util/images.d.ts

@@ -1,2 +0,0 @@
-declare const getRelativeImagePath: (imgUrl: string) => string;
-export { getRelativeImagePath };

package/dist/runtime/util/images.js

@@ -1,8 +1,16 @@
 const getRelativeImagePath = function getRelativeImagePath2(imgUrl) {
-  if (imgUrl) {
+  if (!imgUrl || typeof imgUrl !== "string") {
+    return "";
+  }
+  try {
     const url = new URL(imgUrl);
-    imgUrl = url.pathname;
+    return url.pathname;
+  } catch {
+    if (imgUrl.startsWith("/")) {
+      return imgUrl;
+    }
+    console.warn(`WPNuxt: Invalid image URL provided: ${imgUrl}`);
+    return "";
   }
-  return imgUrl;
 };
 export { getRelativeImagePath };

package/dist/server-options.d.mts

@@ -0,0 +1,2 @@
+export { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options';
+import 'nuxt-graphql-middleware/client-options';

package/dist/server-options.d.ts

@@ -0,0 +1,2 @@
+export { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options';
+import 'nuxt-graphql-middleware/client-options';

package/dist/server-options.mjs

@@ -0,0 +1 @@
+export { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options';

package/dist/types.d.mts

@@ -1,7 +1,7 @@
 import type { NuxtModule } from '@nuxt/schema'
 
-import type { default as Module } from './module.js'
+import type { default as Module } from './module.mjs'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { default } from './module.js'
+export { default } from './module.mjs'

package/package.json

@@ -1,104 +1,75 @@
 {
   "name": "@wpnuxt/core",
-  "version": "1.0.0-edge.9",
-  "description": "WPNuxt",
+  "version": "2.0.0-alpha.2",
+  "description": "Nuxt module for WordPress integration via GraphQL (WPGraphQL)",
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "wordpress",
+    "graphql",
+    "wpgraphql",
+    "headless-cms",
+    "headless-wordpress",
+    "vue",
+    "typescript"
+  ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wpnuxt/wpnuxt-core.git"
+    "url": "git+https://github.com/wpnuxt/wpnuxt.git",
+    "directory": "packages/core"
   },
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./server-options": {
+      "types": "./dist/server-options.d.mts",
+      "import": "./dist/server-options.mjs"
+    },
+    "./client-options": {
+      "types": "./dist/client-options.d.mts",
+      "import": "./dist/client-options.mjs"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "files": [
     "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "nuxt-module-build build && pnpm build:web-types",
-    "build:web-types": "vue-docgen-web-types src/runtime/components/ ./dist/web-types.json",
-    "prepare": "nuxi prepare .",
-    "prepack": "nuxt-module-build build",
-    "generate": "pnpm --filter ./playground/ run generate",
-    "dev": "pnpm --filter ./playground/ run dev --host app.local",
-    "dev:build": "pnpm --filter ./playground/ run build",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "lint:docs": "markdownlint ./docs && case-police 'docs/**/*.md' *.md",
-    "lint:docs:fix": "markdownlint ./docs --fix && case-police 'docs/**/*.md' *.md --fix",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "coverage": "vitest run --coverage",
-    "typecheck": "vue-tsc --noEmit",
-    "typecheck:docs": "DOCS_TYPECHECK=true pnpm nuxi prepare && nuxt-content-twoslash verify --content-dir docs",
-    "release": "pnpm run lint && pnpm run prepack; release-it --git.tagExclude='*[-edge]*'",
-    "release-edge": "pnpm run lint && pnpm run prepack; release-it --preRelease=edge --config .release-it-edge.json",
-    "wp:cli": "docker-compose up wordpress-cli",
-    "wp:stop": "docker-compose down",
-    "wp:delete": "docker-compose down --volumes --remove-orphans --rmi local  && rm -rf ./wordpress/files",
-    "wp-env": "wp-env",
-    "wp-env:create": "wp-env start --update && ./wordpress/wp-env-cli.sh",
-    "start": "pnpm run wp-env:create && pnpm run dev"
-  },
   "dependencies": {
-    "@nuxt/kit": "3.12.4",
-    "@vueuse/nuxt": "^11.0.0",
+    "@nuxt/kit": "4.2.2",
+    "@radya/nuxt-dompurify": "^1.0.5",
     "defu": "^6.1.4",
-    "graphql": "^16.9.0",
-    "nuxt-graphql-middleware": "4.1.1",
-    "ohash": "^1.1.3",
-    "unstorage": "^1.10.2",
-    "vue-sanitize-directive": "^0.2.1"
+    "graphql": "^16.12.0",
+    "nuxt-graphql-middleware": "5.3.1",
+    "scule": "^1.3.0"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^5.0.2",
-    "@graphql-codegen/client-preset": "^4.3.3",
-    "@graphql-codegen/typescript-operations": "^4.2.3",
-    "@nuxt/devtools": "^1.3.9",
-    "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "3.12.4",
-    "@nuxt/test-utils": "^3.14.1",
-    "@rollup/rollup-linux-arm64-gnu": "^4.20.0",
-    "@rollup/rollup-linux-arm64-musl": "^4.20.0",
-    "@types/node": "22.4.1",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vue/test-utils": "^2.4.6",
-    "@wordpress/env": "^10.5.0",
-    "changelogen": "^0.5.5",
-    "markdownlint-cli": "^0.41.0",
-    "nuxt": "^3.12.4",
-    "nuxt-content-twoslash": "^0.1.1",
-    "release-it": "^17.6.0",
-    "shiki": "^1.13.0",
-    "twoslash": "^0.2.9",
-    "typescript": "^5.5.4",
-    "untyped": "1.4.2",
-    "vite": "^5.4.1",
-    "vitest": "^2.0.5",
-    "vue-docgen-web-types": "^0.1.8",
-    "vue-tsc": "2.0.29"
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "4.2.2",
+    "@nuxt/test-utils": "^3.21.0",
+    "@types/node": "^25.0.3",
+    "nuxt": "4.2.2",
+    "vitest": "^4.0.16",
+    "vue-tsc": "^3.2.1"
   },
   "peerDependencies": {
-    "consola": "^3.2.3",
-    "graphql": "^16.9.0",
-    "knitwork": "^1.1.0",
-    "pathe": "^1.1.2",
-    "scule": "^1.3.0"
+    "nuxt": "^4.0.0"
   },
-  "packageManager": "pnpm@9.7.0",
-  "engines": {
-    "node": ">=18"
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev:prepare": "nuxt-module-build build --stub",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "typecheck": "vue-tsc --noEmit",
+    "clean": "rm -rf dist .nuxt node_modules"
   }
-}
+}

package/README.md

@@ -1,80 +0,0 @@
-
-This module is still being developed and not ready for production usage yet.
-There will be many smaller alpha releases the coming weeks, often with breaking changes.
-
-I am working towards a stable release. And will inform about it here
-
-# WPNuxt
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-Nuxt module for using WordPress as a headless CMS with a Nuxt 3 frontend
-
-- [✨  Release Notes](/CHANGELOG.md)
-- [🏀 Online playground](https://stackblitz.com/github/wpnuxt/wpnuxt-core?file=playground%2Fapp%2Fpages%2Findex.vue)
-- [📖  Documentation](https://wpnuxt.com)
-
-## Features
-
-- Content is fetched from WordPress using server-side GraphQL api calls
-- Support for (Gutenberg Blocks) by adding the separate [@wpnuxt/blocks](https://github.com/wpnuxt/wpnuxt-blocks), which uses WPEngine's [wp-graphql-content-blocks](https://faustjs.org/tutorial/get-started-with-wp-graphql-content-blocks) and a set of custom vue components
-
-## Quick Setup
-
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add @wpnuxt/core
-```
-
-And connect WPNuxt to your wordpress installation in your nuxt.config.ts:
-
-```json
-wpNuxt: {
-    wordpressUrl: 'https://yourwordpress.domain.com'
-},
-```
-
-That's it! You can now use the WPNuxt module in your Nuxt app ✨
-
-## Development
-
-```bash
-# Install dependencies
-pnpm install
-
-# Generate type stubs
-pnpm run dev:prepare
-
-# Develop with the playground
-pnpm run dev
-
-# Build the playground
-pnpm run dev:build
-
-# Run ESLint
-pnpm run lint
-
-# Run Vitest
-pnpm run test
-pnpm run test:watch
-
-# Release new version
-pnpm run release
-```
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@vernaillen/wpnuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://www.npmjs.com/package/@vernaillen/wpnuxt
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/@vernaillen/wpnuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://www.npmjs.com/package/@vernaillen/wpnuxt
-
-[license-src]: https://img.shields.io/npm/l/@vernaillen/wpnuxt?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://www.npmjs.com/package/@vernaillen/wpnuxt
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/runtime/app/graphqlMiddleware.serverOptions.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("nuxt-graphql-middleware").GraphqlMiddlewareServerOptions<object>;
-export default _default;

package/dist/runtime/app/graphqlMiddleware.serverOptions.js

@@ -1,11 +0,0 @@
-import { defineGraphqlServerOptions } from "nuxt-graphql-middleware/dist/runtime/serverOptions";
-import { getHeader } from "h3";
-export default defineGraphqlServerOptions({
-  serverFetchOptions(event) {
-    return {
-      headers: {
-        Authorization: getHeader(event, "Authorization")
-      }
-    };
-  }
-});