Closed sounisi5011 closed 5 years ago
知った経緯をメモしておこうか。
unistの導入は、 #13 が一旦完了してからにしよう。基本的な文法に対応してから導入しても遅くはない。
使い方はこのようなものを想定。
import fs from 'fs';
import util from 'util';
import unified from 'unified';
import createStream from 'unified-stream';
import rehypeStringify from 'rehype-stringify';
import { parse, ast2rehype } from '@sounisi5011/vec-draw';
const readFileAsync = util.promisify(fs.readFile);
const writeFileAsync = util.promisify(fs.writeFile);
(async () => {
const inputDSLText = await readFileAsync('input.vec-draw', 'utf-8');
const outputSVGText = await unified()
.use(parse)
.use(ast2rehype)
.use(rehypeStringify)
.process(inputDSLText);
await writeFileAsync('output.svg', outputSVGText);
const processor = unified()
.use(parse)
.use(ast2rehype)
.use(rehypeStringify);
const src = fs.createReadStream('src.vec-draw', 'utf8');
const dest = fs.createWriteStream('dest.svg', 'utf8');
src.pipe(createStream(processor)).pipe(dest);
})();
parse
は以下のような感じで定義。
export function parse(options) {
this.Parser = file => {
const fileText = String(file);
const ast = /* fileTextをASTオブジェクトに変換する処理 */;
return ast;
};
}
https://github.com/sounisi5011/vec-draw/pull/24 で作業を開始したのでこっちも再度open。
概要
AST等の生成にunistを導入する。
詳細
開発中の #13 において、SVGを生成するために独自実装した仮想ノードを変換している。これを、驚くような大手のプロジェクトでも採用されているらしいunistを使用したものに切り替える。
メリット
vec-draw
のデベロッパーツール等を制作する際の助けになるPosition
などもシッカリ含まれている。デメリット
備考
unistに対応したHTMLを表現する仕様hastのツリーをhyperscript(
h()
関数)形式で生成できるライブラリにhastscriptなるものが存在する。