Jenie
A mighty tinny web components framework/library.
Name Change From Jenie To Oxe
Pleas see Oxe for future development https://www.npmjs.com/package/oxe
Features
- Really Small 8.09KB gzipped and 27.08KB uncompressed
- In browser ES6/ESM module and template strings support
Support
- IE10~
- IE11
- Chrome
- Firefox
- Safari 7
- Mobile Safari
- Chrome Android
Note
Loader uses XHR
and new Function
to load on-demand and execute modules. If your worried about security please read the linked articles. In summary the articles support not using new Function/eval to process client input. So as long as your only importing local modules (Loader enforces this) then the safety concern is eliminated.
Resources:
- http://2ality.com/2014/01/eval.html
- https://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/
Install
npm install jenie --save
- UMD
dist/jenie.min.js
- UMD with Web Component Pollyfill
dist/jenie.polly.min.js
- Web Component Pollyfill
dist/webcomponents-lite.min.js
Example
Jeniecomponent;
Jenie;
Home
API
Jenie.setup(options)
The recommend entry point. This allows you to setup Jenie and automatically starts the router
options: Object
http: Object
Jenie.http options.loader: Object
Jenie.loader options.router: Object
Jenie.router options.
Jenie.component
define: Function
Defines a custom web componentoptions: Object
name: String
Required the tag namehtml: String
An HTML stringquery: String
An querySelectortemplate: Element
A Elementmodel: Object<Any>
See Jenie.controller.modelevents: Object<Function>
See Jenie.controller.eventsmodifiers: Object<Function>
See Jenie.controller.modifierscreated: Function
Triggered once on creationattached: Function
Triggered on each DOM attachmentdetached: Function
Triggered on each DOM detachmentattributed: Function
Triggered attribute change
Jenie.router
-
options: Object
hash: Boolean
Hash URL mode. Default is false.trailing: Boolean
Trailing slash. Default is false.external: String, RegExp, Function
Filters URL requests. If true or match Router will not handle request.container: Element
Sets the event listeners for HREFs to the container. Default is window. Jenie use event delegationroutes: Array
route: Object
path: String
Any path.parameters: String
Named '/account/{user}', or catchalls '{*}'
title: String
The title for the pagecomponent: String
The name of a componenturl: Object, String
URL path to JS web-component or a Jenie.loader.load Object
-
run: Function
Must be called after is created -
redirect: Function
Uses window.location.href which is treated like a 301 redirect for SEO -
add: Function
path: String
-
remove: Function
path: String
-
get: Function
path: String
Exact path matching, route path variables are not taken into account
-
find: Function
Approximate path matching, route path variables are taken into accountpath: String
-
navigate: Function
Changes to a new pagepath: String
Path to navigate
-
on: EventEmitter
navigated: Event
Jenie.loader
ES6 import and export module support. Imports must be absolute from the domain. Also export default
is the only export format supported. Please do not use Loader.interpret to handle user input.
options: Object
esm: Boolean
Enables ES6 module re-writesest: Boolean
Enables ES6 template string re-writesloads: Array<Object, String>
Adds load objects or strings such as non route componentsload: Object, String
url: String
Path to a web component JS urlexecute: Boolean
Enable this to load and define/register custom componentsesm: Boolean
Enables ES6 module re-writes on an individual basesest: Boolean
Enables ES6 template string re-writes on an individual bases
Jenie.http
options: Object
request: Function
Intercepts the request. If the return value is false the fetch will not be triggeredoptions: Object
xhr: Object
response: Function
Intercepts the request. If the return value is false the fetch success and error will not be triggeredoptions: Object
xhr: Object
mime: Object
serialize: Function
fetch: Function
A fetch request.options: Object
-
url: String
Resource action url Required -
success: Function
Required The fetch response -
error: Function
Required The fetch response -
method: String
Valid methods get, post, put, delete -
data: Object
If method isGET
than data is concatenated to theaction/url
as parameters -
requestType: String
Converts the request data before sending.script
'text/javascript, application/javascript, application/x-javascript'json
'application/json' stringifyoptions.data
xml
'application/xml, text/xml'html
'text/html'text
'text/plain'- DEFAULT 'application/x-www-form-urlencoded' serialized
options.data
-
responseType: String
Converts the response data after sending.script
'text/javascript, application/javascript, application/x-javascript'json
'application/json'xml
'application/xml, text/xml'html
'text/html'text
'text/plain'
-
contentType: String
Short hand to set the Content-Type Headers. (For request) -
accept: String
Short hand to set the Accept Headers. (For response) -
mimeType: String
Overwrites return type. -
username: String
-
password: String
-
withCredentials: Boolean
-
headers: Object
A low level headers object it will map directly to the XHR header. The Will overwrite any above options.
-
Jenie.global
A global object for you.
Jenie.query(String: querySelector)
The result of a querySelector in the current document document.currentScript.ownerDocument.querySelector()
- Returns:
document.currentScript.ownerDocument.querySelector()
Jenie.script()
- Returns:
document.currentScript
Jenie.document()
- Returns:
document.currentScript.ownerDocument
Authors
Alexander Elias - AlexanderElias
License
This project is licensed under the MPL-2.0 License