@lytjs/core-vnode 6.0.0

package/dist/index.mjs

@@ -0,0 +1,577 @@
+import { createVNode, cloneVNode, EMPTY_OBJ } from '@lytjs/vdom';
+export { Comment, Fragment, Text, cloneVNode, createVNode, mergeProps } from '@lytjs/vdom';
+import { createDOMRenderer } from '@lytjs/renderer';
+import { error } from '@lytjs/common-error';
+import { defineComponent as defineComponent$1, getCurrentInstance, createComponentInstance, setupComponent, createComponentPublicInstance, onBeforeUnmount, createAppContext as createAppContext$1, callUnmountedHook } from '@lytjs/component';
+export { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated } from '@lytjs/component';
+import { shallowRef, ref, computed } from '@lytjs/reactivity';
+export { computed, effect, reactive, ref, watch, watchEffect } from '@lytjs/reactivity';
+export { nextTick } from '@lytjs/common-scheduler';
+export { compile } from '@lytjs/compiler';
+
+// src/create-app.ts
+function createAppContext() {
+  return {
+    ...createAppContext$1(),
+    config: {
+      performance: false,
+      globalProperties: {}
+    },
+    renderer: null,
+    _vnode: null,
+    _container: null,
+    _instance: null
+  };
+}
+function createContextConfig(context) {
+  return new Proxy({}, {
+    get(_, key) {
+      if (key === "globalProperties") {
+        return context.config.globalProperties;
+      }
+      return context.config[key];
+    },
+    set(_, key, value) {
+      if (key === "globalProperties") {
+        context.config.globalProperties = value;
+        return true;
+      }
+      context.config[key] = value;
+      return true;
+    },
+    ownKeys() {
+      return Reflect.ownKeys(context.config);
+    },
+    has(_, key) {
+      return key in context.config;
+    },
+    getOwnPropertyDescriptor(_, key) {
+      return Object.getOwnPropertyDescriptor(context.config, key);
+    }
+  });
+}
+function createApp(rootComponent, rootProps = null, _options) {
+  const context = createAppContext();
+  const installedPlugins = /* @__PURE__ */ new Set();
+  let _isUnmounted = false;
+  let _isMounted = false;
+  const app = {
+    config: createContextConfig(context),
+    use(plugin, ...options) {
+      if (installedPlugins.has(plugin)) return app;
+      try {
+        if (typeof plugin === "function") {
+          plugin(app, ...options);
+        } else {
+          plugin.install(app, ...options);
+        }
+        installedPlugins.add(plugin);
+      } catch (err) {
+        error(
+          `Plugin failed to install: ${typeof plugin === "function" ? plugin.name || "anonymous function" : plugin.install?.name || "plugin"}: ${err}`
+        );
+        throw err;
+      }
+      return app;
+    },
+    mount(rootContainer) {
+      if (_isUnmounted) {
+        throw new Error(
+          `[LytJS] App has been unmounted and cannot be remounted. Create a new app instance instead.`
+        );
+      }
+      if (!rootComponent) {
+        return null;
+      }
+      if (context._container) {
+        throw new Error(
+          `[LytJS] App is already mounted. Call app.unmount() first before mounting again.`
+        );
+      }
+      const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
+      if (!container) {
+        throw new Error(
+          `[LytJS] Failed to mount app: cannot find element matching selector "${rootContainer}". Make sure the target element exists in the DOM before calling app.mount().`
+        );
+      }
+      context._container = container;
+      try {
+        const rootVNode = createVNode(rootComponent, rootProps);
+        const instance = createComponentInstance(rootVNode, null);
+        instance.appContext = context;
+        if (context.provides) {
+          const rootProvides = instance.provides;
+          for (const key in context.provides) {
+            if (!(key in rootProvides)) {
+              rootProvides[key] = context.provides[key];
+            }
+          }
+        }
+        setupComponent(instance);
+        rootVNode.component = instance;
+        context._instance = instance;
+        const renderer = createDOMRenderer();
+        context.renderer = renderer;
+        context._vnode = rootVNode;
+        renderer.mount(rootVNode, container);
+        const publicInstance = createComponentPublicInstance(instance);
+        _isMounted = true;
+        return publicInstance;
+      } catch (err) {
+        if (app.errorHandler) {
+          app.errorHandler(err, null, "mount");
+        } else {
+          error(`[LytJS] Failed to mount app: ${err instanceof Error ? err.message : String(err)}`);
+        }
+        throw err;
+      }
+    },
+    unmount() {
+      if (!context.renderer || !context._vnode) return;
+      const instance = context._instance;
+      if (instance) {
+        callUnmountedHook(instance);
+      }
+      context.renderer.unmount(context._vnode);
+      context._vnode = null;
+      _isUnmounted = true;
+      _isMounted = false;
+      context._container = null;
+      for (const plugin of installedPlugins) {
+        if (typeof plugin !== "function" && plugin != null && typeof plugin.cleanup === "function") {
+          try {
+            const cleanup = plugin.cleanup;
+            if (typeof cleanup === "function") cleanup();
+          } catch (err) {
+            error(
+              `Plugin cleanup failed: ${typeof plugin === "object" && plugin !== null && "name" in plugin ? plugin.name : "unknown"}: ${err}`
+            );
+          }
+        }
+      }
+      installedPlugins.clear();
+      context.mixins.length = 0;
+      context.components = {};
+      context.directives = {};
+      context.provides = {};
+      context.config.globalProperties = {};
+      context._instance = null;
+      context.renderer = null;
+    },
+    provide(key, value) {
+      context.provides[key] = value;
+      return app;
+    },
+    inject(key) {
+      return context.provides[key];
+    },
+    component(name, component) {
+      context.components[name] = component;
+      return app;
+    },
+    directive(name, directive) {
+      context.directives[name] = directive;
+      return app;
+    },
+    mixin(mixin) {
+      context.mixins.push(mixin);
+      return app;
+    }
+  };
+  return app;
+}
+function h(type, props, ...children) {
+  if (props == null) {
+    props = EMPTY_OBJ;
+  }
+  const flatChildren = children.length > 1 ? children : children[0];
+  return createVNode(type, props, flatChildren);
+}
+var DEFAULT_ON_ERROR_TIMEOUT = 3e4;
+var defineComponent = defineComponent$1;
+function defineAsyncComponent(source) {
+  if (typeof source === "function") {
+    source = { loader: source };
+  }
+  const { loader, loadingComponent, errorComponent, delay = 200, timeout, onError } = source;
+  const loadedComponent = shallowRef(void 0);
+  const error2 = ref(void 0);
+  const loading = ref(false);
+  let retries = 0;
+  let showLoading = false;
+  let delayTimer = null;
+  let loadingPromise = null;
+  const MAX_RETRIES = 3;
+  const retry = () => {
+    if (retries >= MAX_RETRIES) {
+      error2.value = new Error(
+        `[lytjs/core-vnode] AsyncComponent: max retries (${MAX_RETRIES}) exceeded.`
+      );
+      return;
+    }
+    retries++;
+    loadedComponent.value = void 0;
+    error2.value = void 0;
+    loadingPromise = null;
+    startTimeout();
+    return load();
+  };
+  const load = () => {
+    if (loadingPromise) return loadingPromise;
+    loading.value = true;
+    showLoading = false;
+    if (delayTimer) clearTimeout(delayTimer);
+    delayTimer = setTimeout(() => {
+      showLoading = true;
+    }, delay);
+    return loadingPromise = loader().then((comp2) => {
+      loadedComponent.value = comp2;
+      error2.value = void 0;
+      loading.value = false;
+      loadingPromise = null;
+      if (delayTimer) {
+        clearTimeout(delayTimer);
+        delayTimer = null;
+      }
+      showLoading = false;
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      return comp2;
+    }).catch((err) => {
+      error2.value = err;
+      loading.value = false;
+      if (onError) {
+        return new Promise((resolve, reject) => {
+          let settled = false;
+          const ON_ERROR_TIMEOUT = DEFAULT_ON_ERROR_TIMEOUT;
+          const timer = setTimeout(() => {
+            if (!settled) {
+              settled = true;
+              reject(
+                new Error(
+                  `[lytjs/core-vnode] AsyncComponent: onError callback did not call retry() or reject() within ${ON_ERROR_TIMEOUT / 1e3}s.`
+                )
+              );
+            }
+          }, ON_ERROR_TIMEOUT);
+          onError(
+            err,
+            () => {
+              if (!settled) {
+                settled = true;
+                clearTimeout(timer);
+                const result = retry();
+                if (result) resolve(result);
+              }
+            },
+            (reason) => {
+              if (!settled) {
+                settled = true;
+                clearTimeout(timer);
+                reject(reason ?? err);
+              }
+            },
+            retries
+          );
+        });
+      }
+      return Promise.reject(err);
+    });
+  };
+  let timeoutId = null;
+  const startTimeout = () => {
+    if (timeout == null) return;
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      if (!loadedComponent.value && !error2.value) {
+        error2.value = new Error(`[lytjs/core-vnode] AsyncComponent timed out after ${timeout}ms.`);
+        loading.value = false;
+      }
+    }, timeout);
+  };
+  startTimeout();
+  const comp = {
+    name: "AsyncComponent",
+    setup() {
+      const instance = {
+        resolved: loadedComponent,
+        loading,
+        error: error2,
+        delay,
+        timeout
+      };
+      onBeforeUnmount(() => {
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        if (delayTimer !== null) {
+          clearTimeout(delayTimer);
+          delayTimer = null;
+        }
+      });
+      if (!loadedComponent.value && !error2.value && !loading.value) {
+        load();
+      }
+      return instance;
+    },
+    render() {
+      if (loadedComponent.value) {
+        return h(loadedComponent.value);
+      }
+      if (error2.value && errorComponent) {
+        return h(errorComponent);
+      }
+      if (showLoading && loadingComponent) {
+        return h(loadingComponent);
+      }
+      return null;
+    }
+  };
+  return comp;
+}
+function resolveComponent(name) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    return void 0;
+  }
+  const components = instance.type?.components;
+  if (components && components[name]) {
+    return components[name];
+  }
+  const globalComponents = instance.appContext?.components;
+  if (globalComponents && globalComponents[name]) {
+    return globalComponents[name];
+  }
+  return void 0;
+}
+function resolveDirective(name) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    return void 0;
+  }
+  const directives = instance.type?.directives;
+  if (directives && directives[name]) {
+    return directives[name];
+  }
+  const globalDirectives = instance.appContext?.directives;
+  if (globalDirectives && globalDirectives[name]) {
+    return globalDirectives[name];
+  }
+  return void 0;
+}
+function withDirectives(vnode, directives) {
+  const dirVNode = cloneVNode(vnode);
+  dirVNode._directives = directives.map(([dir, value, arg, modifiers]) => ({
+    dir,
+    value,
+    arg,
+    modifiers: modifiers || {}
+  }));
+  return dirVNode;
+}
+function withMemo(memo, render, cache, index) {
+  if (index < 0 || index >= cache.length) {
+    return render();
+  }
+  const cached = cache[index];
+  if (cached && isMemoSame(cached.memo, memo)) {
+    return cached.result;
+  }
+  const result = render();
+  cache[index] = { memo, result };
+  return result;
+}
+function isMemoSame(prev, next) {
+  if (prev.length !== next.length) return false;
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i] !== next[i]) return false;
+  }
+  return true;
+}
+function useSlots() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    return {};
+  }
+  return instance.slots || {};
+}
+function useAttrs() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    return {};
+  }
+  return instance.attrs || {};
+}
+function useModel(props, key) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    return computed({
+      get() {
+        return void 0;
+      },
+      set() {
+      }
+    });
+  }
+  return computed({
+    get() {
+      return props[key];
+    },
+    set(newValue) {
+      instance.emit(`update:${key}`, newValue);
+    }
+  });
+}
+var _currentShadowRoot = null;
+var _currentHost = null;
+var _currentSlotCallback = null;
+function extractObservedAttributes(propsOptions) {
+  const attributes = [];
+  for (const key in propsOptions) {
+    const attrName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    attributes.push(attrName);
+  }
+  return attributes;
+}
+function attrToProp(attrName) {
+  return attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+function deserializeValue(value, propOptions) {
+  if (value === null) return void 0;
+  const options = propOptions;
+  if (options === true || options === void 0) {
+    return value;
+  }
+  const type = options.type;
+  if (type === Number) {
+    const num = Number(value);
+    return isNaN(num) ? value : num;
+  }
+  if (type === Boolean) {
+    return value !== "false" && value !== "0" && value !== "";
+  }
+  return value;
+}
+function defineCustomElement(componentOptions, options) {
+  const useShadowDOM = options?.shadowRoot !== false;
+  const tagName = options?.name || (componentOptions.name ? componentOptions.name.replace(/([A-Z])/g, "-$1").toLowerCase() : "lyt-component");
+  const css = options?.css || "";
+  const propsOptions = componentOptions.props || {};
+  const observedAttributes = extractObservedAttributes(propsOptions);
+  class LytCustomElement extends HTMLElement {
+    constructor() {
+      super();
+      this._instance = null;
+      this._renderer = null;
+      this._vnode = null;
+      this._slotObserver = null;
+      if (useShadowDOM) {
+        this._root = this.attachShadow({ mode: "open" });
+        if (css) {
+          const style = document.createElement("style");
+          style.textContent = css;
+          this._root.appendChild(style);
+        }
+      } else {
+        this._root = this;
+      }
+      this._appContext = createAppContext$1();
+    }
+    static get observedAttributes() {
+      return observedAttributes;
+    }
+    connectedCallback() {
+      _currentShadowRoot = useShadowDOM ? this._root : null;
+      _currentHost = this;
+      try {
+        const props = {};
+        for (const attr of observedAttributes) {
+          const propKey = attrToProp(attr);
+          const value = this.getAttribute(attr);
+          props[propKey] = deserializeValue(value, propsOptions[propKey]);
+        }
+        const vnode = createVNode(componentOptions, props);
+        this._vnode = vnode;
+        const instance = createComponentInstance(vnode, null);
+        instance.appContext = this._appContext;
+        this._instance = instance;
+        setupComponent(instance);
+        const renderer = createDOMRenderer();
+        this._renderer = renderer;
+        renderer.mount(vnode, this._root);
+        this._setupSlotObserver();
+      } finally {
+        _currentShadowRoot = null;
+        _currentHost = null;
+      }
+    }
+    disconnectedCallback() {
+      if (this._instance) {
+        callUnmountedHook(this._instance);
+      }
+      if (this._renderer && this._vnode) {
+        this._renderer.unmount(this._vnode);
+      }
+      if (this._slotObserver) {
+        this._slotObserver.disconnect();
+        this._slotObserver = null;
+      }
+      this._instance = null;
+      this._renderer = null;
+      this._vnode = null;
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+      if (!this._instance || !this._vnode) return;
+      const propKey = attrToProp(name);
+      const deserializedValue = deserializeValue(newValue, propsOptions[propKey]);
+      this._instance.props[propKey] = deserializedValue;
+      if (this._renderer && this._vnode) {
+        this._vnode.props[propKey] = deserializedValue;
+        if (this._renderer.render && this._vnode) {
+          this._renderer.render(this._vnode, this._root);
+        }
+      }
+    }
+    _setupSlotObserver() {
+      this._slotObserver = new MutationObserver(() => {
+        if (_currentSlotCallback) {
+          _currentSlotCallback();
+        }
+      });
+      this._slotObserver.observe(this, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+  }
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, LytCustomElement);
+  }
+  return LytCustomElement;
+}
+function useShadowRoot() {
+  return _currentShadowRoot;
+}
+function useHost() {
+  return _currentHost;
+}
+function useWebComponentSlots(onChange) {
+  _currentSlotCallback = onChange;
+}
+function injectChildStyles(styles) {
+  const shadowRoot = _currentShadowRoot;
+  if (!shadowRoot) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = styles;
+  shadowRoot.appendChild(style);
+}
+
+export { createApp, h as createElement, defineAsyncComponent, defineComponent, defineCustomElement, h, injectChildStyles, resolveComponent, resolveDirective, useAttrs, useHost, useModel, useShadowRoot, useSlots, useWebComponentSlots, withDirectives, withMemo };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@lytjs/core-vnode",
+  "version": "6.0.0",
+  "description": "Lyt.js Core - VNode rendering mode only",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@lytjs/component": "^6.0.0",
+    "@lytjs/reactivity": "^6.0.0",
+    "@lytjs/vdom": "^6.0.0",
+    "@lytjs/compiler": "^6.0.0",
+    "@lytjs/renderer": "^6.0.0",
+    "@lytjs/common-scheduler": "^6.0.0",
+    "@lytjs/common-error": "^6.0.0",
+    "@lytjs/shared-types": "^6.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/lytjs/lytjs.git",
+    "directory": "packages/core-vnode"
+  },
+  "keywords": [
+    "lytjs",
+    "core",
+    "vnode",
+    "createApp",
+    "h",
+    "defineComponent"
+  ]
+}