fruitriin/mfm-renderer

Meintenable MFM Renderer Component

MFMをレンダリングするコンポーネント 各文法ごとにコンポーネント化されているのでメンテナンスしやすい気がする。

Installation

main.js (main.ts) 的なところで createApp() しているところに .use(Mfm) を足す

import { createApp } from 'vue'
import App from './App.vue'

import Mfm from "mfm-renderer"

createApp(App).use(Mfm).mount('#app')

使い方

コンポーネントの中で MfmText コンポーネントを使う

<MfmText text="Hello **mfm**" />

進み具合

構文 (Syntax)

ファイル名	説明	進捗
Blockcode.vue	複数行のコード	スタイルがない
Bold.vue	太字	よさそう
EmojiCode.vue	カスタム絵文字	よさそう
Inlinecode.vue	一行のコード	スタイルがない
Mention.vue	メンション	よさそう
Search.vue	検索	よさそう
Text.vue	テキスト	よさそう
Center.vue	**寄せ	よさそう
Fn.vue	なんか色々	後述
Italic.vue	斜体	よさそう
Plain.vue		よさそう
Small.vue		よさそう
UnicodeEmoji.vue		暫定
Hashtag.vue	ハッシュタグ	よさそう
Link.vue	リンク構文	よさそう
Quote.vue	引用	よさそう
Strike.vue	打ち消し線	よさそう
Url.vue	URL	よさそう

Fn

$[nantoka text] のやつ

コンポーネント	せつめい	進み具合
fg	文字色	よさそう
bg	背景	よさそう
blur	文字色	よさそう
font	font-family	よさそう
rotate	回転	よさそう
scale	拡大	よさそう
position	位置変更	よさそう
（アニメーション)		delay 以外よさそう
sparkle	きらきら	未実装
unixtime	相対時間	未実装

mfm-renderer's Issues

Todo List

• Sparlkeの実装がなさそう
• delayとかにたいおいうしてない
• rotateがオプションめっちゃ足りない
• lintとfomatかかってるっけ？かけちゃってよい
• コンポーネントが全部グローバル登録で漏れてるのをなんとかする

別件

• React版を作る？

コンポーネントの読み込みを別のファイルにしたい

import MfmText from './Syntax/MfmText.vue'
import MfmBold from './Syntax/MfmBold.vue'
import MfmItalic from './Syntax/MfmItalic.vue'
import MfmQuote from './Syntax/MfmQuote.vue'
import MfmSmall from './Syntax/MfmSmall.vue'
import MfmCenter from './Syntax/MfmCenter.vue'
import MfmEmojiCode from './Syntax/MfmEmojiCode.vue'
import MfmMention from './Syntax/MfmMention.vue'
import MfmPlain from './Syntax/MfmPlain.vue'
import MfmBlockCode from './Syntax/MfmBlockCode.vue'
import MfmInlinecode from './Syntax/MfmInlinecode.vue'
import MfmSearch from './Syntax/MfmSearch.vue'
import MfmStrike from './Syntax/MfmStrike.vue'
import MfmUnicodeEmoji from './Syntax/MfmUnicodeEmoji.vue'
import MfmUrl from './Syntax/MfmUrl.vue'
import MfmLink from './Syntax/MfmLink.vue'
import MfmHashtag from './Syntax/MfmHashtag.vue'
import MfmFn from './Syntax/MfmFn.vue'
import MfmFg from './Fn/MfmFg.vue'
import MfmBg from './Fn/MfmBg.vue'
// import MfmFont from './Fn/MfmFont.vue'
const MfmFont = {}
import MfmBlur from './Fn/MfmBlur.vue'
import MfmFlip from './Fn/MfmFlip.vue'
import MfmScale from './Fn/MfmScale.vue'
import MfmPosition from './Fn/MfmPosition.vue'
import Mfmx2 from './Fn/Mfmx2.vue'
import Mfmx3 from './Fn/Mfmx3.vue'
import Mfmx4 from './Fn/Mfmx4.vue'
import MfmJump from './Fn/MfmJump.vue'
import MfmTada from './Fn/MfmTada.vue'
import MfmJelly from './Fn/MfmJelly.vue'
import MfmSpin from './Fn/MfmSpin.vue'
import MfmTwitch from './Fn/MfmTwitch.vue'
import MfmShake from './Fn/MfmShake.vue'
import MfmBounce from './Fn/MfmBounce.vue'
// import MfmRainbow from './Fn/MfmRainbow.vue'
const MfmRainbow = {}
import MfmRuby from './Fn/MfmRuby.vue'
const MfmSparkle = {}

export const syntaxComponents = {
  MfmBold,
  MfmItalic,
  MfmQuote,
  MfmSmall,
  MfmText,
  MfmCenter,
  MfmEmojiCode,
  MfmMention,
  MfmPlain,
  MfmBlockCode,
  MfmInlinecode,
  MfmSearch,
  MfmStrike,
  MfmUnicodeEmoji,
  MfmUrl,
  MfmLink,
  MfmHashtag,
  MfmFn
}
export const functionComponents = {
  MfmFg,
  MfmBg,
  MfmFont,
  MfmBlur,
  MfmFlip,
  MfmScale,
  MfmPosition,
  Mfmx2,
  Mfmx3,
  Mfmx4,
  MfmJump,
  MfmTada,
  MfmJelly,
  MfmSpin,
  MfmTwitch,
  MfmShake,
  MfmBounce,
  MfmRainbow,
  MfmRuby,
  MfmSparkle
}