eddev 2.3.12 → 2.3.14

package/skills/eddev/docs/views/queries.mdx

@@ -0,0 +1,116 @@
+# View Data (/docs/views/queries)
+
+**Pipe WordPress data into your templates**
+
+A view can have a GraphQL file with the same name as the `.tsx` file. eddev executes that query whenever the view is resolved, and passes the query result to the view as props.
+
+```txt
+views/
+  page.tsx
+  page.graphql
+  single-case-study.tsx
+  single-case-study.graphql
+```
+
+You do not call a hook or write a loading state for normal view data. If the query file exists, the data is part of the route payload before the view renders. If no query file exists, the view gets an empty props object.
+
+## Current Post Data [#current-post-data]
+
+For views attached to a WordPress object, use `$postId`.
+
+```graphql filename="views/page.graphql"
+query Page($postId: ID!) {
+  page(id: $postId, idType: DATABASE_ID) {
+    title
+    contentBlocks
+  }
+}
+```
+
+```tsx filename="views/page.tsx"
+import { ContentBlocks } from "eddev/blocks"
+import { defineView } from "eddev/views"
+
+export default defineView("page", (props) => {
+  return <ContentBlocks blocks={props.page?.contentBlocks} />
+})
+```
+
+`$postId` is usually available for `page`, `front-page`, `single`, `single-{post-type}`, and custom page templates. A `$preview` boolean is also sent when WordPress is rendering a preview.
+
+## Listing Data [#listing-data]
+
+View queries can fetch more than the current page. Archive and index pages often combine editable page content with a list of related posts or taxonomy terms.
+
+```graphql filename="views/archive-case-study.graphql"
+query ArchiveCaseStudies($postId: ID!) {
+  page(id: $postId, idType: DATABASE_ID) {
+    contentBlocks
+  }
+  caseStudies(first: 100, where: { orderby: { field: MENU_ORDER, order: ASC } }) {
+    nodes {
+      title
+      uri
+      subtitle
+    }
+  }
+  workCategories {
+    nodes {
+      name
+      slug
+    }
+  }
+}
+```
+
+Use this pattern when authors need page-builder content at the top of an archive, but the view also needs structured data for filters, tiles, or navigation.
+
+## Custom Route Variables [#custom-route-variables]
+
+Custom routes can provide their own query variables through `ED()->addCustomRoute()`. The PHP route maps URL segments to GraphQL variables, and the paired view query declares those variables.
+
+```php filename="backend/routes.php"
+ED()->addCustomRoute('planner/([A-Za-z0-9-]+)/?$', [
+  'template' => 'views/shared-planner.tsx',
+  'title' => 'Shared Planner',
+  'queryVars' => [
+    'plannerId' => "$1"
+  ],
+]);
+```
+
+```graphql filename="views/shared-planner.graphql"
+query SharedPlannerPage($plannerId: String!) {
+  sharedPlanner(id: $plannerId) {
+    id
+    name
+    sessions {
+      id
+    }
+  }
+}
+```
+
+Keep the route definition in [Custom Routes](/docs/routing/custom), and keep this page focused on the view query that consumes the variables.
+
+## Generated Prop Types [#generated-prop-types]
+
+eddev generates `types.views.ts` from `views/**/*.tsx` and `views/**/*.graphql`.
+
+For a view with a query, the generated prop type comes from the GraphQL operation result. For a view without a query, the generated prop type is `{}`.
+
+```ts filename="types.views.ts"
+declare global {
+  interface ViewProps {
+    page: PageQuery
+    "shared-planner": SharedPlannerPageQuery
+    "search-results": {}
+  }
+}
+```
+
+Because `defineView` is typed against `ViewProps`, `props` should normally be inferred without manually importing the generated query type.
+
+## Query Scope [#query-scope]
+
+Use a view query for data needed before the route renders. Use a query hook in `queries/*.graphql` when the user needs to search, paginate, mutate, refetch, or otherwise load data dynamically after the view is already on screen.

package/skills/eddev/docs/views.mdx

@@ -0,0 +1,63 @@
+# Views (/docs/views)
+
+**Page and post-type templates**
+
+Views are the React templates for a site. WordPress still decides what URL maps to what content; eddev lets that normal WordPress template hierarchy resolve to files in `views/*.tsx` instead of PHP templates.
+
+Common view names follow WordPress conventions:
+
+* `front-page.tsx` for the site's front page
+* `page.tsx` for normal pages
+* `single.tsx` for posts
+* `single-{post-type}.tsx` for a specific post type
+* `archive-{post-type}.tsx` for a post type archive
+* `404.tsx` or `_error.tsx` for not-found and error states
+
+Most views also have a paired `.graphql` file with the same name. The query result becomes the view's props.
+
+```graphql filename="views/page.graphql"
+query Page($postId: ID!) {
+  page(id: $postId, idType: DATABASE_ID) {
+    title
+    contentBlocks
+  }
+}
+```
+
+```tsx filename="views/page.tsx"
+import { ContentBlocks } from "eddev/blocks"
+import { defineView } from "eddev/views"
+
+export default defineView("page", (props) => {
+  return (
+    <div>
+      <h1>{props.page?.title}</h1>
+      <ContentBlocks blocks={props.page?.contentBlocks} />
+    </div>
+  )
+})
+```
+
+The view name passed to `defineView` should match the file path without `views/` or `.tsx`. For `views/page.tsx`, use `defineView("page", ...)`. For `views/single-case-study.tsx`, use `defineView("single-case-study", ...)`.
+
+## How A View Renders [#how-a-view-renders]
+
+When a request comes in, WordPress resolves the matching template. If it finds a React view, eddev:
+
+1. Resolves the view name from the file path.
+2. Executes the paired `views/name.graphql` file if one exists.
+3. Builds a route payload containing the view name, query result, app data, route metadata, and admin context.
+4. Renders `views/_app.tsx` around the active view.
+
+On the first request, that payload is embedded in the HTML. During client-side navigation, the router fetches the same payload as JSON, then loads and renders the matching view component.
+
+## Keep Views Thin [#keep-views-thin]
+
+A view should usually compose the page rather than contain every component detail. Put reusable UI in `components/`, `features/`, or other project folders, and let the view focus on:
+
+* selecting the right layout for this route
+* rendering `ContentBlocks`
+* composing archive or listing data from its query
+* reading route state when the URL itself affects presentation
+
+For the data side of views, see [View Data](./queries). For the site-wide wrapper, see [`_app.tsx`](./app-view).

package/skills/eddev/index.mdx

@@ -0,0 +1,79 @@
+# Docs
+
+- Stack
+  - [Overview](docs/stack/overview.mdx): Understand the main technologies and hosting shape behind eddev sites.
+  - [How It Works](docs/stack/how-it-works.mdx): Follow the end-to-end request flow for an eddev page.
+  - [SPA vs SSR](docs/stack/spa-vs-ssr.mdx): Compare WordPress-hosted SPA mode with serverless SSR mode.
+- [Software and Tooling](docs/software.mdx): Tools we use to build, edit, and run eddev projects.
+
+- **Guides**
+- [Getting Started](docs/getting-started.mdx): Set up a new eddev project from the starter theme.
+- Dev Tools
+  - [eddev CLI](docs/devtool/cli.mdx): Run development, builds, codegen, and diagnostics through the eddev CLI.
+  - [Dev Overlay](docs/devtool/overlay.mdx): Use the in-browser development overlay while working on eddev sites.
+- Infrastructure
+  - [Deployment](docs/infra/deployment.mdx): A placeholder for deployment workflows across GitHub, Vercel, and Cloudflare.
+  - [Local](docs/infra/local.mdx): A placeholder for Local setup and push-pull workflow guidance.
+  - [Security](docs/infra/security.mdx): A placeholder for origin protection and secret management guidance.
+  - [Caching](docs/infra/caching.mdx): A placeholder for eddev cache configuration and deployment layers.
+- Design System
+  - [Colours](docs/design/color.mdx): Configure colour tokens and Figma handoff output for Tailwind.
+  - [Typography](docs/design/type.mdx): Configure typography tokens through Tailwind helper classes.
+  - [Using Icons](docs/design/icons.mdx): Export and use Figma icons as React-friendly SVG components.
+  - [Grid System](docs/design/grid.mdx): Configure grid tokens, gutters, and layout utilities.
+  - [Responsive Scaling](docs/design/responsive-scaling.mdx): Configure responsive Tailwind tokens with the local helper.
+  - [Favicons](docs/design/favicons.mdx): Configure how eddev generates or delegates favicon assets.
+- More Guides
+  - [Colour Schemes](docs/guides/color-schemes.mdx): Define named visual schemes with Tailwind semantic tokens.
+  - [Integrations](docs/guides/integrations.mdx): A placeholder for third-party integration guidance.
+  - [Page Transitions](docs/guides/page-transitions.mdx): A placeholder for page transition patterns in eddev sites.
+  - [SEO](docs/guides/seo.mdx): A placeholder for SEO patterns in eddev sites.
+  - [State Management](docs/guides/state-management.mdx): A placeholder for state management guidance in eddev sites.
+- Snippets
+  - [Overview](docs/snippets.mdx): Situation-based recipes from real eddev themes
+  - [Querying Specific Blocks](docs/snippets/querying-specific-blocks.mdx): Select, split, and render only the block content you need
+  - [Type-Safe ACF Dropdowns](docs/snippets/type-safe-acf-dropdowns.mdx): Register one enum field and use its generated TypeScript type
+  - [Multiple Editable Zones](docs/snippets/multiple-editable-zones.mdx): Use SlotBlocks when one block needs more than one child area
+  - [Automated Block Layouts](docs/snippets/automated-block-layouts.mdx): Use block flags and wrapBlock to keep layout rules out of every block
+  - [Submitting Forms To RPC](docs/snippets/submitting-forms-to-rpc.mdx): Create a serverless mutation and call it from React
+  - [Custom Routes And URLs](docs/snippets/custom-routes-and-urls.mdx): Map fixed URLs to views and keep generated WordPress links aligned
+  - [SVGs](docs/snippets/svgs.mdx): Copy/paste SVG upload and GraphQL snippets
+
+- **Components**
+- [Configuration](docs/config.mdx): Configure eddev projects with theme-level JSON settings.
+- Routing
+  - [Routing Overview](docs/routing.mdx): Understand the WordPress and frontend sides of eddev routing.
+  - [Custom Routes](docs/routing/custom.mdx): Register fixed WordPress-backed routes for app-like screens.
+  - [WordPress Routing](docs/routing/wordpress.mdx): Let WordPress resolve URLs while React renders the matched view.
+  - [Frontend Routing APIs](docs/routing/api.mdx): Use eddev routing APIs for links, preloading, and client navigation.
+  - [How it Works](docs/routing/full-details.mdx): Trace how eddev loads route data for SPA and serverless navigation.
+- GraphQL
+  - [Overview](docs/graphql.mdx): Working with GraphQL in eddev
+  - [Global Data](docs/graphql/global-data.mdx): Fetch shared site shell data through views/_app.graphql.
+  - [GraphQL Fragments](docs/graphql/fragments.mdx): Share GraphQL selections and generated fragment types across queries.
+  - [Query Hooks](docs/graphql/query-hooks.mdx): Generate browser runtime query hooks from files in queries.
+  - [Mutation Hooks](docs/graphql/mutation-hooks.mdx): Generate mutation hooks for runtime GraphQL operations with side effects.
+  - [Infinite Queries](docs/graphql/infinite-queries.mdx): Build load-more interfaces with generated infinite query hooks.
+  - [Extending the GraphQL Schema](docs/graphql/extending.mdx): Extend WPGraphQL when frontend data needs custom schema fields.
+  - [GraphQL Tooling](docs/graphql/tooling.mdx): Use generated schema files with editor tooling and GraphiQL.
+- Views
+  - [Views](docs/views.mdx): Page and post-type templates
+  - [_app.tsx Layout](docs/views/app-view.mdx): Common site layout
+  - [Page Templates](docs/views/page-templates.mdx): Selectable templates for pages and post types
+  - [View Data](docs/views/queries.mdx): Pipe WordPress data into your templates
+- Blocks
+  - [Overview](docs/blocks/overview.mdx): The basics of creating Gutenberg blocks
+  - [Defining a block](docs/blocks/block-definition.mdx): How to create a new block type
+  - [Data and Editing](docs/blocks/data-and-editing.mdx): GraphQL props, inline content, and core block rendering
+  - [Configuring the Editor](docs/blocks/editor-config.mdx): Control which blocks authors can use
+  - [Nested Blocks](docs/blocks/nested-blocks.mdx): Blocks within blocks
+  - [Template Parts](docs/blocks/template-parts.mdx): Reusable site sections powered by blocks
+  - [Core Blocks](docs/blocks/core-blocks.mdx): Working with WordPress core blocks in eddev
+- ACF
+  - [ACF](docs/acf.mdx): Custom ACF fields, enum field shortcuts, and React widgets for WordPress admin screens.
+  - [Custom Fields](docs/acf/custom-fields.mdx): Build a custom ACF field type with PHP storage and React editing UI.
+  - [Custom Enums](docs/acf/custom-enums.mdx): Register reusable typed ACF choice fields without writing a full custom field UI.
+  - [Admin Panel Widgets](docs/acf/admin-panel-widgets.mdx): Mount React widgets inside custom WordPress admin pages.
+- Serverless
+  - [Serverless](docs/serverless.mdx): Run the public eddev frontend on Vercel while WordPress owns content and routing.
+  - [RPC Functions](docs/serverless/functions.mdx): Define TypeScript RPC routes for serverless eddev projects.

package/tsconfig.app.json

@@ -3,8 +3,8 @@
     "target": "ESNext",
     "lib": ["DOM", "ESNext"],
     "jsx": "react-jsx",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "rootDir": "./src/",
     "declaration": true,
     "declarationMap": true,