Add invariant error message for empty nodes props

Author: jchen042

src/components/VirtualisedTree.vue

@@ -44,6 +44,9 @@ import {
 } from "vue";
 import VirtualisedBaseTree from "@/components/Base/VirtualisedBaseTree.vue";
 
+import invariant from "fbjs/lib/invariant";
+import isNil from "lodash/isNil";
+
 import {
   Node,
   OnChangeCallback,
@@ -108,6 +111,11 @@ export default defineComponent({
   },
   emits: ["onScroll", "onStartReached", "onEndReached"],
   setup(props, { emit }) {
+    invariant(
+      !isNil(props.nodes),
+      `Missing required prop: "nodes". Got  ${props.nodes}, but Array<Node> is expected`
+    );
+
     const virtualisedBaseTree = ref<typeof VirtualisedBaseTree | null>(null);
     const key = ref<number>(0);
     const createNode = ref<CreateFunction | null>(null);

src/examples/simple-example/SimpleExample.vue

@@ -44,6 +44,19 @@
       </div>
     </template>
   </virtualised-tree>
+  <virtualised-tree v-if="selectedComponent === 'VirtualisedTree'">
+    <template #cell="slotProps">
+      <!-- node.parents is an array that contains all parent nodes' index -->
+      <div
+        :style="{
+          textAlign: 'left',
+          marginLeft: `${slotProps.node.parents.length * 30}px`,
+        }"
+      >
+        {{ slotProps.node.name }}
+      </div>
+    </template>
+  </virtualised-tree>
 </template>
 
 <script>

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
-// import SimpleExample from "./examples/simple-example/SimpleExample.vue";
-import DemoExample from "./examples/demo-example/DemoExample.vue";
+import SimpleExample from "./examples/simple-example/SimpleExample.vue";
+// import DemoExample from "./examples/demo-example/DemoExample.vue";
 
-// createApp(SimpleExample).mount("#app");
-createApp(DemoExample).mount("#app");
+createApp(SimpleExample).mount("#app");
+// createApp(DemoExample).mount("#app");