@lightningjs/blits 0.9.9 → 1.0.0

package/src/components/Image.js

@@ -21,22 +21,20 @@ export default () =>
   Component('Image', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context, components) {
+      render: function anonymous(parent, component, context, components, effect, getRaw) {
         const elms = []
-
-        if (!elms[0]) {
-          elms[0] = this.element({ parent: parent || 'root' }, component)
-        }
+        let componentType
+        const rootComponent = component
         const elementConfig0 = {}
 
-        if (!elms[0].nodeId) {
-          elms[0].populate(elementConfig0)
-        }
+        elms[0] = this.element({ parent: parent || 'root' }, component)
 
+        elementConfig0['imageSource'] = component.imageSource
+        elms[0].populate(elementConfig0)
         return elms
       },
       effects: [
-        function anonymous(component, elms, context, components) {
+        function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[0].set('imageSource', component.imageSource)
         },
       ],

package/src/components/Layout.js

@@ -0,0 +1,49 @@
+import Component from '../component.js'
+
+export default () => {
+  return Component('Layout', {
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context, components, effect, getRaw) {
+        const elms = []
+        let componentType
+        const rootComponent = component
+        const elementConfig0 = {}
+
+        elms[0] = this.element({ parent: parent || 'root' }, component)
+
+        elementConfig0[Symbol.for('isSlot')] = true
+        elementConfig0['ref'] = 'slot'
+        elms[0].populate(elementConfig0)
+        return elms
+      },
+      effects: [],
+      context: {},
+    },
+    props: [
+      'direction',
+      {
+        key: 'gap',
+        default: 0,
+      },
+    ],
+    hooks: {
+      ready() {
+        this.___layout()
+      },
+    },
+    methods: {
+      // todo: review naming
+      ___layout() {
+        let offset = 0
+
+        this.select('slot').children.forEach((el) => {
+          el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
+          // todo: grab width from interface, not directly from node
+          offset +=
+            (el.node[this.direction === 'vertical' ? 'height' : 'width'] || 0) + (this.gap || 0)
+        })
+      },
+    },
+  })
+}

package/src/components/Layout.orig.js

@@ -0,0 +1,34 @@
+import Component from '../component.js'
+
+export default () => {
+  return Component('Layout', {
+    template: `
+      <Slot ref="slot" />
+    `,
+    props: [
+      'direction',
+      {
+        key: 'gap',
+        default: 0,
+      },
+    ],
+    hooks: {
+      ready() {
+        this.___layout()
+      },
+    },
+    methods: {
+      // todo: review naming
+      ___layout() {
+        let offset = 0
+
+        this.select('slot').children.forEach((el) => {
+          el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
+          // todo: grab width from interface, not directly from node
+          offset +=
+            (el.node[this.direction === 'vertical' ? 'height' : 'width'] || 0) + (this.gap || 0)
+        })
+      },
+    },
+  })
+}

package/src/components/RouterView.js

@@ -24,21 +24,17 @@ export default () =>
   Component('RouterView', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context, components) {
+      render: function anonymous(parent, component, context, components, effect, getRaw) {
         const elms = []
-
-        if (!elms[0]) {
-          elms[0] = this.element({ parent: parent || 'root' }, component)
-        }
+        let componentType
+        const rootComponent = component
         const elementConfig0 = {}
 
+        elms[0] = this.element({ parent: parent || 'root' }, component)
+
         elementConfig0['w'] = parent.node.width * (100 / 100)
         elementConfig0['height'] = parent.node.height * (100 / 100)
-
-        if (!elms[0].nodeId) {
-          elms[0].populate(elementConfig0)
-        }
-
+        elms[0].populate(elementConfig0)
         return elms
       },
       effects: [],

package/src/components/Sprite.js

@@ -23,28 +23,26 @@ export default () =>
   Component('Sprite', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context, components) {
+      render: function anonymous(parent, component, context, components, effect, getRaw) {
         const elms = []
-
-        if (!elms[0]) {
-          elms[0] = this.element({ parent: parent || 'root' }, component)
-        }
+        let componentType
+        const rootComponent = component
         const elementConfig0 = {}
 
+        elms[0] = this.element({ parent: parent || 'root' }, component)
+
         elementConfig0['w'] = parent.node.width * (100 / 100)
         elementConfig0['h'] = parent.node.height * (100 / 100)
-
-        if (!elms[0].nodeId) {
-          elms[0].populate(elementConfig0)
-        }
-
+        elementConfig0['texture'] = component.texture
+        elementConfig0['color'] = component.color
+        elms[0].populate(elementConfig0)
         return elms
       },
       effects: [
-        function anonymous(component, elms, context, components) {
+        function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[0].set('texture', component.texture)
         },
-        function anonymous(component, elms, context, components) {
+        function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[0].set('color', component.color)
         },
       ],

package/src/components/index.js

@@ -19,14 +19,14 @@ import Image from './Image.js'
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
 import Sprite from './Sprite.js'
-import Text from './Text.js'
 import FPScounter from './FPScounter.js'
+import Layout from './Layout.js'
 
 export default () => ({
   Image: Image(),
   Circle: Circle(),
   RouterView: RouterView(),
   Sprite: Sprite(),
-  Text: Text(),
   FPScounter: FPScounter(),
+  Layout: Layout(),
 })

package/src/components/index.orig.js

@@ -19,14 +19,14 @@ import Image from './Image.js'
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
 import Sprite from './Sprite.js'
-import Text from './Text.js'
 import FPScounter from './FPScounter.js'
+import Layout from './Layout.js'
 
 export default () => ({
   Image: Image(),
   Circle: Circle(),
   RouterView: RouterView(),
   Sprite: Sprite(),
-  Text: Text(),
   FPScounter: FPScounter(),
+  Layout: Layout(),
 })

package/src/engine.js

@@ -1 +1 @@
-export { L3 as default } from './engines'
+export { L3 as default } from './engines/index.js'