@teleporthq/teleport-shared 0.43.75 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teleporthq/teleport-shared",
-  "version": "0.43.75",
+  "version": "0.44.0",
   "description": "A utility belt for the entire teleportHQ ecosystem",
   "author": "teleportHQ",
   "license": "MIT",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-types": "^0.43.75",
+    "@teleporthq/teleport-types": "^0.44.0",
     "jss": "^10.0.0",
     "jss-preset-default": "^10.0.0"
   },
-  "gitHead": "4bc0af8166575b4af971f39e63228ce2eefce661"
+  "gitHead": "3f8ab44ace8163b154799b7ea68ece45b3cf9022"
 }

package/src/index.ts

@@ -31,6 +31,7 @@ import * as RichTextContent from './utils/rich-text-content'
 import * as RichTextContentCodegen from './utils/rich-text-content-codegen'
 import * as DataCache from './cache'
 import * as PageRevalidate from './page-revalidate'
+import * as PageArrival from './page-arrival'
 import * as ScrollSceneRuntime from './scroll-scene'
 import * as MotionRuntime from './motion-runtime'
 import * as PageTransition from './page-transition'
@@ -72,6 +73,7 @@ export {
   RichTextContentCodegen,
   DataCache,
   PageRevalidate,
+  PageArrival,
   ScrollSceneRuntime,
   MotionRuntime,
   PageTransition,

package/src/page-arrival/constants.ts

@@ -0,0 +1,15 @@
+/**
+ * Where the generated page-arrival wrapper lives and what pages import it as.
+ *
+ * Lives in `teleport-shared` because two page plugins in two packages ask for
+ * it — the workflows plugin (page-load and element-visible triggers) and the
+ * state data-source plugin (state seeded from a data source) — and they must
+ * emit the same file under the same name.
+ */
+
+/** Folder of the emitted runtime, relative to the generated project root. */
+export const PAGE_ARRIVAL_DIR = ['utils']
+export const PAGE_ARRIVAL_FILE_NAME = 'page-arrival'
+
+/** The default export of the runtime, as the page module imports it. */
+export const PAGE_ARRIVAL_WRAPPER = 'remountOnPageArrival'

package/src/page-arrival/index.ts

@@ -0,0 +1,3 @@
+export * from './constants'
+export * from './runtime'
+export * from './page-export'

package/src/page-arrival/page-export.ts

@@ -0,0 +1,58 @@
+import * as types from '@babel/types'
+import { ComponentStructure, FileType } from '@teleporthq/teleport-types'
+import { generatePageToRootPrefix } from '../utils/generic'
+import { PAGE_ARRIVAL_DIR, PAGE_ARRIVAL_FILE_NAME, PAGE_ARRIVAL_WRAPPER } from './constants'
+import { generatePageArrivalRuntime } from './runtime'
+
+/** The chunk the React base-component plugin emits `export default <Page>` into. */
+const EXPORT_CHUNK_NAME = 'export'
+
+const isPageArrivalWrapper = (expression: types.Node): boolean =>
+  expression.type === 'CallExpression' &&
+  expression.callee.type === 'Identifier' &&
+  expression.callee.name === PAGE_ARRIVAL_WRAPPER
+
+/**
+ * Makes the page start fresh on every arrival — see `generatePageArrivalRuntime`
+ * for why Next.js does not do it on its own.
+ *
+ * Rewrites `export default Page` into `export default remountOnPageArrival(Page)`,
+ * imports the wrapper and emits it once per project. Several plugins may ask for
+ * the same page, so a page that is already wrapped is left alone. Nothing is
+ * changed when the page has no plain default export to wrap, or when the
+ * generation has nowhere to emit the runtime — an import of a file that is never
+ * written would break the build.
+ */
+export const remountPageOnArrival = (structure: ComponentStructure): void => {
+  const { chunks, dependencies, options, uidl } = structure
+  const exportChunk = chunks.find((chunk) => chunk.name === EXPORT_CHUNK_NAME)
+  const exportDeclaration = exportChunk?.content as types.Node | undefined
+
+  if (
+    !options.extractedResources ||
+    !exportDeclaration ||
+    exportDeclaration.type !== 'ExportDefaultDeclaration' ||
+    isPageArrivalWrapper(exportDeclaration.declaration) ||
+    exportDeclaration.declaration.type !== 'Identifier'
+  ) {
+    return
+  }
+
+  exportDeclaration.declaration = types.callExpression(types.identifier(PAGE_ARRIVAL_WRAPPER), [
+    exportDeclaration.declaration,
+  ])
+
+  const runtimePath = [...PAGE_ARRIVAL_DIR, PAGE_ARRIVAL_FILE_NAME].join('/')
+  const rootPrefix = generatePageToRootPrefix({
+    folderPath: uidl.outputOptions?.folderPath,
+    pagesPath: options.pagesPath,
+  })
+  dependencies[PAGE_ARRIVAL_WRAPPER] = { type: 'local', path: `${rootPrefix}${runtimePath}` }
+
+  options.extractedResources[runtimePath] = {
+    fileName: PAGE_ARRIVAL_FILE_NAME,
+    fileType: FileType.JS,
+    path: [...PAGE_ARRIVAL_DIR],
+    content: generatePageArrivalRuntime(),
+  }
+}

package/src/page-arrival/runtime.ts

@@ -0,0 +1,75 @@
+import { PAGE_ARRIVAL_WRAPPER } from './constants'
+
+/**
+ * `utils/page-arrival.js` — the wrapper a page's default export goes through
+ * when the page computes something on arrival.
+ *
+ * Next.js keeps a page mounted when a navigation lands on the page that is
+ * already on screen: a link to the current URL, another record of the same
+ * dynamic route, another query string, another language. The page receives
+ * the new props but keeps every `useState` seeded on its first arrival, and no
+ * mount effect runs again — so page-load and element-visible workflows stay
+ * silent and data-source states keep their old rows until a full reload.
+ *
+ * The wrapper gives the page a new key for each such arrival, which starts it
+ * exactly like a full load does. Only a navigation that STARTED while the page
+ * was mounted and ENDED on its own route counts: one that ends elsewhere
+ * unmounts the page anyway, and React 17 runs that unmount's effect cleanup
+ * after the router has already announced the completed navigation. Shallow
+ * navigations (state mirrored into the URL) and hash changes keep the page as
+ * it is — they are not arrivals.
+ */
+export const generatePageArrivalRuntime =
+  (): string => `import React, { useEffect, useState } from 'react'
+import Router from 'next/router'
+
+function isShallow(options) {
+  return !!(options && options.shallow)
+}
+
+function usePageArrivals() {
+  const [arrivals, setArrivals] = useState(0)
+
+  useEffect(() => {
+    const route = Router.pathname
+    let arriving = false
+
+    function handleStart(url, options) {
+      arriving = !isShallow(options)
+    }
+
+    function handleComplete(url, options) {
+      const arrived = arriving && !isShallow(options) && Router.pathname === route
+      arriving = false
+      if (arrived) {
+        setArrivals(function (count) {
+          return count + 1
+        })
+      }
+    }
+
+    function handleError() {
+      arriving = false
+    }
+
+    Router.events.on('routeChangeStart', handleStart)
+    Router.events.on('routeChangeComplete', handleComplete)
+    Router.events.on('routeChangeError', handleError)
+    return function () {
+      Router.events.off('routeChangeStart', handleStart)
+      Router.events.off('routeChangeComplete', handleComplete)
+      Router.events.off('routeChangeError', handleError)
+    }
+  }, [])
+
+  return arrivals
+}
+
+export default function ${PAGE_ARRIVAL_WRAPPER}(Page) {
+  function PageArrival(props) {
+    return <Page key={usePageArrivals()} {...props} />
+  }
+  PageArrival.displayName = 'PageArrival(' + (Page.displayName || Page.name || 'Page') + ')'
+  return PageArrival
+}
+`

package/src/utils/table-access.ts

@@ -91,6 +91,19 @@ export const CUSTOMER_RECORD_TABLES: ReadonlyArray<string> = [
   'teleport_ai_chat_documents',
   'teleport_ai_chat_conversations',
   'teleport_ai_chat_messages',
+  // A booking carries the customer's name, email and phone and the key of
+  // their booking link; the capacity counters decide who gets the last place;
+  // the business's settings row carries the address its notices go to. The
+  // booking pages read them only in server segments (public columns only),
+  // the admin with its session.
+  'teleport_bookings',
+  'teleport_booking_units',
+  'teleport_booking_settings',
+  // A calendar link holds the other platform's private calendar address and
+  // the key of this site's own feed; its blocks are that platform's bookings.
+  // Only the sync's server segments and the feed route read them.
+  'teleport_booking_calendars',
+  'teleport_booking_calendar_blocks',
 ]
 
 export const PROTECTED_TABLES: ReadonlyArray<string> = [...MONEY_TABLES, ...CUSTOMER_RECORD_TABLES]
@@ -183,30 +196,55 @@ const ADMIN_FOLDER_NAME = 'admin-panel'
 const ADMIN_ROUTE_PREFIX = '/admin'
 
 /**
- * The roles allowed to read a protected table from a browser: whoever may open
- * the generated admin panel, read off the protection the UIDL records for its
- * folder and pages. A project without an admin panel has no page that binds a
- * money table, so the empty list (server-side callers only) is the right answer.
+ * The roles that may open the generated admin panel as a whole: the roles its
+ * FOLDER admits, which the middleware and the workflow-route guard union into
+ * every page under it. A page's own roles never count — an admin page that also
+ * admits another role (a staff screen) must not hand that role the rest of the
+ * panel.
+ *
+ * A folder that records no roles (an older project, or one an owner edited)
+ * falls back to the roles EVERY protected admin page admits. Sorted; empty
+ * without an admin panel.
  */
-export const resolveTrustedReaderRoles = (auth?: UIDLAuthentication | null): string[] => {
-  const roles = new Set<string>()
+export const resolveAdminPanelRoles = (auth?: UIDLAuthentication | null): string[] => {
   if (!auth) {
     return []
   }
+  const folderRoles = new Set<string>()
   Object.values(auth.folderProtection || {}).forEach((folder) => {
     if (folder && folder.folderName === ADMIN_FOLDER_NAME) {
-      ;(folder.allowedRoles || []).forEach((role) => roles.add(role))
+      ;(folder.allowedRoles || []).forEach((role) => folderRoles.add(role))
     }
   })
-  Object.values(auth.pageProtection || {}).forEach((page) => {
+  if (folderRoles.size > 0) {
+    return Array.from(folderRoles).sort()
+  }
+
+  let everyPageAdmits: string[] | null = null
+  for (const page of Object.values(auth.pageProtection || {})) {
     const route = page && typeof page.route === 'string' ? page.route : ''
-    if (route === ADMIN_ROUTE_PREFIX || route.startsWith(`${ADMIN_ROUTE_PREFIX}/`)) {
-      ;(page.allowedRoles || []).forEach((role) => roles.add(role))
+    if (route !== ADMIN_ROUTE_PREFIX && !route.startsWith(`${ADMIN_ROUTE_PREFIX}/`)) {
+      continue
     }
-  })
-  return Array.from(roles).sort()
+    const pageRoles = page.allowedRoles || []
+    everyPageAdmits =
+      everyPageAdmits === null
+        ? Array.from(new Set(pageRoles))
+        : everyPageAdmits.filter((role) => pageRoles.indexOf(role) !== -1)
+  }
+  return (everyPageAdmits || []).sort()
 }
 
+/**
+ * The roles allowed to read a protected table from a browser: the admin
+ * panel's (`resolveAdminPanelRoles`) — so a role that opens only some admin
+ * pages reads no account, email or order. A project without an admin panel
+ * has no page that binds a money table, so the empty list (server-side
+ * callers only) is the right answer.
+ */
+export const resolveTrustedReaderRoles = (auth?: UIDLAuthentication | null): string[] =>
+  resolveAdminPanelRoles(auth)
+
 /**
  * ES5 source of the guard, inlined into a generated route. Declares:
  *  - `__taIsInternalRequest(req)` — the caller presented the app secret, or