@wpnuxt/blocks 0.0.16 → 2.0.0-alpha.1

package/dist/module.d.mts

@@ -1,8 +1,24 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-interface ModuleOptions {
-    enabled: boolean;
+interface WPNuxtBlocksConfig {
+    /**
+     * Enable or disable the module
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Domains to allow for @nuxt/image
+     * @default []
+     */
+    imageDomains?: string[];
+    /**
+     * Enable Nuxt UI integration for enhanced button styling
+     * Set to false to use native HTML elements
+     * @default 'auto' - uses Nuxt UI if available
+     */
+    nuxtUI?: boolean | 'auto';
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: _nuxt_schema.NuxtModule<WPNuxtBlocksConfig, WPNuxtBlocksConfig, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { WPNuxtBlocksConfig };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.16",
   "configKey": "wpNuxtBlocks",
+  "version": "2.0.0-alpha.0",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,30 +1,36 @@
-import { promises } from 'node:fs';
-import { defineNuxtModule, createResolver, installModule, addComponentsDir, addTemplate } from '@nuxt/kit';
-import { genDynamicImport } from 'knitwork';
+import { existsSync, cpSync, promises } from 'node:fs';
+import { join } from 'node:path';
+import { defineNuxtModule, createResolver, hasNuxtModule, installModule, addComponentsDir, addTemplate } from '@nuxt/kit';
 
-const name = "@wpnuxt/blocks";
-const version = "0.0.16";
-
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
-    name,
-    version,
+    name: "@wpnuxt/blocks",
     configKey: "wpNuxtBlocks"
   },
-  // Default configuration options of the Nuxt module
   defaults: {
-    enabled: true
+    enabled: true,
+    imageDomains: [],
+    nuxtUI: "auto"
   },
-  async setup(_options, nuxt) {
+  async setup(options, nuxt) {
+    if (!options.enabled) {
+      return;
+    }
     const { resolve } = createResolver(import.meta.url);
     const resolveRuntimeModule = (path) => resolve("./runtime", path);
-    console.log("::: Setting up @wpnuxt/blocks module");
     nuxt.options.alias["#wpnuxt/blocks"] = resolve(nuxt.options.buildDir, "wpnuxt/blocks");
-    await installModule("@nuxt/ui");
+    if (options.nuxtUI === true || options.nuxtUI === "auto" && hasNuxtModule("@nuxt/ui")) {
+      await installModule("@nuxt/ui");
+    }
     await installModule("@nuxt/image", {
-      // TODO: get wordpressUrl from @wpnuxt/core options
-      domains: ["wordpress.wpnuxt.com"]
+      domains: options.imageDomains
     });
+    await installModule("@radya/nuxt-dompurify");
+    const blocksQueriesPath = resolveRuntimeModule("./queries");
+    const mergedQueriesFolder = join(nuxt.options.srcDir, ".queries");
+    if (existsSync(mergedQueriesFolder) && existsSync(blocksQueriesPath)) {
+      cpSync(blocksQueriesPath, mergedQueriesFolder, { recursive: true });
+    }
     addComponentsDir({
       path: resolveRuntimeModule("./components"),
       pathPrefix: false,
@@ -47,33 +53,120 @@ const module = defineNuxtModule({
         });
       }
     }
-    const componentsContext = { components: [] };
-    nuxt.hook("components:extend", (newComponents) => {
-      const moduleBlocksDir = resolveRuntimeModule("./components");
-      const userBlocksDir = (nuxt.options.srcDir || nuxt.options.rootDir) + "/components/blocks";
-      componentsContext.components = newComponents.filter((c) => {
-        if (c.filePath.startsWith(moduleBlocksDir) || c.filePath.startsWith(userBlocksDir)) {
-          return true;
-        }
-        return false;
-      });
-    });
     addTemplate({
       write: true,
       filename: "wpnuxt/blocks.mjs",
-      getContents({ options }) {
-        const components = options.getComponents().filter((c) => !c.island).flatMap((c) => {
-          const exp = c.export === "default" ? "c.default || c" : `c['${c.export}']`;
-          const isClient = c.mode === "client";
-          const definitions = [];
-          definitions.push(`export const ${c.pascalName} = ${genDynamicImport(c.filePath)}.then(c => ${isClient ? `createClientOnly(${exp})` : exp})`);
-          return definitions;
-        });
-        return components.join("\n");
-      },
-      options: { getComponents: () => componentsContext.components }
+      getContents() {
+        return `// Generated by @wpnuxt/blocks
+export * from '#build/graphql-operations'
+`;
+      }
+    });
+    addTemplate({
+      write: true,
+      filename: "wpnuxt/blocks.d.ts",
+      getContents() {
+        return `// Generated by @wpnuxt/blocks
+export * from '#build/graphql-operations'
+
+export interface EditorBlock {
+  __typename?: string
+  name?: string | null
+  clientId?: string | null
+  parentClientId?: string | null
+  renderedHtml?: string | null
+  attributes?: Record<string, unknown> | null
+  innerBlocks?: (EditorBlock | null)[] | null
+}
+
+export interface CoreParagraph extends EditorBlock {
+  __typename?: 'CoreParagraph'
+  attributes?: {
+    content?: string | null
+    anchor?: string | null
+    className?: string | null
+    fontSize?: string | null
+    textColor?: string | null
+    style?: string | null
+  } | null
+}
+
+export interface CoreHeading extends EditorBlock {
+  __typename?: 'CoreHeading'
+  attributes: {
+    content?: string | null
+    level: number
+    anchor?: string | null
+    className?: string | null
+    fontSize?: string | null
+    textColor?: string | null
+  }
+}
+
+export interface CoreImage extends EditorBlock {
+  __typename?: 'CoreImage'
+  attributes?: {
+    url?: string | null
+    alt?: string | null
+    width?: number | null
+    height?: number | null
+    scale?: string | null
+    caption?: string | null
+    className?: string | null
+  } | null
+}
+
+export interface CoreButton extends EditorBlock {
+  __typename?: 'CoreButton'
+  attributes: {
+    url?: string | null
+    text?: string | null
+    linkTarget?: string | null
+    rel?: string | null
+    style?: string | null
+    fontSize?: string | null
+    className?: string | null
+    cssClassName?: string | null
+    metadata?: string | null
+  }
+}
+
+export interface CoreButtons extends EditorBlock {
+  __typename?: 'CoreButtons'
+  innerBlocks?: (CoreButton | null)[] | null
+}
+
+export interface CoreQuote extends EditorBlock {
+  __typename?: 'CoreQuote'
+  innerBlocks?: (CoreParagraph | null)[] | null
+}
+
+export interface CoreGallery extends EditorBlock {
+  __typename?: 'CoreGallery'
+  innerBlocks?: (CoreImage | null)[] | null
+}
+
+export interface CoreSpacer extends EditorBlock {
+  __typename?: 'CoreSpacer'
+  attributes?: {
+    spacerHeight?: string | null
+    spacerWidth?: string | null
+    className?: string | null
+  } | null
+}
+
+export interface CoreDetails extends EditorBlock {
+  __typename?: 'CoreDetails'
+  attributes?: {
+    summary?: string | null
+    showContent?: boolean | null
+    className?: string | null
+  } | null
+}
+`;
+      }
     });
   }
 });
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/components/BlockComponent.vue

@@ -1,29 +1,22 @@
-<script setup lang="ts">
-import { pascalCase } from 'scule'
-import { resolveComponent } from '#imports'
-import type { EditorBlock } from '#wpnuxt/blocks'
-
-const manifest = await import('#wpnuxt/blocks').catch(() => ({}))
-
-const props = defineProps<{
-  block: EditorBlock
-}>()
-const findComponentToRender = async () => {
-  // only process top level blocks
-  if (props.block.parentClientId === null || props.block.parentClientId === undefined) {
+<script setup>
+import { pascalCase } from "scule";
+import { resolveComponent } from "#imports";
+const props = defineProps({
+  block: { type: null, required: true }
+});
+const componentToRender = (() => {
+  if (props.block.parentClientId === null || props.block.parentClientId === void 0) {
     if (props.block.name) {
-      const componentName = pascalCase(props.block.name)
-      const componentImporter = manifest[componentName]
-      if (typeof componentImporter === 'function') {
-        return await componentImporter()
+      const componentName = pascalCase(props.block.name);
+      const resolved = resolveComponent(componentName);
+      if (typeof resolved !== "string") {
+        return resolved;
       }
     }
-    return resolveComponent('EditorBlock')
-  } else {
-    return undefined
+    return resolveComponent("EditorBlock");
   }
-}
-const componentToRender = await findComponentToRender()
+  return void 0;
+})();
 </script>
 
 <template>

package/dist/runtime/components/BlockRenderer.vue

@@ -1,18 +1,20 @@
-<script setup lang="ts">
-import BlockComponent from './BlockComponent.vue'
-import type { NodeWithEditorBlocksFragment } from '#build/graphql-operations'
-
-defineProps<{
-  node: NodeWithEditorBlocksFragment
-}>()
+<script setup>
+import BlockComponent from "./BlockComponent.vue";
+defineProps({
+  node: { type: null, required: true }
+});
 </script>
 
 <template>
   <div>
-    <BlockComponent
+    <template
       v-for="block, index in node.editorBlocks"
       :key="index"
-      :block="block"
-    />
+    >
+      <BlockComponent
+        v-if="block"
+        :block="block"
+      />
+    </template>
   </div>
 </template>

package/dist/runtime/components/blocks/CoreButton.vue

@@ -1,30 +1,52 @@
-<script setup lang="ts">
-import { convertFontSize, getCssClasses } from '../../util'
-import type { CoreButton } from '#wpnuxt/blocks'
-import { ref } from '#imports'
-
-const props = defineProps<{
-  block: CoreButton
-}>()
-const variant = ref('solid')
-/* if (props.block.attributes?.cssClassName?.includes('is-style-outline')) {
-  variant.value = 'outline'
-} */
+<script setup>
+import { convertFontSize, getCssClasses } from "../../util";
+import { ref, useNuxtApp } from "#imports";
+const props = defineProps({
+  block: { type: null, required: true }
+});
+const variant = ref("solid");
 if (props.block.attributes?.metadata) {
-  variant.value = props.block.attributes?.metadata?.replaceAll('"', '')
+  const metadataVariant = props.block.attributes?.metadata?.replaceAll('"', "");
+  if (["solid", "outline", "soft", "subtle", "ghost", "link"].includes(metadataVariant)) {
+    variant.value = metadataVariant;
+  }
 }
+const nuxtApp = useNuxtApp();
+const hasNuxtUI = !!nuxtApp.vueApp.component("UButton");
 </script>
 
 <template>
+  <!-- Use Nuxt UI UButton when available -->
   <UButton
-    :to="block.attributes.url"
+    v-if="hasNuxtUI"
+    :to="block.attributes.url ?? void 0"
     :target="block.attributes.linkTarget"
     :rel="block.attributes.rel"
     :style="block.attributes.style"
     :variant
     :class="getCssClasses(block)"
-    :size="convertFontSize(block.attributes?.fontSize, '', 'md')"
+    :size="convertFontSize(block.attributes?.fontSize ?? void 0, '', 'md')"
   >
-    <span v-sanitize="block.attributes.text" />
+    <span v-sanitize-html="block.attributes.text" />
   </UButton>
+
+  <!-- Fallback to native link/button when Nuxt UI is not available -->
+  <a
+    v-else-if="block.attributes.url"
+    :href="block.attributes.url"
+    :target="block.attributes.linkTarget ?? void 0"
+    :rel="block.attributes.rel ?? void 0"
+    :style="block.attributes.style"
+    :class="['wp-block-button__link', getCssClasses(block)]"
+  >
+    <span v-sanitize-html="block.attributes.text" />
+  </a>
+  <button
+    v-else
+    type="button"
+    :style="block.attributes.style"
+    :class="['wp-block-button__link', getCssClasses(block)]"
+  >
+    <span v-sanitize-html="block.attributes.text" />
+  </button>
 </template>

package/dist/runtime/components/blocks/CoreButtons.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import type { CoreButtons, EditorBlock } from '#wpnuxt/blocks'
-
-defineProps<{
-  block: CoreButtons
-}>()
+<script setup>
+defineProps({
+  block: { type: null, required: true }
+});
 </script>
 
 <template>
@@ -12,14 +10,16 @@ defineProps<{
       v-for="innerBlock, index in block.innerBlocks"
       :key="index"
     >
-      <CoreButton
-        v-if="innerBlock.name === 'core/button'"
-        :block="innerBlock"
-      />
-      <EditorBlock
-        v-else
-        :block="innerBlock"
-      />
+      <template v-if="innerBlock">
+        <CoreButton
+          v-if="innerBlock.name === 'core/button'"
+          :block="innerBlock"
+        />
+        <EditorBlock
+          v-else
+          :block="innerBlock"
+        />
+      </template>
     </template>
   </div>
 </template>

package/dist/runtime/components/blocks/CoreDetails.vue

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  block: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <details
+    :open="block.attributes?.showContent ?? false"
+    :class="block.attributes?.className ?? void 0"
+  >
+    <summary v-sanitize-html="block.attributes?.summary" />
+    <div v-if="block.innerBlocks?.length">
+      <template
+        v-for="(innerBlock, index) in block.innerBlocks"
+        :key="innerBlock?.clientId ?? index"
+      >
+        <BlockComponent
+          v-if="innerBlock"
+          :block="innerBlock"
+        />
+      </template>
+    </div>
+  </details>
+</template>

package/dist/runtime/components/blocks/CoreGallery.vue

@@ -1,16 +1,14 @@
-<script setup lang="ts">
-import type { CoreGallery, CoreImage } from '#wpnuxt/blocks'
-
-const props = defineProps<{
-  block: CoreGallery
-}>()
-const imageBlocks: CoreImage[] = []
+<script setup>
+const props = defineProps({
+  block: { type: null, required: true }
+});
+const imageBlocks = [];
 props.block?.innerBlocks?.forEach((innerBlock) => {
-  if (innerBlock && innerBlock.name === 'core/image') {
-    const imgBlock = innerBlock as CoreImage
-    imageBlocks.push(imgBlock)
+  if (innerBlock && innerBlock.name === "core/image") {
+    const imgBlock = innerBlock;
+    imageBlocks.push(imgBlock);
   }
-})
+});
 </script>
 
 <template>
@@ -22,7 +20,7 @@ props.block?.innerBlocks?.forEach((innerBlock) => {
     >
       <div
         v-if="imgBlock"
-        class="galleryImgWrapper rounded-lg overflow-hidden relative mb-4 md:mb-6  shadow-md hover:shadow-xl"
+        class="galleryImgWrapper rounded-lg overflow-hidden relative mb-4 md:mb-6 shadow-md hover:shadow-xl"
       >
         <CoreImage
           :block="imgBlock"

package/dist/runtime/components/blocks/CoreHeading.vue

@@ -1,53 +1,51 @@
-<script setup lang="ts">
-import { getCssClasses } from '../../util'
-import type { CoreHeading } from '#wpnuxt/blocks'
-
-const props = defineProps<{
-  block: CoreHeading
-}>()
-const cssClass = getCssClasses(props.block)
+<script setup>
+import { getCssClasses } from "../../util";
+const props = defineProps({
+  block: { type: null, required: true }
+});
+const cssClass = getCssClasses(props.block);
 </script>
 
 <template>
   <template v-if="block.attributes.level === 1">
     <h1
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 2">
     <h2
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 3">
     <h3
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 4">
     <h4
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 5">
     <h5
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 6">
     <h6
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>

package/dist/runtime/components/blocks/CoreImage.vue

@@ -1,12 +1,8 @@
-<script setup lang="ts">
-// import { getRelativeImagePath } from '../../util/images'
-import type { CoreImage } from '#graphql-operations'
-
-const props = defineProps<{
-  block: CoreImage
-}>()
-// const imgUrl = getRelativeImagePath(props.block?.attributes?.url)
-const imgUrl = props.block?.attributes?.url
+<script setup>
+const props = defineProps({
+  block: { type: null, required: true }
+});
+const imgUrl = props.block?.attributes?.url;
 </script>
 
 <template>
@@ -15,13 +11,13 @@ const imgUrl = props.block?.attributes?.url
       v-if="imgUrl"
       :src="imgUrl"
       :alt="block?.attributes?.alt"
-      :width="block?.attributes?.width"
-      :height="block?.attributes?.height"
-      :fit="block?.attributes?.scale"
+      :width="block?.attributes?.width ?? void 0"
+      :height="block?.attributes?.height ?? void 0"
+      :fit="block?.attributes?.scale ?? void 0"
     />
     <div
       v-else
-      v-sanitize="block?.renderedHtml"
+      v-sanitize-html="block?.renderedHtml"
     />
   </div>
 </template>

package/dist/runtime/components/blocks/CoreParagraph.vue

@@ -1,17 +1,15 @@
-<script setup lang="ts">
-import { getCssClasses } from '../../util'
-import type { CoreParagraph } from '#wpnuxt/blocks'
-
-const props = defineProps<{
-  block: CoreParagraph
-}>()
+<script setup>
+import { getCssClasses } from "../../util";
+const props = defineProps({
+  block: { type: null, required: true }
+});
 </script>
 
 <template>
   <p
-    :id="block?.attributes?.anchor"
-    v-sanitize="block?.attributes?.content"
+    :id="block?.attributes?.anchor ?? void 0"
+    v-sanitize-html="block?.attributes?.content"
     :class="getCssClasses(props.block)"
-    :style="block?.attributes?.style"
+    :style="block?.attributes?.style ?? void 0"
   />
 </template>

package/dist/runtime/components/blocks/CoreQuote.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import type { CoreQuote, CoreParagraph } from '#wpnuxt/blocks'
-
-defineProps<{
-  block: CoreQuote
-}>()
+<script setup>
+defineProps({
+  block: { type: null, required: true }
+});
 </script>
 
 <template>
@@ -12,7 +10,7 @@ defineProps<{
     :key="index"
   >
     <CoreParagraph
-      v-if="innerBlock.name === 'core/paragraph'"
+      v-if="innerBlock && innerBlock.name === 'core/paragraph'"
       class="text-sm text-primary-500"
       :block="innerBlock"
     />

package/dist/runtime/components/blocks/CoreSpacer.vue

@@ -1,19 +1,17 @@
-<script setup lang="ts">
-import { getCssClasses } from '../../util'
-import type { CoreSpacer } from '#wpnuxt/blocks'
-
-const props = defineProps<{
-  block: CoreSpacer
-}>()
-const cssClass = getCssClasses(props.block)
+<script setup>
+import { getCssClasses } from "../../util";
+const props = defineProps({
+  block: { type: null, required: true }
+});
+const cssClass = getCssClasses(props.block);
 </script>
 
 <template>
   <div
     :class="cssClass"
     :style="{
-      height: block.attributes?.spacerHeight,
-      width: block.attributes?.spacerWidth
-    }"
+  height: block.attributes?.spacerHeight ?? void 0,
+  width: block.attributes?.spacerWidth ?? void 0
+}"
   />
 </template>

package/dist/runtime/components/blocks/EditorBlock.vue

@@ -1,11 +1,9 @@
-<script setup lang="ts">
-import type { EditorBlock } from '#wpnuxt/blocks'
-
-defineProps<{
-  block: EditorBlock
-}>()
+<script setup>
+defineProps({
+  block: { type: null, required: true }
+});
 </script>
 
 <template>
-  <div v-sanitize="block.renderedHtml" />
+  <div v-sanitize-html="block.renderedHtml" />
 </template>

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

@@ -0,0 +1,15 @@
+fragment CoreDetails on CoreDetails {
+  __typename
+  name
+  clientId
+  parentClientId
+  renderedHtml
+  attributes {
+    summary
+    showContent
+    className
+  }
+  innerBlocks {
+    ...EditorBlock
+  }
+}

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

@@ -1,10 +1,10 @@
-#import '~/.queries/fragments/CoreButton.fragment.gql';
-#import '~/.queries/fragments/CoreGallery.fragment.gql';
-#import '~/.queries/fragments/CoreHeading.fragment.gql';
-#import '~/.queries/fragments/CoreImage.fragment.gql';
-#import '~/.queries/fragments/CoreParagraph.fragment.gql';
-#import '~/.queries/fragments/CoreQuote.fragment.gql';
-#import '~/.queries/fragments/CoreSpacer.fragment.gql';
+#import "~/.queries/fragments/CoreButton.fragment.gql"
+#import "~/.queries/fragments/CoreGallery.fragment.gql"
+#import "~/.queries/fragments/CoreHeading.fragment.gql"
+#import "~/.queries/fragments/CoreImage.fragment.gql"
+#import "~/.queries/fragments/CoreParagraph.fragment.gql"
+#import "~/.queries/fragments/CoreQuote.fragment.gql"
+#import "~/.queries/fragments/CoreSpacer.fragment.gql"
 
 fragment EditorBlock on EditorBlock {
   apiVersion

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

@@ -1,4 +1,4 @@
-#import '~/.queries/fragments/EditorBlock.fragment.gql';
+#import "~/.queries/fragments/EditorBlock.fragment.gql"
 
 fragment NodeWithEditorBlocks on NodeWithEditorBlocks {
   editorBlocks {

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

@@ -1 +0,0 @@
-export declare const getColor: (textColor?: string) => string;

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

@@ -1 +0,0 @@
-export declare const convertFontSize: (fontSize: string, prefix?: string, defaultSize?: string) => string;

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

@@ -1,4 +0,0 @@
-import { convertFontSize } from './attributeFontSize.js';
-import { getColor } from './attributeColor.js';
-declare const getCssClasses: (block: any) => string;
-export { getCssClasses, convertFontSize, getColor };

package/dist/types.d.mts

@@ -1 +1,9 @@
-export { type ModuleOptions, default } from './module.js'
+import type { NuxtModule } from '@nuxt/schema'
+
+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.mjs'
+
+export { type WPNuxtBlocksConfig } from './module.mjs'

package/package.json

@@ -1,65 +1,63 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.16",
-  "description": "WPNuxt Blocks",
-  "repository": "wpnuxt/wpnuxt-blocks",
+  "version": "2.0.0-alpha.1",
+  "description": "Vue components for rendering WordPress Gutenberg blocks in Nuxt",
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "wordpress",
+    "gutenberg",
+    "blocks",
+    "vue",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpnuxt/wpnuxt.git",
+    "directory": "packages/blocks"
+  },
   "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"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "files": [
     "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "prepack": "nuxt-module-build build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
-    "release": "pnpm run lint && pnpm run test && pnpm run prepack; release-it --git.tagExclude='*[-edge]*'",
-    "release-edge": "pnpm run lint && pnpm run test && pnpm run prepack; release-it --preRelease=edge --config .release-it-edge.json",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "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/image": "^1.9.0",
-    "@nuxt/kit": "^3.16.0",
-    "@nuxt/ui": "^3.0.0",
-    "@wpnuxt/core": "1.0.0-edge.28"
+    "@nuxt/kit": "4.2.2",
+    "@nuxt/image": "^2.0.0",
+    "@radya/nuxt-dompurify": "^1.0.5",
+    "scule": "^1.3.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^2.3.0",
-    "@nuxt/eslint-config": "^1.2.0",
-    "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/schema": "^3.16.0",
-    "@nuxt/test-utils": "^3.17.2",
-    "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "^22.13.10",
-    "@wordpress/env": "^10.20.0",
-    "changelogen": "^0.6.1",
-    "eslint": "^9.22.0",
-    "nuxt": "^3.16.0",
-    "release-it": "^18.1.2",
-    "typescript": "5.6.3",
-    "vitest": "^3.0.8"
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "4.2.2",
+    "@types/node": "^25.0.3",
+    "nuxt": "4.2.2",
+    "vue-tsc": "^3.2.1"
   },
   "peerDependencies": {
-    "knitwork": "^1.2.0",
-    "pathe": "^2.0.1"
+    "nuxt": "^4.0.0",
+    "@nuxt/ui": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/ui": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
+    "typecheck": "vue-tsc --noEmit",
+    "clean": "rm -rf dist .nuxt node_modules"
   }
-}
+}

package/README.md

@@ -1,70 +0,0 @@
-# WPNuxt Blocks
-
-[![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]
-
-A set of components to render Gutenberg Blocks with the WPNuxt module
-
-Allows to override each block component to be overriden by a custom component to have full control over how every Gutenberg Block is rendered in Nuxt.
-
-- [✨  Release Notes](/CHANGELOG.md)
-- [🏀 Online playground](https://stackblitz.com/github/wpnuxt/wpnuxt-blocks?file=playground%2Fapp%2Fpages%2F%5B...slug%5D.vue)
-- [📖  Documentation](https://wpnuxt.com)
-
-## Quick Setup
-
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add @wpnuxt/blocks
-```
-
-That's it! You can now use WPNuxt Blocks in your Nuxt app ✨
-
-
-## Contribution
-
-<details>
-  <summary>Local development</summary>
-  
-  ```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
-  ```
-
-</details>
-
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@wpnuxt/core/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://www.npmjs.com/package/@wpnuxt/core
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/@wpnuxt/core.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npmjs.com/package/@wpnuxt/core
-
-[license-src]: https://img.shields.io/npm/l/@wpnuxt/core.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/@wpnuxt/core
-
-[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/module.d.ts

@@ -1,8 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-interface ModuleOptions {
-    enabled: boolean;
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { type ModuleOptions, _default as default };

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

@@ -1,17 +0,0 @@
-#import '~/.queries/fragments/ContentNode.fragment.gql';
-#import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
-#import '~/.queries/fragments/NodeWithEditorBlocks.fragment.gql';
-
-fragment Page on Page {
-  ...ContentNode
-  ...NodeWithFeaturedImage
-  ...NodeWithEditorBlocks
-  content
-  isFrontPage
-  isPostsPage
-  isPreview
-  isPrivacyPage
-  isRestricted
-  isRevision
-  title
-}

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

@@ -1,13 +0,0 @@
-#import "~/.queries/fragments/NodeWithExcerpt.fragment.gql";
-#import '~/.queries/fragments/ContentNode.fragment.gql';
-#import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
-#import '~/.queries/fragments/NodeWithEditorBlocks.fragment.gql';
-
-fragment Post on Post {
-  ...NodeWithExcerpt
-  ...ContentNode
-  ...NodeWithFeaturedImage
-  ...NodeWithEditorBlocks
-  content
-  title
-}

package/dist/runtime/server/tsconfig.json

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

package/dist/types.d.ts

@@ -1 +0,0 @@
-export { type ModuleOptions, default } from './module'