RecordDetail & NewRecord now baseComponents

packages/standard-components/src/NewRecord.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { onMount } from "svelte"
+  import { isEmpty } from "lodash/fp"
+
+  export let _bb
+  export let model
+
+  let record = {}
+
+  $: {
+    record.modelId = model
+  }
+
+  let target
+
+  onMount(async () => {
+    if (!isEmpty(record) && record.model) {
+      _bb.attachChildren(target, {
+        context: record,
+      })
+    }
+  })
+</script>
+
+<section bind:this={target} />

packages/standard-components/src/RecordDetail.svelte

@@ -8,6 +8,7 @@
   let store = _bb.store
   let target
 
+  // this function should only get called when in builder preview mode
   async function fetchFirstRecord() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
@@ -24,22 +25,22 @@
     // if srcdoc, then we assume this is the builder preview
     if (pathParts.length === 0 || pathParts[0] === "srcdoc") {
       record = await fetchFirstRecord()
-    } else {
-      const id = pathParts[pathParts.length - 1]
-      const GET_RECORD_URL = `/api/${model}/records/${id}`
+    } else if (_bb.routeParams().id) {
+      const GET_RECORD_URL = `/api/${model}/records/${_bb.routeParams().id}`
       const response = await _bb.api.get(GET_RECORD_URL)
       if (response.status === 200) {
         record = await response.json()
+      } else {
+        throw new Error("Failed to fetch record.", response)
       }
+    } else {
+      throw new Exception("Record ID was not supplied to RecordDetail")
     }
 
     if (record) {
       _bb.attachChildren(target, {
-        hydrate: false,
         context: record,
       })
-    } else {
-      throw new Error("Failed to fetch record.", response)
     }
   }
 

packages/standard-components/src/index.js

@@ -27,6 +27,7 @@ export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
 export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"
+export { default as newrecord } from "./NewRecord.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
 export * from "./Chart"
 export { default as icon } from "./Icon.svelte"