Skip to content

Fast, simple and vanilla javascript 🍦 web framework for weebs.

License

Notifications You must be signed in to change notification settings

Shinobujs/Shinobu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

//Read this first//

Shinobu does not purify html by default, in most cases this can be unsafe.
but theres an option to make a function that can be used to purify html.

shinobu.purifyHTML = (HTML) => {
  ...
  return pureHTML;
};

Also note

Shinobu is for single page apps.

Shinobu

Fast, simple and vanilla javascript 🍦 web framework for weebs.

Script

https://shinobu.js.org/v0.0.1/script.js

Include script

<script src='https://shinobu.js.org/v0.0.1/script.js'></script> 

ShinobuApp({});

ShinobuApp({
  o,
  lazy,
  html,
  dynamicHtml, 
  props,
  dynamicProps,
  funcs,
});

Usage

ShinobuApp({
  o: '..',
  lazy: '..',
  html: `
    ..
  `,
  dynamicHtml: (props, dynamicProps) => {
    return '..';
  },
  props: {
    a: 0,
  },
  dynamicProps: () => {
    return {};
  },
  funcs: {
    onload: () => console.log('app load success >w<'),
  },
});

Donut 🍩

Include donut

<html id='donut'>
  ...
</html>

O

Takes in donut 🍩.

ShinobuApp({
  o: o('#app'),
  ...
});

Lazy

Takes in html that pops up and waits for dynamicProps.

ShinobuApp({
  ...
  lazy: '< loading />',
  ...
});

Html

html

Takes in app html.

ShinobuApp({
  ...
  html: '< app />',
  ...
});

dynamicHtml: () => {};

Takes in a function that returns app html.

ShinobuApp({
  ...
  dynamicHtml: async (props, dynamicProps) => {
    return '< app />';
  },
  ...
});

Props

props: {};

Takes in data/props

ShinobuApp({
  ...
  props: {
    id: 2,
  },
  ...
});

dynamicProps: () => {};

Takes in a function that returns props.

ShinobuApp({
  ...
  dynamicProps: async () => {
    return {id: 2};
  },
  ...
});

Funcs: {};

Takes in functions funcs.onload.

ShinobuApp({
  ...
  html: `
    < onclick=funcs.onclick() />
  `,
  ...
  funcs: {
    onload: () => console.log('app load success >w<'),
    onclick: () => console.log('clicked >w<'),
    ...
  },
});

shinobu{};

onError

Runs when theres a new error.

shinobu.onError = (err) => console.error(err);

But you can kill errors.

shinobu.onError = (err) => {};