dtwo 2.17.0 → 3.0.0-rc.14

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-present Dtwo Team
+Copyright (c) 2022 - Dtwo Project
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,42 +1,3 @@
-# Dtwo
+# Dtwo 3
 
-> Build your next Kdu(2) application with confidence using Dtwo: a framework making web development simple and powerful.
-
-## Features
-
-- Automatic transpilation and bundling (with webpack and babel)
-- Hot code reloading
-- Server-side rendering OR Single Page App OR Static Generated, you choose :fire:
-- Static file serving. `./static/` is mapped to `/`
-- Configurable with a `dtwo.config.js` file
-- Custom layouts with the `layouts/` directory
-- Middleware
-- Code splitting for every `pages/`
-- Loading just the critical CSS (page-level)
-
-Learn more at <https://dtwojs-v2.web.app>.
-
-## Getting started
-
-```sh
-$ npx create-dtwo-app <project-name>
-```
-
-It's as simple as that!
-
-Learn more at https://dtwojs-2.web.app/guide/installation
-
-## Production deployment
-
-To deploy, instead of running dtwo, you probably want to build ahead of time. Therefore, building and starting are separate commands:
-
-```bash
-dtwo build
-dtwo start
-```
-
-Learn more at https://dtwojs-v2.web.app/guide/commands#production-deployment
-
-## License
-
-[MIT](./LICENSE)
+> The core of Dtwo 3

package/app.d.ts

@@ -0,0 +1 @@
+export * from './dist/app'

package/bin/dtwo.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '@dtwo/cli/cli'

package/config.cjs

@@ -0,0 +1,7 @@
+function defineDtwoConfig (config) {
+  return config
+}
+
+module.exports = {
+  defineDtwoConfig
+}

package/config.d.ts

@@ -0,0 +1,4 @@
+import { DtwoConfig } from '@dtwo/schema'
+export { DtwoConfig } from '@dtwo/schema'
+
+export declare function defineDtwoConfig(config: DtwoConfig): DtwoConfig

package/config.mjs

@@ -0,0 +1,5 @@
+function defineDtwoConfig (config) {
+  return config
+}
+
+export { defineDtwoConfig }

package/dist/app/compat/capi.d.ts

@@ -0,0 +1,4 @@
+export * from 'kdu';
+export declare const install: () => void;
+export declare function set(target: any, key: string | number | symbol, val: any): any;
+export declare function del(target: any, key: string | number | symbol): void;

package/dist/app/compat/capi.mjs

@@ -0,0 +1,19 @@
+export * from "kdu";
+export const install = () => {
+};
+export function set(target, key, val) {
+  if (Array.isArray(target)) {
+    target.length = Math.max(target.length, key);
+    target.splice(key, 1, val);
+    return val;
+  }
+  target[key] = val;
+  return val;
+}
+export function del(target, key) {
+  if (Array.isArray(target)) {
+    target.splice(key, 1);
+    return;
+  }
+  delete target[key];
+}

package/dist/app/compat/kdu-demi.d.ts

@@ -0,0 +1,4 @@
+export * from './capi';
+export declare const Kdu2: undefined;
+export declare const isKdu2 = false;
+export declare const isKdu3 = true;

package/dist/app/compat/kdu-demi.mjs

@@ -0,0 +1,4 @@
+export * from "./capi.mjs";
+export const Kdu2 = void 0;
+export const isKdu2 = false;
+export const isKdu3 = true;

package/dist/app/components/client-only.d.mts

@@ -0,0 +1,22 @@
+export function createClientOnly(component: any): any;
+declare const _default: import("kdu").DefineComponent<Readonly<{
+    fallback?: any;
+    placeholder?: any;
+    placeholderTag?: any;
+    fallbackTag?: any;
+}>, (props: any) => import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
+    [key: string]: any;
+}>[] | import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
+    [key: string]: any;
+}> | undefined, any, {}, {}, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<import("kdu").ExtractPropTypes<Readonly<{
+    fallback?: any;
+    placeholder?: any;
+    placeholderTag?: any;
+    fallbackTag?: any;
+}>>>, {
+    readonly fallback?: any;
+    readonly placeholder?: any;
+    readonly placeholderTag?: any;
+    readonly fallbackTag?: any;
+}>;
+export default _default;

package/dist/app/components/client-only.mjs

@@ -0,0 +1,75 @@
+import { ref, onMounted, defineComponent, createElementBlock, h, createElementKNode } from 'kdu'
+
+export default defineComponent({
+  name: 'ClientOnly',
+  inheritAttrs: false,
+  // eslint-disable-next-line kdu/require-prop-types
+  props: ['fallback', 'placeholder', 'placeholderTag', 'fallbackTag'],
+  setup (_, { slots, attrs }) {
+    const mounted = ref(false)
+    onMounted(() => { mounted.value = true })
+    return (props) => {
+      if (mounted.value) { return slots.default?.() }
+      const slot = slots.fallback || slots.placeholder
+      if (slot) { return slot() }
+      const fallbackStr = props.fallback || props.placeholder || ''
+      const fallbackTag = props.fallbackTag || props.placeholderTag || 'span'
+      return createElementBlock(fallbackTag, attrs, fallbackStr)
+    }
+  }
+})
+
+const cache = new WeakMap()
+
+export function createClientOnly (component) {
+  if (cache.has(component)) {
+    return cache.get(component)
+  }
+
+  const clone = { ...component }
+
+  if (clone.render) {
+    // override the component render (non script setup component)
+    clone.render = (ctx, ...args) => {
+      if (ctx.mounted$) {
+        const res = component.render(ctx, ...args)
+        return (res.children === null || typeof res.children === 'string')
+          ? createElementKNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+          : h(res)
+      } else {
+        return h('div', ctx.$attrs ?? ctx._.attrs)
+      }
+    }
+  } else if (clone.template) {
+    // handle runtime-compiler template
+    clone.template = `
+      <template k-if="mounted$">${component.template}</template>
+      <template k-else><div></div></template>
+    `
+  }
+
+  clone.setup = (props, ctx) => {
+    const mounted$ = ref(false)
+    onMounted(() => { mounted$.value = true })
+
+    return Promise.resolve(component.setup?.(props, ctx) || {})
+      .then((setupState) => {
+        return typeof setupState !== 'function'
+          ? { ...setupState, mounted$ }
+          : (...args) => {
+              if (mounted$.value) {
+                const res = setupState(...args)
+                return (res.children === null || typeof res.children === 'string')
+                  ? createElementKNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+                  : h(res)
+              } else {
+                return h('div', ctx.attrs)
+              }
+            }
+      })
+  }
+
+  cache.set(component, clone)
+
+  return clone
+}

package/dist/app/components/dev-only.d.mts

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

package/dist/app/components/dev-only.mjs

@@ -0,0 +1,11 @@
+import { defineComponent } from 'kdu'
+
+export default defineComponent({
+  name: 'DevOnly',
+  setup (_, props) {
+    if (process.dev) {
+      return () => props.slots.default?.()
+    }
+    return () => null
+  }
+})

package/dist/app/components/dtwo-error-boundary.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("kdu").DefineComponent<{}, () => import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {
+    error(_error: unknown): boolean;
+}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<import("kdu").ExtractPropTypes<{}>> & {
+    onError?: ((_error: unknown) => any) | undefined;
+}, {}>;
+export default _default;

package/dist/app/components/dtwo-error-boundary.mjs

@@ -0,0 +1,21 @@
+import { defineComponent, ref, onErrorCaptured } from "kdu";
+import { useDtwoApp } from "#app";
+export default defineComponent({
+  emits: {
+    error(_error) {
+      return true;
+    }
+  },
+  setup(_props, { slots, emit }) {
+    const error = ref(null);
+    const dtwoApp = useDtwoApp();
+    onErrorCaptured((err) => {
+      if (process.client && !dtwoApp.isHydrating) {
+        emit("error", err);
+        error.value = err;
+        return false;
+      }
+    });
+    return () => error.value ? slots.error?.({ error }) : slots.default?.();
+  }
+});

package/dist/app/components/dtwo-error-page.kdu

@@ -0,0 +1,46 @@
+<template>
+  <ErrorTemplate k-bind="{ statusCode, statusMessage, description, stack }" />
+</template>
+
+<script setup>
+import { defineAsyncComponent } from 'kdu'
+
+// Deliberately prevent reactive update when error is cleared
+// eslint-disable-next-line kdu/no-setup-props-destructure
+const { error } = defineProps({
+  error: Object
+})
+
+// TODO: extract to a separate utility
+const stacktrace = (error.stack || '')
+  .split('\n')
+  .splice(1)
+  .map((line) => {
+    const text = line
+      .replace('webpack:/', '')
+      .replace('.kdu', '.js') // TODO: Support sourcemap
+      .trim()
+    return {
+      text,
+      internal: (line.includes('node_modules') && !line.includes('.cache')) ||
+        line.includes('internal') ||
+        line.includes('new Promise')
+    }
+  }).map(i => `<span class="stack${i.internal ? ' internal' : ''}">${i.text}</span>`).join('\n')
+
+// Error page props
+const statusCode = Number(error.statusCode || 500)
+const is404 = statusCode === 404
+
+const statusMessage = error.statusMessage ?? (is404 ? 'Page Not Found' : 'Internal Server Error')
+const description = error.message || error.toString()
+const stack = process.dev && !is404 ? error.description || `<pre>${stacktrace}</pre>` : undefined
+
+// TODO: Investigate side-effect issue with imports
+const _Error404 = defineAsyncComponent(() => import('@dtwo/ui-templates/templates/error-404.kdu').then(r => r.default || r))
+const _Error = process.dev
+  ? defineAsyncComponent(() => import('@dtwo/ui-templates/templates/error-dev.kdu').then(r => r.default || r))
+  : defineAsyncComponent(() => import('@dtwo/ui-templates/templates/error-500.kdu').then(r => r.default || r))
+
+const ErrorTemplate = is404 ? _Error404 : _Error
+</script>

package/dist/app/components/dtwo-link.d.ts

@@ -0,0 +1,33 @@
+import { DefineComponent } from 'kdu';
+import type { RouteLocationRaw } from 'kdu-router';
+export type DtwoLinkOptions = {
+    componentName?: string;
+    externalRelAttribute?: string | null;
+    activeClass?: string;
+    exactActiveClass?: string;
+    prefetchedClass?: string;
+};
+export type DtwoLinkProps = {
+    to?: string | RouteLocationRaw;
+    href?: string | RouteLocationRaw;
+    external?: boolean;
+    replace?: boolean;
+    custom?: boolean;
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    rel?: string | null;
+    noRel?: boolean;
+    prefetch?: boolean;
+    noPrefetch?: boolean;
+    activeClass?: string;
+    exactActiveClass?: string;
+    ariaCurrentValue?: string;
+};
+export declare function defineDtwoLink(options: DtwoLinkOptions): DefineComponent<DtwoLinkProps, {}, {}, import("kdu").ComputedOptions, import("kdu").MethodOptions, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<DtwoLinkProps>, {
+    to?: any;
+    href?: any;
+}>;
+declare const _default: DefineComponent<DtwoLinkProps, {}, {}, import("kdu").ComputedOptions, import("kdu").MethodOptions, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<DtwoLinkProps>, {
+    to?: any;
+    href?: any;
+}>;
+export default _default;

package/dist/app/components/dtwo-link.mjs

@@ -0,0 +1,248 @@
+import { defineComponent, h, ref, resolveComponent, computed, onMounted, onBeforeUnmount } from "kdu";
+import { hasProtocol } from "ufo";
+import { preloadRouteComponents } from "../composables/preload.mjs";
+import { navigateTo, useRouter } from "../composables/router.mjs";
+import { useDtwoApp } from "../dtwo.mjs";
+const firstNonUndefined = (...args) => args.find((arg) => arg !== void 0);
+const DEFAULT_EXTERNAL_REL_ATTRIBUTE = "noopener noreferrer";
+const requestIdleCallback = process.server ? void 0 : globalThis.requestIdleCallback || ((cb) => {
+  const start = Date.now();
+  const idleDeadline = {
+    didTimeout: false,
+    timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
+  };
+  return setTimeout(() => {
+    cb(idleDeadline);
+  }, 1);
+});
+const cancelIdleCallback = process.server ? null : globalThis.cancelIdleCallback || ((id) => {
+  clearTimeout(id);
+});
+export function defineDtwoLink(options) {
+  const componentName = options.componentName || "DtwoLink";
+  const checkPropConflicts = (props, main, sub) => {
+    if (process.dev && props[main] !== void 0 && props[sub] !== void 0) {
+      console.warn(`[${componentName}] \`${main}\` and \`${sub}\` cannot be used together. \`${sub}\` will be ignored.`);
+    }
+  };
+  return defineComponent({
+    name: componentName,
+    props: {
+      to: {
+        type: [String, Object],
+        default: void 0,
+        required: false
+      },
+      href: {
+        type: [String, Object],
+        default: void 0,
+        required: false
+      },
+      target: {
+        type: String,
+        default: void 0,
+        required: false
+      },
+      rel: {
+        type: String,
+        default: void 0,
+        required: false
+      },
+      noRel: {
+        type: Boolean,
+        default: void 0,
+        required: false
+      },
+      prefetch: {
+        type: Boolean,
+        default: void 0,
+        required: false
+      },
+      noPrefetch: {
+        type: Boolean,
+        default: void 0,
+        required: false
+      },
+      activeClass: {
+        type: String,
+        default: void 0,
+        required: false
+      },
+      exactActiveClass: {
+        type: String,
+        default: void 0,
+        required: false
+      },
+      prefetchedClass: {
+        type: String,
+        default: void 0,
+        required: false
+      },
+      replace: {
+        type: Boolean,
+        default: void 0,
+        required: false
+      },
+      ariaCurrentValue: {
+        type: String,
+        default: void 0,
+        required: false
+      },
+      external: {
+        type: Boolean,
+        default: void 0,
+        required: false
+      },
+      custom: {
+        type: Boolean,
+        default: void 0,
+        required: false
+      }
+    },
+    setup(props, { slots }) {
+      const router = useRouter();
+      const to = computed(() => {
+        checkPropConflicts(props, "to", "href");
+        return props.to || props.href || "";
+      });
+      const isExternal = computed(() => {
+        if (props.external) {
+          return true;
+        }
+        if (props.target && props.target !== "_self") {
+          return true;
+        }
+        if (typeof to.value === "object") {
+          return false;
+        }
+        return to.value === "" || hasProtocol(to.value, true);
+      });
+      const prefetched = ref(false);
+      const el = process.server ? void 0 : ref(null);
+      if (process.client) {
+        checkPropConflicts(props, "prefetch", "noPrefetch");
+        const shouldPrefetch = props.prefetch !== false && props.noPrefetch !== true && typeof to.value === "string" && props.target !== "_blank" && !isSlowConnection();
+        if (shouldPrefetch) {
+          const dtwoApp = useDtwoApp();
+          const observer = useObserver();
+          let idleId;
+          let unobserve = null;
+          onMounted(() => {
+            idleId = requestIdleCallback(() => {
+              if (el?.value?.tagName) {
+                unobserve = observer.observe(el.value, async () => {
+                  unobserve?.();
+                  unobserve = null;
+                  await Promise.all([
+                    dtwoApp.hooks.callHook("link:prefetch", to.value).catch(() => {
+                    }),
+                    !isExternal.value && preloadRouteComponents(to.value, router).catch(() => {
+                    })
+                  ]);
+                  prefetched.value = true;
+                });
+              }
+            });
+          });
+          onBeforeUnmount(() => {
+            if (idleId) {
+              cancelIdleCallback(idleId);
+            }
+            unobserve?.();
+            unobserve = null;
+          });
+        }
+      }
+      return () => {
+        if (!isExternal.value) {
+          return h(
+            resolveComponent("RouterLink"),
+            {
+              ref: process.server ? void 0 : (ref2) => {
+                el.value = ref2?.$el;
+              },
+              to: to.value,
+              ...prefetched.value && !props.custom ? { class: props.prefetchedClass || options.prefetchedClass } : {},
+              activeClass: props.activeClass || options.activeClass,
+              exactActiveClass: props.exactActiveClass || options.exactActiveClass,
+              replace: props.replace,
+              ariaCurrentValue: props.ariaCurrentValue,
+              custom: props.custom
+            },
+            slots.default
+          );
+        }
+        const href = typeof to.value === "object" ? router.resolve(to.value)?.href ?? null : to.value || null;
+        const target = props.target || null;
+        checkPropConflicts(props, "noRel", "rel");
+        const rel = props.noRel ? null : firstNonUndefined(props.rel, options.externalRelAttribute, href ? DEFAULT_EXTERNAL_REL_ATTRIBUTE : "") || null;
+        const navigate = () => navigateTo(href, { replace: props.replace });
+        if (props.custom) {
+          if (!slots.default) {
+            return null;
+          }
+          return slots.default({
+            href,
+            navigate,
+            route: router.resolve(href),
+            rel,
+            target,
+            isExternal: isExternal.value,
+            isActive: false,
+            isExactActive: false
+          });
+        }
+        return h("a", { ref: el, href, rel, target }, slots.default?.());
+      };
+    }
+  });
+}
+export default defineDtwoLink({ componentName: "DtwoLink" });
+function useObserver() {
+  if (process.server) {
+    return;
+  }
+  const dtwoApp = useDtwoApp();
+  if (dtwoApp._observer) {
+    return dtwoApp._observer;
+  }
+  let observer = null;
+  const callbacks = /* @__PURE__ */ new Map();
+  const observe = (element, callback) => {
+    if (!observer) {
+      observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          const callback2 = callbacks.get(entry.target);
+          const isVisible = entry.isIntersecting || entry.intersectionRatio > 0;
+          if (isVisible && callback2) {
+            callback2();
+          }
+        }
+      });
+    }
+    callbacks.set(element, callback);
+    observer.observe(element);
+    return () => {
+      callbacks.delete(element);
+      observer.unobserve(element);
+      if (callbacks.size === 0) {
+        observer.disconnect();
+        observer = null;
+      }
+    };
+  };
+  const _observer = dtwoApp._observer = {
+    observe
+  };
+  return _observer;
+}
+function isSlowConnection() {
+  if (process.server) {
+    return;
+  }
+  const cn = navigator.connection;
+  if (cn && (cn.saveData || /2g/.test(cn.effectiveType))) {
+    return true;
+  }
+  return false;
+}

package/dist/app/components/dtwo-loading-indicator.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("kdu").DefineComponent<{
+    throttle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<import("kdu").ExtractPropTypes<{
+    throttle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    duration: number;
+    throttle: number;
+    height: number;
+    color: string;
+}>;
+export default _default;