@mantou/gem 2.2.0 → 2.2.1

package/src/lib/history.ts

@@ -1,9 +1,9 @@
 // https://github.com/WICG/navigation-api#stakeholder-feedback
 
 import { connect, createStore } from './store';
-import { QueryString, cleanObject, GemError, absoluteLocation } from './utils';
+import { absoluteLocation, cleanObject, GemError, QueryString } from './utils';
 
-const nativeHistory = window.history;
+const nativeHistory = globalThis.history;
 const nativePushState: typeof nativeHistory.pushState = nativeHistory.pushState.bind(nativeHistory);
 const nativeReplaceState: typeof nativeHistory.replaceState = nativeHistory.replaceState.bind(nativeHistory);
 
@@ -107,7 +107,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
   const url = getUrlBarPath(path) + new QueryString(query) + hash;
   const prevHash = decodeURIComponent(location.hash);
   native(state, title, url);
-  if (prevHash !== hash) window.dispatchEvent(new CustomEvent('hashchange'));
+  if (prevHash !== hash) dispatchEvent(new CustomEvent('hashchange'));
 }
 
 // 跨框架时，调用者对 basePath 无感知
@@ -128,7 +128,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   const prevHash = location.hash;
   native(state, title, url);
   // `location.hash` 和 `hash` 都已经进行了 url 编码，可以直接进行相等判断
-  if (prevHash !== hash) window.dispatchEvent(new CustomEvent('hashchange'));
+  if (prevHash !== hash) dispatchEvent(new CustomEvent('hashchange'));
 }
 
 const gemBasePathStore = createStore({
@@ -185,27 +185,26 @@ const gemHistory = new GemHistory();
 
 const gemTitleStore = createStore({ defaultTitle: document.title, url: '', title: '' });
 
-const _GEMHISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
+const HISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
 
 declare global {
-  interface Window {
-    _GEMHISTORY?: typeof _GEMHISTORY;
-  }
+  // eslint-disable-next-line no-var
+  var _GEMHISTORY: typeof HISTORY | undefined;
 }
 
-if (!window._GEMHISTORY) {
-  window._GEMHISTORY = _GEMHISTORY;
+if (!globalThis._GEMHISTORY) {
+  globalThis._GEMHISTORY = HISTORY;
 
-  nativeHistory.pushState = function (state: any, title: string, path: string) {
+  nativeHistory.pushState = (state: any, title: string, path: string) => {
     updateHistoryByNative(state, title, path, nativePushState);
   };
 
-  nativeHistory.replaceState = function (state: any, title: string, path: string) {
+  nativeHistory.replaceState = (state: any, title: string, path: string) => {
     updateHistoryByNative(state, title, path, nativeReplaceState);
   };
 
   // 点击 `<a>`
-  window.addEventListener('hashchange', ({ isTrusted }) => {
+  addEventListener('hashchange', ({ isTrusted }) => {
     if (isTrusted) {
       gemHistory.replace({ hash: location.hash });
     }
@@ -250,7 +249,7 @@ if (!window._GEMHISTORY) {
    * 表示 popstate handler 中正在进行导航
    */
   let navigating = false;
-  window.addEventListener('popstate', (event) => {
+  addEventListener('popstate', (event) => {
     const newState = event.state as HistoryState | null;
     if (!newState?.$key) {
       // 比如作为其他框架 app 的宿主 app
@@ -316,5 +315,5 @@ if (!window._GEMHISTORY) {
   });
 }
 
-const { history, titleStore, basePathStore } = window._GEMHISTORY;
+const { history, titleStore, basePathStore } = globalThis._GEMHISTORY;
 export { history, titleStore, basePathStore };

package/src/lib/lit-html.ts

@@ -5,6 +5,8 @@
  */
 
 /**
+ * Gem Note:
+ *
  * TemplateResult change to classes
  * Use `null`/`undefined` instead `nothing`, no export `noChange`
  * Built-in ref & rest props`
@@ -12,6 +14,7 @@
  * Remove sanitizer
  * Remove debug log event
  * Remove warning log
+ * Support v-if/v-else-if/v-else
  */
 
 import type { TrustedTypesWindow } from 'trusted-types/lib';
@@ -22,9 +25,7 @@ const global = globalThis;
 
 const trustedTypes = (global as unknown as TrustedTypesWindow).trustedTypes;
 
-const policy = trustedTypes?.createPolicy('lit-html', {
-  createHTML: (s: string) => s,
-});
+const policy = trustedTypes?.createPolicy('lit-html', { createHTML: (s: string) => s });
 
 // Added to an attribute name to mark the attribute as bound so we can find
 // it easily.
@@ -51,7 +52,7 @@ const createMarker = () => d.createComment('');
 // https://tc39.github.io/ecma262/#sec-typeof-operator
 type Primitive = null | undefined | boolean | number | string | symbol | bigint;
 const isPrimitive = (value: unknown): value is Primitive =>
-  value === null || (typeof value != 'object' && typeof value != 'function');
+  value === null || (typeof value !== 'object' && typeof value !== 'function');
 const isNullish = (value: unknown) => value === null || value === undefined;
 const isIterable = (value: any): value is Iterable<unknown> => Symbol.iterator in value;
 
@@ -125,6 +126,13 @@ const doubleQuoteAttrEndRegex = /"/g;
  */
 const rawTextElement = /^(?:script|style|textarea|title)$/i;
 
+/** TemplateResult types */
+const HTML_RESULT = 1;
+const SVG_RESULT = 2;
+const MATHML_RESULT = 3;
+
+type ResultType = typeof HTML_RESULT | typeof SVG_RESULT | typeof MATHML_RESULT;
+
 // TemplatePart types
 // IMPORTANT: these must match the values in PartType
 const ATTRIBUTE_PART = 1;
@@ -135,11 +143,9 @@ const EVENT_PART = 5;
 const ELEMENT_PART = 6;
 const COMMENT_PART = 7;
 
-enum ResultType {
-  HTML,
-  SVG,
-  MATHML,
-}
+const V_IF = 'v-if';
+const V_ELSE_IF = 'v-else-if';
+const V_ELSE = 'v-else';
 
 export class TemplateResult {
   type: ResultType;
@@ -158,9 +164,9 @@ const tag =
     return new TemplateResult(type, strings, values);
   };
 
-export const html = tag(ResultType.HTML);
-export const svg = tag(ResultType.SVG);
-export const mathml = tag(ResultType.MATHML);
+export const html = tag(HTML_RESULT);
+export const svg = tag(SVG_RESULT);
+export const mathml = tag(MATHML_RESULT);
 
 // for directive
 export const noChange = Symbol.for('lit-noChange');
@@ -249,7 +255,7 @@ const getTemplateHtml = (strings: TemplateStringsArray, type: ResultType): [Trus
   // parts. ElementParts are also reflected in this array as undefined
   // rather than a string, to disambiguate from attribute bindings.
   const attrNames: Array<string> = [];
-  let htmlStr = type === ResultType.SVG ? '<svg>' : type === ResultType.MATHML ? '<math>' : '';
+  let htmlStr = type === SVG_RESULT ? '<svg>' : type === MATHML_RESULT ? '<math>' : '';
 
   // When we're inside a raw text tag (not it's text content), the regex
   // will still be tagRegex so we can find attributes, but will switch to
@@ -357,9 +363,7 @@ const getTemplateHtml = (strings: TemplateStringsArray, type: ResultType): [Trus
   }
 
   const htmlResult: string | TrustedHTML =
-    htmlStr +
-    (strings[l] || '<?>') +
-    (type === ResultType.SVG ? '</svg>' : type === ResultType.MATHML ? '</math>' : '');
+    htmlStr + (strings[l] || '<?>') + (type === SVG_RESULT ? '</svg>' : type === MATHML_RESULT ? '</math>' : '');
 
   // Returned as an array for terseness
   return [trustFromTemplateString(strings, htmlResult), attrNames];
@@ -385,7 +389,7 @@ class Template {
     walker.currentNode = this.el.content;
 
     // Re-parent SVG or MathML nodes into template root
-    if (type === ResultType.SVG || type === ResultType.MATHML) {
+    if (type === SVG_RESULT || type === MATHML_RESULT) {
       const wrapper = this.el.content.firstChild!;
       wrapper.replaceWith(...wrapper.childNodes);
     }
@@ -513,10 +517,10 @@ function resolveDirective(
   const nextDirectiveConstructor = isPrimitive(value)
     ? undefined
     : // This property needs to remain unminified.
-      (value as DirectiveResult)['_$litDirective$'];
+      (value as DirectiveResult)._$litDirective$;
   if (currentDirective?.constructor !== nextDirectiveConstructor) {
     // This property needs to remain unminified.
-    currentDirective?.['_$notifyDirectiveConnectionChanged']?.(false);
+    currentDirective?._$notifyDirectiveConnectionChanged?.(false);
     if (nextDirectiveConstructor === undefined) {
       currentDirective = undefined;
     } else {
@@ -548,6 +552,8 @@ export type { TemplateInstance };
 class TemplateInstance implements Disconnectable {
   _$template: Template;
   _$parts: Array<Part | undefined> = [];
+  /** @internal */
+  _$conditions: ConditionChain[] = [];
 
   /** @internal */
   _$parent: ChildPart;
@@ -574,8 +580,10 @@ class TemplateInstance implements Disconnectable {
   _clone(options: RenderOptions | undefined) {
     const {
       el: { content },
-      parts: parts,
+      parts,
     } = this._$template;
+    const ifMap = new Map<Element, number>();
+    const elseIfMap = new Map<Element, number>();
     const fragment = (options?.creationScope ?? d).importNode(content, true);
     walker.currentNode = fragment;
 
@@ -590,6 +598,8 @@ class TemplateInstance implements Disconnectable {
         if (templatePart.type === CHILD_PART) {
           part = new ChildPart(node as HTMLElement, node.nextSibling, this, options);
         } else if (templatePart.type === ATTRIBUTE_PART) {
+          templatePart.name === V_IF && ifMap.set(node as HTMLElement, partIndex);
+          templatePart.name === V_ELSE_IF && elseIfMap.set(node as HTMLElement, partIndex);
           part = new templatePart.ctor(node as HTMLElement, templatePart.name, templatePart.strings, this, options);
         } else if (templatePart.type === ELEMENT_PART) {
           part = new ElementPart(node as HTMLElement, this, options);
@@ -602,6 +612,18 @@ class TemplateInstance implements Disconnectable {
         nodeIndex++;
       }
     }
+
+    ifMap.forEach((idx, element) => {
+      const chain = new ConditionChain(element, idx);
+      this._$conditions.push(chain);
+      let ele: Element | null = element;
+      while ((ele = ele.nextElementSibling)) {
+        const pos = elseIfMap.get(ele);
+        if (pos === undefined) break;
+        chain.push(ele, pos);
+      }
+    });
+
     // 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
     // freed.
@@ -619,12 +641,52 @@ class TemplateInstance implements Disconnectable {
           // since values are in between template spans. We increment i by 1
           // later in the loop, so increment it by part.strings.length - 2 here
           i += (part as AttributePart).strings!.length - 2;
+        } else if ((part as AttributePart).name === V_IF || (part as AttributePart).name === V_ELSE_IF) {
         } else {
           part._$setValue(values[i]);
         }
       }
       i++;
     }
+
+    this._$conditions.forEach((e) => e.update(values));
+  }
+}
+
+class ConditionChain {
+  readonly mark: Comment;
+  readonly list: { ele: Element; idx?: number }[];
+
+  constructor(ele: Element, idx: number) {
+    const mark = createMarker();
+    ele.before(mark);
+    this.mark = mark;
+    this.list = [{ ele, idx }];
+    this.check();
+  }
+
+  get next() {
+    return this.list.at(-1)!.ele.nextElementSibling;
+  }
+
+  push(ele: Element, idx?: number) {
+    this.list.push({ ele, idx });
+    this.check();
+  }
+
+  check() {
+    const next = this.next;
+    if (next?.attributes.getNamedItem(V_ELSE)) {
+      this.list.push({ ele: next });
+      next.removeAttribute(V_ELSE);
+    }
+  }
+
+  update(values: Array<unknown>) {
+    const { mark, list } = this;
+    const show = list.find(({ idx }) => idx === undefined || !!values[idx]);
+    if (show && !show.ele.parentNode) mark.after(show.ele);
+    list.forEach(({ ele }) => (!show || ele !== show.ele) && ele.remove());
   }
 }
 
@@ -1042,7 +1104,7 @@ class AttributePart implements Disconnectable {
       const values = value as Array<unknown>;
       value = strings[0];
 
-      let i, v;
+      let i: number, v: any;
       for (i = 0; i < strings.length - 1; i++) {
         v = resolveDirective(this, values[valueIndex! + i], directiveParent, i);
         change ||= !isPrimitive(v) || v !== (this._$committedValue as Array<unknown>)[i];
@@ -1095,16 +1157,6 @@ export type { EventPart };
 class EventPart extends AttributePart {
   override readonly type = EVENT_PART;
 
-  constructor(
-    element: HTMLElement,
-    name: string,
-    strings: ReadonlyArray<string>,
-    parent: Disconnectable,
-    options: RenderOptions | undefined,
-  ) {
-    super(element, name, strings, parent, options);
-  }
-
   /** @internal */
   override _$setValue(newListener: unknown, directiveParent: DirectiveParent = this) {
     newListener = resolveDirective(this, newListener, directiveParent, 0);
@@ -1175,7 +1227,7 @@ class ElementPart implements Disconnectable {
     if (!value) return;
     if (value instanceof Ref) {
       value.value = this.element;
-    } else if ((value as DirectiveResult)['_$litDirective$']) {
+    } else if ((value as DirectiveResult)._$litDirective$) {
       resolveDirective(this, value);
     } else {
       if (this._$props) {
@@ -1202,10 +1254,10 @@ export const render = (
   options?: RenderOptions,
 ): RootPart => {
   const partOwnerNode = (options?.renderBefore ?? container) as any;
-  let part: ChildPart = partOwnerNode['_$litPart$'];
+  let part: ChildPart = partOwnerNode._$litPart$;
   if (part === undefined) {
     const endNode = options?.renderBefore ?? null;
-    partOwnerNode['_$litPart$'] = part = new ChildPart(
+    partOwnerNode._$litPart$ = part = new ChildPart(
       container.insertBefore(createMarker(), endNode),
       endNode,
       undefined,