@magic

@magic/core library docs

@magic/core libraries allow you to include client side functionality in your app.

libraries

what would javascript be without the millions of dependencies that you can easily install and make the average webpage slow[ly] (pun intended) grow towards a footprint of 5 megabytes.

we think that all of that bloat is unneeded, unheeded and, frankly, not optimal.

magic has one external client side dependency, hyperapp, [~500 lines that provide our ui state machine]. thats it. and it won't change.

we also have the tendency to write libraries specialized for our usecase, see @magic/css, @magic/test, @magic/cli and others.

once there is a lib key in at least one component, window.lib (browser) and global.lib (nodejs) will be set, aliasing lib as a global variable in both environments

lib dir or file

if you need libraries in multiple otherwise independent modules, it might be easier to keep your library dependencies in a central place.

to achieve this, one can simply create /assets/lib.mjs and export an object from it. this object will get merged into the globalThis.lib object, making it available as "lib" throughout your app.

export default { name: () => {} }

will turn into

lib.name = () => {}

npm

all @magic-libraries and all npm packages starting with magic-library-* will be loaded automatically

Example

first, install a @magic-library

npm install --save --save-exact @magic-libraries/is

then, in javascript

export const View = props => div([  'value is ',  lib.is(props.value, 'string') ? '' : 'not',  ' a string',])

@magic-libraries

@magic libraries are pieces of client side functionality. they are not intended to be used in markdown, instead, a developer will use them when creating @magic-modules, which can then be used from markdown pages.