@tanstack/svelte-table 8.0.0-alpha.73 → 8.0.0-alpha.77

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/svelte-table",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.73",
+  "version": "8.0.0-alpha.77",
   "description": "Composables for building lightweight, fast and extendable datagrids for Vue",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",
@@ -23,8 +23,8 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "module": "build/esm/index.js",
-  "main": "build/cjs/index.js",
-  "browser": "build/umd/index.production.min.js",
+  "main": "build/cjs/svelte-table/src/index.js",
+  "browser": "build/umd/index.production.js",
   "types": "build/types/index.d.ts",
   "engines": {
     "node": ">=12"
@@ -34,7 +34,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/table-core": "8.0.0-alpha.73"
+    "@tanstack/table-core": "8.0.0-alpha.76"
   },
   "peerDependencies": {
     "svelte": "^3.48.0"

package/src/index.ts

@@ -7,6 +7,7 @@ import {
   TableOptions,
 } from '@tanstack/table-core'
 import Placeholder from './placeholder.svelte'
+import { SvelteComponent } from 'svelte/internal'
 import { readable, writable, derived, Readable, get } from 'svelte/store'
 import { renderComponent } from './render-component'
 
@@ -14,17 +15,48 @@ export { renderComponent } from './render-component'
 
 export * from '@tanstack/table-core'
 
-export function render(Comp: any, props: any) {
-  if (!Comp) return null
+function isSvelteServerComponent(component: any) {
+  return (
+    typeof component === 'object' &&
+    typeof component.$$render === 'function' &&
+    typeof component.render === 'function'
+  )
+}
+
+function isSvelteClientComponent(component: any) {
+  return component.prototype instanceof SvelteComponent
+}
 
-  if (Comp instanceof Function) {
-    let res = Comp(props)
-    return res
+function isSvelteComponent(component: any) {
+  if (typeof document === 'undefined') {
+    return isSvelteServerComponent(component)
   } else {
-    return renderComponent(Placeholder, { content: Comp })
+    return isSvelteClientComponent(component)
+  }
+}
+
+function wrapInPlaceholder(content: any) {
+  return renderComponent(Placeholder, { content })
+}
+
+export function render(component: any, props: any) {
+  if (!component) return null
+
+  if (isSvelteComponent(component)) {
+    return renderComponent(component, props)
+  }
+
+  if (typeof component === 'function') {
+    const result = component(props)
+
+    if (isSvelteComponent(result)) {
+      return result
+    }
+
+    return wrapInPlaceholder(result)
   }
 
-  // return Comp
+  return wrapInPlaceholder(component)
 }
 
 export const createTable = createTableFactory({ render })