BBob

BBob copied to clipboard

BBob is a tool to parse and transform BBCode written in pure javascript, no dependencies

Packages

Package	Status	Size	Description
@bbob/core			Core package
@bbob/react			React renderer
@bbob/preset-react			React default tags preset
@bbob/vue2			Vue 2 renderer
@bbob/preset-vue			Vue default tags preset
@bbob/html			HTML renderer
@bbob/preset-html5			HTML5 default tags preset

DEMO Playground

Table of contents

• Usage
  • Basic usage
  • React usage
  • Vue 2 usage
• Presets
  • Create your own preset
  • HTML Preset
  • React Preset
• React usage
  • Component
  • Render prop
• PostHTML usage
• Create Plugin
• Benchmarks

Basic usage

npm i @bbob/core @bbob/html @bbob/preset-html5

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[i]Text[/i]`, presetHTML5())

console.log(processed); // <span style="font-style: italic;">Text</span>

React usage

npm i @bbob/react @bbob/preset-react

import React from 'react'
import {render} from 'react-dom'
import bbobReactRender from '@bbob/react/es/render'
import presetReact from '@bbob/preset-react'

const options = { onlyAllowTags: ['i'], enableEscapeTags: true }
const content = bbobReactRender(`[i]Text[/i]`, presetReact(), options)

console.log(render(<span>{content}</span>)); // <span><span style="font-style: italic;">Text</span></span>

Vue 2 usage

npm i @bbob/vue2 @bbob/preset-vue

import Vue from 'vue'
import VueBbob from '@bbob/vue2';

Vue.use(VueBbob);

<template>
  <div class="html">
    <h2>Generated HTML here</h2>
    <bbob-bbcode container="div" :plugins="plugins">{{ bbcode }}</bbob-bbcode>
  </div>
</template>
<script>
  import Vue from 'vue'
  import preset from '@bbob/preset-vue'
  
  export default Vue.extend({
    name: 'App',
    data() {
      return {
        bbcode: 'Text [b]bolded[/b] and [i]Some Name[/i]',
        plugins: [
          preset()
        ],
      }
    }
  })
</script>

More examples available in examples folder

Presets

Its a way to transform parsed BBCode AST tree to another tree by rules in preset

Create your own preset

import { createPreset } from '@bbob/preset'

export default createPreset({
  quote: (node) => ({
    tag: 'blockquote',
    attrs: node.attrs,
    content: [{
      tag: 'p',
      attrs: {},
      content: node.content,
    }],
  }),
})

HTML Preset

Also you can use predefined preset for HTML

import html5Preset from '@bbob/preset-html5/es'
import { render } from '@bbob/html/es'
import bbob from '@bbob/core'

console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`, { render }).html) // <blockquote><p>Text</p></blockquote>

React Preset

Also you can use predefined preset for React

import reactPreset from "@bbob/preset-react";
import reactRender from "@bbob/react/es/render";

const preset = reactPreset.extend((tags, options) => ({
  ...tags,
  quote: node => ({
    tag: "blockquote",
    content: node.content
  })
}));

const result = reactRender(`[quote]Text[/quote]`, reactPreset());

/* 
It produces a VDOM Nodes equal to
React.createElement('blockquote', 'Text')
*/
document.getElementById("root").innerHTML = JSON.stringify(result, 4);

React usage

Component

Or you can use React Component

import React from 'react'
import { render } from 'react-dom'

import BBCode from '@bbob/react/es/Component'
import reactPreset from '@bbob/preset-react/es'

const MyComponent = () => (
  <BBCode plugins={[reactPreset()]} options={{ onlyAllowTags: ['i'] }}>
    [quote]Text[/quote]
  </BBCode>
)

render(<MyComponent />) // <div><blockquote><p>Text</p></blockquote></div>

Render prop

Or pass result as render prop

import React from "react";
import { render } from 'react-dom'

import reactRender from '@bbob/react/es/render'
import reactPreset from '@bbob/preset-react/es'

const toReact = input => reactRender(input, reactPreset())

const text = toReact('[b]Super [i]easy[/i][/b] [u]to[/u] render')

const App = ({ renderProp }) => (
  <span>{text}</span>
)

render(<App />) // <span><span style="font-weight: bold;">Super <span style="font-style: italic;">easy</span></span> <span style="text-decoration: underline;">to</span> render</span>

PostHTML usage

Create Plugin

For example lets parse all strings that similar to links like "https://some-site.com"

import { createRoot } from "react-dom/client";

import BBCode from "@bbob/react/es/Component";
import TagNode from "@bbob/plugin-helper/es/TagNode";
import { isStringNode } from "@bbob/plugin-helper/es";

const URL_RE = new RegExp(
  `([--:\\w?@%&+~#=]+\\/*\\.[a-z]{2,4}\\/{0,2})((?:[?&](?:\\w+)=(?:\\w+))+|[^^).|,][--:\\w?@%&+~#=()_]+)?`,
  "g"
);

const isValidUrl = (url) => URL_RE.test(url);

const linkParsePlugin = (tree) => {
  return tree.walk((node) => {
    if (isStringNode(node) && isValidUrl(node)) {
      return TagNode.create(
        "a",
        {
          href: node
        },
        `Url to: ${node}`
      );
    }

    return node;
  });
};

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <BBCode plugins={[linkParsePlugin]}>
    https://github.com/JiLiZART/BBob Other text without link
  </BBCode>
);

Benchmarks

To test on your machine run

npm run build
node benchmark

Tested on Node v12.18.3