npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

boxifystr

v0.0.13

Published

Wrap JavaScript string in a box and log it or use it however you like as a string.

Downloads

18

Readme

boxify

Wrap JavaScript string in a box and log it or use it however you like. Screenshot


╭───────────────────────────────────────────────────╮
│                                                   │
│             Install: npm i boxifystr              │
│                                                   │
╰───────────────────────────────────────────────────╯


import Box from 'boxifystr'

/* Box.t and Box.tLog has been removed as native binaries for each platform grows the size of the bundle way too big */

// Box.log() takes as arguments the text, width of the box as characters and height.
// For now the height is determined by the character count to fit the lines inside the box so its basically useless.
Box.log(
    `Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua.`
);
// Logs:
/*
┌─────────────────────────────────────────┐
│                                         │
│      Lorem ipsum dolor sit amet,        │
│  consectetur adipiscing elit, sed do    │
│  eiusmod tempor incididunt ut labore    │
│        et dolore magna aliqua.          │
│                                         │
└─────────────────────────────────────────┘
*/

// Pass the customization object as parameter to Box.new({}) if you want to add custom sides
// Box.new() returns new Box object with its own properties
const custom = {
    corners: ['/*', ' ', ' ', '*/'],
    horizontal: ' ',
    vertical: '*',
    padding: {
        left: 10,
        right: 10,
        top: 3,
        bottom: 3,
    },
};

const customBox = Box.new(custom); // Or new Box(custom)
customBox.log(
    `Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum 
    dolore eu fugiat nulla pariatur. `
);
// Logs:
/*                                                                      
*                                                                     *
*                                                                     *
*                                                                     *
*              Lorem ipsum dolor sit amet, consectetur                *
*               adipiscing elit, sed do eiusmod tempor                *
*            incididunt ut labore et dolore magna aliqua.             *
*               Ut enim ad minim veniam, quis nostrud                 *
*            exercitation ullamco laboris nisi ut aliquip             *
*           ex ea commodo consequat. Duis aute irure dolor            *
*              in reprehenderit in voluptate velit esse               *
*              cillum dolore eu fugiat nulla pariatur.                *
*                                                                     *
*                                                                     *
*                                                                     *
                                                                      */

// Quick way to create new custom box
Box.new({
    corners: ['[', ']', '[', ']'],
    horizontal: '=',
    vertical: ':',
    width: 40
}).log("This is custom box 2 Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur")
// Logs:
/*
#####################################################
#                                                   #
#               This is custom box 2                #
#                                                   #
#####################################################
*/



// Box.asString() returns the boxified string as a string. 
// Can be used for example with html <pre> tags to preserve the box form
console.log(
    Box.asString(
        `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's`
    )
);


// Currently only default box support columns, providing custom object will most likely break it.
// Box.columns() is static function which takes n number of strings as an arguments

console.log(
    Box.columns(
        "Column 1",
        "Column 2",
        `Currently only default box support columns, 
        providing custom object will most likely break it. 
        Box.columns() is static function which takes n number of strings as an arguments`,
    ),
)

// Logs:
/* 
┌──────────┬──────────┬────────────────┐
│          │          │                │
│          │          │ Currently only │
│          │          │  default box   │
│          │          │    support     │
│          │          │   columns,     │
│          │          │   providing    │
│          │          │ custom object  │
│          │          │   will most    │
│ Column 1 │ Column 2 │ likely break   │
│          │          │      it.       │
│          │          │ Box.columns()  │
│          │          │   is static    │
│          │          │ function which │
│          │          │ takes n number │
│          │          │ of strings as  │
│          │          │ an arguments   │
│          │          │                │
└──────────┴──────────┴────────────────┘
*/

console.log(Box.columns("ports:", 8000, 8080))
// Box.columnsFromBoxes() static function takes n number Box instances as an argument
// columnsFromBoxes gives more options for customization of the columns
const a = new Box();
// save() method preserves the given string and can be later logged with .log() method
a.save(`Test "save()" method. Lorem ipsum dolor sit amet consectetur adipiscing 
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. dfvdfvdfv ldkmlkfm öflg,öl, fgbfgbfb`, 50);
a.log()
// Logs:
/* 
┌─────────────────────────────────────────┐
│                                         │
│   Test "save()" method. Lorem ipsum     │
│      dolor sit amet, consectetur        │
│    adipiscing elit, sed do eiusmod      │
│     tempor incididunt ut labore et      │
│          dolore magna aliqua.           │
└─────────────────────────────────────────┘
*/

const b = Box.new();
const c = new Box();

b.save(
    `Lorem ipsum dolor sit amet, consectetur adipiscing 
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. `,
    50
);
c.save('This is just dummy filler', 15);

console.log(Box.columnsFromBoxes(a, b, c))
// Logs:
/*
┌─────────────────────────────────────────┬───────────────────────────────────────────────────┬────────────────┐
│                                         │                                                   │                │
│   Test "save()" method. Lorem ipsum     │     Lorem ipsum dolor sit amet, consectetur       │    This is     │
│      dolor sit amet, consectetur        │      adipiscing elit, sed do eiusmod tempor       │  just dummy    │
│    adipiscing elit, sed do eiusmod      │   incididunt ut labore et dolore magna aliqua.    │    filler      │
│     tempor incididunt ut labore et      │     Lorem ipsum dolor sit amet, consectetur       │                │
│          dolore magna aliqua.           │      adipiscing elit, sed do eiusmod tempor       │                │
│                                         │   incididunt ut labore et dolore magna aliqua.    │                │
│                                         │     Lorem ipsum dolor sit amet, consectetur       │                │
│                                         │      adipiscing elit, sed do eiusmod tempor       │                │
│                                         │   incididunt ut labore et dolore magna aliqua.    │                │
│                                         │                                                   │                │
└─────────────────────────────────────────┴───────────────────────────────────────────────────┴────────────────┘
*/

// Box.initAsyncTemplateBox instantiates wasm module in the backgound
;(async ()=>{
    const asyncBox = await Box.initAsyncTemplateBox()
    console.log(asyncBox(`
    +       +       +           +   ++      +++++++
     -- - ---             ---  ---   ---- -- -- ---- -       
     _____________                ________ ----
    `))
})()
// Logs:
/* 
┌────────────────────────────────────────────────────────────────┐
|                                                                |
|    +       +       +           +   ++      +++++++             |
|     -- - ---             ---  ---   ---- -- -- ---- -          |
|     _____________                ________ ----                 |
|                                                                |
└────────────────────────────────────────────────────────────────┘
*/


Box.asyncString(
    `
    Both Box.initAsyncTemplateBox and Box.asyncString   
    uses WASM to generate the box.

                Box.asyncString() wraps the template
                string in a default box 
                and returns it async as a string   
    
`).then(console.log)
// Logs:
/* 
┌────────────────────────────────────────────────────────┐
|                                                        |
|    Both Box.initAsyncTemplateBox and Box.asyncString   |
|    uses WASM to generate the box.                      |
|                                                        |
|                Box.asyncString() wraps the template    |
|                string in a default box                 |
|                and returns it async as a string        |
|                                                        |
└────────────────────────────────────────────────────────┘
*/