Emit By Non Ref and Ref Example

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"
   }
 }

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({
       <FPScounter x="1610" :show="$showFPS" />
       <SourceInfo ref="info" :show="$showInfo" />
     </Element>
-    `,
+  `,
   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() {

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: `
+    <Element>
+      <Element :for="(item, index) in $data" key="$item.id + 'key'" w="380" h="60" :y="$index * 80 + 50" color="#fff7ed">
+        <Text :content="$item.text" maxwidth="380" align="center" y="12.5" font="lato" size="30" color="#1e293b" />
+      </Element>
+    </Element>
+  `,
+  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: `
+    <Element>
+      <Text content="Emitter Component" font="raleway" maxwidth="960" align="center" y="150" />
+      <List :data="$data" x="300" y="200" />
+    </Element>
+  `,
+  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: `
+    <Element>
+      <Text content="Receiver Component" font="raleway" maxwidth="960" align="center" y="150" />
+      <Text content="Current Operation" font="lato" y="250" maxwidth="960" align="center" />
+      <Text :content="$operation" font="raleway" maxwidth="960" align="center" y="350" />
+      <Element y="400" x="400">
+        <Text content="Items Count" font="raleway" />
+        <Text :content="$size" font="lato" x="200" />
+      </Element>
+    </Element>
+  `,
+  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: `
+    <Element>
+      <Text
+        content="Reflecting Changes in Parent via Emitted Reference: A Reactive Shared State Demo"
+        font="lato"
+        size="40"
+        maxwidth="1920"
+        align="center"
+        y="50"
+      />
+      <DataEmitter ref="emitter" />
+      <DataReceiver ref="receiver" x="960" />
+
+      <Element src="assets/arrow.png" x="1770" rotation="90" y="480" />
+    </Element>
+  `,
+  input: {
+    right() {
+      this.$router.to('/examples/non-ref-emits')
+    },
+  },
+})
+
+const NonRefDataEmitter = Blits.Component('DataEmitter', {
+  components: {
+    List,
+  },
+  template: `
+    <Element>
+      <Text content="Emitter Component" font="raleway" maxwidth="960" align="center" y="150" />
+      <List :data="$data" x="300" y="200" />
+    </Element>
+  `,
+  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: `
+    <Element>
+      <Text
+        content="Not Reflecting Changes in Parent via No Reference Emit"
+        font="lato"
+        size="40"
+        maxwidth="1920"
+        align="center"
+        y="50"
+      />
+      <NonRefDataEmitter ref="emitter" />
+      <DataReceiver ref="receiver" x="960" />
+      <Element src="assets/arrow.png" rotation="-90" y="480" />
+    </Element>
+  `,
+  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

src/pages/Portal.js

@@ -57,7 +57,7 @@ export default Blits.Component('Portal', {
         </Element>
       </Element>
     </Element>
-    `,
+  `,
   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: [
         {