Gathering detailed insights and metrics for @bbob/parser
Gathering detailed insights and metrics for @bbob/parser
Gathering detailed insights and metrics for @bbob/parser
Gathering detailed insights and metrics for @bbob/parser
⚡️Blazing fast js bbcode parser, that transforms and parses bbcode to AST and transform it to HTML, React, Vue with plugin support in pure javascript, no dependencies
npm install @bbob/parser
@bbob/vue3@4.1.1
Published on 21 Aug 2024
@bbob/vue2@4.1.1
Published on 21 Aug 2024
@bbob/types@4.1.1
Published on 21 Aug 2024
@bbob/react@4.1.1
Published on 21 Aug 2024
@bbob/preset-vue@4.1.1
Published on 21 Aug 2024
@bbob/preset-react@4.1.1
Published on 21 Aug 2024
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
167 Stars
308 Commits
19 Forks
7 Watching
6 Branches
13 Contributors
Updated on 28 Nov 2024
TypeScript (91.27%)
JavaScript (8.73%)
Cumulative downloads
Total Downloads
Last day
16.5%
12,892
Compared to previous day
Last week
33%
95,889
Compared to previous week
Last month
50.8%
273,580
Compared to previous month
Last year
37.2%
1,434,182
Compared to previous year
2
BBob is a tool to parse and transform BBCode written in pure javascript, no dependencies
1npm i @bbob/html @bbob/preset-html5
1import bbobHTML from '@bbob/html' 2import presetHTML5 from '@bbob/preset-html5' 3 4const processed = bbobHTML(`[i]Text[/i]`, presetHTML5()) 5 6console.log(processed); // <span style="font-style: italic;">Text</span>
1npm i @bbob/react @bbob/preset-react
1import React from 'react' 2import BBCode from '@bbob/react'; 3import presetReact from '@bbob/preset-react'; 4 5const plugins = [presetReact()]; 6 7export default () => ( 8 <BBCode plugins={plugins}> 9 [table] 10 [tr] 11 [td]table 1[/td] 12 [td]table 2[/td] 13 [/tr] 14 [tr] 15 [td]table 3[/td] 16 [td]table 4[/td] 17 [/tr] 18 [/table] 19 </BBCode> 20)
1import { render } from '@bbob/react' 2 3export default () => render(` 4[table] 5 [tr] 6 [td]table 1[/td] 7 [td]table 2[/td] 8 [/tr] 9 [tr] 10 [td]table 3[/td] 11 [td]table 4[/td] 12 [/tr] 13[/table] 14`)
1npm i @bbob/vue2 @bbob/preset-vue
1import Vue from 'vue' 2import VueBbob from '@bbob/vue2'; 3 4Vue.use(VueBbob);
1<template> 2 <div class="html"> 3 <h2>Generated HTML here</h2> 4 <bbob-bbcode container="div" :plugins="plugins">{{ bbcode }}</bbob-bbcode> 5 </div> 6</template> 7<script> 8 import Vue from 'vue' 9 import preset from '@bbob/preset-vue' 10 11 export default Vue.extend({ 12 name: 'App', 13 data() { 14 return { 15 bbcode: 'Text [b]bolded[/b] and [i]Some Name[/i]', 16 plugins: [ 17 preset() 18 ], 19 } 20 } 21 }) 22</script>
More examples available in examples folder
Parse only allowed tags
1import bbobHTML from '@bbob/html' 2import presetHTML5 from '@bbob/preset-html5' 3 4const processed = bbobHTML(`[i][b]Text[/b][/i]`, presetHTML5(), { onlyAllowTags: ['i'] }) 5 6console.log(processed); // <span style="font-style: italic;">[b]Text[/b]</span>
Enable context free mode that ignores parsing all tags inside given tags
1import bbobHTML from '@bbob/html' 2import presetHTML5 from '@bbob/preset-html5' 3 4const processed = bbobHTML(`[b]Text[/b][code][b]Text[/b][/code]`, presetHTML5(), { contextFreeTags: ['code'] }) 5 6console.log(processed); // <span style="font-weight: bold;">Text</span><pre>[b]Text[/b]</pre>
Enable escape support for tags
1import bbobHTML from '@bbob/html' 2import presetHTML5 from '@bbob/preset-html5' 3 4const processed = bbobHTML(`[b]Text[/b]'\\[b\\]Text\\[/b\\]'`, presetHTML5(), { enableEscapeTags: true }) 5 6console.log(processed); // <span style="font-weight: bold;">Text</span>[b]Text[/b]
Allows to parse case insensitive tags like [h1]some[/H1]
-> <h1>some</h1>
1import bbobHTML from '@bbob/html' 2import presetHTML5 from '@bbob/preset-html5' 3 4const processed = bbobHTML(`[h1]some[/H1]`, presetHTML5(), { caseFreeTags: true }) 5 6console.log(processed); // <h1>some</h1>
1import bbobHTML from '@bbob/html' 2import presetHTML5 from '@bbob/preset-html5' 3 4const processed = bbobHTML(`[b]Text[/b]'\\[b\\]Text\\[/b\\]'`, presetHTML5(), { enableEscapeTags: true }) 5 6console.log(processed); // <span style="font-weight: bold;">Text</span>[b]Text[/b]
Its a way to transform parsed BBCode AST tree to another tree by rules in preset
1import { createPreset } from '@bbob/preset' 2 3export default createPreset({ 4 quote: (node) => ({ 5 tag: 'blockquote', 6 attrs: node.attrs, 7 content: [{ 8 tag: 'p', 9 attrs: {}, 10 content: node.content, 11 }], 12 }), 13})
Also you can use predefined preset for HTML
1import html5Preset from '@bbob/preset-html5/es' 2import { render } from '@bbob/html/es' 3import bbob from '@bbob/core' 4 5console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`, { render }).html) // <blockquote><p>Text</p></blockquote>
Also you can use predefined preset for React
1import reactPreset from "@bbob/preset-react"; 2import reactRender from "@bbob/react/es/render"; 3 4const preset = reactPreset.extend((tags, options) => ({ 5 ...tags, 6 quote: node => ({ 7 tag: "blockquote", 8 content: node.content 9 }) 10})); 11 12const result = reactRender(`[quote]Text[/quote]`, reactPreset()); 13 14/* 15It produces a VDOM Nodes equal to 16React.createElement('blockquote', 'Text') 17*/ 18document.getElementById("root").innerHTML = JSON.stringify(result, 4);
Or you can use React Component
1import React from 'react' 2import { render } from 'react-dom' 3 4import BBCode from '@bbob/react/es/Component' 5import reactPreset from '@bbob/preset-react/es' 6 7const MyComponent = () => ( 8 <BBCode plugins={[reactPreset()]} options={{ onlyAllowTags: ['i'] }}> 9 [quote]Text[/quote] 10 </BBCode> 11) 12 13render(<MyComponent />) // <div><blockquote><p>Text</p></blockquote></div>
Or pass result as render prop
1import React from "react"; 2import { render } from 'react-dom' 3 4import reactRender from '@bbob/react/es/render' 5import reactPreset from '@bbob/preset-react/es' 6 7const toReact = input => reactRender(input, reactPreset()) 8 9const text = toReact('[b]Super [i]easy[/i][/b] [u]to[/u] render') 10 11const App = ({ renderProp }) => ( 12 <span>{text}</span> 13) 14 15render(<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>
For example lets parse all strings that similar to links like "https://some-site.com"
1import { createRoot } from "react-dom/client"; 2 3import BBCode from "@bbob/react/es/Component"; 4import TagNode from "@bbob/plugin-helper/es/TagNode"; 5import { isStringNode } from "@bbob/plugin-helper/es"; 6 7const URL_RE = new RegExp( 8 `([--:\\w?@%&+~#=]+\\/*\\.[a-z]{2,4}\\/{0,2})((?:[?&](?:\\w+)=(?:\\w+))+|[^^).|,][--:\\w?@%&+~#=()_]+)?`, 9 "g" 10); 11 12const isValidUrl = (url) => URL_RE.test(url); 13 14const linkParsePlugin = (tree) => { 15 return tree.walk((node) => { 16 if (isStringNode(node) && isValidUrl(node)) { 17 return TagNode.create( 18 "a", 19 { 20 href: node 21 }, 22 `Url to: ${node}` 23 ); 24 } 25 26 return node; 27 }); 28}; 29 30const rootElement = document.getElementById("root"); 31const root = createRoot(rootElement); 32 33root.render( 34 <BBCode plugins={[linkParsePlugin]}> 35 https://github.com/JiLiZART/BBob Other text without link 36 </BBCode> 37);
To test on your machine run
1npm run build 2node benchmark
Tested on Node v20.11.1
Package | Ops/sec |
---|---|
regex/parser | 6 ops/sec |
ya-bbcode | 11 ops/sec |
xbbcode/parser | 102 ops/sec |
@bbob/parser | 174 ops/sec |
Checkout Benckmark job results
You can support this projecti with donation in:
Bitcoin: bc1qx34sx3zmfd5e2km607p8s8t30d4rt33d2l9pwt
USDT(TRC20): TT94uVjJho8n47xbdfNYz6vdebgmKFpxAT
Also thanks to support
Developed with <3 using JetBrains
No vulnerabilities found.
No security vulnerabilities found.