Skip to content
A library to handle your AJAX/SSE DOM contents, using some contracts.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
index.js
license.md
logo.png
package-lock.json
package.json
readme.md
sse.js

readme.md

anticore

npm Downloads JavaScript Style Guide

anticore is a library to handle your AJAX/SSE DOM contents, using some contracts.

Install

npm i anticore

What it solves?

  • Based on the ES6 modules, each contract should be written in a separated module, ideally following the single responsibility principle, improving the maintainability
  • You can create your contracts as specific or generic as you need, increasing the reusable components between projects
  • A contract is really short to write, easy to replace/remove, no need to check if it doesn't risk to break your code, there is no chain
  • No need to build any AJAX requests, anticore is based on the forms/anchors attributes
  • No need to check the response status/content, everything is content based, targeted by the middleware selector, then it requires SSR contents

How it works?

Steps

anticore doesn't do anything alone, it requires to define how to work on your contents by these 3 following steps:

Define your contracts

A contract is defined to apply any operations (event listening, pre-validation, ...) on the elements, founds by anticore, matching the provided selector.

Important: anticore does not appends the elements itself, import your own contracts to do it.

(As a best practice, you should import the "injectors" and the end, to avoid the browser redraws as possible.)

import { on } from 'anticore'

on(selector, listener)
Define the fetchers

The fetchers are some specific contracts, used to define how the anticore's requests are built, to automate their fetching.

See anticore-contracts/fetchers

Once fetched by anticore, the contents are triggered on the defined contracts.

import 'anticore-contracts/fetchers/defaults'
Trigger the contracts on the current document

It's important to have the same process on the loaded document and on the fetched contents.

import { trigger } from 'anticore'

trigger()

Then let anticore do the rest...

anticore applies all the contracts
  • For each contract, it tries to find all the elements matching the contract selector.
  • Based on the contracts order, for each match, it provides the element to the related contract.
  • Each contract resolution must call the next() to let the next contract resolve too.
Just wait the fetchers requests
  • It depends on your chosen fetchers, but if you use the defaults, it waits a click on an anchor or a submit on a form.
  • Once the event is emitted the fetcher provides the request to anticore
  • anticore fetches the request and waits the response
  • anticore parses the response to a DocumentFragment
  • anticore triggers on the fragment, applying all the contracts on it

Basic usage

project/assets/js/index.js

Used to anticore's initialization and load the contracts

// Begin of custom contracts
import './hello'
// End of custom contracts
// Handle the anchors `click` and forms `submit`, to fetch them in AJAX, automatically
import 'anticore-contracts/fetchers/defaults'
import { trigger } from 'anticore'

// Triggers the contracts on the current document
trigger()

project/assets/js/hello.js

A simple "Hello world"

import { on } from 'anticore'

// Prints a simple text in the body
on('body', (element, next, url = document.location.href) => {
  element.appendChild(document.createTextNode(`Hello world from ${url}`))
  next()
})

APIs

on(selector, listener)

Useful to declare a contract to be applied for any element matching the selector, where:

  • selector: a query selector
  • listener: a function to be applied on the matching elements
    • element: the matching element
    • next: a function to let the other contracts declared after this one (must be always called!)
    • url: the url providing the node (can be empty, e.g. when the nodes are already in the current page)
import { on } from 'anticore'

on('body', (element, next, url = document.location.href) => {
  element.appendChild(document.createTextNode(`Hello world from ${url}`))
  next()
})

trigger([node])

Useful to apply the declared contracts on the provided node, where:

  • optional node: the targeted node (element or document))
import { trigger } from 'anticore'

trigger(document)

fetch(target, request[, interval = 1000[, retries = Infinity]])

Useful to create your own DOM content fetchers, where:

  • event: the event invoking the fetch
  • target: the element invoking the fetch (gets a .fetching, until resolved)
  • request: the Request instance
  • optional options: the options object
    • optional interval: the delay before a retry, if the fetch fails
    • optional retries: the number of possible retries
import { fetch } from 'anticore'

fetch(event, element, request, options)

sse(url, [options, [reviver]])

Useful to listen Server-Sent Events

import sse from 'anticore/sse'

const eventSource = sse(url, options, reviver)

Companions

License

MIT

You can’t perform that action at this time.