Notorious Penguin Magicians

    typesite-jsx-renderer
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    Typesite-filter-out

    A plugin for Typesite that allows you to render JSX to HTML easily, even if you want to have multiple JSX fragments in the same file.

    Installation

    Run npm install typesite-filter-out

    How to use

    First register JsxRendererPlugin plugin in your Typesite project:

    typesite.use(new JsxRendererPlugin(true));

    Then add JsxContentsMeta to the frontmatter of whatever files you want to have JSX contents. It takes a callback which will be given ContentFile and Typesite as params and will expect you to return JSX.Element.

    This will overwrite content sent by just having a string in the frontmatter.

    export default new Frontmatter(
        new JsxContentsMeta((path:string, file:ContentFile, files:ContentFileCollection, typesite:Typesite) => {
            return <div className="main-page">
                This will be my <strong>main</strong> content
            </div>;
        }),
        "This string content will be overwritten."
    );

    Multiple JSX fragments

    If you want to have multiple JSX fragments in one file, for example a summary for a blog post, you first have to create a new class extending JsxContentsMeta:

    export class JsxSummaryMeta extends JsxContentsMeta{
        getKey(): string {
            return "summaryJsx";
        }
    }

    It's absolutely necessary to override getKey! Then register the meta in frontmatter:

     
    export default new Frontmatter(
        new JsxContentsMeta((path:string, file:ContentFile, files:ContentFileCollection, typesite:Typesite) => ...),
        new JsxSummaryMeta((path:string, file:ContentFile, files:ContentFileCollection, typesite:Typesite) => ...)
    );

    You can later access its contents as string with:

    file.metadata.getItem(JsxSummaryMeta).contents;

    Important: when you have multiple metas extending JsxContentsMeta only the base one will be transferred to ContentFile's contents.

    API

    JsxContentsPlugin

    The plugin responsible for rendering the JSX metas:

    constructor

    • Argument removeDataReactRoot :boolean Controls wheteher to remove any and all data-reactroot attributes that might appear

    JsxContentsMeta

    Meta class that builds the JSX for the page's contents:

    constructor

    • Argument render: (path:string, file:ContentFile, files:ContentFileCollection, typesite:Typesite) => JSX.Element A function that expects file path, rendered file, files collection & typescite instace and should return JSX.Element with the page's contents which will later be rendered to string.
    • Exception Typesite.ArgumentNullError When render is null
    • Exception Typesite.ArgumentInvalidError When render is not a function

    Properties

    • contents:string The rendered JSX

    Install

    npm i typesite-jsx-renderer

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    19

    Last publish

    Collaborators

    • skell