feat: be able to unmount

soc221b · Sep 11, 2022 · 0d5244b · 0d5244b
1 parent 1af3d85
commit 0d5244b
Show file tree

Hide file tree

Showing 19 changed files with 103 additions and 69 deletions.
diff --git a/cypress/integration/array/index.spec.js b/cypress/integration/array/index.spec.js
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 
 import path from 'path'
-import { mount } from '../../../dist/object-visualizer.esm'
+import { mount } from '../../utils/index'
 import {
   primitiveInArray,
   arrayInArray,

diff --git a/cypress/integration/object/index.spec.js b/cypress/integration/object/index.spec.js
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 
 import path from 'path'
-import { mount } from '../../../dist/object-visualizer.esm'
+import { mount } from '../../utils/index'
 import {
   primitiveInObject,
   arrayInObject,

diff --git a/cypress/integration/primitive/index.spec.js b/cypress/integration/primitive/index.spec.js
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 
 import path from 'path'
-import { mount } from '../../../dist/object-visualizer.esm'
+import { mount } from '../../utils/index'
 
 const options = {
   rootName: '$',

diff --git a/cypress/plugins/index.js → cypress/plugins/index.cjs b/cypress/plugins/index.js → cypress/plugins/index.cjs
diff --git a/cypress/utils/index.js b/cypress/utils/index.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { ObjectVisualizer } from '../../dist/object-visualizer.js'
+
+export const mount = (data, el, options) => {
+  const app = createApp(ObjectVisualizer, {
+    data,
+    ...options,
+  })
+  app.mount(el)
+}
diff --git a/lib/ObjectVisualizer.vue b/lib/ObjectVisualizer.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue'
+import Wrapper from './components/Wrapper.vue'
+
+withDefaults(
+  defineProps<{
+    data: any
+    rootName?: string
+    expandOnCreatedAndUpdated?: (path: string[]) => boolean
+    getKeys?: (object: Record<string, any>, path: string[]) => string[]
+    uid?: number
+  }>(),
+  {
+    rootName: '',
+    expandOnCreatedAndUpdated: () => false,
+    getKeys: (object: Record<string, any>, path: string[]) =>
+      Object.keys(object),
+    uid: getCurrentInstance()?.uid,
+  },
+)
+</script>
+
+<template>
+  <section class="object-visualizer">
+    <Wrapper
+      :data="data"
+      :name="rootName"
+      :expand-on-created-and-updated="expandOnCreatedAndUpdated"
+      :get-keys="getKeys"
+      :object-visualizer-uid="0"
+      :path="[]"
+      :aria-level="0"
+    >
+    </Wrapper>
+  </section>
+</template>
diff --git a/lib/components/BooleanWrapper.vue b/lib/components/BooleanWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="boolean" role="treeitem" :aria-level="ariaLevel" :id="id">
+  <span class="boolean" :role="role" :aria-level="ariaLevel" :id="id">
     <span class="key">{{ name }}</span>
     <span v-if="name !== ''" class="separator">:&nbsp;</span>
     <span class="value">{{ data }}</span>
@@ -25,6 +25,10 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    role: {
+      required: true,
+      type: String,
+    },
     ariaLevel: {
       required: true,
       type: Number,

diff --git a/lib/components/NullWrapper.vue b/lib/components/NullWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="null" role="treeitem" :aria-level="ariaLevel" :id="id">
+  <span class="null" :role="role" :aria-level="ariaLevel" :id="id">
     <span class="key">{{ name }}</span>
     <span v-if="name !== ''" class="separator">:&nbsp;</span>
     <span class="value">null</span>
@@ -25,6 +25,10 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    role: {
+      required: true,
+      type: String,
+    },
     ariaLevel: {
       required: true,
       type: Number,

diff --git a/lib/components/NumberWrapper.vue b/lib/components/NumberWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="number" role="treeitem" :aria-level="ariaLevel" :id="id">
+  <span class="number" :role="role" :aria-level="ariaLevel" :id="id">
     <span class="key">{{ name }}</span>
     <span v-if="name !== ''" class="separator">:&nbsp;</span>
     <span class="value">{{ data }}</span>
@@ -25,6 +25,10 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    role: {
+      required: true,
+      type: String,
+    },
     ariaLevel: {
       required: true,
       type: Number,

diff --git a/lib/components/ObjectWrapper.vue b/lib/components/ObjectWrapper.vue
@@ -72,7 +72,7 @@ export default defineComponent({
         return (
           objectToString(path) === 'Array' &&
           (path as unknown[]).every(
-            (key) =>
+            (key: unknown) =>
               objectToString(key) === 'String' ||
               objectToString(key) === 'Number',
           )

diff --git a/lib/components/StringWrapper.vue b/lib/components/StringWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="string" role="treeitem" :aria-level="ariaLevel" :id="id">
+  <span class="string" :role="role" :aria-level="ariaLevel" :id="id">
     <span class="key">{{ name }}</span>
     <span v-if="name !== ''" class="separator">:&nbsp;</span>
     <span class="quotes">"</span>
@@ -27,6 +27,10 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    role: {
+      required: true,
+      type: String,
+    },
     ariaLevel: {
       required: true,
       type: Number,

diff --git a/lib/components/Wrapper.vue b/lib/components/Wrapper.vue
@@ -13,7 +13,8 @@
       path.length === 0 ? 'root' : path.join('-')
     }`"
     :role="role"
-    :aria-level="ariaLevel + 1"
+    :aria-level="role ? ariaLevel + 1 : void 0"
+    :class="ariaLevel === 0 ? 'object-visualizer' : void 0"
   />
 </template>
 
@@ -25,7 +26,7 @@ import StringWrapper from './StringWrapper.vue'
 import ArrayWrapper from './ArrayWrapper.vue'
 import ObjectWrapper from './ObjectWrapper.vue'
 import { objectToString } from '../util'
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 
 const TYPE_TO_COMPONENT = {
   Null: 'null-wrapper',
@@ -40,13 +41,13 @@ const Wrapper = defineComponent({
   inheritAttrs: false,
   props: {
     path: {
-      type: Array,
       required: true,
+      type: Array as PropType<string[]>,
       validator(path: unknown) {
         return (
           objectToString(path) === 'Array' &&
           (path as unknown[]).every(
-            (key) =>
+            (key: unknown) =>
               objectToString(key) === 'String' ||
               objectToString(key) === 'Number',
           )
@@ -91,24 +92,35 @@ const Wrapper = defineComponent({
       required: true,
       type: Number,
     },
-    role: {
-      default: 'group',
-      type: String,
-    },
     ariaLevel: {
       required: true,
       type: Number,
     },
   },
   setup(props) {
-    const is = computed(
-      () =>
-        TYPE_TO_COMPONENT[
-          objectToString(props.data) as keyof typeof TYPE_TO_COMPONENT
-        ],
+    const type = computed(
+      () => objectToString(props.data) as keyof typeof TYPE_TO_COMPONENT,
     )
+    const is = computed(() => TYPE_TO_COMPONENT[type.value])
+    const role = computed(() => {
+      if (props.ariaLevel === 0) {
+        if (type.value === 'Array' || type.value === 'Object') {
+          return 'tree'
+        } else {
+          return void 0
+        }
+      } else {
+        if (type.value === 'Array' || type.value === 'Object') {
+          return 'group'
+        } else {
+          return 'treeitem'
+        }
+      }
+    })
+
     return {
       is,
+      role,
       objectToString,
       TYPE_TO_COMPONENT,
     }

diff --git a/lib/config.ts b/lib/config.ts
diff --git a/lib/index.ts b/lib/index.ts
diff --git a/lib/main.ts b/lib/main.ts
@@ -0,0 +1 @@
+export { default as ObjectVisualizer } from './ObjectVisualizer.vue'
diff --git a/lib/mount.ts b/lib/mount.ts
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@types/node": "^18.7.16",
     "@vitejs/plugin-vue": "^3.1.0",
     "csso": "^5.0.5",
-    "cypress": "^10.7.0",
+    "cypress": "^9",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "npm-run-all": "^4.1.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vite.config.ts b/vite.config.ts
@@ -8,7 +8,7 @@ import { minify } from 'csso'
 export default defineConfig({
   build: {
     lib: {
-      entry: path.resolve(__dirname, 'lib/index.ts'),
+      entry: path.resolve(__dirname, 'lib/main.ts'),
       name: 'ObjectVisualizer',
       fileName: 'object-visualizer',
     },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as ObjectVisualizer } from './ObjectVisualizer.vue'