feat: new React hook useData() enabling using Telefunc for SSR data…

… fetching

examples/vite-plugin-ssr/package.json

@@ -14,7 +14,7 @@
     "express": "^4.17.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-streaming": "^0.3.1",
+    "react-streaming": "^0.3.2",
     "telefunc": "0.1.25",
     "typescript": "^4.7.4",
     "vite": "^3.0.9",

examples/vite-plugin-ssr/pages/index/TodoList.tsx

@@ -1,14 +1,11 @@
+export { TodoList }
+
 import React, { useState } from 'react'
 import { onNewTodo, loadTodoItems } from './TodoList.telefunc.js'
-import { useAsync } from 'react-streaming'
-
-export { TodoList }
+import { useData } from 'telefunc/react'
 
 function TodoList() {
-  const todoItemsInitial = useAsync('loadTodoItems', async () => {
-    const todoItems = await loadTodoItems()
-    return todoItems
-  })
+  const todoItemsInitial = useData(loadTodoItems)
   const [todoItems, setTodoItems] = useState(todoItemsInitial)
   const [draft, setDraft] = useState('')
   return (

examples/vite-plugin-ssr/vite.config.js

@@ -3,6 +3,5 @@ import react from '@vitejs/plugin-react'
 import ssr from 'vite-plugin-ssr/plugin'
 
 export default {
-  plugins: [react(), ssr(), telefunc()],
-  ssr: { external: ['react-streaming']  }
+  plugins: [react(), ssr(), telefunc()]
 }

telefunc/client/react/index.ts

@@ -0,0 +1 @@
+export * from '../../shared/react'

telefunc/node/react/index.ts

@@ -0,0 +1 @@
+export * from '../../shared/react'

telefunc/node/server/runTelefunc/getTelefunctions.ts

@@ -1,8 +1,7 @@
 export { getTelefunctions }
 
-import { assertUsage, isCallable } from '../../utils'
+import { assertUsage, isCallable, getTelefunctionKey } from '../../utils'
 import type { Telefunction, TelefuncFiles } from '../types'
-import { getTelefunctionKey } from './getTelefunctionKey'
 import { getTelefunctionName } from './getTelefunctionName'
 
 async function getTelefunctions(runContext: { telefuncFilesLoaded: TelefuncFiles }): Promise<{
@@ -11,12 +10,14 @@ async function getTelefunctions(runContext: { telefuncFilesLoaded: TelefuncFiles
   const telefunctions: Record<string, Telefunction> = {}
   Object.entries(runContext.telefuncFilesLoaded).forEach(([telefunctionFilePath, telefuncFileExports]) => {
     Object.entries(telefuncFileExports).forEach(([telefunctionFileExport, exportValue]) => {
-      const telefunctionKey = getTelefunctionKey({ telefunctionFilePath, telefunctionFileExport })
+      const telefunctionKey = getTelefunctionKey(telefunctionFilePath, telefunctionFileExport)
       assertTelefunction(exportValue, {
         telefunctionFileExport,
         telefunctionFilePath
       })
       telefunctions[telefunctionKey] = exportValue
+      // @ts-ignore
+      // telefunctions[telefunctionKey]._key = telefunctionKey
     })
   })
 

telefunc/node/server/runTelefunc/parseHttpRequest.ts

@@ -1,8 +1,7 @@
 export { parseHttpRequest }
 
 import { parse } from '@brillout/json-s/parse'
-import { getTelefunctionKey } from './getTelefunctionKey'
-import { assertUsage, hasProp, getProjectError, getUrlPathname, assert } from '../../utils'
+import { assertUsage, hasProp, getProjectError, getUrlPathname, assert, getTelefunctionKey } from '../../utils'
 import { getTelefunctionName } from './getTelefunctionName'
 
 function parseHttpRequest(runContext: {
@@ -75,7 +74,7 @@ function parseHttpRequest(runContext: {
   const telefunctionFilePath = bodyParsed.file
   const telefunctionFileExport = bodyParsed.name
   const telefunctionArgs = bodyParsed.args
-  const telefunctionKey = getTelefunctionKey({ telefunctionFilePath, telefunctionFileExport })
+  const telefunctionKey = getTelefunctionKey(telefunctionFilePath, telefunctionFileExport)
   const telefunctionName = getTelefunctionName({ telefunctionFilePath, telefunctionFileExport })
 
   return {

telefunc/node/transformer/transformTelefuncFileSSR.ts

@@ -1,7 +1,7 @@
 export { transformTelefuncFileSSR }
 
 import { getExportNames } from './getExportNames'
-import { assertPosixPath } from '../utils'
+import { assertPosixPath, getTelefunctionKey } from './utils'
 
 async function transformTelefuncFileSSR(src: string, id: string, root: string) {
   assertPosixPath(id)
@@ -18,16 +18,25 @@ async function transformTelefuncFileSSR(src: string, id: string, root: string) {
 function getCode(exportNames: readonly string[], src: string, filePath: string) {
   assertPosixPath(filePath)
 
-  const telefuncImport = 'import { __internal_addTelefunction } from "telefunc";'
+  let code = src;
 
-  // No break line between `telefuncImport` and `src` in order to preserve the source map's line mapping
-  let code = telefuncImport + src
+  {
+    const telefuncImport = 'import { __internal_addTelefunction } from "telefunc";'
+    // No break line between `telefuncImport` and `src` in order to preserve the source map's line mapping
+    code = telefuncImport + src
+  }
+
+  const extraLines: string[] = []
 
   code += '\n\n'
   for (const exportName of exportNames) {
-    code += `__internal_addTelefunction(${exportName}, "${exportName}", "${filePath}");`
-    code += '\n'
+    extraLines.push(`__internal_addTelefunction(${exportName}, "${exportName}", "${filePath}");`)
+    const telefunctionKey = getTelefunctionKey(filePath, exportName)
+    extraLines.push(`${exportName}['_key'] = ${JSON.stringify(telefunctionKey)};`)
   }
 
+  code += '\n' + extraLines.join('\n')
+
   return code
 }
+

telefunc/node/transformer/transformTelefuncFileSync.ts

@@ -18,18 +18,27 @@ function transformTelefuncFileSync(id: string, root: string, exportNames: readon
 }
 
 export function getCode(exportNames: readonly string[], telefuncFilePath: string) {
-  const lines = []
+  const lines: string[] = []
 
   lines.push('// @ts-nocheck')
 
   lines.push(`import { __internal_fetchTelefunc } from 'telefunc/client';`)
 
   exportNames.forEach((exportName) => {
-    const exportValue = `(...args) => __internal_fetchTelefunc('${telefuncFilePath}', '${exportName}', args);`
+    const varName = exportName === 'default' ? 'defaultExport' : exportName
+
+    lines.push(`const ${varName} =  (...args) => __internal_fetchTelefunc('${telefuncFilePath}', '${exportName}', args);`)
+
+    {
+      assert(!telefuncFilePath.includes(':'))
+      const key = `${telefuncFilePath}:${exportName}`
+      lines.push(`${varName}._key = ${JSON.stringify(key)};`)
+    }
+
     if (exportName === 'default') {
-      lines.push(`export default ${exportValue}`)
+      lines.push(`export default ${varName};`)
     } else {
-      lines.push(`export const ${exportName} = ${exportValue};`)
+      lines.push(`export { ${varName} };`)
     }
   })
 

telefunc/node/transformer/utils.ts

@@ -0,0 +1,2 @@
+// TODO
+export * from '../../node/utils'

telefunc/node/utils.ts

@@ -5,7 +5,7 @@ export * from '../utils/isPromise'
 export * from '../utils/moduleExists'
 export * from '../utils/cast'
 export * from '../utils/filesystemPathHandling'
-export * from '../utils./../utils/unique'
+export * from '../utils/unique'
 export * from '../utils/nodeRequire'
 export * from '../utils/getUrlPathname'
 export * from '../utils/getGlobalObject'
@@ -16,3 +16,4 @@ export * from '../utils/projectInfo'
 export * from '../utils/objectAssign'
 export * from '../utils/lowercaseFirstLetter'
 export * from '../utils/dynamicImport'
+export * from '../utils/getTelefunctionKey'

telefunc/node/vite/transform.ts

@@ -1,5 +1,6 @@
 import { Plugin } from 'vite'
 import { transformTelefuncFile } from '../transformer/transformTelefuncFile'
+import { transformTelefuncFileSSR } from '../transformer/transformTelefuncFileSSR'
 import { generateShield } from '../server/shield/codegen/transformer'
 import { assert, toPosixPath, viteIsSSR_options } from './utils'
 
@@ -21,6 +22,7 @@ function transform(): Plugin {
       if (!viteIsSSR_options(options)) {
         return transformTelefuncFile(code, id, root)
       } else {
+        code = (await transformTelefuncFileSSR(code, id, root)).code
         if (id.endsWith('.ts')) {
           return generateShield(code)
         }

telefunc/package.json

@@ -64,6 +64,8 @@
     "typescript": "^4.7.4",
     "vite": "^3.0.9"
   },
+  "peerDependencies": { "react-streaming": "^0.3.2"  },
+  "peerDependenciesMeta": { "react-streaming": { "optional": true } },
   "files": [
     "dist/cjs/",
     "dist/esm/",

telefunc/react.ts

@@ -0,0 +1,3 @@
+// Help TS's resolver until it supports `package.json#exports`
+export * from './dist/esm/client/react'
+export { default } from './dist/esm/client/react'

telefunc/shared/react/index.ts

@@ -0,0 +1 @@
+export { useData } from './useData'

telefunc/shared/react/useData.ts

@@ -0,0 +1,17 @@
+export { useData }
+
+import { useAsync } from 'react-streaming'
+import { assert } from './utils'
+
+function useData<Telefunction extends (...args: any[]) => any>(
+  telefunction: Telefunction,
+  ...args: Parameters<Telefunction>
+): Awaited<ReturnType<Telefunction>> {
+  // @ts-ignore
+  const telefunctionKey = telefunction._key as string
+  assert(telefunctionKey)
+  const asyncFn: () => ReturnType<Telefunction> = () => telefunction(...args)
+  const key = [telefunctionKey, ...args]
+  const result = useAsync(key, asyncFn)
+  return result
+}

telefunc/shared/react/utils.ts

@@ -0,0 +1 @@
+export * from '../../utils/assert'

telefunc/utils/getTelefunctionKey.ts

@@ -0,0 +1,7 @@
+import { assert } from './assert'
+
+export function getTelefunctionKey(filePath: string, exportName: string) {
+  assert(!filePath.includes(':')) // This assert isn't actually necessary since `telefunctionKey` is never parsed
+  const telefunctionKey = filePath + ':' + exportName
+  return telefunctionKey
+}