@nordcraft/ssr 1.0.0

package/src/ssr.types.ts

@@ -0,0 +1,117 @@
+import type {
+  ApiBase,
+  RedirectStatusCode,
+} from '@nordcraft/core/dist/api/apiTypes'
+import type {
+  Component,
+  RouteDeclaration,
+} from '@nordcraft/core/dist/component/component.types'
+import type { Formula } from '@nordcraft/core/dist/formula/formula'
+import type { PluginFormula } from '@nordcraft/core/dist/formula/formulaTypes'
+import type { OldTheme, Theme } from '@nordcraft/core/dist/styling/theme'
+
+export type FileGetter = (args: {
+  package?: string
+  name: string
+  type: keyof ProjectFiles
+}) => Promise<
+  Component | PluginAction | PluginFormula<string> | Route | Theme | ApiService
+>
+
+export interface ToddleProject {
+  name: string
+  description?: string | null
+  short_id: string
+  id: string
+  emoji?: string | null
+  type: 'app' | 'package'
+  thumbnail?: { path: string } | null
+}
+
+export interface ProjectFiles {
+  // Partial to make sure we check for the existence of a Component
+  components: Partial<Record<string, Component>>
+  packages?: Record<string, InstalledPackage>
+  actions?: Record<string, PluginAction>
+  formulas?: Record<string, PluginFormula<string>>
+  routes?: Record<string, Route>
+  config?: {
+    theme: OldTheme
+    meta?: {
+      icon?: { formula: Formula }
+      robots?: { formula: Formula }
+      sitemap?: { formula: Formula }
+      manifest?: { formula: Formula }
+      serviceWorker?: { formula: Formula }
+    }
+  }
+  themes?: Record<string, Theme>
+  services?: Record<string, ApiService>
+}
+
+interface BaseApiService {
+  name: string // Should we deprecate this?
+  baseUrl?: Formula
+  docsUrl?: Formula
+  apiKey?: Formula
+  meta?: Record<string, unknown>
+}
+
+interface SupabaseApiService extends BaseApiService {
+  type: 'supabase'
+  meta?: {
+    projectUrl?: Formula
+  }
+}
+
+interface XanoApiService extends BaseApiService {
+  type: 'xano'
+}
+
+interface CustomApiService extends BaseApiService {
+  type: 'custom'
+}
+
+export type ApiService = SupabaseApiService | XanoApiService | CustomApiService
+
+export type InstalledPackage = Pick<
+  ProjectFiles,
+  // we might want to add themes + config later
+  'components' | 'actions' | 'formulas'
+> & {
+  manifest: {
+    name: string
+    // commit represents the commit hash (version) of the package
+    commit: string
+  }
+}
+
+export interface PluginAction {
+  name: string
+  description?: string
+  version?: 2 | never
+  arguments: Array<{
+    name: string
+    formula: Formula
+  }>
+  variableArguments: boolean | null
+  handler: string
+  // exported indicates that an action is exported in a package
+  exported?: boolean
+}
+
+interface BaseRoute {
+  source: RouteDeclaration
+  destination: ApiBase
+}
+
+export interface RewriteRoute extends BaseRoute {
+  type: 'rewrite'
+}
+
+export interface RedirectRoute extends BaseRoute {
+  type: 'redirect'
+  status?: RedirectStatusCode
+}
+
+export type Route = RewriteRoute | RedirectRoute

package/src/utils/headers.ts

@@ -0,0 +1,23 @@
+import { PROXY_URL_HEADER } from '@nordcraft/core/dist/utils/url'
+
+/**
+ * Omit the `cookie` header from a set of headers.
+ * This is useful when proxying requests for routes/proxied API requests
+ * to ensure cookies are not forwarded.
+ */
+export const skipCookieHeader = (headers: Headers) => {
+  const newHeaders = new Headers(headers)
+  newHeaders.delete('cookie')
+  return newHeaders
+}
+
+/**
+ * Omit the x-toddle-url header from a set of headers.
+ * Since this header is only relevant for toddle requests, it's not useful
+ * for other services to receive this.
+ */
+export const skipToddleHeader = (headers: Headers) => {
+  const newHeaders = new Headers(headers)
+  newHeaders.delete(PROXY_URL_HEADER)
+  return newHeaders
+}

package/src/utils/media.test.ts

@@ -0,0 +1,130 @@
+import { describe, expect, test } from '@jest/globals'
+import { transformRelativePaths } from './media'
+
+describe('transformRelativePaths()', () => {
+  const transformer = transformRelativePaths('https://toddle.dev')
+
+  test('it transforms relative src attributes to be absolute', () => {
+    expect(
+      transformer({
+        nodes: {
+          '1': {
+            type: 'element',
+            attrs: {
+              src: {
+                type: 'value',
+                value: '/foo/img.png',
+              },
+            },
+          },
+          '2': {
+            type: 'element',
+            attrs: {
+              src: {
+                type: 'value',
+                value: 'picture.webp',
+              },
+            },
+          },
+          '3': {
+            type: 'element',
+            attrs: {
+              src: {
+                type: 'value',
+                value: './img.png',
+              },
+            },
+          },
+        },
+      } as any),
+    ).toEqual({
+      nodes: {
+        '1': {
+          type: 'element',
+          attrs: {
+            src: {
+              type: 'value',
+              value: 'https://toddle.dev/foo/img.png',
+            },
+          },
+        },
+        '2': {
+          type: 'element',
+          attrs: {
+            src: {
+              type: 'value',
+              value: 'https://toddle.dev/picture.webp',
+            },
+          },
+        },
+        '3': {
+          type: 'element',
+          attrs: {
+            src: {
+              type: 'value',
+              value: 'https://toddle.dev/img.png',
+            },
+          },
+        },
+      },
+    })
+  })
+  test('it keeps absolute urls', () => {
+    expect(
+      transformer({
+        nodes: {
+          '1': {
+            type: 'element',
+            attrs: {
+              src: {
+                type: 'value',
+                value: 'https://picsum.photos/200/300',
+              },
+            },
+          },
+        },
+      } as any),
+    ).toEqual({
+      nodes: {
+        '1': {
+          type: 'element',
+          attrs: {
+            src: {
+              type: 'value',
+              value: 'https://picsum.photos/200/300',
+            },
+          },
+        },
+      },
+    })
+  })
+  test('it does not transform non-src attributes', () => {
+    expect(
+      transformer({
+        nodes: {
+          '1': {
+            type: 'element',
+            attrs: {
+              href: {
+                type: 'value',
+                value: '/foo',
+              },
+            },
+          },
+        },
+      } as any),
+    ).toEqual({
+      nodes: {
+        '1': {
+          type: 'element',
+          attrs: {
+            href: {
+              type: 'value',
+              value: '/foo',
+            },
+          },
+        },
+      },
+    })
+  })
+})

package/src/utils/media.ts

@@ -0,0 +1,46 @@
+import type {
+  Component,
+  NodeModel,
+} from '@nordcraft/core/dist/component/component.types'
+
+export const isCloudflareImagePath = (path?: string | null): path is string =>
+  typeof path === 'string' && path.startsWith('/cdn-cgi/imagedelivery/')
+
+/**
+ * Make all relative 'src' paths in a component absolute
+ */
+export const transformRelativePaths =
+  (urlOrigin: string) => (component: Component) => ({
+    ...component,
+    nodes: Object.entries(component.nodes).reduce((acc, [key, node]) => {
+      return {
+        ...acc,
+        [key]: {
+          ...node,
+          ...(node.type === 'element'
+            ? {
+                attrs: Object.entries(node.attrs).reduce(
+                  (acc, [key, formula]) => {
+                    if (
+                      ['src'].includes(key) &&
+                      formula?.type === 'value' &&
+                      typeof formula.value === 'string'
+                    ) {
+                      return {
+                        ...acc,
+                        [key]: {
+                          ...formula,
+                          value: new URL(formula.value, urlOrigin).href,
+                        },
+                      }
+                    }
+                    return { ...acc, [key]: formula }
+                  },
+                  {},
+                ),
+              }
+            : {}),
+        } as NodeModel,
+      }
+    }, {}),
+  })

package/src/utils/nanoid.ts

@@ -0,0 +1,21 @@
+// See https://github.com/ai/nanoid/blob/main/non-secure/index.js
+
+// This alphabet uses `A-Za-z0-9_-` symbols.
+// The order of characters is optimized for better gzip and brotli compression.
+// References to the same file (works both for gzip and brotli):
+// `'use`, `andom`, and `rict'`
+// References to the brotli default dictionary:
+// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
+const urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
+
+export const nanoid = (size = 21) => {
+  let id = ''
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  let i = size | 0
+  while (i--) {
+    // `| 0` is more compact and faster than `Math.floor()`.
+    id += urlAlphabet[(Math.random() * 64) | 0]
+  }
+  return id
+}

package/src/utils/tags.ts

@@ -0,0 +1,26 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types'
+
+/**
+ * Used to replace any recursive references to the root component, as it would be rendered both by toddle runtime
+ * and by the custom element itself (which would cause an infinite loop)
+ */
+export const replaceTagInNodes =
+  (oldTag: string, newTag: string) => (component: Component) => ({
+    ...component,
+    nodes: Object.entries(component.nodes).reduce((acc, [key, node]) => {
+      if (node.type !== 'element') {
+        return {
+          ...acc,
+          [key]: node,
+        }
+      }
+
+      return {
+        ...acc,
+        [key]: {
+          ...node,
+          tag: node.tag === oldTag ? newTag : node.tag,
+        },
+      }
+    }, {}),
+  })