@mantou/gem 1.7.11 → 1.7.12

package/src/helper/request.ts

@@ -1,60 +1,129 @@
-export const defaultReqInit: RequestInit = {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-};
-
-export async function request<T>(uri: string, options: RequestInit = {}): Promise<T> {
-  const res = await fetch(uri, {
-    ...defaultReqInit,
-    ...options,
-  });
-  if (res.status === 0) throw new Error('Request fail');
-  if (res.status >= 500) throw new Error(res.statusText);
-  try {
-    const data = await res.json();
-    if (res.status >= 400) throw new (Error as any)(data?.message || res.statusText, { cause: data });
-    return data;
-  } catch {
-    throw new Error('Server error');
-  }
-}
+import { GemError } from '../lib/utils';
 
 type ReqBody = Record<string, unknown> | BodyInit;
+type ReqParams = Record<string, string | number>;
 const TypedArray = Object.getPrototypeOf(Object.getPrototypeOf(new Int8Array())).constructor;
 
-function serializationBody(body?: ReqBody): BodyInit | undefined {
-  if (
-    body instanceof FormData ||
-    body instanceof Blob ||
-    body instanceof TypedArray ||
-    body instanceof URLSearchParams ||
-    body instanceof ReadableStream ||
-    body instanceof ArrayBuffer
-  ) {
-    return body as BodyInit;
-  }
-  if (typeof body === 'object') {
-    return JSON.stringify(body);
-  }
-  return body;
-}
+type Options = {
+  origin?: string;
+  base?: string;
+  // only for get/del/put/post
+  appendHeaders?: (input?: any) => HeadersInit;
+  transformInput?: (input?: any) => any;
+  transformOutput?: (output: any, req: Request) => any;
+} & RequestInit;
 
-function serializationUrl(url: string, params?: Record<string, string | number>) {
-  const { origin, pathname, search } = new URL(url, location.origin);
-  const query = new URLSearchParams(params as Record<string, string>).toString();
-  return `${origin}${pathname}${search ? `${search}&` : query ? '?' : ''}${query}`;
-}
+function initRequest(options: Options = {}) {
+  const {
+    origin = location.origin,
+    base = '',
+    appendHeaders = () => ({}),
+    transformInput = (p?: any) => p,
+    transformOutput = (p?: any) => p,
+    ...reqInit
+  } = options;
 
-export function get<T>(url: string, params?: Record<string, string | number>) {
-  return request<T>(serializationUrl(url, params), { method: 'GET' });
-}
-export function del<T>(url: string, params?: Record<string, string | number>) {
-  return request<T>(serializationUrl(url, params), { method: 'DELETE' });
-}
-export function put<T>(url: string, body?: ReqBody) {
-  return request<T>(url, { method: 'PUT', body: serializationBody(body) });
-}
-export function post<T>(url: string, body?: ReqBody) {
-  return request<T>(url, { method: 'POST', body: serializationBody(body) });
+  const serializationBody = (body?: ReqBody): BodyInit | undefined => {
+    if (
+      body instanceof FormData ||
+      body instanceof Blob ||
+      body instanceof TypedArray ||
+      body instanceof URLSearchParams ||
+      body instanceof ReadableStream ||
+      body instanceof ArrayBuffer
+    ) {
+      return body as BodyInit;
+    }
+    if (typeof body === 'object') {
+      return JSON.stringify(body);
+    }
+    return body;
+  };
+
+  const serializationUrl = (path: string, params?: ReqParams) => {
+    if (new URL(path, location.origin).pathname !== path) {
+      throw new GemError('`path` format is incorrect');
+    }
+    const query = new URLSearchParams(params as Record<string, string>).toString();
+    return `${origin}${base}${path}${query ? '?' : ''}${query}`;
+  };
+
+  const serializationHeaders = (headers?: HeadersInit) => {
+    if (!headers) return {};
+    // auto `toLowerCase`
+    if (headers instanceof Headers) return Object.fromEntries(headers);
+    const entries = Array.isArray(headers) ? headers : Object.entries(headers);
+    return Object.fromEntries(entries.map(([key, value]) => [key.toLowerCase(), value]));
+  };
+
+  const request = async <T>(uri: string, reqOptions: RequestInit = {}): Promise<T> => {
+    const req = new Request(uri, {
+      ...reqInit,
+      ...reqOptions,
+      headers: new Headers({
+        'content-type': 'application/json',
+        ...serializationHeaders(reqInit.headers),
+        ...serializationHeaders(reqOptions.headers),
+      }),
+    });
+    const res = await fetch(req);
+
+    if (res.status === 0) throw new Error('Request fail');
+    if (res.status >= 500) throw new Error(res.statusText);
+
+    const contentType = req.headers.get('content-type')!;
+    const isClientError = res.status >= 400;
+    try {
+      let data: any;
+      if (contentType.includes('json')) {
+        data = await res.json();
+      } else if (contentType.includes('octet-stream')) {
+        data = await res.arrayBuffer();
+      } else {
+        data = await res.text();
+      }
+      if (isClientError) throw new (Error as any)(res.statusText, { cause: data });
+      return transformOutput(data, req);
+    } catch {
+      throw new Error('Parse error');
+    }
+  };
+
+  return {
+    request,
+    get<T>(path: string, params?: ReqParams) {
+      const i = transformInput(params);
+      return request<T>(serializationUrl(path, i), {
+        method: 'GET',
+        headers: appendHeaders(i),
+      });
+    },
+    del<T>(path: string, params?: ReqParams) {
+      const i = transformInput(params);
+      return request<T>(serializationUrl(path, i), {
+        method: 'DELETE',
+        headers: appendHeaders(i),
+      });
+    },
+    put<T>(path: string, body?: ReqBody) {
+      const i = transformInput(body);
+      return request<T>(serializationUrl(path), {
+        method: 'PUT',
+        headers: appendHeaders(i),
+        body: serializationBody(i),
+      });
+    },
+    post<T>(path: string, body?: ReqBody) {
+      const i = transformInput(body);
+      return request<T>(serializationUrl(path), {
+        method: 'POST',
+        headers: appendHeaders(i),
+        body: serializationBody(i),
+      });
+    },
+  };
 }
+
+const { request, del, get, post, put } = initRequest();
+
+export { initRequest, request, del, get, post, put };

package/src/lib/decorators.ts

@@ -19,7 +19,7 @@ function pushStaticField(target: GemElementPrototype, field: StaticField, member
   (cls[field] as any)[isSet ? 'add' : 'push'](member);
 }
 
-export type RefObject<T = HTMLElement> = { ref: string; element: T | undefined };
+export type RefObject<T = HTMLElement> = { ref: string; element: T | undefined; elements: T[] };
 
 /**
  * 引用元素，只有第一个标记 ref 的元素有效

package/src/lib/element.ts

@@ -419,22 +419,17 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   closestElement<K extends keyof HTMLElementTagNameMap>(tag: K): HTMLElementTagNameMap[K] | null;
   closestElement<K extends abstract new (...args: any) => any>(constructor: K): InstanceType<K> | null;
-  closestElement<K extends abstract new (...args: any) => any>(constructorOrTag: K | string): Element | null {
+  closestElement<K extends abstract new (...args: any) => any>(constructorOrTag: K | string) {
     const isConstructor = typeof constructorOrTag === 'function';
     const tagName = typeof constructorOrTag === 'string' && constructorOrTag.toUpperCase();
-    const getRootElement = (ele: Element): Element | null => {
-      const rootEle = ele.parentElement || (ele.getRootNode() as ShadowRoot).host;
-      if (!rootEle) return null;
-      if (isConstructor) {
-        if (rootEle.constructor === constructorOrTag) {
-          return rootEle;
-        }
-      } else if (rootEle.tagName === tagName) {
-        return rootEle;
-      }
-      return getRootElement(rootEle);
-    };
-    return getRootElement(this);
+    const is = (ele: Element) => (isConstructor ? ele.constructor === constructorOrTag : ele.tagName === tagName);
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let node: Element | null = this;
+    while (node) {
+      if (is(node)) break;
+      node = node.parentElement || (node.getRootNode() as ShadowRoot).host;
+    }
+    return node;
   }
 
   /**
@@ -572,7 +567,11 @@ export function defineProperty(
   });
 }
 
+const getReflectTargets = (ele: ShadowRoot | GemElement) =>
+  [...ele.querySelectorAll<GemReflectElement>('[data-gem-reflect]')].map((e) => e.target);
+
 export function defineRef(target: GemElement, prop: string, ref: string) {
+  const refSelector = `[ref=${ref}]`;
   Object.defineProperty(target, prop, {
     configurable: true,
     get() {
@@ -586,12 +585,14 @@ export function defineRef(target: GemElement, prop: string, ref: string) {
             return ref;
           },
           get element() {
-            const gemReflects = [...ele.querySelectorAll<GemReflectElement>('[data-gem-reflect]')].map((e) => e.target);
-            for (const e of [ele, ...gemReflects]) {
-              const result = e.querySelector(`[ref=${ref}]`);
+            for (const e of [ele, ...getReflectTargets(ele)]) {
+              const result = e.querySelector(refSelector);
               if (result) return result;
             }
           },
+          get elements() {
+            return [ele, ...getReflectTargets(ele)].map((e) => [...e.querySelectorAll(refSelector)]).flat();
+          },
         };
         proxy[prop] = refobject;
       }

package/src/lib/utils.ts

@@ -257,21 +257,29 @@ export interface StyledKeyValuePair {
 
 /**
  *
- * 创建 style sheet 用于 `adoptedStyleSheets`，不支持样式更新
- * @param rules string | Record<string, string> 不能动态更新的 css
- * @param mediaQuery string 媒体查询 StyleSheet.media.mediaText
+ * 创建 style sheet 用于 `adoptedStyleSheets`，不支持样式更新，只支持自定义 CSS 属性
+ * @param rules string | Record<string, string>
+ * @param media string 媒体查询
  */
-export function createCSSSheet<T extends StyledKeyValuePair>(rules: T | string, mediaQuery = ''): Sheet<T> {
-  const styleSheet = new CSSStyleSheet();
+export function createCSSSheet<T extends StyledKeyValuePair>(rules: T | string, media?: string): Sheet<T> {
+  const styleSheet = new CSSStyleSheet({ media });
   const sheet: any = {};
-  styleSheet.media.mediaText = mediaQuery;
   let style = '';
   if (typeof rules === 'string') {
     style = rules;
   } else {
     Object.keys(rules).forEach((key: keyof T) => {
       sheet[key] = `${key as string}-${randomStr()}`;
-      style += rules[key].styledContent.replace(/&/g, sheet[key]);
+      switch (rules[key].type) {
+        case 'class':
+          style += `.${sheet[key]} {${rules[key].styledContent}}`;
+          break;
+        case 'id':
+          style += `#${sheet[key]} {${rules[key].styledContent}}`;
+          break;
+        default:
+          style += `@keyframes ${key as string} {${rules[key].styledContent}}`;
+      }
     });
   }
   styleSheet.replaceSync(style);
@@ -285,24 +293,7 @@ export function randomStr(len = 5): string {
   return str;
 }
 
-const nestingRuleRegExp = new RegExp('&.*{((.|\n)*)}', 'g');
-// 只支持一层嵌套
-// https://drafts.csswg.org/css-nesting-1/
-// https://bugzilla.mozilla.org/show_bug.cgi?id=1648037
-// https://bugs.webkit.org/show_bug.cgi?id=223497
-function flatStyled(style: string, type: StyledType): StyledValueObject {
-  const nestingRules: string[] = [];
-  let styledContent =
-    `& {${style.replace(nestingRuleRegExp, (substr) => {
-      nestingRules.push(substr);
-      return '';
-    })}}` + nestingRules.join('');
-  styledContent = styledContent.replace(/&/g, type === 'class' ? '.&' : '#&');
-  return { styledContent, type };
-}
-
 // 写 css 文本，在 CSSStyleSheet 中使用，使用 styed-components 高亮
-// 暂时不支持 `at` 规则
 //
 // createCSSSheet({
 //   red: styled.class`
@@ -313,18 +304,14 @@ function flatStyled(style: string, type: StyledType): StyledValueObject {
 //   `,
 // });
 export const styled = {
-  class: (arr: TemplateStringsArray, ...args: any[]) => {
-    const style = raw(arr, ...args);
-    return flatStyled(style, 'class');
+  class: (arr: TemplateStringsArray, ...args: any[]): StyledValueObject => {
+    return { styledContent: raw(arr, ...args), type: 'class' };
   },
-  id: (arr: TemplateStringsArray, ...args: any[]) => {
-    const style = raw(arr, ...args);
-    return flatStyled(style, 'id');
+  id: (arr: TemplateStringsArray, ...args: any[]): StyledValueObject => {
+    return { styledContent: raw(arr, ...args), type: 'id' };
   },
   keyframes: (arr: TemplateStringsArray, ...args: any[]): StyledValueObject => {
-    const keyframesContent = raw(arr, ...args);
-    const styledContent = `@keyframes & {${keyframesContent}}`;
-    return { styledContent, type: 'keyframes' };
+    return { styledContent: raw(arr, ...args), type: 'keyframes' };
   },
 };
 
@@ -385,7 +372,13 @@ export function objectMapToString<T = any>(
 }
 
 // Wait: Typescript lib dom CSSStyleDeclaration anchor position
-type StyleProp = keyof CSSStyleDeclaration | `--${string}` | 'anchorDefault' | 'anchorName';
+type StyleProp =
+  | keyof CSSStyleDeclaration
+  | `--${string}`
+  | 'scrollbarWidth'
+  | 'scrollbarColor'
+  | 'anchorDefault'
+  | 'anchorName';
 
 export type StyleObject = Partial<Record<StyleProp, string | number | false | undefined | null>>;
 

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.7.11';
+export const version = '1.7.12';

package/src/test/utils.test.ts

@@ -16,6 +16,7 @@ import {
 
 declare global {
   interface CSSRuleList {
+    // only test style rule
     item(index: number): CSSStyleRule;
   }
 }
@@ -106,15 +107,22 @@ describe('utils 测试', () => {
       `,
       wrap: styled.id`
         position: fixed;
+        animation: 3s infinite alternate slideIn;
+      `,
+      slideIn: styled.keyframes`
+        from {
+          transform: translateX(0%);
+        }
       `,
     });
     expect(cssSheet.scroll.startsWith('scroll')).to.true;
     const rules = cssSheet[SheetToken].cssRules;
     expect(rules.item(0).selectorText.startsWith('.scroll')).to.true;
-    expect(rules.item(0).style.background.startsWith('red')).to.true;
-    expect(/\.scroll(-|\w)+:hover \*/.test(rules.item(1).selectorText)).to.true;
-    expect(rules.item(1).style.background.startsWith('blue')).to.true;
-    expect(rules.item(2).selectorText.startsWith('#wrap')).to.true;
+    expect(rules.item(0).style.background).to.equal('red');
+    expect(rules.item(0).cssRules.item(0).selectorText).to.equal('&:hover *');
+    expect(rules.item(0).cssRules.item(0).style.background).to.equal('blue');
+    expect(rules.item(1).selectorText.startsWith('#wrap')).to.true;
+    expect((rules.item(2) as any).name).to.equal('slideIn');
   });
   it('styleMap/classMap/exportPartsMap', () => {
     expect(styleMap({ '--x': '1px', fontSize: '14px', content: `'*'` })).to.equal(