@lightningjs/blits 0.10.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/docs/essentials/displaying_text.md +1 -1
  3. package/package.json +3 -3
  4. package/src/component/base/events.js +1 -1
  5. package/src/component/base/utils.js +34 -1
  6. package/src/component/setup/props.js +3 -1
  7. package/src/component/setup/props.test.js +51 -19
  8. package/src/component.d.ts +2 -1
  9. package/src/component.js +20 -13
  10. package/src/components/Circle.js +13 -12
  11. package/src/components/FPScounter.js +388 -536
  12. package/src/components/Image.js +7 -9
  13. package/src/components/Layout.js +49 -0
  14. package/src/components/Layout.orig.js +34 -0
  15. package/src/components/RouterView.js +6 -10
  16. package/src/components/Sprite.js +10 -12
  17. package/src/components/index.js +2 -2
  18. package/src/components/index.orig.js +2 -2
  19. package/src/engine.js +1 -1
  20. package/src/engines/L3/element.js +193 -180
  21. package/src/engines/L3/element.test.js +170 -0
  22. package/src/engines/L3/fontLoader.js +4 -5
  23. package/src/engines/L3/index.js +2 -2
  24. package/src/engines/L3/launch.js +7 -13
  25. package/src/engines/L3/shaderLoader.js +12 -0
  26. package/src/engines/index.js +1 -1
  27. package/src/launch.d.ts +19 -2
  28. package/src/lib/codegenerator/generator.js +212 -84
  29. package/src/lib/codegenerator/generator.test.js +657 -942
  30. package/src/lib/colors/colors.js +59 -46
  31. package/src/lib/precompiler/precompiler.js +2 -1
  32. package/src/lib/reactivity/effect.js +10 -13
  33. package/src/lib/reactivity/reactive.js +24 -14
  34. package/src/lib/symbols.js +1 -0
  35. package/src/router/router.js +17 -3
  36. package/boilerplate/js/default/src/renderer.js +0 -4
  37. package/src/components/Text.js +0 -119
  38. package/src/components/Text.orig.js +0 -81
package/src/components/Image.js CHANGED
@@ -21,22 +21,20 @@ export default () =>
21
21
  Component('Image', {
22
22
  /* eslint-disable no-unused-vars */
23
23
  code: {
24
- render: function anonymous(parent, component, context, components) {
24
+ render: function anonymous(parent, component, context, components, effect, getRaw) {
25
25
  const elms = []
26
-
27
- if (!elms[0]) {
28
- elms[0] = this.element({ parent: parent || 'root' }, component)
29
- }
26
+ let componentType
27
+ const rootComponent = component
30
28
  const elementConfig0 = {}
31
29
 
32
- if (!elms[0].nodeId) {
33
- elms[0].populate(elementConfig0)
34
- }
30
+ elms[0] = this.element({ parent: parent || 'root' }, component)
35
31
 
32
+ elementConfig0['imageSource'] = component.imageSource
33
+ elms[0].populate(elementConfig0)
36
34
  return elms
37
35
  },
38
36
  effects: [
39
- function anonymous(component, elms, context, components) {
37
+ function anonymous(component, elms, context, components, rootComponent, effect) {
40
38
  elms[0].set('imageSource', component.imageSource)
41
39
  },
42
40
  ],
package/src/components/Layout.js ADDED
@@ -0,0 +1,49 @@
1
+ import Component from '../component.js'
2
+
3
+ export default () => {
4
+ return Component('Layout', {
5
+ /* eslint-disable no-unused-vars */
6
+ code: {
7
+ render: function anonymous(parent, component, context, components, effect, getRaw) {
8
+ const elms = []
9
+ let componentType
10
+ const rootComponent = component
11
+ const elementConfig0 = {}
12
+
13
+ elms[0] = this.element({ parent: parent || 'root' }, component)
14
+
15
+ elementConfig0[Symbol.for('isSlot')] = true
16
+ elementConfig0['ref'] = 'slot'
17
+ elms[0].populate(elementConfig0)
18
+ return elms
19
+ },
20
+ effects: [],
21
+ context: {},
22
+ },
23
+ props: [
24
+ 'direction',
25
+ {
26
+ key: 'gap',
27
+ default: 0,
28
+ },
29
+ ],
30
+ hooks: {
31
+ ready() {
32
+ this.___layout()
33
+ },
34
+ },
35
+ methods: {
36
+ // todo: review naming
37
+ ___layout() {
38
+ let offset = 0
39
+
40
+ this.select('slot').children.forEach((el) => {
41
+ el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
42
+ // todo: grab width from interface, not directly from node
43
+ offset +=
44
+ (el.node[this.direction === 'vertical' ? 'height' : 'width'] || 0) + (this.gap || 0)
45
+ })
46
+ },
47
+ },
48
+ })
49
+ }
package/src/components/Layout.orig.js ADDED
@@ -0,0 +1,34 @@
1
+ import Component from '../component.js'
2
+
3
+ export default () => {
4
+ return Component('Layout', {
5
+ template: `
6
+ <Slot ref="slot" />
7
+ `,
8
+ props: [
9
+ 'direction',
10
+ {
11
+ key: 'gap',
12
+ default: 0,
13
+ },
14
+ ],
15
+ hooks: {
16
+ ready() {
17
+ this.___layout()
18
+ },
19
+ },
20
+ methods: {
21
+ // todo: review naming
22
+ ___layout() {
23
+ let offset = 0
24
+
25
+ this.select('slot').children.forEach((el) => {
26
+ el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
27
+ // todo: grab width from interface, not directly from node
28
+ offset +=
29
+ (el.node[this.direction === 'vertical' ? 'height' : 'width'] || 0) + (this.gap || 0)
30
+ })
31
+ },
32
+ },
33
+ })
34
+ }
package/src/components/RouterView.js CHANGED
@@ -24,21 +24,17 @@ export default () =>
24
24
  Component('RouterView', {
25
25
  /* eslint-disable no-unused-vars */
26
26
  code: {
27
- render: function anonymous(parent, component, context, components) {
27
+ render: function anonymous(parent, component, context, components, effect, getRaw) {
28
28
  const elms = []
29
-
30
- if (!elms[0]) {
31
- elms[0] = this.element({ parent: parent || 'root' }, component)
32
- }
29
+ let componentType
30
+ const rootComponent = component
33
31
  const elementConfig0 = {}
34
32
 
33
+ elms[0] = this.element({ parent: parent || 'root' }, component)
34
+
35
35
  elementConfig0['w'] = parent.node.width * (100 / 100)
36
36
  elementConfig0['height'] = parent.node.height * (100 / 100)
37
-
38
- if (!elms[0].nodeId) {
39
- elms[0].populate(elementConfig0)
40
- }
41
-
37
+ elms[0].populate(elementConfig0)
42
38
  return elms
43
39
  },
44
40
  effects: [],
package/src/components/Sprite.js CHANGED
@@ -23,28 +23,26 @@ export default () =>
23
23
  Component('Sprite', {
24
24
  /* eslint-disable no-unused-vars */
25
25
  code: {
26
- render: function anonymous(parent, component, context, components) {
26
+ render: function anonymous(parent, component, context, components, effect, getRaw) {
27
27
  const elms = []
28
-
29
- if (!elms[0]) {
30
- elms[0] = this.element({ parent: parent || 'root' }, component)
31
- }
28
+ let componentType
29
+ const rootComponent = component
32
30
  const elementConfig0 = {}
33
31
 
32
+ elms[0] = this.element({ parent: parent || 'root' }, component)
33
+
34
34
  elementConfig0['w'] = parent.node.width * (100 / 100)
35
35
  elementConfig0['h'] = parent.node.height * (100 / 100)
36
-
37
- if (!elms[0].nodeId) {
38
- elms[0].populate(elementConfig0)
39
- }
40
-
36
+ elementConfig0['texture'] = component.texture
37
+ elementConfig0['color'] = component.color
38
+ elms[0].populate(elementConfig0)
41
39
  return elms
42
40
  },
43
41
  effects: [
44
- function anonymous(component, elms, context, components) {
42
+ function anonymous(component, elms, context, components, rootComponent, effect) {
45
43
  elms[0].set('texture', component.texture)
46
44
  },
47
- function anonymous(component, elms, context, components) {
45
+ function anonymous(component, elms, context, components, rootComponent, effect) {
48
46
  elms[0].set('color', component.color)
49
47
  },
50
48
  ],
package/src/components/index.js CHANGED
@@ -19,14 +19,14 @@ import Image from './Image.js'
19
19
  import Circle from './Circle.js'
20
20
  import RouterView from './RouterView.js'
21
21
  import Sprite from './Sprite.js'
22
- import Text from './Text.js'
23
22
  import FPScounter from './FPScounter.js'
23
+ import Layout from './Layout.js'
24
24
 
25
25
  export default () => ({
26
26
  Image: Image(),
27
27
  Circle: Circle(),
28
28
  RouterView: RouterView(),
29
29
  Sprite: Sprite(),
30
- Text: Text(),
31
30
  FPScounter: FPScounter(),
31
+ Layout: Layout(),
32
32
  })
package/src/components/index.orig.js CHANGED
@@ -19,14 +19,14 @@ import Image from './Image.js'
19
19
  import Circle from './Circle.js'
20
20
  import RouterView from './RouterView.js'
21
21
  import Sprite from './Sprite.js'
22
- import Text from './Text.js'
23
22
  import FPScounter from './FPScounter.js'
23
+ import Layout from './Layout.js'
24
24
 
25
25
  export default () => ({
26
26
  Image: Image(),
27
27
  Circle: Circle(),
28
28
  RouterView: RouterView(),
29
29
  Sprite: Sprite(),
30
- Text: Text(),
31
30
  FPScounter: FPScounter(),
31
+ Layout: Layout(),
32
32
  })
package/src/engine.js CHANGED
@@ -1 +1 @@
1
- export { L3 as default } from './engines'
1
+ export { L3 as default } from './engines/index.js'