• Usage
• Options
• Philosophy
• Base
• Primitive Strategies
• Complex Strategies

Installation:

npm install query-pack

Encodes string value:

import  { encode } from 'query-pack';
...
const qParam = encode('Hey, how are you?')
const url = `https://mydomain.com?q=${qParam}`;
console.log(url);
// =>  https://mydomain.com?q=UheyCWhowWareWyouQ

Decodes string value:

import  { decode } from 'query-pack';
...
let params = (new URL(document.location)).searchParams;
let qParam = params.get("q");
const value = decode(qParam);
console.log(value);
// =>  Hey, how are you?

Encodes object value:

import  { encode } from 'query-pack';
...
const qParam = encode({
  id: 1,
  name: "Team 1",
  captain: "zak",
})
const url = `https://mydomain.com?q=${qParam}`;
console.log(url);
// =>  https://mydomain.com?q=1XidN1YnameSUteamW1YcaptainSzak

Decodes object value:

import  { decode } from 'query-pack';
...
let params = (new URL(document.location)).searchParams;
let qParam = params.get("q");
const value = decode(qParam);
console.log(value);
// =>  {
//   id: 1,
//   name: "Team 1",
//   captain: "zak",
// }

Options is an encoding settings passed as a second parameter to the encode or decode functions. Has PackOptions type.

Here we have a team object. Its field's names are replaced with numbers (id=> 1, ...). Since numbers are shorter and as result we will have shorter encoded result.

import  { encode, decode, PackOptions } from 'query-pack';
...
const packOptions: PackOptions = {
    fields:{
        id: 1,
        name: 2,
        captain: 3
    }
}
...
const qParam = encode({
    id: 1,
    name: "Team 1",
    captain: "zak",
}, packOptions);

console.log(qParam);
// =>  1X1N1Y2SUteamW1Y3Szak

const team = decode(qParam, packOptions);
console.log(team);
// =>  {
//   id: 1,
//   name: "Team 1",
//   captain: "zak",
// }

Here we have a player object with level field. Possible values for it are strings: unknown, notbad, normal, good, star. We replacing them with numbers. In our case the player object has good level value. So while encoding it would receive value of 4. This makes encoded result shorter.

import  { encode, decode, PackOptions } from 'query-pack';
...
const packOptions: PackOptions = {
    values:{
        level: {
            unknown: 1,
            notbad: 2,
            normal: 3,
            good: 4,
            star: 5,
        },
    }
}
...
const qParam = encode({
    name: "zak",
    level: "good",
}, packOptions);

console.log(qParam);
// =>  1XnameSzakYlevelS4

const team = decode(qParam, packOptions);
console.log(team);
// =>  {
//   name: "zak",
//   level: "good",
// }

The maximum length of URL is 2048 characters. This is enough space for encoding data for small or medium page. What's more, in this case you don't need to have database or API.

There is and example of using query-pack. This is the tournament team constructor witch generates the tournament data into URL's query parameter. That's it, no API or database the tournament data is stored into the URL. This link has 512 chars and this is enough for encoding information about 4 teams and 24 players, games between teams, scheduel and results.

query-pack encodesstring, number, boolean, array, object values into a string for using it in URL's query paramter.

This is kind of alternative of using encodeURIComponent and decodeURIComponent, but with differences. The primitive types like string, number, and boolean query-pack makes shorter in coparances to encodeURIComponent function with the Primitive Strategies. Also, the query-pack can encode complex types like object or array with the Complex Strategies where the encodeURIComponent does not support compolex types.

In URL encoding there are not replacing chars: numbers, upper and lower case English letters, -, _, ., ~. All other has encodes with extra chars, for instance @ encodes as %40. zqip replace upper case chars on the text with U + upper case char or U{X} + X upper case chars.

This helps to release all other upper case English letters for further encoding strategies.

Most used chars are replaced with upper case chars.

Decimal numbers replaces with based32 numbers.

Replaces with 0 and 1.

Complex strategy provides the way of converting into a string the object with properties or array of items. To list values need to split them somehow and indicate their type. The below table contains type indicators:

Next table contains splitters:

Let's imaging we have the team object:

{
  id: 1,
  name: "Team 1",
  captain: "zak",
}

After encoding into a string:

idN1YnameSUteamW1YcaptainSzak