fix(custom-elements): cast numbers with Number rules

posva · posva · commit 8cea38077d1f · 2021-08-19T21:47:22.000+02:00
Fix vuejs#4370
diff --git a/packages/runtime-dom/__tests__/apiCustomElement.spec.ts b/packages/runtime-dom/__tests__/apiCustomElement.spec.ts
@@ -0,0 +1,36 @@
+import { toNumber } from '../src/apiCustomElement'
+
+describe('Custom Element', () => {
+  describe('toNumber', () => {
+    it('handles strings', () => {
+      expect(toNumber('')).toBe('')
+      expect(toNumber(null)).toBe('')
+      expect(toNumber('Something else')).toBe('Something else')
+    })
+
+    it('numbers', () => {
+      expect(toNumber('0')).toBe(0)
+      expect(toNumber('1')).toBe(1)
+      expect(toNumber('1.1')).toBe(1.1)
+      expect(toNumber('123e-1')).toBe(12.3)
+      expect(toNumber('Infinity')).toBe(Infinity)
+    })
+
+    it('NaN', () => {
+      expect(toNumber('NaN')).toBeNaN()
+      expect(toNumber('nan')).not.toBeNaN()
+    })
+
+    // all of these are handled by Number
+    it('string non decimal bases', () => {
+      expect(toNumber('0b0')).toBe(0)
+      expect(toNumber('0b1')).toBe(1)
+
+      expect(toNumber('0o3')).toBe(3)
+      expect(toNumber('0o0')).toBe(0)
+
+      expect(toNumber('0x0')).toBe(0)
+      expect(toNumber('0xf')).toBe(15)
+    })
+  })
+})
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
@@ -21,7 +21,7 @@ import {
   ConcreteComponent,
   ComponentOptions
 } from '@vue/runtime-core'
-import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
+import { camelize, extend, hyphenate, isArray } from '@vue/shared'
 import { hydrate, render } from '.'
 
 export type VueElementConstructor<P = {}> = {
@@ -342,3 +342,10 @@ export class VueElement extends BaseClass {
     }
   }
 }
+
+export function toNumber(value: string | null): number | string {
+  // for Number('') and Number(null) as they both become 0
+  if (!value) return ''
+  const casted = Number(value)
+  return value === 'NaN' || !Number.isNaN(casted) ? casted : value
+}

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ import {`
`21`	`21`	`ConcreteComponent,`
`22`	`22`	`ComponentOptions`
`23`	`23`	`} from '@vue/runtime-core'`
`24`		`-import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'`
	`24`	`+import { camelize, extend, hyphenate, isArray } from '@vue/shared'`
`25`	`25`	`import { hydrate, render } from '.'`
`26`	`26`
`27`	`27`	`export type VueElementConstructor<P = {}> = {`
`@@ -342,3 +342,10 @@ export class VueElement extends BaseClass {`
`342`	`342`	`}`
`343`	`343`	`}`
`344`	`344`	`}`
	`345`	`+`
	`346`	`+export function toNumber(value: string \| null): number \| string {`
	`347`	`+ // for Number('') and Number(null) as they both become 0`
	`348`	`+ if (!value) return ''`
	`349`	`+ const casted = Number(value)`
	`350`	`+ return value === 'NaN' \|\| !Number.isNaN(casted) ? casted : value`
	`351`	`+}`