周报@2023-03-09

Published by powerfulyang on Mar 9, 2023

日常记录遇到的一些问题：跨域相关，Chrome Extensions 的开发，graphql-request 的 breaking change。

谷歌浏览器拓展

  • Chrome Extensions 可以进入 chrome://extensions/shortcuts 地址设置快捷键，比如给 Google 翻译 加一个快捷键，这样就不用每次点图标了。

How to set up JSON Schema with WebStorm or IntelliJ IDEA

JSON Schema 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:

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
      1  // 添加如下fetch options
2fetchOptions: {
3    mode: 'cors',
4    credentials: 'omit',
5},

graphql-request 升级

nginx gzip

基于 micro-app 的微前端实践

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

tsx
1/** @jsxRuntime classic */
2/** @jsx jsxCustomEvent */
3import { PageContainer } from '@ant-design/pro-layout';
4import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event';
5import { useLocation } from '@umijs/max';
6
7// @ts-ignore
8window.jsxCustomEvent = jsxCustomEvent;
9
10const Micro = () => {
11  const { pathname } = useLocation();
12
13  return (
14    <PageContainer title={false}>
15      <micro-app
16        id="hui-agent"
17        data={{
18          pathname,
19        }}
20        keep-alive
21        name="hui-agent"
22        shadowDOM
23        url="https://qaecm-hui-agent.intous.com"
24        onMounted={() => {
25          setTimeout(() => {
26            const ele = document
27              .getElementById('hui-agent')
28              ?.shadowRoot?.querySelector('micro-app-head');
29            if (ele) {
30              const style = document.createElement('style');
31              style.innerHTML = `
32                    .ant-input-clear-icon {
33                      color: rgba(0, 0, 0, 0.25);
34                    }
35              `;
36              ele.appendChild(style);
37            }
38            // 随缘的一秒
39          }, 1000);
40        }}
41      />
42    </PageContainer>
43  );
44};
45
46export 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
1import { unified } from 'unified';
2import rehypeParse from 'rehype-parse';
3import rehypeRemark from 'rehype-remark';
4import remarkStringify from 'remark-stringify';
5import remarkGfm from 'remark-gfm';
6import stringWidth from 'string-width';
7import rehypeRemoveComments from 'rehype-remove-comments';
8import type { Unsafe } from 'mdast-util-to-markdown';
9import { defaultHandlers } from 'mdast-util-to-markdown';
10
11const { text } = defaultHandlers;
12
13/**
14 * @description By default, mdast-util-to-markdown will escape some characters in some
15 * conditions.
16 * @description See `unsafe.js` for all rules:
17 * https://github.com/syntax-tree/mdast-util-to-markdown/blob/main/lib/unsafe.js#L24
18 * @description In our case, we don't want to apply some of them.
19 */
20function unsafeFilter(rule: Unsafe): boolean {
21  // We don't want to escape '[' as it's wildly used in checkbox and backlink.
22  return rule.character !== '[';
23}
24
25export async function html2md(html: string): Promise<string> {
26  const file = await unified()
27    .use(rehypeParse, {
28      fragment: true,
29    })
30    .use(rehypeRemoveComments)
31    .use(rehypeRemark, {
32      unchecked: '[ ] ',
33      checked: '[x] ',
34    })
35    .use(remarkGfm, {
36      stringLength: stringWidth,
37    })
38    .use(remarkStringify, {
39      bullet: '+',
40      bulletOrdered: '.',
41      listItemIndent: 'one',
42      resourceLink: true,
43      fences: true,
44      emphasis: '_',
45      rule: '-',
46      tightDefinitions: true,
47      bulletOther: '-',
48      bulletOrderedOther: ')',
49      handlers: {
50        text: (node, parent, context, safeOptions) => {
51          return text(
52            node,
53            parent,
54            { ...context, unsafe: context.unsafe.filter(unsafeFilter) },
55            safeOptions,
56          );
57        },
58      },
59    })
60    .process(html);
61
62  return file.toString().trim();
63}

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.