dtwo 3.0.0 → 3.1.0

package/dist/app/composables/index.d.ts

@@ -1,5 +1,5 @@
 export { defineDtwoComponent } from './component';
-export { useAsyncData, useLazyAsyncData, refreshDtwoData, clearDtwoData } from './asyncData';
+export { useAsyncData, useLazyAsyncData, useDtwoData, refreshDtwoData, clearDtwoData } from './asyncData';
 export type { AsyncDataOptions, AsyncData } from './asyncData';
 export { useHydration } from './hydrate';
 export { useState } from './state';
@@ -10,6 +10,7 @@ export type { FetchResult, UseFetchOptions } from './fetch';
 export { useCookie } from './cookie';
 export type { CookieOptions, CookieRef } from './cookie';
 export { useRequestHeaders, useRequestEvent, setResponseStatus } from './ssr';
+export { onDtwoReady } from './ready';
 export { abortNavigation, addRouteMiddleware, defineDtwoRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter } from './router';
 export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router';
 export { preloadComponents, prefetchComponents, preloadRouteComponents } from './preload';

package/dist/app/composables/index.mjs

@@ -1,11 +1,12 @@
 export { defineDtwoComponent } from "./component.mjs";
-export { useAsyncData, useLazyAsyncData, refreshDtwoData, clearDtwoData } from "./asyncData.mjs";
+export { useAsyncData, useLazyAsyncData, useDtwoData, refreshDtwoData, clearDtwoData } from "./asyncData.mjs";
 export { useHydration } from "./hydrate.mjs";
 export { useState } from "./state.mjs";
 export { clearError, createError, isDtwoError, showError, useError } from "./error.mjs";
 export { useFetch, useLazyFetch } from "./fetch.mjs";
 export { useCookie } from "./cookie.mjs";
 export { useRequestHeaders, useRequestEvent, setResponseStatus } from "./ssr.mjs";
+export { onDtwoReady } from "./ready.mjs";
 export { abortNavigation, addRouteMiddleware, defineDtwoRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter } from "./router.mjs";
 export { preloadComponents, prefetchComponents, preloadRouteComponents } from "./preload.mjs";
 export { isPrerendered, loadPayload, preloadPayload } from "./payload.mjs";

package/dist/app/composables/ready.d.ts

@@ -0,0 +1 @@
+export declare const onDtwoReady: (callback: () => any) => void;

package/dist/app/composables/ready.mjs

@@ -0,0 +1,12 @@
+import { useDtwoApp } from "../dtwo.mjs";
+import { requestIdleCallback } from "../compat/idle-callback.mjs";
+export const onDtwoReady = (callback) => {
+  const dtwoApp = useDtwoApp();
+  if (dtwoApp.isHydrating) {
+    dtwoApp.hooks.hookOnce("app:suspense:resolve", () => {
+      requestIdleCallback(callback);
+    });
+  } else {
+    requestIdleCallback(callback);
+  }
+};

package/dist/app/composables/router.d.ts

@@ -1,5 +1,5 @@
 import type { NavigationGuard, RouteLocationNormalized, RouteLocationRaw, NavigationFailure } from 'kdu-router';
-import { DtwoError } from './error';
+import type { DtwoError } from './error';
 export declare const useRouter: () => Router;
 export declare const useRoute: () => RouteLocationNormalizedLoaded;
 export declare const onBeforeRouteLeave: (guard: NavigationGuard) => void;

package/dist/app/composables/router.mjs

@@ -4,6 +4,7 @@ import { hasProtocol, joinURL, parseURL } from "ufo";
 import { useDtwoApp, useRuntimeConfig } from "../dtwo.mjs";
 import { createError } from "./error.mjs";
 import { useState } from "./state.mjs";
+import { setResponseStatus } from "./ssr.mjs";
 export const useRouter = () => {
   return useDtwoApp()?.$router;
 };
@@ -64,6 +65,10 @@ export const navigateTo = (to, options) => {
   if (process.server) {
     const dtwoApp = useDtwoApp();
     if (dtwoApp.ssrContext && dtwoApp.ssrContext.event) {
+      if (isProcessingMiddleware() && !isExternal) {
+        setResponseStatus(options?.redirectCode || 302);
+        return to;
+      }
       const redirectLocation = isExternal ? toPath : joinURL(useRuntimeConfig().app.baseURL, router.resolve(to).fullPath || "/");
       return dtwoApp.callHook("app:redirected").then(() => sendRedirect(dtwoApp.ssrContext.event, redirectLocation, options?.redirectCode || 302));
     }

package/dist/app/composables/ssr.d.ts

@@ -1,5 +1,5 @@
 import type { H3Event } from 'h3';
-import { DtwoApp } from '../dtwo';
+import type { DtwoApp } from '../dtwo';
 export declare function useRequestHeaders<K extends string = string>(include: K[]): Record<Lowercase<K>, string | undefined>;
 export declare function useRequestHeaders(): Readonly<Record<string, string | undefined>>;
 export declare function useRequestEvent(dtwoApp?: DtwoApp): H3Event;

package/dist/app/config.mjs

@@ -17,6 +17,7 @@ function deepAssign(obj, newObj) {
   for (const key in newObj) {
     const val = newObj[key];
     if (val !== null && typeof val === "object") {
+      obj[key] = obj[key] || {};
       deepAssign(obj[key], val);
     } else {
       obj[key] = val;

package/dist/app/dtwo.d.ts

@@ -1,9 +1,9 @@
-import { Ref } from 'kdu';
-import type { App, onErrorCaptured, KNode } from 'kdu';
-import { Hookable } from 'hookable';
+import type { App, onErrorCaptured, KNode, Ref } from 'kdu';
+import type { Hookable } from 'hookable';
 import type { RuntimeConfig, AppConfigInput } from '@dtwo/schema';
 import type { SSRContext } from 'kdu-bundle-renderer/runtime';
 import type { H3Event } from 'h3';
+import type { DtwoIslandContext } from '../core/runtime/hole/renderer';
 type DtwoMeta = {
     htmlAttrs?: string;
     headAttrs?: string;
@@ -46,6 +46,7 @@ export interface DtwoSSRContext extends SSRContext {
     payload: _DtwoApp['payload'];
     teleports?: Record<string, string>;
     renderMeta?: () => Promise<DtwoMeta> | DtwoMeta;
+    islandContext?: DtwoIslandContext;
 }
 interface _DtwoApp {
     kduApp: App<Element>;
@@ -112,7 +113,7 @@ export declare function isDtwoPlugin(plugin: unknown): boolean;
  * @param dtwo A Dtwo instance
  * @param setup The function to call
  */
-export declare function callWithDtwo<T extends (...args: any[]) => any>(dtwo: DtwoApp | _DtwoApp, setup: T, args?: Parameters<T>): any;
+export declare function callWithDtwo<T extends (...args: any[]) => any>(dtwo: DtwoApp | _DtwoApp, setup: T, args?: Parameters<T>): ReturnType<T> | Promise<ReturnType<T>>;
 /**
  * Returns the current Dtwo instance.
  */

package/dist/app/plugins/cross-origin-prefetch.client.mjs

@@ -3,26 +3,31 @@ import { parseURL } from "ufo";
 import { defineDtwoPlugin, useHead } from "#app";
 export default defineDtwoPlugin((dtwoApp) => {
   const externalURLs = ref(/* @__PURE__ */ new Set());
-  useHead({
-    script: [
-      () => ({
-        type: "speculationrules",
-        innerHTML: JSON.stringify({
-          prefetch: [
-            {
-              source: "list",
-              urls: [...externalURLs.value],
-              requires: ["anonymous-client-ip-when-cross-origin"]
-            }
-          ]
-        })
+  function generateRules() {
+    return {
+      type: "speculationrules",
+      key: "speculationrules",
+      innerHTML: JSON.stringify({
+        prefetch: [
+          {
+            source: "list",
+            urls: [...externalURLs.value],
+            requires: ["anonymous-client-ip-when-cross-origin"]
+          }
+        ]
       })
-    ]
+    };
+  }
+  const head = useHead({
+    script: [generateRules()]
   });
   dtwoApp.hook("link:prefetch", (url) => {
     const { protocol } = parseURL(url);
     if (protocol && ["http:", "https:"].includes(protocol)) {
       externalURLs.value.add(url);
+      head?.patch({
+        script: [generateRules()]
+      });
     }
   });
 });

package/dist/app/plugins/router.mjs

@@ -1,7 +1,7 @@
-import { reactive, h } from "kdu";
+import { reactive, h, isReadonly } from "kdu";
 import { parseURL, stringifyParsedURL, parseQuery, stringifyQuery, withoutBase, isEqual, joinURL } from "ufo";
 import { createError } from "h3";
-import { defineDtwoPlugin, clearError, navigateTo, showError, useRuntimeConfig, useState } from "../index.mjs";
+import { defineDtwoPlugin, clearError, navigateTo, showError, useRuntimeConfig, useState, useRequestEvent } from "../index.mjs";
 import { callWithDtwo } from "../dtwo.mjs";
 import { globalMiddleware } from "#build/middleware";
 function getRouteFromPath(fullPath) {
@@ -18,6 +18,7 @@ function getRouteFromPath(fullPath) {
     fullPath,
     query: parseQuery(url.search),
     hash: url.hash,
+    // stub properties for compat with kdu-router
     params: {},
     name: void 0,
     matched: [],
@@ -78,17 +79,21 @@ export default defineDtwoPlugin((dtwoApp) => {
   const router = {
     currentRoute: route,
     isReady: () => Promise.resolve(),
+    // These options provide a similar API to kdu-router but have no effect
     options: {},
     install: () => Promise.resolve(),
+    // Navigation
     push: (url) => handleNavigation(url, false),
     replace: (url) => handleNavigation(url, true),
     back: () => window.history.go(-1),
     go: (delta) => window.history.go(delta),
     forward: () => window.history.go(1),
+    // Guards
     beforeResolve: (guard) => registerHook("resolve:before", guard),
     beforeEach: (guard) => registerHook("navigate:before", guard),
     afterEach: (guard) => registerHook("navigate:after", guard),
     onError: (handler) => registerHook("error", handler),
+    // Routes
     resolve: getRouteFromPath,
     addRoute: (parentName, route2) => {
       routes.push(route2);
@@ -108,6 +113,7 @@ export default defineDtwoPlugin((dtwoApp) => {
       to: String,
       custom: Boolean,
       replace: Boolean,
+      // Not implemented
       activeClass: String,
       exactActiveClass: String,
       ariaCurrentValue: String
@@ -138,8 +144,8 @@ export default defineDtwoPlugin((dtwoApp) => {
   dtwoApp.hooks.hookOnce("app:created", async () => {
     router.beforeEach(async (to, from) => {
       to.meta = reactive(to.meta || {});
-      if (dtwoApp.isHydrating) {
-        to.meta.layout = initialLayout.value ?? to.meta.layout;
+      if (dtwoApp.isHydrating && initialLayout.value && !isReadonly(to.meta.layout)) {
+        to.meta.layout = initialLayout.value;
       }
       dtwoApp._processingMiddleware = true;
       const middlewareEntries = /* @__PURE__ */ new Set([...globalMiddleware, ...dtwoApp._middleware.global]);
@@ -164,7 +170,9 @@ export default defineDtwoPlugin((dtwoApp) => {
     });
     await router.replace(initialURL);
     if (!isEqual(route.fullPath, initialURL)) {
-      await callWithDtwo(dtwoApp, navigateTo, [route.fullPath]);
+      const event = await callWithDtwo(dtwoApp, useRequestEvent);
+      const options = { redirectCode: event.node.res.statusCode !== 200 ? event.node.res.statusCode || 302 : 302 };
+      await callWithDtwo(dtwoApp, navigateTo, [route.fullPath, options]);
     }
   });
   return {

package/dist/app/types/augments.d.ts

@@ -1,4 +1,4 @@
-import { DtwoApp } from '../dtwo'
+import type { DtwoApp } from '../dtwo'
 
 declare global {
   namespace NodeJS {

package/dist/components/runtime/server-component.d.ts

@@ -0,0 +1,3 @@
+export declare const createServerComponent: (name: string) => import("kdu").DefineComponent<{}, () => import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<import("kdu").ExtractPropTypes<{}>>, {}>;

package/dist/components/runtime/server-component.mjs

@@ -0,0 +1,87 @@
+import { defineComponent, createStaticKNode, computed, h, watch } from "kdu";
+import { debounce } from "perfect-debounce";
+import { hash } from "ohash";
+import { appendHeader } from "h3";
+import { useAsyncData, useHead, useDtwoApp, useRequestEvent } from "#app";
+const pKey = "_islandPromises";
+export const createServerComponent = (name) => {
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    setup(_props, { attrs }) {
+      return () => h(DtwoServerComponent, {
+        name,
+        props: attrs
+      });
+    }
+  });
+};
+const DtwoServerComponent = defineComponent({
+  name: "DtwoServerComponent",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => void 0
+    },
+    context: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  async setup(props) {
+    const dtwoApp = useDtwoApp();
+    const hashId = computed(() => hash([props.name, props.props, props.context]));
+    const event = useRequestEvent();
+    function _fetchComponent() {
+      const url = `/__dtwo_island/${props.name}:${hashId.value}`;
+      if (process.server && process.env.prerender) {
+        appendHeader(event, "x-hole-prerender", url);
+      }
+      return $fetch(url, {
+        params: {
+          ...props.context,
+          props: props.props ? JSON.stringify(props.props) : void 0
+        }
+      });
+    }
+    const res = useAsyncData(
+      `${props.name}:${hashId.value}`,
+      async () => {
+        dtwoApp[pKey] = dtwoApp[pKey] || {};
+        if (!dtwoApp[pKey][hashId.value]) {
+          dtwoApp[pKey][hashId.value] = _fetchComponent().finally(() => {
+            delete dtwoApp[pKey][hashId.value];
+          });
+        }
+        const res2 = await dtwoApp[pKey][hashId.value];
+        return {
+          html: res2.html,
+          head: {
+            link: res2.head.link,
+            style: res2.head.style
+          }
+        };
+      },
+      {
+        immediate: process.server || !dtwoApp.isHydrating,
+        default: () => ({
+          html: "",
+          head: {
+            link: [],
+            style: []
+          }
+        })
+      }
+    );
+    useHead(() => res.data.value.head);
+    if (process.client) {
+      watch(props, debounce(() => res.execute(), 100));
+    }
+    await res;
+    return () => createStaticKNode(res.data.value.html, 1);
+  }
+});

package/dist/core/runtime/hole/renderer.d.ts

@@ -1,4 +1,5 @@
 export interface DtwoRenderHTMLContext {
+    island?: boolean;
     htmlAttrs: string[];
     head: string[];
     bodyAttrs: string[];
@@ -6,6 +7,24 @@ export interface DtwoRenderHTMLContext {
     body: string[];
     bodyAppend: string[];
 }
+export interface DtwoIslandContext {
+    id?: string;
+    name: string;
+    props?: Record<string, any>;
+    url?: string;
+}
+export interface DtwoIslandResponse {
+    id?: string;
+    html: string;
+    state: Record<string, any>;
+    head: {
+        link: (Record<string, string>)[];
+        style: ({
+            innerHTML: string;
+            key: string;
+        })[];
+    };
+}
 export interface DtwoRenderResponse {
     body: string;
     statusCode: number;

package/dist/core/runtime/hole/renderer.mjs

@@ -1,9 +1,11 @@
 import { createRenderer, renderResourceHeaders } from "kdu-bundle-renderer/runtime";
-import { appendHeader, createError, getQuery, writeEarlyHints } from "h3";
+import { appendHeader, getQuery, writeEarlyHints, readBody, createError } from "h3";
 import devalue from "@d2js/devalue";
+import destr from "destr";
 import { joinURL } from "ufo";
 import { renderToString as _renderToString } from "kdu/server-renderer";
 import { useRuntimeConfig, useHoleApp, defineRenderHandler, getRouteRules } from "#internal/hole";
+import { hash } from "ohash";
 import { appRootId, appRootTag } from "#internal/dtwo.config.mjs";
 import { buildAssetsURL, publicAssetsURL } from "#paths";
 globalThis.__buildAssetsURL = buildAssetsURL;
@@ -65,15 +67,30 @@ const getSPARenderer = lazyCachedFunction(async () => {
     renderToString
   };
 });
+async function getIslandContext(event) {
+  const url = event.node.req.url?.substring("/__dtwo_island".length + 1) || "";
+  const [componentName, hashId] = url.split("?")[0].split(":");
+  const context = event.node.req.method === "GET" ? getQuery(event) : await readBody(event);
+  const ctx = {
+    url: "/",
+    ...context,
+    id: hashId,
+    name: componentName,
+    props: destr(context.props) || {}
+  };
+  return ctx;
+}
 const PAYLOAD_CACHE = process.env.DTWO_PAYLOAD_EXTRACTION && process.env.prerender ? /* @__PURE__ */ new Map() : null;
 const PAYLOAD_URL_RE = /\/_payload(\.[a-zA-Z0-9]+)?.js(\?.*)?$/;
 const PRERENDER_NO_SSR_ROUTES = /* @__PURE__ */ new Set(["/index.html", "/200.html", "/404.html"]);
 export default defineRenderHandler(async (event) => {
+  const holeApp = useHoleApp();
   const ssrError = event.node.req.url?.startsWith("/__dtwo_error") ? getQuery(event) : null;
   if (ssrError && event.node.req.socket.readyState !== "readOnly") {
     throw createError("Cannot directly render error page!");
   }
-  let url = ssrError?.url || event.node.req.url;
+  const islandContext = process.env.DTWO_COMPONENT_ISLANDS && event.node.req.url?.startsWith("/__dtwo_island") ? await getIslandContext(event) : void 0;
+  let url = ssrError?.url || islandContext?.url || event.node.req.url;
   const isRenderingPayload = PAYLOAD_URL_RE.test(url);
   if (isRenderingPayload) {
     url = url.substring(0, url.lastIndexOf("/")) || "/";
@@ -90,7 +107,9 @@ export default defineRenderHandler(async (event) => {
     noSSR: !!process.env.DTWO_NO_SSR || !!event.node.req.headers["x-dtwo-no-ssr"] || routeOptions.ssr === false || (process.env.prerender ? PRERENDER_NO_SSR_ROUTES.has(url) : false),
     error: !!ssrError,
     dtwo: void 0,
-    payload: ssrError ? { error: ssrError } : {}
+    /* DtwoApp */
+    payload: ssrError ? { error: ssrError } : {},
+    islandContext
   };
   const _PAYLOAD_EXTRACTION = process.env.prerender && process.env.DTWO_PAYLOAD_EXTRACTION && !ssrContext.noSSR;
   const payloadURL = _PAYLOAD_EXTRACTION ? joinURL(useRuntimeConfig().app.baseURL, url, "_payload.js") : void 0;
@@ -123,6 +142,7 @@ export default defineRenderHandler(async (event) => {
   const renderedMeta = await ssrContext.renderMeta?.() ?? {};
   const inlinedStyles = process.env.DTWO_INLINE_STYLES ? await renderInlineStyles(ssrContext.modules ?? ssrContext._registeredComponents ?? []) : "";
   const htmlContext = {
+    island: Boolean(islandContext),
     htmlAttrs: normalizeChunks([renderedMeta.htmlAttrs]),
     head: normalizeChunks([
       renderedMeta.headTags,
@@ -137,24 +157,52 @@ export default defineRenderHandler(async (event) => {
       renderedMeta.bodyScriptsPrepend,
       ssrContext.teleports?.body
     ]),
-    body: [
-      _rendered.html
-    ],
+    body: process.env.DTWO_COMPONENT_ISLANDS && islandContext ? [] : [_rendered.html],
     bodyAppend: normalizeChunks([
       process.env.DTWO_NO_SCRIPTS ? void 0 : _PAYLOAD_EXTRACTION ? `<script type="module">import p from "${payloadURL}";window.__DTWO__={...p,...(${devalue(splitPayload(ssrContext).initial)})}<\/script>` : `<script>window.__DTWO__=${devalue(ssrContext.payload)}<\/script>`,
       _rendered.renderScripts(),
+      // Note: bodyScripts may contain tags other than <script>
       renderedMeta.bodyScripts
     ])
   };
-  const holeApp = useHoleApp();
   await holeApp.hooks.callHook("render:html", htmlContext, { event });
+  if (process.env.DTWO_COMPONENT_ISLANDS && islandContext) {
+    const _tags = htmlContext.head.flatMap((head2) => extractHTMLTags(head2));
+    const head = {
+      link: _tags.filter((tag) => tag.tagName === "link" && tag.attrs.rel === "stylesheet" && tag.attrs.href.includes("scoped") && !tag.attrs.href.includes("pages/")).map((tag) => ({
+        key: "island-link-" + hash(tag.attrs.href),
+        ...tag.attrs
+      })),
+      style: _tags.filter((tag) => tag.tagName === "style" && tag.innerHTML).map((tag) => ({
+        key: "island-style-" + hash(tag.innerHTML),
+        innerHTML: tag.innerHTML
+      }))
+    };
+    const islandResponse = {
+      id: islandContext.id,
+      head,
+      html: ssrContext.teleports["dtwo-island"].replace(/<!--.*-->/g, ""),
+      state: ssrContext.payload.state
+    };
+    await holeApp.hooks.callHook("render:island", islandResponse, { event, islandContext });
+    const response2 = {
+      body: JSON.stringify(islandResponse, null, 2),
+      statusCode: event.node.res.statusCode,
+      statusMessage: event.node.res.statusMessage,
+      headers: {
+        "content-type": "application/json;charset=utf-8",
+        "x-powered-by": "Dtwo"
+      }
+    };
+    return response2;
+  }
   const response = {
     body: renderHTMLDocument(htmlContext),
     statusCode: event.node.res.statusCode,
     statusMessage: event.node.res.statusMessage,
     headers: {
-      "Content-Type": "text/html;charset=UTF-8",
-      "X-Powered-By": "Dtwo"
+      "content-type": "text/html;charset=utf-8",
+      "x-powered-by": "Dtwo"
     }
   };
   return response;
@@ -187,6 +235,20 @@ function renderHTMLDocument(html) {
 <body ${joinAttrs(html.bodyAttrs)}>${joinTags(html.bodyPrepend)}${joinTags(html.body)}${joinTags(html.bodyAppend)}</body>
 </html>`;
 }
+const HTML_TAG_RE = /<(?<tag>[a-z]+)(?<rawAttrs> [^>]*)?>(?:(?<innerHTML>[\s\S]*?)<\/\k<tag>)?/g;
+const HTML_TAG_ATTR_RE = /(?<name>[a-z]+)="(?<value>[^"]*)"/g;
+function extractHTMLTags(html) {
+  const tags = [];
+  for (const tagMatch of html.matchAll(HTML_TAG_RE)) {
+    const attrs = {};
+    for (const attrMatch of tagMatch.groups.rawAttrs?.matchAll(HTML_TAG_ATTR_RE) || []) {
+      attrs[attrMatch.groups.name] = attrMatch.groups.value;
+    }
+    const innerHTML = tagMatch.groups.innerHTML || "";
+    tags.push({ tagName: tagMatch.groups.tag, attrs, innerHTML });
+  }
+  return tags;
+}
 async function renderInlineStyles(usedModules) {
   const styleMap = await getSSRStyles();
   const inlinedStyles = /* @__PURE__ */ new Set();

package/dist/head/runtime/components.d.ts

@@ -10,7 +10,7 @@ export declare const NoScript: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -58,7 +58,7 @@ export declare const NoScript: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -134,7 +134,7 @@ export declare const Link: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -204,7 +204,7 @@ export declare const Link: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -259,7 +259,7 @@ export declare const Base: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -307,7 +307,7 @@ export declare const Base: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -373,7 +373,7 @@ export declare const Meta: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -425,7 +425,7 @@ export declare const Meta: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -488,7 +488,7 @@ export declare const Style: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -543,7 +543,7 @@ export declare const Style: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -601,7 +601,7 @@ export declare const Html: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -651,7 +651,7 @@ export declare const Html: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -703,7 +703,7 @@ export declare const Body: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;
@@ -750,7 +750,7 @@ export declare const Body: import("kdu").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    class: StringConstructor;
+    class: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     contenteditable: {
         type: BooleanConstructor;
         default: undefined;