airx 0.2.2 → 0.3.0-alpha.1

package/output/umd/index.js

@@ -4,14 +4,14 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.airx = {}));
 })(this, (function (exports) { 'use strict';
 
-  const globalContext$1 = {
+  const globalContext = {
       current: null
   };
   function useContext() {
-      if (globalContext$1.current == null) {
+      if (globalContext.current == null) {
           throw new Error('Unable to find a valid component context');
       }
-      return globalContext$1.current;
+      return globalContext.current;
   }
   const onMounted = (listener) => {
       return useContext().onMounted(listener);
@@ -26,85 +26,65 @@
       return useContext().provide(key, value);
   };
 
-  const isDev = localStorage.getItem('airx-dev');
+  const isPrintLogs = typeof process != 'undefined'
+      && process?.env?.NODE_ENV === 'development'
+      && process?.env?.AIRX_DEBUG === 'true';
   function createLogger(name) {
       function getPrintPrefix() {
           const date = new Date().toLocaleString();
           return `[${date}][${name}]`;
       }
       function debug(...args) {
-          if (isDev)
+          if (isPrintLogs)
               console.log(getPrintPrefix(), ...args);
       }
       return { debug };
   }
 
-  const airxElementSymbol = Symbol('airx-element');
-  const airxReactiveDependenciesSymbol = Symbol('airx-dependencies');
-
-  /** FIXME: 污染全局总是不好的 */
-  const globalContext = {
-      dependencies: new Set()
-  };
-  function createCollector() {
-      const newDependencies = new Set();
-      return {
-          clear: () => newDependencies.clear(),
-          complete: () => [...newDependencies.values()],
-          collect: (process) => {
-              const beforeDeps = globalContext.dependencies;
-              globalContext.dependencies = newDependencies;
-              const result = process();
-              globalContext.dependencies = beforeDeps;
-              return result;
-          }
-      };
-  }
-  function triggerRef(ref) {
-      requestAnimationFrame(() => {
-          const deps = Reflect.get(ref, airxReactiveDependenciesSymbol);
-          for (const dep of deps) {
-              dep();
-          }
-      });
+  let firstSignal = undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const globalNS = (function () {
+      // the only reliable means to get the global object is
+      // `Function('return this')()`
+      // However, this causes CSP violations in Chrome apps.
+      if (typeof self !== 'undefined') {
+          return self;
+      }
+      if (typeof window !== 'undefined') {
+          return window;
+      }
+      if (typeof global !== 'undefined') {
+          return global;
+      }
+      throw new Error('unable to locate global object');
+  })();
+  // 通过函数包装来延迟加载 Signal
+  // 这对使用 Polyfill 的应用来说更友好
+  function getSignal() {
+      const globalSignal = globalNS['Signal'];
+      if (globalSignal == null)
+          throw new Error('Signal is undefined');
+      if (firstSignal == null)
+          firstSignal = globalSignal;
+      if (firstSignal !== globalSignal)
+          throw new Error('Signal have multiple instances');
+      return globalSignal;
   }
-  function createRefObject(value) {
-      const object = Object.create({ value });
-      Reflect.defineProperty(object, airxReactiveDependenciesSymbol, {
-          configurable: false,
-          enumerable: false,
-          writable: true,
-          value: new Set()
-      });
-      return object;
+  function createWatch(notify) {
+      const signal = getSignal();
+      return new signal.subtle.Watcher(notify);
   }
-  function watchSignal(ref, listener) {
-      const deps = Reflect.get(ref, airxReactiveDependenciesSymbol);
-      deps.add(listener);
-      return () => { deps.delete(listener); };
+  function createComputed(computation, options) {
+      const signal = getSignal();
+      return new signal.Computed(computation, options);
   }
-  function createSignal(obj) {
-      const ref = createRefObject(obj);
-      if (!globalContext.dependencies.has(ref)) {
-          globalContext.dependencies.add(ref);
-      }
-      let value = ref.value;
-      Reflect.defineProperty(ref, 'value', {
-          get() {
-              if (!globalContext.dependencies.has(ref)) {
-                  globalContext.dependencies.add(ref);
-              }
-              return value;
-          },
-          set(newValue) {
-              value = newValue;
-              triggerRef(ref);
-              return value;
-          }
-      });
-      return ref;
+  function isState(target) {
+      const signal = getSignal();
+      return target instanceof signal.State;
   }
 
+  const airxElementSymbol = Symbol('airx-element');
+
   /**
    * createElement 是用于创建 AirxElement 的工具函数
    */
@@ -183,7 +163,15 @@
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       provide(key, value) {
           this.providedMap.set(key, value);
-          return v => this.providedMap.set(key, v);
+          return v => {
+              if (typeof v === 'function') {
+                  const old = this.providedMap.get(key);
+                  const func = v;
+                  this.providedMap.set(key, func(old));
+                  return;
+              }
+              this.providedMap.set(key, v);
+          };
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       inject(key) {
@@ -378,9 +366,11 @@
               // 添加 ref 处理
               if ('ref' in instance.memoProps) {
                   context.onMounted(() => {
-                      if (instance.domRef) { // 如果组件有自己的 dom
-                          instance.memoProps.ref.value = instance.domRef;
-                          return () => instance.memoProps.ref.value = null;
+                      const ref = instance.memoProps.ref;
+                      // 如果组件有自己的 dom 并且 ref 为 state
+                      if (instance.domRef && isState(ref)) {
+                          ref.set(instance.domRef);
+                          return () => ref.set(undefined);
                       }
                   });
               }
@@ -445,32 +435,44 @@
       }
       // airx 组件
       if (typeof element?.type === 'function') {
-          const collector = createCollector();
-          if (instance.render == null) {
+          if (instance.signalWatcher == null) {
+              // Watch 是惰性的，只有当 Signal 被读取时才会触发 --！
+              const signalWatcher = createWatch(async () => {
+                  instance.needReRender = true;
+                  onUpdateRequire?.(instance);
+                  queueMicrotask(() => {
+                      signalWatcher.watch();
+                      const paddings = signalWatcher.getPending();
+                      for (const padding of paddings)
+                          padding.get();
+                  });
+              });
+              instance.signalWatcher = signalWatcher;
+              instance.context.addDisposer(() => signalWatcher.unwatch());
+          }
+          if (instance.childrenRender == null) {
               const component = element.type;
-              const beforeContext = globalContext$1.current;
-              globalContext$1.current = instance.context.getSafeContext();
-              const componentReturnValue = collector.collect(() => component(instance.memoProps));
+              const beforeContext = globalContext.current;
+              globalContext.current = instance.context.getSafeContext();
+              const componentReturnValue = component(instance.memoProps);
               if (typeof componentReturnValue !== 'function') {
                   throw new Error('Component must return a render function');
               }
-              globalContext$1.current = beforeContext;
-              instance.render = componentReturnValue;
-              const children = collector.collect(() => instance.render?.());
+              globalContext.current = beforeContext;
+              instance.childrenRender = componentReturnValue;
+              const childrenComputed = createComputed(() => componentReturnValue());
+              instance.signalWatcher.watch(childrenComputed);
+              const children = childrenComputed.get();
               reconcileChildren(pluginContext, instance, childrenAsElements(children));
           }
           if (instance.needReRender) {
-              const children = collector.collect(() => instance.render?.());
+              // 这里有个问题，如果是由于父组件导致的子组件渲染
+              // 直接使用 childrenComputed.get() 将读取到缓存值
+              // const children = instance.childrenRender?.()
+              const children = instance.childrenRender();
               reconcileChildren(pluginContext, instance, childrenAsElements(children));
               delete instance.needReRender;
           }
-          // 处理依赖触发的更新
-          collector.complete().forEach(ref => {
-              instance.context.addDisposer(watchSignal(ref, () => {
-                  instance.needReRender = true;
-                  onUpdateRequire?.(instance);
-              }));
-          });
       }
       // 浏览器组件/标签
       if (typeof element?.type === 'string') {
@@ -675,7 +677,7 @@
               Object.keys(prevProps)
                   .filter(isProperty)
                   .filter(isGone(prevProps, nextProps))
-                  .forEach(name => dom.setAttribute(name, ''));
+                  .forEach(name => dom.removeAttribute(name));
               // Set new or changed properties
               Object.keys(nextProps)
                   .filter(isProperty)
@@ -1143,7 +1145,7 @@
           Object.keys(prevProps)
               .filter(isProperty)
               .filter(isGone(prevProps, nextProps))
-              .forEach(name => dom.setAttribute(name, ''));
+              .forEach(name => dom.removeAttribute(name));
           // Set new or changed properties
           Object.keys(nextProps)
               .filter(isProperty)
@@ -1196,18 +1198,25 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function createApp(element) {
       const appContext = new PluginContext();
+      const ensureAsElement = (element) => {
+          if (typeof element === 'function') {
+              return createElement(element, {});
+          }
+          return element;
+      };
       const app = {
           plugin: (...plugins) => {
               appContext.registerPlugin(...plugins);
               return app;
           },
           mount: (container) => {
-              render(appContext, element, container);
+              container.innerHTML = ''; // 先清空再说
+              render(appContext, ensureAsElement(element), container);
               return app;
           },
           renderToHTML: () => {
               return new Promise(resolve => {
-                  render$1(appContext, element, resolve);
+                  render$1(appContext, ensureAsElement(element), resolve);
               });
           }
       };
@@ -1218,12 +1227,10 @@
   exports.component = component;
   exports.createApp = createApp;
   exports.createElement = createElement;
-  exports.createSignal = createSignal;
   exports.inject = inject;
   exports.onMounted = onMounted;
   exports.onUnmounted = onUnmounted;
   exports.provide = provide;
-  exports.watchSignal = watchSignal;
 
 }));
 //# sourceMappingURL=index.js.map