@mantou/gem 2.2.5 → 2.2.8

package/src/helper/hmr.ts

@@ -5,7 +5,10 @@ import { Logger } from './logger';
 
 const logger = new Logger('HMR');
 
-const nativeDefineElement = window.customElements.define.bind(window.customElements);
+const nativeDefineElement =
+  typeof window === 'undefined' || !window.customElements
+    ? undefined
+    : window.customElements.define.bind(window.customElements);
 
 const cache = new Map<string, Element[]>();
 function updateElement(name: string, fn: (ele: Element) => void) {
@@ -160,147 +163,149 @@ declare global {
   }
 }
 
-window._hmrClassRegistry = new Map();
-window._hmrRegisterClass =
-  (name: string) =>
-  (cls: HasFieldsRecordClass, { addInitializer }: ClassDecoratorContext) => {
-    addInitializer(() => {
-      const existed = window._hmrClassRegistry.get(name);
-
-      if (!existed) {
-        window._hmrClassRegistry.set(name, cls);
-        return;
-      }
-
-      logger.info(`class <${name}> update,`, { existed, cls });
-
-      let current: any[] = [existed, cls];
-      while (current) {
-        const [oldClass, newClass] = current;
-        if (oldClass === newClass || current.some((e) => e === GemElement || e === Function.prototype)) break;
-        if (current.some((e) => !e) || checkClassNeedReload(oldClass, newClass)) {
-          location.reload();
-          return;
-        }
+if (typeof window !== 'undefined' && nativeDefineElement && !window._hmrClassRegistry) {
+  window._hmrClassRegistry = new Map();
+  window._hmrRegisterClass =
+    (name: string) =>
+    (cls: HasFieldsRecordClass, { addInitializer }: ClassDecoratorContext) => {
+      addInitializer(() => {
+        const existed = window._hmrClassRegistry.get(name);
 
-        // 修正 `instanceof`
-        setProperty(newClass, Symbol.hasInstance, function hasInstance(instance: any) {
-          const isOldInstance = instance instanceof oldClass;
-          if (isOldInstance) return true;
-          setProperty(newClass, Symbol.hasInstance, undefined);
-          const isNew = instance instanceof newClass;
-          setProperty(newClass, Symbol.hasInstance, hasInstance);
-          return isNew;
-        });
-
-        const oldMetadata = getMetadata(oldClass);
-        const newMetadata = getMetadata(newClass);
-
-        if (checkMetadataNeedReload(oldMetadata, newMetadata)) {
-          location.reload();
+        if (!existed) {
+          window._hmrClassRegistry.set(name, cls);
           return;
         }
 
-        const fields = getFields(oldClass, newClass);
+        logger.info(`class <${name}> update,`, { existed, cls });
+
+        let current: any[] = [existed, cls];
+        while (current) {
+          const [oldClass, newClass] = current;
+          if (oldClass === newClass || current.some((e) => e === GemElement || e === Function.prototype)) break;
+          if (current.some((e) => !e) || checkClassNeedReload(oldClass, newClass)) {
+            location.reload();
+            return;
+          }
+
+          // 修正 `instanceof`
+          setProperty(newClass, Symbol.hasInstance, function hasInstance(instance: any) {
+            const isOldInstance = instance instanceof oldClass;
+            if (isOldInstance) return true;
+            setProperty(newClass, Symbol.hasInstance, undefined);
+            const isNew = instance instanceof newClass;
+            setProperty(newClass, Symbol.hasInstance, hasInstance);
+            return isNew;
+          });
 
-        if (checkFieldsNeedReload(fields)) {
-          location.reload();
-          return;
-        }
+          const oldMetadata = getMetadata(oldClass);
+          const newMetadata = getMetadata(newClass);
 
-        Object.entries(fields.staticFields).forEach(([type, { remove, add }]) => {
-          remove.forEach((prop) => {
-            if (safeProp.has(type)) {
-              deleteProperty(oldClass, prop.name);
-            }
-          });
-          add.forEach((prop) => {
-            if (safeProp.has(type)) {
-              setProperty(oldClass, prop.name, getProperty(newClass, prop.name));
-            }
-          });
-        });
-
-        const instanceFieldsEntries = Object.entries(fields.instanceFields);
-        // 删除的属性重新加回来要先清除占位值
-        instanceFieldsEntries.forEach(([type, { add }]) => {
-          add.forEach((prop) => {
-            if (type in descMap) {
-              deleteProperty(oldClass.prototype, prop.name);
-            }
+          if (checkMetadataNeedReload(oldMetadata, newMetadata)) {
+            location.reload();
+            return;
+          }
+
+          const fields = getFields(oldClass, newClass);
+
+          if (checkFieldsNeedReload(fields)) {
+            location.reload();
+            return;
+          }
+
+          Object.entries(fields.staticFields).forEach(([type, { remove, add }]) => {
+            remove.forEach((prop) => {
+              if (safeProp.has(type)) {
+                deleteProperty(oldClass, prop.name);
+              }
+            });
+            add.forEach((prop) => {
+              if (safeProp.has(type)) {
+                setProperty(oldClass, prop.name, getProperty(newClass, prop.name));
+              }
+            });
           });
-        });
-        updateElement(name, (element) => {
-          instanceFieldsEntries.forEach(([type, { add, remove }]) => {
+
+          const instanceFieldsEntries = Object.entries(fields.instanceFields);
+          // 删除的属性重新加回来要先清除占位值
+          instanceFieldsEntries.forEach(([type, { add }]) => {
             add.forEach((prop) => {
               if (type in descMap) {
-                (descMap as any)[type](undefined, {
-                  name: prop.name,
-                  metadata: oldMetadata,
-                  addInitializer: (fn: () => void) => fn.apply(element),
-                } as ClassMemberDecoratorContext);
+                deleteProperty(oldClass.prototype, prop.name);
               }
             });
+          });
+          updateElement(name, (element) => {
+            instanceFieldsEntries.forEach(([type, { add, remove }]) => {
+              add.forEach((prop) => {
+                if (type in descMap) {
+                  (descMap as any)[type](undefined, {
+                    name: prop.name,
+                    metadata: oldMetadata,
+                    addInitializer: (fn: () => void) => fn.apply(element),
+                  } as ClassMemberDecoratorContext);
+                }
+              });
+              remove.forEach((prop) => {
+                setProperty(element, prop.name, undefined);
+              });
+            });
+          });
+          // 删除的属性在 proto 上添加占位符
+          instanceFieldsEntries.forEach(([type, { remove }]) => {
             remove.forEach((prop) => {
-              setProperty(element, prop.name, undefined);
+              if (type in descMap) {
+                // attribute 映射 prop 没有移除
+                setProperty(oldClass.prototype, prop.name, undefined);
+              }
             });
           });
-        });
-        // 删除的属性在 proto 上添加占位符
-        instanceFieldsEntries.forEach(([type, { remove }]) => {
-          remove.forEach((prop) => {
-            if (type in descMap) {
-              // attribute 映射 prop 没有移除
-              setProperty(oldClass.prototype, prop.name, undefined);
-            }
+
+          setArrValue(oldMetadata, 'definedParts', newMetadata.definedParts);
+          setArrValue(oldMetadata, 'definedSlots', newMetadata.definedSlots);
+          setArrValue(oldMetadata, 'observedProperties', newMetadata.observedProperties);
+          setArrValue(oldMetadata, 'observedAttributes', newMetadata.observedAttributes);
+          setArrValue(oldMetadata, 'definedEvents', newMetadata.definedEvents);
+          setArrValue(oldMetadata, 'definedCSSStates', newMetadata.definedCSSStates);
+          setArrValue(oldMetadata, 'adoptedStyleSheets', newMetadata.adoptedStyleSheets);
+          setArrValue(oldClass, '_defined_fields_', newClass._defined_fields_);
+
+          [
+            [oldClass, newClass],
+            [oldClass.prototype, newClass.prototype],
+          ].forEach(([existedObj, newObj]) => {
+            Object.assign(
+              existedObj,
+              Object.fromEntries(
+                getHmrMethodKeys(newObj)
+                  .filter((key) => existedObj[key].toString() !== newObj[key].toString())
+                  .map((key) => [key, newObj[key]]),
+              ),
+            );
           });
-        });
-
-        setArrValue(oldMetadata, 'definedParts', newMetadata.definedParts);
-        setArrValue(oldMetadata, 'definedSlots', newMetadata.definedSlots);
-        setArrValue(oldMetadata, 'observedProperties', newMetadata.observedProperties);
-        setArrValue(oldMetadata, 'observedAttributes', newMetadata.observedAttributes);
-        setArrValue(oldMetadata, 'definedEvents', newMetadata.definedEvents);
-        setArrValue(oldMetadata, 'definedCSSStates', newMetadata.definedCSSStates);
-        setArrValue(oldMetadata, 'adoptedStyleSheets', newMetadata.adoptedStyleSheets);
-        setArrValue(oldClass, '_defined_fields_', newClass._defined_fields_);
-
-        [
-          [oldClass, newClass],
-          [oldClass.prototype, newClass.prototype],
-        ].forEach(([existedObj, newObj]) => {
-          Object.assign(
-            existedObj,
-            Object.fromEntries(
-              getHmrMethodKeys(newObj)
-                .filter((key) => existedObj[key].toString() !== newObj[key].toString())
-                .map((key) => [key, newObj[key]]),
-            ),
-          );
-        });
-
-        current = [getPrototypeOf(oldClass), getPrototypeOf(newClass)];
-      }
-    });
-  };
 
-window.customElements.define = (name: string, cls: CustomElementConstructor) => {
-  const existed = customElements.get(name);
+          current = [getPrototypeOf(oldClass), getPrototypeOf(newClass)];
+        }
+      });
+    };
 
-  if (!existed) {
-    nativeDefineElement(name, cls);
-    return;
-  }
+  window.customElements.define = (name: string, cls: CustomElementConstructor) => {
+    const existed = customElements.get(name);
+
+    if (!existed) {
+      nativeDefineElement(name, cls);
+      return;
+    }
 
-  // 等待类更新
-  queueMicrotask(() => {
-    logger.info(`<${name}> update,`, { cls });
+    // 等待类更新
+    queueMicrotask(() => {
+      logger.info(`<${name}> update,`, { cls });
 
-    updateElement(name, (element) => {
-      // 触发样式更新，支持 Light DOM
-      element.after(element);
-      // 重新渲染
-      (element as any)[UpdateToken]?.();
+      updateElement(name, (element) => {
+        // 触发样式更新，支持 Light DOM
+        element.after(element);
+        // 重新渲染
+        (element as any)[UpdateToken]?.();
+      });
     });
-  });
-};
+  };
+}

package/src/lib/history.ts

@@ -213,7 +213,8 @@ if (!globalThis._GEMHISTORY) {
     // 初始化 historyState
     const { protocol, pathname, search, hash } = location;
     // 支持在 `data:` `blob:` 中 `import`
-    if (protocol.startsWith('http')) gemHistory.replace({ path: pathname, query: search, hash });
+    if (protocol.startsWith('http') || protocol.startsWith('tauri'))
+      gemHistory.replace({ path: pathname, query: search, hash });
   } else if (nativeHistory.state.$hasCloseHandle) {
     store(nativeHistory.state);
     const params = normalizeParams({ title: document.title });
@@ -315,4 +316,5 @@ if (!globalThis._GEMHISTORY) {
 }
 
 const { history, titleStore, basePathStore } = globalThis._GEMHISTORY;
+
 export { basePathStore, history, titleStore };

package/src/lib/lit-html.ts

@@ -615,9 +615,11 @@ export class TemplateInstance implements Disconnectable {
       }
     }
 
+    const conditionMap = new Map<Element, ConditionChain>();
     ifMap.forEach((idx, element) => {
       const chain = new ConditionChain(element, idx);
       this._$conditions.push(chain);
+      conditionMap.set(element, chain);
       let ele: Element | null = element;
       while ((ele = ele.nextElementSibling)) {
         const pos = elseIfMap.get(ele);
@@ -625,6 +627,13 @@ export class TemplateInstance implements Disconnectable {
         chain.push(ele, pos);
       }
     });
+    // A ChildPart can use the following conditional element as its end boundary.
+    // Point it to the persistent chain marker before v-if can remove that element.
+    for (const part of this._$parts) {
+      if (part?.type !== CHILD_PART) continue;
+      const chain = conditionMap.get(part._$endNode as Element);
+      if (chain) part._$endNode = chain.mark;
+    }
 
     // We need to set the currentNode away from the cloned tree so that we
     // don't hold onto the tree even if the tree is detached and should be

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '2.2.5';
+export const version = '2.2.8';

package/src/test/lit-html.test.ts

@@ -0,0 +1,19 @@
+import { html, render } from '../lib/lit-html';
+import { expect } from './utils';
+
+describe('lit-html', () => {
+  it('updates an iterable before a removed v-if element', () => {
+    const container = document.createElement('div');
+    const view = (messages: string[], permissionRequest: boolean) =>
+      html`${messages.map((message) => html`<p>${message}</p>`)}<div v-if=${permissionRequest}>Permission request</div>`;
+
+    render(view(['Message 1'], false), container);
+    expect(container.textContent?.trim()).to.equal('Message 1');
+
+    expect(() => render(view(['Message 1', 'Message 2'], false), container)).not.to.throw();
+    expect(container.textContent?.replace(/\s/g, '')).to.equal('Message1Message2');
+
+    render(view(['Message 1', 'Message 2'], true), container);
+    expect(container.textContent?.replace(/\s/g, '')).to.equal('Message1Message2Permissionrequest');
+  });
+});