@nordcraft/runtime 1.0.0

package/src/components/renderComponent.ts

@@ -0,0 +1,145 @@
+import type {
+  Component,
+  ComponentData,
+  SupportedNamespaces,
+} from '@nordcraft/core/dist/component/component.types'
+import type { ToddleEnv } from '@nordcraft/core/dist/formula/formula'
+import type { Toddle } from '@nordcraft/core/dist/types'
+import deepEqual from 'fast-deep-equal'
+import { handleAction } from '../events/handleAction'
+import type { Signal } from '../signal/signal'
+import type {
+  ComponentChild,
+  ComponentContext,
+  FormulaCache,
+  LocationSignal,
+  PreviewShowSignal,
+} from '../types'
+import { BatchQueue } from '../utils/BatchQueue'
+import { createNode } from './createNode'
+
+interface RenderComponentProps {
+  component: Component
+  components: Component[]
+  dataSignal: Signal<ComponentData>
+  apis: Record<string, { fetch: Function; destroy: Function }>
+  abortSignal: AbortSignal
+  onEvent: (event: string, data: unknown) => void
+  isRootComponent: boolean
+  formulaCache: FormulaCache
+  path: string
+  children: Record<string, Array<ComponentChild>>
+  root: Document | ShadowRoot
+  providers: Record<
+    string,
+    {
+      component: Component
+      formulaDataSignals: Record<string, Signal<ComponentData>>
+      ctx: ComponentContext
+    }
+  >
+  package: string | undefined
+  parentElement: Element | ShadowRoot
+  instance: Record<string, string>
+  toddle: Toddle<LocationSignal, PreviewShowSignal>
+  namespace?: SupportedNamespaces
+  env: ToddleEnv
+}
+
+const BATCH_QUEUE = new BatchQueue()
+
+export function renderComponent({
+  component,
+  dataSignal,
+  onEvent,
+  isRootComponent,
+  path,
+  children,
+  formulaCache,
+  components,
+  apis,
+  abortSignal,
+  root,
+  providers,
+  package: packageName,
+  parentElement,
+  instance,
+  toddle,
+  namespace,
+  env,
+}: RenderComponentProps): ReadonlyArray<Element | Text> {
+  const ctx: ComponentContext = {
+    triggerEvent: onEvent,
+    component,
+    components,
+    dataSignal,
+    isRootComponent,
+    apis,
+    formulaCache,
+    children,
+    abortSignal,
+    root,
+    providers,
+    package: packageName,
+    toddle,
+    env,
+  }
+
+  const rootElem = createNode({
+    id: 'root',
+    path,
+    dataSignal,
+    ctx,
+    parentElement,
+    namespace,
+    instance,
+  })
+  BATCH_QUEUE.add(() => {
+    let prev: Record<string, any> | undefined
+    if (
+      component.onAttributeChange?.actions &&
+      component.onAttributeChange.actions.length > 0
+    ) {
+      dataSignal
+        .map((data) => data.Attributes)
+        .subscribe((props) => {
+          if (prev) {
+            component.onAttributeChange?.actions.forEach((action) => {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              handleAction(
+                action,
+                dataSignal.get(),
+                ctx,
+                new CustomEvent('attribute-change', {
+                  detail: Object.entries(props).reduce(
+                    (
+                      changes: Record<string, { current: any; new: any }>,
+                      [key, value],
+                    ) => {
+                      if (
+                        deepEqual(value, prev![key]) === false &&
+                        component.attributes[key]?.name
+                      ) {
+                        changes[component.attributes[key]?.name] = {
+                          current: prev![key],
+                          new: value,
+                        }
+                      }
+                      return changes
+                    },
+                    {},
+                  ),
+                }),
+              )
+            })
+          }
+          prev = props
+        })
+    }
+    component.onLoad?.actions.forEach((action) => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      handleAction(action, dataSignal.get(), ctx)
+    })
+  })
+  return rootElem
+}

package/src/context/isContextProvider.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+import type { Component } from '@nordcraft/core/dist/component/component.types'
+
+export const isContextProvider = (component: Component) =>
+  (component.formulas &&
+    Object.values(component.formulas).some(
+      ({ exposeInContext }) => exposeInContext,
+    )) ||
+  (component.workflows &&
+    Object.values(component.workflows).some(
+      ({ exposeInContext }) => exposeInContext,
+    ))

package/src/context/subscribeToContext.ts

@@ -0,0 +1,135 @@
+import type {
+  Component,
+  ComponentData,
+} from '@nordcraft/core/dist/component/component.types'
+import type { FormulaContext } from '@nordcraft/core/dist/formula/formula'
+import { applyFormula } from '@nordcraft/core/dist/formula/formula'
+import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+import type { Signal } from '../signal/signal'
+import type { ComponentContext } from '../types'
+
+export function subscribeToContext(
+  componentDataSignal: Signal<ComponentData>,
+  component: Component,
+  ctx: ComponentContext,
+) {
+  Object.entries(component.contexts ?? {}).forEach(
+    ([providerName, context]) => {
+      const provider =
+        ctx.providers[[ctx.package, providerName].filter(isDefined).join('/')]
+
+      if (provider) {
+        context.formulas.forEach((formulaName) => {
+          const formulaDataSignal = provider.formulaDataSignals[formulaName]
+          if (!formulaDataSignal) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Provider ${providerName} does not expose a formula named "${formulaName}". Available formulas are: ["${Object.keys(
+                provider.formulaDataSignals,
+              ).join('", "')}"]`,
+            )
+            return
+          }
+
+          formulaDataSignal.subscribe((value) => {
+            componentDataSignal.update((data) => ({
+              ...data,
+              Contexts: {
+                ...data.Contexts,
+                [providerName]: {
+                  ...data.Contexts?.[providerName],
+                  [formulaName]: value,
+                },
+              },
+            }))
+          })
+        })
+      }
+
+      // In preview and absence of a real provider, we fake providers with their testData values. This is useful for testing components in isolation.
+      // This is for preview mode only, and should preferably be stripped from the page and custom-elements runtime.
+      else if (
+        !provider &&
+        ctx.env.runtime === 'preview' &&
+        ctx.toddle._preview
+      ) {
+        const testProvider = ctx.components?.find(
+          (comp) =>
+            comp.name ===
+            [ctx.package, providerName].filter(isDefined).join('/'),
+        )
+
+        if (!testProvider) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Could not find provider "${providerName}". No such component exist.`,
+          )
+          return
+        }
+
+        // Derive the package name from the provider name as we do not have a real component to work with
+        const [, testProviderPackage] = providerName.split('/').reverse()
+        const formulaContext: FormulaContext = {
+          data: {
+            Attributes: mapObject(testProvider.attributes, ([name, attr]) => [
+              name,
+              attr.testValue,
+            ]),
+          },
+          component: testProvider,
+          root: ctx?.root,
+          formulaCache: {},
+          package: testProviderPackage ?? ctx?.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+        }
+
+        if (testProvider.route) {
+          formulaContext.data['URL parameters'] = {
+            ...Object.fromEntries(
+              testProvider.route.path
+                .filter((p) => p.type === 'param')
+                .map((p) => [p.name, p.testValue]),
+            ),
+            ...mapObject(testProvider.route.query, ([name, { testValue }]) => [
+              name,
+              testValue,
+            ]),
+          }
+        }
+        formulaContext.data.Variables = mapObject(
+          testProvider.variables,
+          ([name, variable]) => [
+            name,
+            applyFormula(variable.initialValue, formulaContext),
+          ],
+        )
+
+        componentDataSignal.update((data) => ({
+          ...data,
+          Contexts: {
+            ...data.Contexts,
+            [providerName]: Object.fromEntries(
+              context.formulas.map((formulaName) => {
+                const formula = testProvider.formulas?.[formulaName]
+                if (!formula) {
+                  // eslint-disable-next-line no-console
+                  console.warn(
+                    `Could not find formula "${formulaName}" in component "${providerName}"`,
+                  )
+                  return [formulaName, null]
+                }
+
+                return [
+                  formulaName,
+                  applyFormula(formula.formula, formulaContext),
+                ]
+              }),
+            ),
+          },
+        }))
+      }
+    },
+  )
+}

package/src/custom-components/components.ts

@@ -0,0 +1 @@
+import './toddle-portal'

package/src/custom-components/toddle-portal.ts

@@ -0,0 +1,19 @@
+class Portal extends HTMLElement {
+  root: HTMLElement
+  constructor() {
+    // Always call super first in constructor
+    super()
+    this.root = document.createElement('div')
+  }
+
+  connectedCallback() {
+    for (const child of Array.from(this.children)) {
+      this.root.appendChild(child)
+    }
+    document.body.appendChild(this.root)
+  }
+  disconnectedCallback() {
+    this.root?.remove()
+  }
+}
+customElements.define('toddle-portal', Portal)

package/src/custom-element/ToddleComponent.ts

@@ -0,0 +1,315 @@
+import { isLegacyApi, sortApiObjects } from '@nordcraft/core/dist/api/api'
+import type {
+  Component,
+  ComponentData,
+} from '@nordcraft/core/dist/component/component.types'
+import type { ToddleEnv } from '@nordcraft/core/dist/formula/formula'
+import { applyFormula } from '@nordcraft/core/dist/formula/formula'
+import { createStylesheet } from '@nordcraft/core/dist/styling/style.css'
+import type { Theme } from '@nordcraft/core/dist/styling/theme'
+import { theme as defaultTheme } from '@nordcraft/core/dist/styling/theme.const'
+import type { RequireFields, Toddle } from '@nordcraft/core/dist/types'
+import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { createLegacyAPI } from '../api/createAPI'
+import { createAPI } from '../api/createAPIv2'
+import { renderComponent } from '../components/renderComponent'
+import { isContextProvider } from '../context/isContextProvider'
+import type { Signal } from '../signal/signal'
+import { signal } from '../signal/signal'
+import type { ComponentContext, ContextApi, LocationSignal } from '../types'
+
+/**
+ * Base class for all toddle components
+ */
+export class ToddleComponent extends HTMLElement {
+  /**
+   * Public reference to the toddle instance for debugging purposes. `el.toddle.errors` can be used to check for non-verbose errors.
+   */
+  toddle: Toddle<LocationSignal, never>
+  #component: Component
+  #ctx: ComponentContext
+  #shadowRoot: ShadowRoot
+  #signal: Signal<ComponentData>
+  #files: { themes: Theme[] }
+
+  constructor(
+    component: Component,
+    options: { components: Component[]; themes: Theme[] },
+    toddle: Toddle<LocationSignal, never>,
+  ) {
+    super()
+    this.toddle = toddle
+    const internals = this.attachInternals()
+    if (internals.shadowRoot) {
+      // Not used yet, but can be used to hydrate rather than render the shadow dom
+      this.#shadowRoot = internals.shadowRoot
+    } else {
+      this.#shadowRoot = this.attachShadow({ mode: 'open' })
+    }
+
+    const env: ToddleEnv = {
+      branchName: toddle.branch || 'main',
+      isServer: false,
+      request: undefined,
+      runtime: 'custom-element',
+      logErrors: true,
+    }
+
+    this.#component = component
+    this.#signal = createSignal({
+      component,
+      root: this.#shadowRoot,
+      toddle,
+      env,
+    })
+    this.#files = {
+      themes: options.themes,
+    }
+
+    // Call the abort signal if the component's datasignal is destroyed (component unmounted) to cancel any pending requests
+    const abortController = new AbortController()
+    this.#signal.subscribe(() => {}, {
+      destroy: () =>
+        abortController.abort(`Component ${component.name} unmounted`),
+    })
+
+    this.#ctx = {
+      triggerEvent: this.dispatch.bind(this),
+      root: this.#shadowRoot,
+      isRootComponent: true,
+      components: options.components,
+      component: this.#component,
+      dataSignal: this.#signal,
+      formulaCache: {},
+      apis: {},
+      abortSignal: abortController.signal,
+      children: {},
+      providers: {},
+      package: undefined,
+      toddle,
+      env,
+    }
+  }
+
+  connectedCallback() {
+    sortApiObjects(Object.entries(this.#component.apis)).forEach(
+      ([name, api]) => {
+        if (isLegacyApi(api)) {
+          this.#ctx.apis[name] = createLegacyAPI(api, this.#ctx)
+        } else {
+          this.#ctx.apis[name] = createAPI(api, this.#ctx)
+        }
+      },
+    )
+    Object.values(this.#ctx.apis)
+      .filter(
+        (api): api is RequireFields<ContextApi, 'triggerActions'> =>
+          api.triggerActions !== undefined,
+      )
+      .forEach((api) => {
+        api.triggerActions()
+      })
+
+    let providers = this.#ctx.providers
+    if (isContextProvider(this.#component)) {
+      // Subscribe to exposed formulas and update the component's data signal
+      const formulaDataSignals = Object.fromEntries(
+        Object.entries(this.#component.formulas ?? {})
+          .filter(([, formula]) => formula.exposeInContext)
+          .map(([name, formula]) => [
+            name,
+            this.#signal.map((data) =>
+              applyFormula(formula.formula, {
+                data,
+                component: this.#component,
+                formulaCache: this.#ctx.formulaCache,
+                root: this.#ctx.root,
+                package: this.#ctx.package,
+                toddle: this.#ctx.toddle,
+                env: this.#ctx.env,
+              }),
+            ),
+          ]),
+      )
+
+      providers = {
+        ...providers,
+        [this.#component.name]: {
+          component: this.#component,
+          formulaDataSignals,
+          ctx: this.#ctx,
+        },
+      }
+    }
+
+    this.#ctx.providers = providers
+    this.render()
+  }
+
+  disconnectedCallback() {
+    this.#signal.destroy()
+  }
+
+  dispatch(eventName: string, data: any) {
+    this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail: data,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  render() {
+    const elements = renderComponent({
+      ...this.#ctx,
+      path: '0',
+      onEvent: this.dispatch.bind(this),
+      parentElement: this.#shadowRoot,
+      instance: { [this.#component.name]: 'root' },
+    })
+
+    this.#shadowRoot.innerHTML = ''
+    const styles = createStylesheet(
+      this.#ctx.component,
+      this.#ctx.components,
+      this.#files.themes ? Object.values(this.#files.themes)[0] : defaultTheme,
+      { includeResetStyle: true, createFontFaces: false },
+    )
+    const stylesElem = document.createElement('style')
+    stylesElem.appendChild(document.createTextNode(styles))
+    this.#shadowRoot.appendChild(stylesElem)
+    const rootElement = elements[0] as Element | null
+    if (rootElement) {
+      this.#shadowRoot.appendChild(rootElement)
+    }
+  }
+
+  // Overload the setAttribute method to allow setting complex attributes
+  setAttribute(name: string, value: unknown) {
+    switch (typeof value) {
+      case 'number':
+        super.setAttribute(name, String(value))
+        break
+      case 'string':
+        super.setAttribute(name, value)
+        // Return early, as signal is updated through attributeChangedCallback on string values
+        return this
+      default:
+        super.setAttribute(name, `[Object ${typeof value}]`)
+        break
+    }
+
+    // Update the signal with complex value
+    this.#signal.set({
+      ...this.#signal.get(),
+      Attributes: {
+        ...this.#signal.get().Attributes,
+        [name]: value,
+      },
+    })
+
+    return this
+  }
+
+  // Overload the getAttribute method to point to source of truth (the signal)
+  getAttribute<T>(name: string) {
+    return (
+      (this.#signal.get().Attributes[name] as T) || super.getAttribute(name)
+    )
+  }
+
+  attributeChangedCallback(name: string, oldValue: never, newValue: string) {
+    const attributeName = this.getAttributeCaseInsensitive(name)
+    const currentRawValue = this.getAttribute(attributeName)
+    // Is this is a complex value that has already been set by `setAttribute`
+    if (newValue === '[Object object]') {
+      return
+    }
+
+    //Has this just been set by `setAttribute` as a number
+    if (parseFloat(newValue) === currentRawValue) {
+      return
+    }
+
+    this.#signal.set({
+      ...this.#signal.get(),
+      Attributes: {
+        ...this.#signal.get().Attributes,
+        [attributeName]: newValue,
+      },
+    })
+  }
+
+  private getAttributeCaseInsensitive(name: string) {
+    const attributeName = Object.keys(this.#signal.get().Attributes).find(
+      (key) => key.toLowerCase() === name.toLowerCase(),
+    )
+
+    // This should never happen (TM) as we only observe attributes that are defined on the component
+    if (!attributeName) {
+      throw new Error(
+        `Unable to find attribute ${name} on component ${this.#component.name}`,
+      )
+    }
+
+    return attributeName
+  }
+
+  // Debugging purposes
+  get __component() {
+    return this.#component
+  }
+
+  get __ctx() {
+    return this.#ctx
+  }
+
+  get __signal() {
+    return this.#signal
+  }
+}
+
+export const createSignal = ({
+  component,
+  root,
+  toddle,
+  env,
+}: {
+  component: Component
+  root: ShadowRoot
+  toddle: Toddle<LocationSignal, never>
+  env: ToddleEnv
+}) => {
+  return signal<ComponentData>({
+    // Pages are not supported as custom elements, so no need to add location signal
+    Location: undefined,
+    Variables: mapObject(component.variables, ([name, { initialValue }]) => {
+      if (!component) {
+        throw new Error(`Component not found`)
+      }
+      return [
+        name,
+        applyFormula(initialValue, {
+          data: {
+            Attributes: {},
+          },
+          component: component,
+          root,
+          package: undefined,
+          toddle,
+          env,
+        }),
+      ]
+    }),
+    Attributes: mapObject(component.attributes, ([name]) => [
+      name,
+      // TODO: Perhaps we can get it from the DOM already and set initial attributes already?
+      undefined,
+    ]),
+    Apis: mapObject(component.apis, ([name]) => [
+      name,
+      { data: null, isLoading: false, error: null },
+    ]),
+  })
+}

package/src/custom-element/defineComponents.ts

@@ -0,0 +1,65 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types'
+import type { Theme } from '@nordcraft/core/dist/styling/theme'
+import type { Toddle } from '@nordcraft/core/dist/types'
+import { safeCustomElementName } from '@nordcraft/core/dist/utils/customElements'
+import type { LocationSignal } from '../types'
+import { ToddleComponent } from './ToddleComponent'
+
+/**
+ * Define each component as a new web component
+ *
+ * Use them like: `<toddle-test my-attr="test" style="--my-color: rebeccapurple"></toddle-test>`
+ *
+ * You can access the component and `addEventListener` to it like:
+ *
+ * ```js
+ * const component = document.querySelector('toddle-test')
+ * component.addEventListener('my-event', (e) => {
+ *  console.log(e.detail)
+ * })
+ * ```
+ *
+ * @param componentNames - The names of the components to define. These should be the names of the components in the app context
+ * @param options - A subset of the app context. This holds a list of all the components needed to define the components in `componentNames`
+ * @param toddle - Also available at `window.toddle`. However, multiple instances of toddle can exist on the same page, so we pass a reference here. We should ultimately remove the global scope reference as polite web components should be self-contained.
+ */
+export const defineComponents = (
+  componentNames: string[],
+  options: {
+    components: Component[]
+    themes: Theme[]
+  },
+  toddle: Toddle<LocationSignal, never>,
+) => {
+  componentNames
+    .map<Component>(
+      (name) =>
+        options.components.find(
+          (component) => component.name === name,
+        ) as Component,
+    )
+    .forEach((component) => {
+      const tag = safeCustomElementName(component.name)
+      if (customElements.get(tag)) {
+        // eslint-disable-next-line no-console
+        console.warn(`Component ${tag} already defined`)
+        return
+      }
+
+      customElements.define(
+        tag,
+        class extends ToddleComponent {
+          constructor() {
+            super(component, options, toddle)
+          }
+
+          // When read from DOM, all attributes are lower case, so we must observe them as such
+          static get observedAttributes() {
+            return Object.keys(component.attributes ?? {}).map((key) =>
+              key.toLowerCase(),
+            )
+          }
+        },
+      )
+    })
+}