feat: support to handle img source from local #1163
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
|
@timeTravelCYN 合并下 master 最新代码，参考已有 case 加一条单独的用例 |
| @@ -32,6 +33,7 @@ export default async (raw: string, opts: IMdTransformerOptions) => { | |||
| fileAbsPath: opts.fileAbsPath, | |||
| }) | |||
| .use(rehypeJsxify) | |||
| .use(rehypeImg) | |||
There was a problem hiding this comment.
rehypeImg 放在 rehypeStrip 后面，rehypeJsxify 是 Compiler 始终放在最后
| })(); | ||
|
|
||
| function isRelativeUrl(url: string) { | ||
| return typeof url === 'string' && !/^(?:(?:blob:)?\w+:)?\/\//.test(url) && !path.isAbsolute(url); |
| // use wrapper element to workaround for skip props escape | ||
| // https://github.com/mapbox/jsxtreme-markdown/blob/main/packages/hast-util-to-jsx/index.js#L159 | ||
| // eslint-disable-next-line no-new-wrappers | ||
| node.properties!.src = `require('${decodeURI(src)}')`; |
There was a problem hiding this comment.
dumi 2 换了 jsx 转换的工具，包装对象的玩法不一定奏效，要验证一下
There was a problem hiding this comment.
@PeachScript 请问这个需要怎么验证，目前还没有完全熟悉 dumi 的流程，所以想厚着脸皮直接请教一下😁
There was a problem hiding this comment.
先验证插件编译结果是否符合预期：参考 demo 用例 加个 img 用例，在 expect.ts 里输出看编译出来的结果是不是 <img src={require('xxx')} />，如果属性变成了纯字符串，那么 require 就无法生效了
然后验证渲染：在 examples/normal 下随便加个图片（比如 dumi 官网的 logo），然后在 md 里引入，启动 dev 看能不能正常在页面展示图片
There was a problem hiding this comment.
@PeachScript 这块确实是不生效了，我看了下，主要是 https://github.com/syntax-tree/estree-util-to-js/blob/main/lib/jsx.js#L47 type 为 Literal，这块有什么修改的办法吗，找了一下，没找到怎么处理..
There was a problem hiding this comment.
那这个任务难度应该比较高了，之前忘了这个点…你可以选择先做其他任务，我找下解法
There was a problem hiding this comment.
@PeachScript 大佬目前有什么思路吗，我想了下大概需要从 JSXAttribute 转变到 JSXExpressionContainer，或者在某个钩子里直接一开始把 img 转为 text(<img src={require('./demo.png')} />会直接被解析成 text 而不是 img)
There was a problem hiding this comment.
大佬不敢当…目前想到的思路，我们自行约定 node.jsxProps 替代 node.properties，在 rehypeJsxify 里的 toEstree 以后再遍历一遍 node，把 jsxProps 里的属性追加创建成 node 的 JSXExpressionContainer，再交给 toJs 转成 JSX
There was a problem hiding this comment.
JSX Props 的支持我加上了，可以同步下 master 试下
用法：node.JSXAttributes = [{ type: 'JSXAttribute', name: 'src', value: "require('./xxx')" }]，Compiler 阶段会自动把 value 转换成 AST 做序列化
| export default function rehypeImg(): Transformer<Root> { | ||
| return tree => { | ||
| visit<Root, 'element'>(tree, 'element', (node: Element) => { | ||
| if (isElement(node, 'img') && hasProperty(node, 'src')) { |
There was a problem hiding this comment.
可以直接判断 node.tagName 及 typeof node.properties?.src，代替 isElement 和 hasProperty，这样可以确保类型推导正常工作
|
ok |
|
该特性由 #1226 继续跟进，后续有精力可以继续参与其他任务，感谢贡献 ❤ |
#1157
rehypeImg 相对路径图片引入