trickrdeprecated

Trick URI, you can write SPA(Single Page Application) without framework

Usage no npm install needed!

<script type="module">
  import trickr from 'https://cdn.skypack.dev/trickr';
</script>

README

Trickr

Trickr is Fake Router based on History.js. you don't need multiple HTML files. just write Only one HTML and Page Element.

Installation

with Node.js

npm install --save trickr

with Bower

bower install --save trickr

Release

1.1.0

  • Router.get, Router.post, Adding redirect(path, state) parameter
  • Router.anchor is able to other tags, Using data-method, data-href
  • Request.post, Request.get return Promise
  • Fix formData parameter name to state
  • Adding middleware register Router.middleware(callback)

1.2.0

  • formData is added again. It is separated from state

1.3.0

  • Router.middleware Callback parameter; formData, redirect, state, params, request,
  • Router.get, Router.post Set specific route middleware
  • Request.get, Request.post is not static function anymore!
    you can use request parameter in Route callback.
  • request.get, request.post Callback parameter; Removing Trickr.Router, Adding Request Parameter

Basic usage

Inlucde trickr scripts with history.js in .html

<div id="wrapper">
  <main id="main" role="main">
    <h1> INDEX </h1>
    <a href="/user">user</a>
  </main>
  <section id="user">
    <h1> USER </h1>
  </section>
</div>
<script src="bower_components/history.js/scripts/bundled/html4+html5/native.history.js"></script>
<script src="bower_components/trickr/dist/trickr.min.js"></script>
<script>
  const router = new Router();

  router.get('/user', '#user', function() {
    // callback...
    let h1 = document.getElementsByTagName('h1')[0].innerHTML;
    console.log(h1); // USER
  });

  router.init('/', '#wrapper', '#main', function() {
    // callback...
    let h1 = document.getElementsByTagName('h1')[0].innerHTML;
    console.log(h1); // INDEX
    // anchor
    let anchor = document.getElementsByTagName('a')[0];
    router.anchor(anchor);
  });
</script>

with javascript framework such as Vue, React, Angular

const trickr = require('trickr');

/** Trickr Router **/
const router = new trickr.Router();
// ...

Methods

Router

Router.init(base: string, wrapper: string, index: string, callback: Function)

You must call Router.init for initialing Router.

Parameters
  • base: string - Base location path.
  • wrapper : Selector of wrapper element which is included index, and page elements.
  • index: Selector of index element.
  • callback: Callback before removing page elements.
Usage
<div id="wrapper">
  <div id="main">
    <!-- ... -->
  </div>
  <!-- Page Elements... -->
</div>

Router.init('/', '#wrapper', '#main', function() {
  // ...
})

Router.get(path: string, selector: string, callback: Function, middlewares: Array)

Parameters
  • path: Route path.
  • selector: Page element.
  • callback: Callback after loading page element.
  • middlewares: Route middlewares.
Usage
<div id="wrapper">
  <!-- Main Element... -->
  <div id="user">
    <!-- Page Content ... -->
  </div>
</div>

Router.get('/user', '#user', function() {
  // ...
}, [ /* middleware: Function */ ])

Router.post(path: string, callback: Function, middlewares: Array)

Parameters
  • path: Route path.
  • callback: Callback after request.
  • middlewares: Route middlewares.
Usage
Router.post('/user/create', function() {
  // ...
}, [ /* middleware: Function */ ])

Router.use(path: string, router: Trickr.Router)

Parameters
  • path: Route base path.
  • router: The router which will be combined.
Usage
const user = require('./user');

// path.join('/user', __ROUTE_PATH__)
Router.use('/user', user);

Router.middleware(callback: Function)

Setting global middleware.
You can use parameters such as formData, redirect.
must return boolean for next middleware, or route callback.

Parameters
  • callback: middleware before Rouing.
Usage
Router.middleware(function() {
  // ...

  return true;
})

Router.anchor(el: Element)

Setting anchor for Route.

Parameters
  • el: HTML Element.
Usage
<!-- http://__DOMAIN__/__BASE__/user?name=foo -->
<a href="/user?name=foo" id="#user-btn">user</a>
<!-- with data Attributes -->
<span id="#user-btn" data-href="/user?name=foo" data-method="get" style="cursor:pointer;">user</span>


Router.get('/user', '#user', function({ params }) {
  // { name: foo }
  console.log(params);
})

Router.init(/* ... */, function() {
  Router.anchor(document.getElementById('#user-btn'));
});

Router.form(el: Element)

Setting form for Route.

Parameters
  • el: HTML form Element.
Usage
<!-- form -->
<form method="post" action="/user" id="user-form">
  <input type="text" placeholder="search..." name="search">
  <input type="submit">
</form>


Router.post('/user', function({ formData }) {
  // { search: __SEARCH_VALUE__ }
  console.log(formData)
})

Router.init(/* ... */, function() {
  Router.form(document.getElementById('#user-form'));
});

Request

Request.get(path: string, params: object): string

'get' Request.

Parameters
  • path: Route path.
  • params: Parameters.
Return
  • string: HTML String
Usage
Router.post('/user/create', function({ request }) {
  request.get('/user/profile', { /* Parameters */ }).then(function(res) {
    // HTML String; Page element of '/user/profile'
    console.log(res)
  })
})

Router.get('/user/profile', '#profile', function({ params }) {
  // Parameters
  console.log(params);
})

Request.post(path: string, params: object): object

'post' Request.

Parameters
  • path: Route path.
  • params: Parameters.
Return
  • Object: callback in post callback
Usage
Router.post('/user/create', function({ request }) {
  request.post('/user/profile', { /* Parameters */ }).then(function(res) {
    // object
    console.log(res)
  })
})

Router.post('/user/profile', function({ callback, params }) {
  // Parameters
  console.log(params);
  callback({ /* Response */ })
})

Parameters

URL Params

usage

<!-- http://__DOMAIN__/__BASE__/user?name=foo -->
<a href="/user?name=foo">user</a>
<!-- with data Attributes -->
<span data-href="/user?name=foo" data-method="get" style="cursor:pointer;">user</span>

// params
Router.get('/user', '#user', function({ params }) {
  // { name: foo }
  console.log(params);
});

Router.init('/', '#wrapper', '#main', function() {
  let anchor = document.getElementsByTagName('a')[0];
  Router.anchor(anchor);

  anchor = document.getElementsByTagName('span')[0];
  router.anchor(anchor);
});

Callback

When use post route, provided callback

usage

// callback
Router.post('/user', function({ callback }) {
  callback({
    name: 'foo'
  });
});

Router.get('/user', '#user', function({ request }) {
  request.post('/user').then(function(res) {
    // { name: foo }
    console.log(res);
  });
});

formData

When use form tag in HTML, provided formData

usage

<!-- form -->
<form method="get" action="/user">
  <input type="text" placeholder="search..." name="search">
  <input type="submit">
</form>

// formData
Router.get('/user', '#user', function({ formData }) {
  // { search: __VALUE__ }
  console.log(formData);
});

Router.init('/', '#wrapper', '#main', function() {
  // form
  let form = document.getElementsByTagName('form')[0];
  Router.form(form);
});

Redirect

in Router.get, Router.post

usage

// redirect
Router.get('/user', '#user', function({ redirect }) {
  redirect('/', null);
});

State

When use redirect with state, is provided state

usage

Router.get('/user', '#user', function({ redirect }) {
  // redirect
  redirect('/user/list', { /** .. */ })
});

Router.get('/user/list', '#userList', function({ state }) {
  /** ... */
  console.log(state)
})

Request

usage

Router.post('/user/create', function({ request }) {
  request.post('/user/profile', { /* Parameters */ }).then(function(res) {
    // object
    console.log(res)
  })
})

Router.post('/user/profile', function({ callback, params }) {
  // Parameters
  console.log(params);
  callback({ /* Response */ })
})

License

MIT