Packrup

<h1 align='center'>packrup</h1> <p align="center"> <a href='https://github.com/harlan-zw/packrup/actions/workflows/test.yml'> </a> <a href="https://www.npmjs.com/package/packrup" target="__blank"><img src="https://img.shields.io/npm/v/packrup?style=flat&colorA=002438&colorB=28CF8D" alt="NPM version"></a> <a href="https://www.npmjs.com/package/packrup" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/packrup?flat&colorA=002438&colorB=28CF8D"></a> <a href="https://github.com/harlan-zw/packrup" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/harlan-zw/packrup?flat&colorA=002438&colorB=28CF8D"></a> </p> <p align="center"> Simple utils to pack (and unpack) arrays and strings to a flat object. </p> <p align="center"> <table> <tbody> <td align="center"> <img width="800" height="0" /><br> <i>Status:</i> Stable</b> <br> ^{Please report any issues 🐛}<br> _{Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦 • Join <a href="https://discord.gg/275MBUBvgP">Discord</a> for help}<br> <img width="800" height="0" /> </td> </tbody> </table> </p>

Background

The zhead package provides a flat-object style API for HTML <meta> tags, to make this happen we need to pack and unpack arrays and strings to a flat object.

For example, the following object:

{
  "viewport": {
    "content": {
      "width": "device-width",
      "initial-scale": "1"
    }
  }
}

Can be packed to the below (and vice versa):

<meta name="viewport" content="width=device-width, initial-scale=1">

For an example see useSeoMeta.

Features

• Pack arrays, objects and strings to a flat object
• Handles duplicates with key
• Supports nested key selections with dot.notation
• 🌳 Composable, tree-shakable and tiny (< 1kb, see export-size-report)

Help Wanted

These utils were meant to be fully typed, but I struggled with the implementation. If you want a fun TypeScript challenge then please open a PR :).

Installation

npm install --save-dev packrup

# Using yarn
yarn add --dev packrup

API

packArray

Arguments

• input - array

  The array to pack

• options - { key: string | string[], value: string | string[] }

  The options to use to resolve the key and value. By default, will choose first 2 keys of an object.

import { packArray } from 'packrup'

packArray([
  { 'http-equiv': 'content-security-policy', 'content': 'content-src none' }
])

// {
//    'content-security-policy': 'content-src none',
// }

packObject

Arguments

• input - object

  The record to pack.

• options - { key: string | string[], value: string | string[] }

  The options to use to resolve the key and value. By default, will choose first 2 keys of an object.

import { packObject } from 'packrup'

packObject({
  image: {
    src: {
      '1x': 'https://example.com/image.png',
      '2x': 'https://example.com/image@2x.png'
    },
    alt: 'Example Image'
  },
}, {
  key: 'image.src.1x',
  value: 'image.alt'
})

// {
//   "https://example.com/image.png": "Example Image",
// }

packString

import { packString } from 'packrup'

const head = packString('src="https://example.com/image.jpg" width="800" height="600"')
// {
//   "height": "600",
//   "src": "https://example.com/image.jpg",
//   "width": "800",
// }

unpackToArray

Arguments

• input - array

  The array to pack

• options - { key: string | string[], value: string | string[] }

  The options to use to resolve the key and value. By default, will choose first 2 keys of an object.

import { unpackToArray } from 'packrup'

unpackToArray({
  'content-security-policy': 'content-src none',
}, { key: 'http-equiv', value: 'content' })

unpackToString

Arguments

• input - object

  The record to unpack to a string.

• options

export interface TransformValueOptions {
  entrySeparator?: string
  keyValueSeparator?: string
  wrapValue?: string
  resolve?: (ctx: { key: string, value: unknown }) => string | void
}

import { unpackToString } from 'packrup'

unpackToString({
  'noindex': true,
  'nofollow': true,
  'max-snippet': 20,
  'maxi-image-preview': 'large',
}, {
  resolve({ key, value }) {
    if (typeof value === 'boolean')
      return `${key}`
  },
  keyValueSeparator: ':',
  entrySeparator: ', ',
})

// "noindex, nofollow, max-snippet:20, maxi-image-preview:large"

Sponsors

<p align="center"> <a href="https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg"> <img src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/> </a> </p>

License

MIT License © 2022-PRESENT Harlan Wilton