---
title: 周报@2023-03-09
author: powerfulyang
date: 2023-03-09
public: true
summary: 日常记录遇到的一些问题：跨域相关，Chrome Extensions 的开发，graphql-request 的 breaking change。
posterId: 47942
tags: 
    - 周报
    - 个人总结
---

## 谷歌浏览器拓展

+ Chrome Extensions 可以进入 `chrome://extensions/shortcuts` 地址设置快捷键，比如给 `Google 翻译` 加一个快捷键，这样就不用每次点图标了。
- [ ] 还粗略了解了 Chrome Extensions 的开发
    + schema: https://json.schemastore.org/chrome-manifest

## How to set up JSON Schema with WebStorm or IntelliJ IDEA

[JSON Schema](https://json-schema.org/) is a great way to simplify writing and validating JSON files. The IDEs/editors from Jetbrains, like IntelliJ IDEA or WebStorm, have built-in support for JSON Schema definitions. It only requires a quick one-time setup.

Open the IDE settings and search for `JSON Schema`. Then select `Languages & Frameworks` » `Schemas and DTDs` » `JSON Schema Mappings`. Click the `+` button at the top to add a new JSON schema configuration. Then fill in the corresponding name, file or URL, and version. For the Chrome Extension manifest schema, use the following:

+ Name: manifest.json
+ Schema file or URL: https://json.schemastore.org/chrome-manifest
Schema version: JSON Schema version 7

![source protected](47962)

Click OK and verify that the configuration works. With JSON schema configured properly, the IDE will now automatically validate JSON files that you configured accordingly. And you will also get code completion while writing JSON content like you are already used to while programming.

## 算法学习

+ 复习了 Reverse Linked List, 这次我一定会

## 跨域总结

+ Service Worker 之 跨域资源
    + 后端是支持cors
    + img, script 标签启用 cors, `<img crossorigin="anonymous" />`
    + 当然这样工作量太大，屎山没法动了。有没有统一处理的方法呢？有。可以通过拦截 fetch 请求来统一处理, 在使用 workbox 的场景下，可以通过设置缓存策略类中 fetchOptions 来实现
        ```json
          // 添加如下fetch options
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit',
        },
        ```

## graphql-request 升级

+ [[5.2.0] broke the typings of graphql-codegen generation](https://github.com/jasonkuhrt/graphql-request/issues/467#issuecomment-1451571369)

## nginx gzip

+ [gzip 默认不会操作 HTTP STATUS CODE 为 201 的响应](https://mailman.nginx.org/pipermail/nginx/2012-September/035338.html)
+ 还要注意设置 gzip_types 哦

## 基于 micro-app 的微前端实践

micro-app 搭配 ant-design-pro 使用时，在React 版本够高的情况下，暂时只发现只有 @ant-design/icons 的样式污染问题，会强行插入一段 style 导致样式污染。如下一段例子简单解决了这个问题:

```tsx
/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import { PageContainer } from '@ant-design/pro-layout';
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event';
import { useLocation } from '@umijs/max';

// @ts-ignore
window.jsxCustomEvent = jsxCustomEvent;

const Micro = () => {
  const { pathname } = useLocation();

  return (
    <PageContainer title={false}>
      <micro-app
        id="hui-agent"
        data={{
          pathname,
        }}
        keep-alive
        name="hui-agent"
        shadowDOM
        url="https://qaecm-hui-agent.intous.com"
        onMounted={() => {
          setTimeout(() => {
            const ele = document
              .getElementById('hui-agent')
              ?.shadowRoot?.querySelector('micro-app-head');
            if (ele) {
              const style = document.createElement('style');
              style.innerHTML = `
                    .ant-input-clear-icon {
                      color: rgba(0, 0, 0, 0.25);
                    }
              `;
              ele.appendChild(style);
            }
            // 随缘的一秒
          }, 1000);
        }}
      />
    </PageContainer>
  );
};

export default Micro;
```

## remark-stringify escape/encode [

How to disable remark-stringify escape/encode [?  
We don't want to escape '[' as it's wildly used in checkbox and backlink. It is task-list-item mark in react-gfm.

> https://github.com/syntax-tree/mdast-util-to-markdown/issues/31

```ts
import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeRemark from 'rehype-remark';
import remarkStringify from 'remark-stringify';
import remarkGfm from 'remark-gfm';
import stringWidth from 'string-width';
import rehypeRemoveComments from 'rehype-remove-comments';
import type { Unsafe } from 'mdast-util-to-markdown';
import { defaultHandlers } from 'mdast-util-to-markdown';

const { text } = defaultHandlers;

/**
 * @description By default, mdast-util-to-markdown will escape some characters in some
 * conditions.
 * @description See `unsafe.js` for all rules:
 * https://github.com/syntax-tree/mdast-util-to-markdown/blob/main/lib/unsafe.js#L24
 * @description In our case, we don't want to apply some of them.
 */
function unsafeFilter(rule: Unsafe): boolean {
  // We don't want to escape '[' as it's wildly used in checkbox and backlink.
  return rule.character !== '[';
}

export async function html2md(html: string): Promise<string> {
  const file = await unified()
    .use(rehypeParse, {
      fragment: true,
    })
    .use(rehypeRemoveComments)
    .use(rehypeRemark, {
      unchecked: '[ ] ',
      checked: '[x] ',
    })
    .use(remarkGfm, {
      stringLength: stringWidth,
    })
    .use(remarkStringify, {
      bullet: '+',
      bulletOrdered: '.',
      listItemIndent: 'one',
      resourceLink: true,
      fences: true,
      emphasis: '_',
      rule: '-',
      tightDefinitions: true,
      bulletOther: '-',
      bulletOrderedOther: ')',
      handlers: {
        text: (node, parent, context, safeOptions) => {
          return text(
            node,
            parent,
            { ...context, unsafe: context.unsafe.filter(unsafeFilter) },
            safeOptions,
          );
        },
      },
    })
    .process(html);

  return file.toString().trim();
}
```

## react-markdown links parse as href="javascript\:void(0)"

> https://github.com/remarkjs/react-markdown/issues/537

`transformLinkUri` ((uri) => string, default: `./uri-transformer.js`, optional)
URL to use for links. The default allows only http, https, mailto, and tel, and is available at
ReactMarkdown.uriTransformer. Pass `false` to allow all URLs. 

周报@2023-03-09

---
title: 周报@2023-03-09
author: powerfulyang
date: 2023-03-09
public: true
summary: 日常记录遇到的一些问题：跨域相关，Chrome Extensions 的开发，graphql-request 的 breaking change。
posterId: 47942
tags: 
    - 周报
    - 个人总结
---

## 谷歌浏览器拓展

+ Chrome Extensions 可以进入 `chrome://extensions/shortcuts` 地址设置快捷键，比如给 `Google 翻译` 加一个快捷键，这样就不用每次点图标了。
- [x] 还粗略了解了 Chrome Extensions 的开发
    + schema: https://json.schemastore.org/chrome-manifest

## How to set up JSON Schema with WebStorm or IntelliJ IDEA

[JSON Schema](https://json-schema.org/) is a great way to simplify writing and validating JSON files. The IDEs/editors from Jetbrains, like IntelliJ IDEA or WebStorm, have built-in support for JSON Schema definitions. It only requires a quick one-time setup.

Open the IDE settings and search for `JSON Schema`. Then select `Languages & Frameworks` » `Schemas and DTDs` » `JSON Schema Mappings`. Click the `+` button at the top to add a new JSON schema configuration. Then fill in the corresponding name, file or URL, and version. For the Chrome Extension manifest schema, use the following:

+ Name: manifest.json
+ Schema file or URL: https://json.schemastore.org/chrome-manifest
Schema version: JSON Schema version 7

![source protected](47962)

Click OK and verify that the configuration works. With JSON schema configured properly, the IDE will now automatically validate JSON files that you configured accordingly. And you will also get code completion while writing JSON content like you are already used to while programming.

## 算法学习

+ 复习了 Reverse Linked List, 这次我一定会

## 跨域总结

+ Service Worker 之 跨域资源
    + 后端是支持cors
    + img, script 标签启用 cors, `<img crossorigin="anonymous" />`
    + 当然这样工作量太大，屎山没法动了。有没有统一处理的方法呢？有。可以通过拦截 fetch 请求来统一处理, 在使用 workbox 的场景下，可以通过设置缓存策略类中 fetchOptions 来实现
        ```json
          // 添加如下fetch options
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit',
        },
        ```

## graphql-request 升级

+ [[5.2.0] broke the typings of graphql-codegen generation](https://github.com/jasonkuhrt/graphql-request/issues/467#issuecomment-1451571369)

## nginx gzip

+ [gzip 默认不会操作 HTTP STATUS CODE 为 201 的响应](https://mailman.nginx.org/pipermail/nginx/2012-September/035338.html)
+ 还要注意设置 gzip_types 哦

## 基于 micro-app 的微前端实践

micro-app 搭配 ant-design-pro 使用时，在React 版本够高的情况下，暂时只发现只有 @ant-design/icons 的样式污染问题，会强行插入一段 style 导致样式污染。如下一段例子简单解决了这个问题:

```tsx
/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import { PageContainer } from '@ant-design/pro-layout';
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event';
import { useLocation } from '@umijs/max';

// @ts-ignore
window.jsxCustomEvent = jsxCustomEvent;

const Micro = () => {
  const { pathname } = useLocation();

  return (
    <PageContainer title={false}>
      <micro-app
        id="hui-agent"
        data={{
          pathname,
        }}
        keep-alive
        name="hui-agent"
        shadowDOM
        url="https://qaecm-hui-agent.intous.com"
        onMounted={() => {
          setTimeout(() => {
            const ele = document
              .getElementById('hui-agent')
              ?.shadowRoot?.querySelector('micro-app-head');
            if (ele) {
              const style = document.createElement('style');
              style.innerHTML = `
                    .ant-input-clear-icon {
                      color: rgba(0, 0, 0, 0.25);
                    }
              `;
              ele.appendChild(style);
            }
            // 随缘的一秒
          }, 1000);
        }}
      />
    </PageContainer>
  );
};

export default Micro;
```

## remark-stringify escape/encode [

How to disable remark-stringify escape/encode [?  
We don't want to escape '[' as it's wildly used in checkbox and backlink. It is task-list-item mark in react-gfm.

> https://github.com/syntax-tree/mdast-util-to-markdown/issues/31

```ts
import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeRemark from 'rehype-remark';
import remarkStringify from 'remark-stringify';
import remarkGfm from 'remark-gfm';
import stringWidth from 'string-width';
import rehypeRemoveComments from 'rehype-remove-comments';
import type { Unsafe } from 'mdast-util-to-markdown';
import { defaultHandlers } from 'mdast-util-to-markdown';

const { text } = defaultHandlers;

/**
 * @description By default, mdast-util-to-markdown will escape some characters in some
 * conditions.
 * @description See `unsafe.js` for all rules:
 * https://github.com/syntax-tree/mdast-util-to-markdown/blob/main/lib/unsafe.js#L24
 * @description In our case, we don't want to apply some of them.
 */
function unsafeFilter(rule: Unsafe): boolean {
  // We don't want to escape '[' as it's wildly used in checkbox and backlink.
  return rule.character !== '[';
}

export async function html2md(html: string): Promise<string> {
  const file = await unified()
    .use(rehypeParse, {
      fragment: true,
    })
    .use(rehypeRemoveComments)
    .use(rehypeRemark, {
      unchecked: '[ ] ',
      checked: '[x] ',
    })
    .use(remarkGfm, {
      stringLength: stringWidth,
    })
    .use(remarkStringify, {
      bullet: '+',
      bulletOrdered: '.',
      listItemIndent: 'one',
      resourceLink: true,
      fences: true,
      emphasis: '_',
      rule: '-',
      tightDefinitions: true,
      bulletOther: '-',
      bulletOrderedOther: ')',
      handlers: {
        text: (node, parent, context, safeOptions) => {
          return text(
            node,
            parent,
            { ...context, unsafe: context.unsafe.filter(unsafeFilter) },
            safeOptions,
          );
        },
      },
    })
    .process(html);

  return file.toString().trim();
}
```

## react-markdown links parse as href="javascript\:void(0)"

> https://github.com/remarkjs/react-markdown/issues/537

`transformLinkUri` ((uri) => string, default: `./uri-transformer.js`, optional)
URL to use for links. The default allows only http, https, mailto, and tel, and is available at
ReactMarkdown.uriTransformer. Pass `false` to allow all URLs. 

周报@2023-03-09 @ Tue, Mar 14, 2023 9:53 PM			周报@2023-03-09 @ Sun, Mar 19, 2023 6:35 PM
		Expand 12 lines ...
13		`## 谷歌浏览器拓展`	13		`## 谷歌浏览器拓展`
14			14
15		+ Chrome Extensions 可以进入 `chrome://extensions/shortcuts` 地址设置快捷键，比如给 `Google 翻译` 加一个快捷键，这样就不用每次点图标了。	15		+ Chrome Extensions 可以进入 `chrome://extensions/shortcuts` 地址设置快捷键，比如给 `Google 翻译` 加一个快捷键，这样就不用每次点图标了。
16	-	`- [` `] 还粗略了解了 Chrome Extensions 的开发`	16	+	`- [x] 还粗略了解了 Chrome Extensions 的开发`
17		`+ schema: https://json.schemastore.org/chrome-manifest`	17		`+ schema: https://json.schemastore.org/chrome-manifest`
18			18
19		`## How to set up JSON Schema with WebStorm or IntelliJ IDEA`	19		`## How to set up JSON Schema with WebStorm or IntelliJ IDEA`
		Expand 173 lines ...