Skip to content

JiLiZART/BBob

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

BBob a BBCode processor

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

Tests Benchmark codecov CodeFactor BCH compliance Known Vulnerabilities

Packages

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

DEMO Playground

Table of contents

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);

Edit lp7q9yj0lq

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>

Edit 306pzr9k5p

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>

Edit x7w52lqmzz

PostHTML usage

Create Plugin

Benchmarks

To test on your machine run

npm run build
node benchmark

Tested on Node v12.18.3

Package Ops/sec Runs sampled
regex/parser 6.02 ops/sec ±2.77% (20 runs sampled)
ya-bbcode 10.70 ops/sec ±1.94% (31 runs sampled)
xbbcode/parser 107 ops/sec ±2.29% (69 runs sampled)
@bbob/parser 137 ops/sec ±1.11% (78 runs sampled)

About

⚡️Blazing-fast js-bbcode-parser, bbcode js, that transforms and parses to AST with plugin support in pure javascript, no dependencies

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published