icefog

a utility for passing environment/config info from server to client

install

pnpm -D add icefog

use

On the server, create a config string:

import { createConfig } from 'icefog/server'

const configString = createConfig({ isDev: true, token: 'abc' })
// then add this string to your rendered markup
// e.g. - `<div id="app" ${configString}></div>`

Then on the client, read the config string:

import 'icefog/init' // for the default element of '#app'

or

import { initConfig } from 'icefog'
initConfig('my-dom-element')

the config export is then available for use anywhere in your app:

import { config } from 'icefog'

if (config.isDev) // do development-specific things

server api

createConfig

createConfig(config: object): string

Creates a base64-encoded, stringified version of the object provided.

client api

initConifg

initConfig(element: (Element | string) = '#app', { windowAttr: string = 'configs', configId: string = '_id' })

• element is the DOM element you render the configString onto and can be either an Element or a querySelector
• windowAttr is the attribute on window that a frozen copy of the config will be placed on for reference
• configId defines the config attribute that will be used when element does not have an id

config

Effectively the object you provided to createConfig, with any functions stripped

getConfig

getConfig(element: (Element | string) = '#app')

Returns the config found on the element and removes it.

useConfig

useConfig()

Returns the config export, useful in a Typescript environment