@pelagiccreatures/sargasso
Advanced tools
@pelagiccreatures/sargasso - npm Package Compare versions
Comparing version 1.4.0 to 1.4.1
| { | ||
| "name": "@pelagiccreatures/sargasso", | ||
| "version": "1.4.0", | ||
| "version": "1.4.1", | ||
| "description": "Simple, Fast, Reactive, Supervised Javascript controllers for custom html elements.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -383,4 +383,4 @@ # @pelagiccreatures/sargasso | ||
| let args = { | ||
| name: 'World!', | ||
| cssClass: 'red' | ||
| name: 'World!', | ||
| cssClass: 'red' | ||
| } | ||
@@ -393,3 +393,3 @@ let observable = new SargassoModule.ObservableObject('shared-data', args) | ||
| let watch = (id, property, value) => { | ||
| console.log('id:' + id + ' property:' + property + ' is now:' + value) | ||
| console.log('id:' + id + ' property:' + property + ' is now:' + value) | ||
| } | ||
@@ -408,10 +408,10 @@ | ||
| class MyClass extends SargassoModule.Sargasso { | ||
| start() { | ||
| super.start() | ||
| this.observableStart('shared-data'); // find or create an observable with id 'shared-data' | ||
| } | ||
| start() { | ||
| super.start() | ||
| this.observableStart('shared-data'); // find or create an observable with id 'shared-data' | ||
| } | ||
| observableChanged(id, property, value) { | ||
| // do something with the change | ||
| } | ||
| observableChanged(id, property, value) { | ||
| // do something with the change | ||
| } | ||
| } | ||
@@ -424,51 +424,52 @@ ``` | ||
| examples/example5.html | ||
| ```html | ||
| window.onload = () => { | ||
| let args = { | ||
| name: 'World!', | ||
| cssClass: 'red', | ||
| list: [{id:1,name:'one'},{id:2,name:'two'},{id:3,name:'three'}] | ||
| } | ||
| let observed = new SargassoModule.ObservableObject('shared-data',args) | ||
| let args = { | ||
| name: 'World!', | ||
| cssClass: 'red', | ||
| list: [{id:1,name:'one'},{id:2,name:'two'},{id:3,name:'three'}] | ||
| } | ||
| let observed = new SargassoModule.ObservableObject('shared-data',args) | ||
| // define MyClass as a subclass of Sargasso | ||
| // sargasso will render the template when data in | ||
| // observed ObservableObject is changed | ||
| class MyClass extends SargassoModule.Sargasso { | ||
| start() { | ||
| super.start() | ||
| // define MyClass as a subclass of Sargasso | ||
| // sargasso will render the template when data in | ||
| // observed ObservableObject is changed | ||
| class MyClass extends SargassoModule.Sargasso { | ||
| start() { | ||
| super.start() | ||
| // define a template | ||
| this.setTemplate((args) => SargassoModule.lit.html` | ||
| <p class=${args.cssClass}>Hello ${args.name} (${args.cssClass})</p> | ||
| <strong>List</strong> | ||
| <ul> | ||
| ${SargassoModule.lit.repeat(args.list, (item) => item.id, (item, index) => SargassoModule.lit.html` | ||
| <li>${index}: ${item.name}</li> | ||
| `)} | ||
| </ul> | ||
| `) | ||
| // define a template | ||
| this.setTemplate((args) => SargassoModule.lit.html` | ||
| <p class=${args.cssClass}>Hello ${args.name} (${args.cssClass})</p> | ||
| <strong>List</strong> | ||
| <ul> | ||
| ${SargassoModule.lit.repeat(args.list, (item) => item.id, (item, index) => SargassoModule.lit.html` | ||
| <li>${index}: ${item.name}</li> | ||
| `)} | ||
| </ul> | ||
| `) | ||
| // hook up observable data | ||
| this.setTemplateArgs(this.observableStart('shared-data')) | ||
| } | ||
| } | ||
| // hook up observable data | ||
| this.setTemplateArgs(this.observableStart('shared-data')) | ||
| } | ||
| } | ||
| // Register MyClass to the Sargasso framework | ||
| SargassoModule.utils.registerSargassoClass('MyClass', MyClass) | ||
| // Register MyClass to the Sargasso framework | ||
| SargassoModule.utils.registerSargassoClass('MyClass', MyClass) | ||
| // Start Sargasso | ||
| SargassoModule.utils.bootSargasso() | ||
| // Start Sargasso | ||
| SargassoModule.utils.bootSargasso() | ||
| // repeatedly and randomly change the observed data | ||
| let classes = ['red','green','blue'] | ||
| let named = ['Bob','Carol','Ted','Alice'] | ||
| // repeatedly and randomly change the observed data | ||
| let classes = ['red','green','blue'] | ||
| let named = ['Bob','Carol','Ted','Alice'] | ||
| setInterval(()=>{ | ||
| observed.data.cssClass = classes[Math.floor(Math.random() * classes.length)] | ||
| observed.data.name = named[Math.floor(Math.random() * named.length)] | ||
| },1000) | ||
| setInterval(()=>{ | ||
| observed.data.cssClass = classes[Math.floor(Math.random() * classes.length)] | ||
| observed.data.name = named[Math.floor(Math.random() * named.length)] | ||
| },1000) | ||
| } | ||
| ``` | ||
| [Try It](https://jsfiddle.net/PelagicCreatures/gbL5y7xq/3/) | ||
| [Try It](https://jsfiddle.net/PelagicCreatures/gbL5y7xq/11/) | ||
@@ -485,3 +486,3 @@ ### Using managed Web Workers | ||
| example/example4.html | ||
| ```javascript | ||
| ```html | ||
| <!DOCTYPE html> | ||
@@ -488,0 +489,0 @@ <html> |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.01%
1221130
- Number of lines in readme file
- increased by0.15%
675
No dependency changes