jenie
v1.9.2
Published
A mighty tinny web components framework/library
Downloads
47
Maintainers
Readme
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
Jenie.component.define({
name: 'v-home',
html: `
<h1 j-text="title"></h1>
`,
model: {
title: 'Old Title'
},
created: function () {
this.model.title = 'New Title';
}
});
Jenie.setup({
http: {
request: function (opt, xhr) {
return true; // false will cancel the http.fetch
},
response: function (opt, xhr) {
return true; // false will cancel the http.fetch handlers
}
},
loader: {
esm: true, // Enables ES6 module re-writes support
est: true, // Enables ES6 template string re-writes support
loads: [
{
url: '/components/c-menu.js',
execute: true // Since this component is not a module/route or imported we must execute.
}
]
},
router: {
routes: [
{
path: '/',
title: 'Home',
component: 'v-home',
url: 'views/v-home.js'
}
]
}
});
<html>
<head>
<base href="/">
<script src="jenie.min.js" defer></script>
<script src="index.js" defer></script>
</head>
<body>
<c-menu>
<ul>
<li><a href="/home">Home</a></li>
</ul>
</c-menu>
<j-view></j-view>
</body>
</html>
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 createdredirect: Function
Uses window.location.href which is treated like a 301 redirect for SEOadd: 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 Requiredsuccess: Function
Required The fetch responseerror: Function
Required The fetch responsemethod: String
Valid methods get, post, put, deletedata: Object
If method isGET
than data is concatenated to theaction/url
as parametersrequestType: 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