diff --git a/package-lock.json b/package-lock.json
index 6a72e24..5b0b57e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"license": "Apache-2",
"dependencies": {
"@firebolt-js/sdk": "^1.4.1",
- "@lightningjs/blits": "^1.27.0"
+ "@lightningjs/blits": "github:lightning-js/blits#dev"
},
"devDependencies": {
"backstopjs": "^6.3.22",
@@ -654,12 +654,12 @@
}
},
"node_modules/@lightningjs/blits": {
- "version": "1.27.0",
- "resolved": "https://registry.npmjs.org/@lightningjs/blits/-/blits-1.27.0.tgz",
- "integrity": "sha512-w09LG4h8Rw9j2GjJlBJoHQhwaxzWnZokYcVRPYV8RuVHo13JFzfG2T9FsDOQQWHJXpHVgNW91C2Yghw8JdIdRg==",
+ "version": "1.34.0",
+ "resolved": "git+ssh://git@github.com/lightning-js/blits.git#4fbae86f9cbb83b9d7e4373de4ee6370ab9a490f",
+ "license": "Apache-2.0",
"dependencies": {
"@lightningjs/msdf-generator": "^1.1.1",
- "@lightningjs/renderer": "^2.13.2"
+ "@lightningjs/renderer": "^2.15.0"
},
"bin": {
"blits": "bin/index.js"
@@ -680,10 +680,11 @@
}
},
"node_modules/@lightningjs/renderer": {
- "version": "2.13.2",
- "resolved": "https://registry.npmjs.org/@lightningjs/renderer/-/renderer-2.13.2.tgz",
- "integrity": "sha512-IUh9OFEpUk0cnnLVw6OqW2m+CzmT2aOkLFzxuErC2xajhDKMRBCMe+kM+W26zqnc7SMSkkW3zs10oAKnrbzPsA==",
+ "version": "2.16.0",
+ "resolved": "https://registry.npmjs.org/@lightningjs/renderer/-/renderer-2.16.0.tgz",
+ "integrity": "sha512-TA0litV7/ZMgRjc54GvXavzjBJFSZ8T3z7ohel4dqE3Tw9N3hC3aBmkey6PpF4usQ8JemNBMNgj7/2gR7bINhw==",
"hasInstallScript": true,
+ "license": "Apache-2.0",
"engines": {
"node": ">= 20.9.0",
"npm": ">= 10.0.0",
diff --git a/package.json b/package.json
index 9ed1900..decbfa9 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,6 @@
},
"dependencies": {
"@firebolt-js/sdk": "^1.4.1",
- "@lightningjs/blits": "^1.27.0"
+ "@lightningjs/blits": "github:lightning-js/blits#dev"
}
}
diff --git a/src/App.js b/src/App.js
index 00d2b81..0b9e0eb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -56,6 +56,7 @@ import SpecialCharacters from './pages/SpecialCharacters.js'
import Layout from './pages/Layout.js'
import { FireBoltRoutes } from './pages/Firebolt.js'
import Announcer from './pages/Announcer.js'
+import EventRoutes from './pages/NonRefEvents.js'
const queryString = new URLSearchParams(window.location.search)
const showSource = !!queryString.get('source')
@@ -71,7 +72,7 @@ export default Blits.Application({
- `,
+ `,
state() {
return {
backgroundColor: '#1e293b',
@@ -141,6 +142,7 @@ export default Blits.Application({
// Benchmarks and stress tests
{ path: '/benchmarks/exponential', component: Exponential },
...FireBoltRoutes,
+ ...EventRoutes,
],
hooks: {
ready() {
diff --git a/src/pages/NonRefEvents.js b/src/pages/NonRefEvents.js
new file mode 100644
index 0000000..a47af63
--- /dev/null
+++ b/src/pages/NonRefEvents.js
@@ -0,0 +1,218 @@
+import Blits from '@lightningjs/blits'
+
+export const techWords = [
+ 'Processor',
+ 'Monitor',
+ 'Keyboard',
+ 'Router',
+ 'Sensor',
+ 'Algorithm',
+ 'Database',
+ 'Compiler',
+ 'Protocol',
+ 'Interface',
+ 'Server',
+ 'Firewall',
+ 'Bandwidth',
+ 'Domain',
+ 'Packet',
+ 'Smartphone',
+ 'Tablet',
+ 'Charger',
+ 'Headphones',
+ 'Bluetooth',
+ 'Firmware',
+ 'Encryption',
+ 'Cloud',
+ 'API',
+ 'Debugger',
+]
+
+const List = Blits.Component('List', {
+ template: `
+
+
+
+
+
+ `,
+ props: ['data'],
+ hooks: {
+ ready() {
+ this.$setTimeout(() => {}, 1000)
+ },
+ },
+})
+
+let emitterCounter = 1
+const makeItems = (count) => {
+ const d = []
+ for (let i = 0; i < count; i++) {
+ d.push(makeItem())
+ }
+ return d
+}
+const makeItem = () => {
+ return {
+ id: emitterCounter++,
+ text: techWords[Math.floor(Math.random() * techWords.length - 1)],
+ }
+}
+
+const DataEmitter = Blits.Component('DataEmitter', {
+ components: {
+ List,
+ },
+ template: `
+
+
+
+
+ `,
+ state() {
+ return {
+ buttons: [
+ { symbol: '+', operation: 'emitter-add' },
+ { symbol: '-', operation: 'emitter-remove' },
+ ],
+ data: [],
+ obj: {
+ a: 'one',
+ },
+ }
+ },
+ hooks: {
+ ready() {
+ this.data = makeItems(8)
+ this.$emit('tech-list', this.data)
+ },
+ },
+})
+
+const DataReceiver = Blits.Component('DataReceiver', {
+ components: {
+ List,
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+ `,
+ state() {
+ return {
+ operation: 'Pop',
+ size: 0,
+ }
+ },
+ hooks: {
+ init() {
+ // The main tech-list data receiver from Data Provider
+ this.$listen('tech-list', (list) => {
+ this.size = list.length
+ this.$setInterval(() => {
+ this.operation === 'Pop' ? list.pop() : list.push(makeItem())
+ this.operation = list.length == 0 ? 'Add' : list.length == 10 ? 'Pop' : this.operation
+ this.size = list.length
+ }, 500)
+ })
+ },
+ },
+})
+
+const refEmits = Blits.Component('RefEmits', {
+ components: {
+ DataEmitter,
+ DataReceiver,
+ },
+ template: `
+
+
+
+
+
+
+
+ `,
+ input: {
+ right() {
+ this.$router.to('/examples/non-ref-emits')
+ },
+ },
+})
+
+const NonRefDataEmitter = Blits.Component('DataEmitter', {
+ components: {
+ List,
+ },
+ template: `
+
+
+
+
+ `,
+ state() {
+ return {
+ data: [],
+ }
+ },
+ hooks: {
+ ready() {
+ this.data = makeItems(8)
+ // emitting events by non reference variant
+ this.$emit('tech-list', this.data, false)
+ },
+ },
+})
+
+const NonRefEmits = Blits.Component('RefEmits', {
+ components: {
+ NonRefDataEmitter,
+ DataReceiver,
+ },
+ template: `
+
+
+
+
+
+
+ `,
+ input: {
+ left() {
+ this.$router.to('/examples/ref-emits')
+ },
+ },
+})
+
+export const EventRoutes = [
+ {
+ path: '/examples/ref-emits',
+ component: refEmits,
+ },
+ {
+ path: '/examples/non-ref-emits',
+ component: NonRefEmits,
+ },
+]
+
+export default EventRoutes
diff --git a/src/pages/Portal.js b/src/pages/Portal.js
index 7cfc0ed..cfcf0e7 100644
--- a/src/pages/Portal.js
+++ b/src/pages/Portal.js
@@ -57,7 +57,7 @@ export default Blits.Component('Portal', {
- `,
+ `,
state() {
return {
version: p.version,
@@ -239,6 +239,11 @@ export default Blits.Component('Portal', {
id: 'examples/announcer',
description: 'Using the built-in "Announcer" plugin',
},
+ {
+ title: 'Event Emitter',
+ id: 'examples/ref-emits',
+ description: 'Differentiation between Emit by Ref and Non Ref',
+ },
],
benchmark: [
{