feat: support native type BigInt (vuejs#2052)

Author: Azurewarth0920

packages/app-frontend/src/mixins/data-field-edit.js

@@ -72,13 +72,16 @@ export default {
 
     isValueEditable () {
       const type = this.interpretedValueType
+      const customType = this.field.value?._custom?.type
+
       return this.isEditable &&
         (
           type === 'null' ||
           type === 'literal' ||
           type === 'string' ||
           type === 'array' ||
-          type === 'plain-object'
+          type === 'plain-object' ||
+          customType === 'bigint'
         )
     },
 

packages/shared-utils/src/util.ts

@@ -215,6 +215,8 @@ function replacerForInternal (key) {
     return getCustomFunctionDetails(val)
   } else if (type === 'symbol') {
     return `[native Symbol ${Symbol.prototype.toString.call(val)}]`
+  } else if (type === 'bigint') {
+    return getCustomBigIntDetails(val)
   } else if (val !== null && type === 'object') {
     const proto = Object.prototype.toString.call(val)
     if (proto === '[object Map]') {
@@ -329,6 +331,17 @@ export function reviveSet (val) {
   return result
 }
 
+export function getCustomBigIntDetails (val) {
+  const stringifiedBigInt = BigInt.prototype.toString.call(val)
+  return {
+    _custom: {
+      type: 'bigint',
+      display: `BigInt(${stringifiedBigInt})`,
+      value: stringifiedBigInt,
+    },
+  }
+}
+
 // Use a custom basename functions instead of the shimed version
 // because it doesn't work on Windows
 function basename (filename, ext) {
@@ -497,6 +510,8 @@ export function revive (val) {
       return reviveMap(val)
     } else if (custom.type === 'set') {
       return reviveSet(val)
+    } else if (custom.type === 'bigint') {
+      return BigInt(custom.value)
     } else if (custom._reviveId) {
       return reviveCache.read(custom._reviveId)
     } else {

packages/shell-dev-vue2/src/NativeTypes.vue

@@ -39,6 +39,9 @@
     <h3>Map</h3>
     <pre>{{ mapDisplay() }}</pre>
 
+    <h3>BigInt</h3>
+    <pre>{{ bigInt }}</pre>
+
     <p>
       <button @click="testVuexSet()">
         Vuex Set
@@ -143,6 +146,7 @@ export default {
         b,
         c) {},
       veryLongText,
+      bigInt: BigInt(Number.MAX_SAFE_INTEGER),
     }
   },
   computed: {

packages/shell-dev-vue3/src/NativeTypes.vue

@@ -27,6 +27,9 @@
 
     <h3>Map</h3>
     <pre>{{ mapDisplay() }}</pre>
+
+    <h3>BigInt</h3>
+    <pre>{{ bigInt }}</pre>
   </div>
 </template>
 
@@ -122,6 +125,7 @@ export default {
         c) {},
       veryLongText,
       someElement: null,
+      bigInt: BigInt(Number.MAX_SAFE_INTEGER),
     }
   },