@lightningjs/blits 0.8.0 → 0.9.0

package/src/lib/colors/colors.test.js

@@ -27,8 +27,30 @@ test('Object', (assert) => {
 })
 
 test('6 character hex', (assert) => {
-  const input = ['#ffffff', '#000000', '#c0ffee', '#7dd3fc', '#0c4a6e']
-  const expected = ['0xffffffff', '0x000000ff', '0xc0ffeeff', '0x7dd3fcff', '0x0c4a6eff']
+  const input = [
+    '#ffffff',
+    '#000000',
+    '#c0ffee',
+    '#7dd3fc',
+    '#0c4a6e',
+    'ffffff',
+    '000000',
+    'c0ffee',
+    '7dd3fc',
+    '0c4a6e',
+  ]
+  const expected = [
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffeeff',
+    '0x7dd3fcff',
+    '0x0c4a6eff',
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffeeff',
+    '0x7dd3fcff',
+    '0x0c4a6eff',
+  ]
 
   const actual = input.map(colors.normalize)
 
@@ -41,8 +63,15 @@ test('6 character hex', (assert) => {
 })
 
 test('3 character hex', (assert) => {
-  const input = ['#fff', '#000', '#c8c']
-  const expected = ['0xffffffff', '0x000000ff', '0xcc88ccff']
+  const input = ['#fff', '#000', '#c8c', 'fff', '000', 'c8c']
+  const expected = [
+    '0xffffffff',
+    '0x000000ff',
+    '0xcc88ccff',
+    '0xffffffff',
+    '0x000000ff',
+    '0xcc88ccff',
+  ]
 
   const actual = input.map(colors.normalize)
 
@@ -55,8 +84,30 @@ test('3 character hex', (assert) => {
 })
 
 test('8 character hex (rgba)', (assert) => {
-  const input = ['#ffffffff', '#000000ff', '#c0ffee80', '#7dd3fc10', '#0c4a6eff']
-  const expected = ['0xffffffff', '0x000000ff', '0xc0ffee80', '0x7dd3fc10', '0x0c4a6eff']
+  const input = [
+    '#ffffffff',
+    '#000000ff',
+    '#c0ffee80',
+    '#7dd3fc10',
+    '#0c4a6eff',
+    'ffffffff',
+    '000000ff',
+    'c0ffee80',
+    '7dd3fc10',
+    '0c4a6eff',
+  ]
+  const expected = [
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffee80',
+    '0x7dd3fc10',
+    '0x0c4a6eff',
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffee80',
+    '0x7dd3fc10',
+    '0x0c4a6eff',
+  ]
 
   const actual = input.map(colors.normalize)
 
@@ -68,6 +119,44 @@ test('8 character hex (rgba)', (assert) => {
   assert.end()
 })
 
+test('Invalid hex values', (assert) => {
+  const input = [
+    '#fde4',
+    '#1000',
+    '#ddc8c',
+    'hg0',
+    '000fffa',
+    '#a',
+    '#0',
+    'c8O',
+    'fffff',
+    '000f00000',
+    '##000000',
+  ]
+  const expected = [
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+  ]
+
+  const actual = input.map((color) => colors.normalize(color))
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'Invalid hex values should return white color as the default color'
+  )
+  assert.end()
+})
+
 test('RGB colors', (assert) => {
   const input = [
     'rgb(255,255,255)',
@@ -80,23 +169,35 @@ test('RGB colors', (assert) => {
 
   const actual = input.map(colors.normalize)
 
-  assert.deepEqual(
-    actual,
-    expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
-  )
+  assert.deepEqual(actual, expected, 'RGB codes should return the correct color in rgba format')
+  assert.end()
+})
+
+test('Invalid RGB colors', (assert) => {
+  const input = [
+    'rgb(256,255,255)',
+    'rgb(123,432,211)',
+    'rgb(192, 255)',
+    'rgb(125,, 211, 252)',
+    'rgb(-12, 74, 110)',
+  ]
+  const expected = ['0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff']
+
+  const actual = input.map((color) => colors.normalize(color))
+
+  assert.deepEqual(actual, expected, 'Invalid RGB codes should return white color in rgba format')
   assert.end()
 })
 
 test('RGBA colors', (assert) => {
   const input = [
-    'rgb(255,255,255,1)',
-    'rgb(0,0,0,1)',
-    'rgb(192, 255, 238, 0.5)',
-    'rgb(125, 211, 252, 0.1)',
-    'rgb(12, 74, 110, 0)',
-    'rgb(12, 74, 110, -0.5)', // negative alpha should become 0
-    'rgb(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
+    'rgba(255,255,255,1)',
+    'rgba(0,0,0,1)',
+    'rgba(192, 255, 238, 0.5)',
+    'rgba(125, 211, 252, 0.1)',
+    'rgba(12, 74, 110, 0)',
+    'rgba(12, 74, 110, -0.5)', // negative alpha should become 0
+    'rgba(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
   ]
   const expected = [
     '0xffffffff',
@@ -110,61 +211,60 @@ test('RGBA colors', (assert) => {
 
   const actual = input.map(colors.normalize)
 
-  assert.deepEqual(
-    actual,
-    expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
-  )
+  assert.deepEqual(actual, expected, 'RGBA codes should return the correct color in rgba format')
   assert.end()
 })
 
-test('RGBA colors', (assert) => {
+test('Invalid RGBA colors', (assert) => {
   const input = [
     'rgb(255,255,255,1)',
-    'rgb(0,0,0,1)',
-    'rgb(192, 255, 238, 0.5)',
-    'rgb(125, 211, 252, 0.1)',
-    'rgb(12, 74, 110, 0)',
-    'rgb(12, 74, 110, -0.5)', // negative alpha should become 0
-    'rgb(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
+    'rgba(0,0,0,a)',
+    'rgba(192, 256, 238, 0.5)',
+    'rgba(125, 252, 0.1)',
+    'rgba(12,, 74, 110, 0)',
+    'rgba(-12, 74, 110, -0.5)',
+    'rgba(12, 74, 110, --1.2)',
   ]
   const expected = [
     '0xffffffff',
-    '0x000000ff',
-    '0xc0ffee80',
-    '0x7dd3fc1a',
-    '0x0c4a6e00',
-    '0x0c4a6e00',
-    '0x0c4a6eff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
   ]
 
+  const actual = input.map((color) => colors.normalize(color))
+
+  assert.deepEqual(actual, expected, 'Invalid RGBA codes should return white color in rgba format')
+  assert.end()
+})
+
+test('HTML colors', (assert) => {
+  const input = ['blanchedalmond', 'salmon', 'tomato', 'saddlebrown', 'red']
+  const expected = ['0xffebcdff', '0xfa8072ff', '0xff6347ff', '0x8b4513ff', '0xff0000ff']
+
   const actual = input.map(colors.normalize)
 
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
+    'HTML color codes should return the correct color in rgba format'
   )
   assert.end()
 })
 
-test('HTML colors', (assert) => {
-  const input = ['blanchedalmond', 'salmon', 'tomato', 'saddlebrown', 'red']
+test('Invalid HTML colors', (assert) => {
+  const input = ['darkblanchedalmond', 'selmon', 'lighttomato', 'sadlebrown', 'darkbrown']
+  const expected = ['0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff']
 
-  const expected = [
-    parseInt('0xffebcdff', 16),
-    parseInt('0xfa8072ff', 16),
-    parseInt('0xff6347ff', 16),
-    parseInt('0x8b4513ff', 16),
-    parseInt('0xff0000ff', 16),
-  ]
-
-  const actual = input.map(colors.normalize)
+  const actual = input.map((color) => colors.normalize(color))
 
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
+    'Invalid HTML color codes should return white color in rgba format'
   )
   assert.end()
 })

package/src/lib/colors/htmlColors.js

@@ -16,153 +16,153 @@
  */
 
 export default {
-  aliceblue: 0xf0f8ffff,
-  antiquewhite: 0xfaebd7ff,
-  aqua: 0xffffff00,
-  aquamarine: 0x7fffd4ff,
-  azure: 0xf0ffffff,
-  beige: 0xf5f5dcff,
-  bisque: 0xffe4c4ff,
-  black: 0x000000ff,
-  blanchedalmond: 0xffebcdff,
-  blue: 0x0000ffff,
-  blueviolet: 0x8a2be2ff,
-  brown: 0xa52a2aff,
-  burlywood: 0xdeb887ff,
-  cadetblue: 0x5f9ea0ff,
-  chartreuse: 0x7fff00ff,
-  chocolate: 0xd2691eff,
-  coral: 0xff7f50ff,
-  cornflowerblue: 0x6495edff,
-  cornsilk: 0xfff8dcff,
-  crimson: 0xdc143cff,
-  cyan: 0x00ffffff,
-  darkblue: 0x00008bff,
-  darkcyan: 0x008b8bff,
-  darkgoldenrod: 0xb8860bff,
-  darkgray: 0xa9a9a9ff,
-  darkgreen: 0x006400ff,
-  darkgrey: 0xa9a9a9ff,
-  darkkhaki: 0xbdb76bff,
-  darkmagenta: 0x8b008bff,
-  darkolivegreen: 0x556b2fff,
-  darkorange: 0xff8c00ff,
-  darkorchid: 0x9932ccff,
-  darkred: 0x8b0000ff,
-  darksalmon: 0xe9967aff,
-  darkseagreen: 0x8fbc8fff,
-  darkslateblue: 0x483d8bff,
-  darkslategray: 0x2f4f4fff,
-  darkslategrey: 0x2f4f4fff,
-  darkturquoise: 0x00ced1ff,
-  darkviolet: 0x9400d3ff,
-  deeppink: 0xff1493ff,
-  deepskyblue: 0x00bfffff,
-  dimgray: 0x696969ff,
-  dimgrey: 0x696969ff,
-  dodgerblue: 0x1e90ffff,
-  firebrick: 0xb22222ff,
-  floralwhite: 0xfffaf0ff,
-  forestgreen: 0x228b22ff,
-  fuchsia: 0xff00ffff,
-  gainsboro: 0xdcdcdcff,
-  ghostwhite: 0xf8f8ffff,
-  gold: 0xffd700ff,
-  goldenrod: 0xdaa520ff,
-  gray: 0x808080ff,
-  green: 0x008000ff,
-  greenyellow: 0xadff2fff,
-  grey: 0x808080ff,
-  honeydew: 0xf0fff0ff,
-  hotpink: 0xff69b4ff,
-  indianred: 0xcd5c5cff,
-  indigo: 0x4b0082ff,
-  ivory: 0xfffff0ff,
-  khaki: 0xf0e68cff,
-  lavender: 0xe6e6faff,
-  lavenderblush: 0xfff0f5ff,
-  lawngreen: 0x7cfc00ff,
-  lemonchiffon: 0xfffacdff,
-  lightblue: 0xadd8e6ff,
-  lightcoral: 0xf08080ff,
-  lightcyan: 0xe0ffffff,
-  lightgoldenrodyellow: 0xfafad2ff,
-  lightgray: 0xd3d3d3ff,
-  lightgreen: 0x90ee90ff,
-  lightgrey: 0xd3d3d3ff,
-  lightpink: 0xffb6c1ff,
-  lightsalmon: 0xffa07aff,
-  lightseagreen: 0x20b2aaff,
-  lightskyblue: 0x87cefaff,
-  lightslategray: 0x778899ff,
-  lightslategrey: 0x778899ff,
-  lightsteelblue: 0xb0c4deff,
-  lightyellow: 0xffffe0ff,
-  lime: 0x00ff00ff,
-  limegreen: 0x32cd32ff,
-  linen: 0xfaf0e6ff,
-  magenta: 0xff00ffff,
-  maroon: 0x800000ff,
-  mediumaquamarine: 0x66cdaaff,
-  mediumblue: 0x0000cdff,
-  mediumorchid: 0xba55d3ff,
-  mediumpurple: 0x9370dbff,
-  mediumseagreen: 0x3cb371ff,
-  mediumslateblue: 0x7b68eeff,
-  mediumspringgreen: 0x00fa9aff,
-  mediumturquoise: 0x48d1ccff,
-  mediumvioletred: 0xc71585ff,
-  midnightblue: 0x191970ff,
-  mintcream: 0xf5fffaff,
-  mistyrose: 0xffe4e1ff,
-  moccasin: 0xffe4b5ff,
-  navajowhite: 0xffdeadff,
-  navy: 0x000080ff,
-  oldlace: 0xfdf5e6ff,
-  olive: 0x808000ff,
-  olivedrab: 0x6b8e23ff,
-  orange: 0xffa500ff,
-  orangered: 0xff4500ff,
-  orchid: 0xda70d6ff,
-  palegoldenrod: 0xeee8aaff,
-  palegreen: 0x98fb98ff,
-  paleturquoise: 0xafeeeeff,
-  palevioletred: 0xdb7093ff,
-  papayawhip: 0xffefd5ff,
-  peachpuff: 0xffdab9ff,
-  peru: 0xcd853fff,
-  pink: 0xffc0cbff,
-  plum: 0xdda0ddff,
-  powderblue: 0xb0e0e6ff,
-  purple: 0x800080ff,
-  rebeccapurple: 0x663399ff,
-  red: 0xff0000ff,
-  rosybrown: 0xbc8f8fff,
-  royalblue: 0x4169e1ff,
-  saddlebrown: 0x8b4513ff,
-  salmon: 0xfa8072ff,
-  sandybrown: 0xf4a460ff,
-  seagreen: 0x2e8b57ff,
-  seashell: 0xfff5eeff,
-  sienna: 0xa0522dff,
-  silver: 0xc0c0c0ff,
-  skyblue: 0x87ceebff,
-  slateblue: 0x6a5acdff,
-  slategray: 0x708090ff,
-  slategrey: 0x708090ff,
-  snow: 0xfffafaff,
-  springgreen: 0x00ff7fff,
-  steelblue: 0x4682b4ff,
-  tan: 0xd2b48cff,
-  teal: 0x008080ff,
-  thistle: 0xd8bfd8ff,
-  tomato: 0xff6347ff,
-  transparent: 0x00000000,
-  turquoise: 0x40e0d0ff,
-  violet: 0xee82eeff,
-  wheat: 0xf5deb3ff,
-  white: 0xffffffff,
-  whitesmoke: 0xf5f5f5ff,
-  yellow: 0xffff00ff,
-  yellowgreen: 0x9acd32ff,
+  aliceblue: '0xf0f8ffff',
+  antiquewhite: '0xfaebd7ff',
+  aqua: '0xffffff00',
+  aquamarine: '0x7fffd4ff',
+  azure: '0xf0ffffff',
+  beige: '0xf5f5dcff',
+  bisque: '0xffe4c4ff',
+  black: '0x000000ff',
+  blanchedalmond: '0xffebcdff',
+  blue: '0x0000ffff',
+  blueviolet: '0x8a2be2ff',
+  brown: '0xa52a2aff',
+  burlywood: '0xdeb887ff',
+  cadetblue: '0x5f9ea0ff',
+  chartreuse: '0x7fff00ff',
+  chocolate: '0xd2691eff',
+  coral: '0xff7f50ff',
+  cornflowerblue: '0x6495edff',
+  cornsilk: '0xfff8dcff',
+  crimson: '0xdc143cff',
+  cyan: '0x00ffffff',
+  darkblue: '0x00008bff',
+  darkcyan: '0x008b8bff',
+  darkgoldenrod: '0xb8860bff',
+  darkgray: '0xa9a9a9ff',
+  darkgreen: '0x006400ff',
+  darkgrey: '0xa9a9a9ff',
+  darkkhaki: '0xbdb76bff',
+  darkmagenta: '0x8b008bff',
+  darkolivegreen: '0x556b2fff',
+  darkorange: '0xff8c00ff',
+  darkorchid: '0x9932ccff',
+  darkred: '0x8b0000ff',
+  darksalmon: '0xe9967aff',
+  darkseagreen: '0x8fbc8fff',
+  darkslateblue: '0x483d8bff',
+  darkslategray: '0x2f4f4fff',
+  darkslategrey: '0x2f4f4fff',
+  darkturquoise: '0x00ced1ff',
+  darkviolet: '0x9400d3ff',
+  deeppink: '0xff1493ff',
+  deepskyblue: '0x00bfffff',
+  dimgray: '0x696969ff',
+  dimgrey: '0x696969ff',
+  dodgerblue: '0x1e90ffff',
+  firebrick: '0xb22222ff',
+  floralwhite: '0xfffaf0ff',
+  forestgreen: '0x228b22ff',
+  fuchsia: '0xff00ffff',
+  gainsboro: '0xdcdcdcff',
+  ghostwhite: '0xf8f8ffff',
+  gold: '0xffd700ff',
+  goldenrod: '0xdaa520ff',
+  gray: '0x808080ff',
+  green: '0x008000ff',
+  greenyellow: '0xadff2fff',
+  grey: '0x808080ff',
+  honeydew: '0xf0fff0ff',
+  hotpink: '0xff69b4ff',
+  indianred: '0xcd5c5cff',
+  indigo: '0x4b0082ff',
+  ivory: '0xfffff0ff',
+  khaki: '0xf0e68cff',
+  lavender: '0xe6e6faff',
+  lavenderblush: '0xfff0f5ff',
+  lawngreen: '0x7cfc00ff',
+  lemonchiffon: '0xfffacdff',
+  lightblue: '0xadd8e6ff',
+  lightcoral: '0xf08080ff',
+  lightcyan: '0xe0ffffff',
+  lightgoldenrodyellow: '0xfafad2ff',
+  lightgray: '0xd3d3d3ff',
+  lightgreen: '0x90ee90ff',
+  lightgrey: '0xd3d3d3ff',
+  lightpink: '0xffb6c1ff',
+  lightsalmon: '0xffa07aff',
+  lightseagreen: '0x20b2aaff',
+  lightskyblue: '0x87cefaff',
+  lightslategray: '0x778899ff',
+  lightslategrey: '0x778899ff',
+  lightsteelblue: '0xb0c4deff',
+  lightyellow: '0xffffe0ff',
+  lime: '0x00ff00ff',
+  limegreen: '0x32cd32ff',
+  linen: '0xfaf0e6ff',
+  magenta: '0xff00ffff',
+  maroon: '0x800000ff',
+  mediumaquamarine: '0x66cdaaff',
+  mediumblue: '0x0000cdff',
+  mediumorchid: '0xba55d3ff',
+  mediumpurple: '0x9370dbff',
+  mediumseagreen: '0x3cb371ff',
+  mediumslateblue: '0x7b68eeff',
+  mediumspringgreen: '0x00fa9aff',
+  mediumturquoise: '0x48d1ccff',
+  mediumvioletred: '0xc71585ff',
+  midnightblue: '0x191970ff',
+  mintcream: '0xf5fffaff',
+  mistyrose: '0xffe4e1ff',
+  moccasin: '0xffe4b5ff',
+  navajowhite: '0xffdeadff',
+  navy: '0x000080ff',
+  oldlace: '0xfdf5e6ff',
+  olive: '0x808000ff',
+  olivedrab: '0x6b8e23ff',
+  orange: '0xffa500ff',
+  orangered: '0xff4500ff',
+  orchid: '0xda70d6ff',
+  palegoldenrod: '0xeee8aaff',
+  palegreen: '0x98fb98ff',
+  paleturquoise: '0xafeeeeff',
+  palevioletred: '0xdb7093ff',
+  papayawhip: '0xffefd5ff',
+  peachpuff: '0xffdab9ff',
+  peru: '0xcd853fff',
+  pink: '0xffc0cbff',
+  plum: '0xdda0ddff',
+  powderblue: '0xb0e0e6ff',
+  purple: '0x800080ff',
+  rebeccapurple: '0x663399ff',
+  red: '0xff0000ff',
+  rosybrown: '0xbc8f8fff',
+  royalblue: '0x4169e1ff',
+  saddlebrown: '0x8b4513ff',
+  salmon: '0xfa8072ff',
+  sandybrown: '0xf4a460ff',
+  seagreen: '0x2e8b57ff',
+  seashell: '0xfff5eeff',
+  sienna: '0xa0522dff',
+  silver: '0xc0c0c0ff',
+  skyblue: '0x87ceebff',
+  slateblue: '0x6a5acdff',
+  slategray: '0x708090ff',
+  slategrey: '0x708090ff',
+  snow: '0xfffafaff',
+  springgreen: '0x00ff7fff',
+  steelblue: '0x4682b4ff',
+  tan: '0xd2b48cff',
+  teal: '0x008080ff',
+  thistle: '0xd8bfd8ff',
+  tomato: '0xff6347ff',
+  transparent: '0x00000000',
+  turquoise: '0x40e0d0ff',
+  violet: '0xee82eeff',
+  wheat: '0xf5deb3ff',
+  white: '0xffffffff',
+  whitesmoke: '0xf5f5f5ff',
+  yellow: '0xffff00ff',
+  yellowgreen: '0x9acd32ff',
 }

package/src/lib/hooks.js

@@ -19,20 +19,20 @@ import symbols from './symbols.js'
 
 const cbs = {}
 
-export const emit = (hook, name, scope, data = []) => {
-  cbs[name] && cbs[name][hook] && cbs[name][hook].apply(scope, data)
+export const emit = (hook, identifier, scope, data = []) => {
+  cbs[identifier] && cbs[identifier][hook] && cbs[identifier][hook].apply(scope, data)
 }
 
-export const privateEmit = (hook, name, scope) => {
+export const privateEmit = (hook, identifier, scope) => {
   const symHook = symbols[hook]
-  cbs[name] && cbs[name][symHook] && cbs[name][symHook].apply(scope)
+  cbs[identifier] && cbs[identifier][symHook] && cbs[identifier][symHook].apply(scope)
 }
 
-export const registerHooks = (hooks = {}, name) => {
-  cbs[name] = {}
+export const registerHooks = (hooks = {}, identifier) => {
+  cbs[identifier] = {}
   // Combines enumerable keys and symbol properties of the 'hooks' object
   const hookKeys = [...Object.keys(hooks), ...Object.getOwnPropertySymbols(hooks)]
   hookKeys.forEach((hook) => {
-    if (typeof hooks[hook] === 'function') cbs[name][hook] = hooks[hook]
+    if (typeof hooks[hook] === 'function') cbs[identifier][hook] = hooks[hook]
   })
 }

package/src/lib/lifecycle.js

@@ -17,6 +17,7 @@
 
 import { Log } from './log.js'
 import { emit, privateEmit } from './hooks.js'
+import symbols from './symbols.js'
 
 const states = ['init', 'ready', 'focus', 'unfocus', 'destroy']
 
@@ -34,9 +35,9 @@ export default {
       this.previous = this.current
       this.current = v
       // emit 'private' hook
-      privateEmit(v, this.component.name, this.component)
+      privateEmit(v, this.component[symbols.identifier], this.component)
       // emit 'public' hook
-      emit(v, this.component.name, this.component)
+      emit(v, this.component[symbols.identifier], this.component)
     }
   },
 }

package/src/lib/setup/base.js

@@ -35,7 +35,7 @@ const shaderAlias = {
   rounded: 'radius',
 }
 
-export default (component, name) => {
+export default (component, name, identifier) => {
   Object.defineProperties(component.prototype, {
     name: {
       value: name,
@@ -43,8 +43,15 @@ export default (component, name) => {
       enumerable: true,
       configurable: false,
     },
+    [symbols.identifier]: {
+      value: component[symbols.identifier],
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
     focus: {
       value: function (e) {
+        this[symbols.state].hasFocus = true
         Focus.set(this, e)
       },
       writable: false,
@@ -53,6 +60,7 @@ export default (component, name) => {
     },
     unfocus: {
       value: function () {
+        this[symbols.state].hasFocus = false
         this.lifecycle.state = 'unfocus'
       },
       writable: false,
@@ -262,15 +270,15 @@ export default (component, name) => {
 }
 
 const deleteChildren = function (children) {
-  for (let i = 0; i < children.length; i++) {
-    if (!children[i]) return
-    if (Array.isArray(children[i])) {
-      deleteChildren(children[i])
-    } else if (children[i].destroy) {
-      children[i].destroy()
-    }
-    children[i] = null
-  }
+  // for (let i = 0; i < children.length; i++) {
+  //   if (!children[i]) return
+  //   if (Array.isArray(children[i])) {
+  //     deleteChildren(children[i])
+  //   } else if (children[i].destroy) {
+  //     children[i].destroy()
+  //   }
+  //   children[i] = null
+  // }
 
-  children = []
+  children.length = 0
 }