Socket
Socket
Sign inDemoInstall

@pelagiccreatures/sargasso

Package Overview
Dependencies
Maintainers
1
Versions
88
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pelagiccreatures/sargasso - npm Package Compare versions

Comparing version 0.8.3 to 0.8.4

12

example/app.js

@@ -103,3 +103,3 @@ /*

onExitPage: () => {
utils.elementTools.off(document.body, 'click', '.event-target')
utils.elementTools.off('myid', document.body, 'click', '.event-target')
},

@@ -112,6 +112,10 @@ onEnterPage: () => {}

utils.elementTools.on(document.body, 'click', '.event-target', (e) => {
console.log(e)
})
utils.elementTools.on('myid', document.body, 'click', '.event-target', (e) => {
console.log('delegated')
}, true)
utils.elementTools.on('myid', document.querySelector('.event-target'), 'click', '', (e) => {
console.log('undelegated')
}, true)
window.loadPageHandler = loadPageHandler

6

lib/Sargasso.js

@@ -135,8 +135,8 @@ /**

on (evt, selector, fn) {
elementTools.on(this.element, evt, selector, fn)
on (evt, selector, fn, options) {
elementTools.on(this.uid, this.element, evt, selector, fn, options)
}
off (evt, selector, fn) {
elementTools.off(this.element, evt, selector, fn)
elementTools.off(this.uid, this.element, evt, selector, fn)
}

@@ -143,0 +143,0 @@

18

lib/utils.js

@@ -91,11 +91,7 @@ /**

function isFunction (fn) {
return fn && {}.toString.call(fn) === '[object Function]'
}
const on = function (owner, container, events, selector, fn, options) {
const k = 'on:' + owner + '-' + events + '-' + selector
const on = function (container, events, selector, fn) {
const k = 'on:' + events + '-' + selector
const handler = (e) => {
if (isFunction(selector)) { // no selector, 3rd param is function
fn = selector
if (!selector) {
if (e.target === container) {

@@ -112,10 +108,12 @@ fn(e)

}
_setMetaData(container, k, handler)
events.split(/[\s,]+/).forEach((evt) => {
container.addEventListener(evt, handler)
container.addEventListener(evt, handler, options)
})
}
const off = function (container, events, selector) {
const k = 'on:' + events + '-' + selector
const off = function (owner, container, events, selector) {
const k = 'on:' + owner + '-' + events + '-' + selector
const handler = _getMetaData(container, k)

@@ -122,0 +120,0 @@ if (handler) {

2

package.json
{
"name": "@pelagiccreatures/sargasso",
"version": "0.8.3",
"version": "0.8.4",
"description": "Simple, Fast, Reactive, supervised Javascript controllers for html elements.",

@@ -5,0 +5,0 @@ "keywords": [

178

README.md

@@ -21,8 +21,8 @@ # @PelagicCreatures/Sargasso

```npm install @pelagiccreatures/sargasso```
```npm install @pelagiccreatures/sargasso --save```
Bootstrap Sargasso:
-------------------
The ES and the CommonJS bundles both expose:
### An example Sargasso app:
The @PelagicCreatures/sargasso package exports:
* Sargasso - the sargasso super class

@@ -32,69 +32,108 @@ * utils.registerSargassoClass - function to register your sub classes

[Most browsers](https://caniuse.com/#search=modules) are aware of ES6 and modules these days but but you can use the module/nomodule scheme to fall back to the common js bundle if needed.
myApp.js
```javascript
import {Sargasso, utils} from '@PelagicCreatures/sargasso'
let options = {}
utils.bootSargasso(options)
class MyClass extends Sargasso { // This won't do very much...
start() {
this.element.innerHTML += ' <strong>Started!</strong>'
super.start()
}
}
utils.registerSargassoClass('MyClass',MyClass)
```
<script type="module" src="https://cdn.jsdelivr.net/npm/@pelagiccreatures/sargasso/dist/sargasso.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pelagiccreatures/sargasso/dist/sargasso.cjs.js" nomodule defer></script>
<script defer>
... your code here ...
</script>
### Rollup your app and add script tag to HTML
#### 1. Install rollup
```
npm install --global rollup
npm install @rollup/plugin-commonjs --save-dev
npm install @rollup/plugin-json --save-dev
npm install @rollup/plugin-node-resolve --save-dev
```
In production you probably won't use the prepackaged bundles. You should build own bundles including your subclasses using rollup or something. See rollup section below. In this example we use the bundles for expediency. The prepackaged bundles expose the exports from the module as globals scoped under `PelagicCreatures`
#### 2. Define your bundle build options.
rollup.config.js
```javascript
PelagicCreatures.Sargasso - the superclass for all Sargasso classes
PelagicCreatures.utils.registerSargassoClass - tell sargasso about your subclass
PelagicCreatures.utils.bootSargasso - start it up
PelagicCreatures.utils.elementTools - some utilities
PelagicCreatures.loadPageHandler - the bottle neck for loading a page
```
Learn more or give us feedback
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import json from '@rollup/plugin-json'
export default {
input: './myApp.js', // <<< your app
output: [{
format: 'iife',
name: 'App',
file: './app-bundle.iife.js', // <<< script file to include in html
sourcemap: true,
treeshake: false
}],
plugins: [
json(),
nodeResolve({
preferBuiltins: false
}),
commonjs({
namedExports: {}
})
]
}
```
<script defer>
let options = {
hijax: {
onError: (level, message) => { alert('Something went wrong. ' + message) }
}
}
// boot supervisors and HIJAX loader
PelagicCreatures.utils.bootSargasso(options)
#### 3. Build it: `Run rollup -c rollup.config.js`
// define a custom class and register the classname.
class MyClass extends PelagicCreatures.Sargasso {} // This won't do very much...
PelagicCreatures.utils.registerSargassoClass('MyClass',MyClass)
#### 4. Add it to your html
</script>
```html
<html>
<head>
<script src="/app-bundle.iife.js" defer></script>
</head>
<body>
<sargasso-my-class>MyClass instance</sargasso-my-class>
</body>
</html>
```
**In pure ES6** you don't need the 'PelagicCreatures.' bit, instead you would use import directly from the module.
When you load the page the content of sargasso-my-class will be "MyClass instance **Started!**"
```javascript
import {Sargasso, utils} from '@PelagicCreatures/sargasso'
utils.bootSargasso(options)
```
#### Custom Elements
### Adding Your Sargasso class to an HTML element
Many browsers support custom elements ([current compatibility](https://caniuse.com/#feat=custom-elementsv1) so the preferred (faster and cleaner) syntax for sargasso elements is to use a custom element tag. The class name is the kebab-case of your subclass name so MyClass becomes sargasso-my-class:
Sargasso watches the DOM for any elements tagged with the `data-sargasso-class` attribute and instantiates the Sargasso class specified while hooking up the appropriate services. When the underlying element is removed from the DOM (loading a new page or something) it automatically destroys any dangling Sargasso objects.
```html
<sargasso-my-class>This works for MyClass in <em>most</em> browsers</sargasso-my-class>
```
<div data-sargasso-class="MyClass">This element has a MyClass Sargasso controller</div>
```
You can also defer the instantiation using the lazy method by tagging it with `data-lazy-sargasso-class` instead of `data-sargasso-class` which will only start up the class when the element is visible in the viewport
#### Using data-sargasso-class
Alternately, Sargasso watches the DOM for any elements tagged with the `data-sargasso-class` attribute and instantiates the Sargasso class specified while hooking up the appropriate services. When the underlying element is removed from the DOM (loading a new page or something) it automatically destroys any dangling Sargasso objects.
### Custom Elements ([Bleeding Edge-ish](https://caniuse.com/#feat=custom-elementsv1))
Many browsers support custom elements so the (faster and cleaner) syntax for sargasso elements is to use a custom element tag. The class name is the kebabCase of your subclass so MyClass becomes sargasso-my-class:
```html
<sargasso-my-class>This also works for MyClass in most browsers</sargasso-my-class>
<div data-sargasso-class="MyClass">This works for MyClass in all browsers</div>
```
You can also defer the instantiation using the lazy method by tagging it with `data-lazy-sargasso-class` instead of `data-sargasso-class` which will only start up the class when the element is visible in the viewport.
### HIJAX
Sargasso automatically captures `<a href="..">` tags and calls the LoadPageHandler instead of letting the browser load pages. You can make a link be ignored by hijax by setting the `<a href=".." data-no-hijax>`. Offsite links and links with targets are automatically ignored. bootSargasso also returns the function `LoadPageHandler(href)`. You must call this to load a new page programatically.
When HIJAX is enabled, Sargasso automatically captures `<a href="..">` tags and calls the LoadPageHandler instead of letting the browser load pages. You can make a link be ignored by hijax by setting the `<a href=".." data-no-hijax>`. Offsite links and links with targets are automatically ignored.
`loadPageHandler(href)` is a utility function for programmatically loading a new page.
EG. instead of `location.href= '/home'`, use `LoadPageHandler('/home')`
```javascript
import {Sargasso, utils, loadPageHandler} from '@PelagicCreatures/sargasso'
let options = {
hijax: { onError: (level, message) => { alert('Something went wrong. ' + message) } }
}
utils.bootSargasso(options)
```
#### Mark dynamic content

@@ -127,6 +166,11 @@

Note that data-hijax elements must have well formed child html elements. **Not** raw text like this:
Note that data-hijax elements must have and ID and contain well formed child html elements.
```<div id="nope" data-hijax>I'm just text. No child elements. Won't work.</div>```
```
<div id="nope" data-hijax>I'm just text. No child elements. Won't work.</div>
```
```
<div id="yup" data-hijax><p>I'm html. This works.</div>
```

@@ -180,2 +224,3 @@ ### Sargasso Object Lifecycle

| css({}) | set css pairs defined in object on this.element |
| isVisible() | true if element is visible |
| scrollTop(newTop) | get and set the current scroll position |

@@ -185,4 +230,5 @@ | queueFrame(function) | queue a function to execute that changes the DOM |

| workerPostMessage(id, data {}) | send the worker tagged with `id` a message. the message must be an object which can have any structure you want to pass to the worker |
| on(container,selector,fn) | attach delegated event handler to container scoped to a css selector |
| off(container,selector) | remove delegated event handler to container scoped to css selector |
Don't forget you need to let sargasso know about your class:

@@ -300,37 +346,1 @@ ```registerSargassoClass('MyClass', MyClass)```

```
### Rollup ES6 Bundling
While you can use the libs in /dist in you project you would typically want to bundle your own ES6 (and perhaps commonJS) bundles to serve with your pages.
The example below is for the /example directory pages.
rollup.config.app.js
```
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import json from '@rollup/plugin-json'
export default {
input: './example/app.js',
output: [{
format: 'iife',
name: 'App',
file: './example/app-bundle.iife.js',
sourcemap: true
}],
plugins: [
json(),
nodeResolve({
preferBuiltins: false
}),
commonjs({
namedExports: {}
})
]
}
```
Run `rollup -c rollup.config.app.js` and you have an ES6 bundle which includes all your dependancies and code.
example/app-bundle.iife.js

Sorry, the diff of this file is too big to display

example/app-bundle.iife.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc