@makeswift/runtime 0.0.0-a500663

package/src/prop-controllers/index.ts

@@ -0,0 +1,10 @@
+export type {
+  Descriptor as PropControllerDescriptor,
+  DescriptorValueType as PropControllerDescriptorValueType,
+  Device,
+  DeviceOverride,
+  ResponsiveValue,
+  ResponsiveValueType,
+  Length,
+} from './descriptors'
+export * as Props from './descriptors'

package/src/react.ts

@@ -0,0 +1,3 @@
+export type { Action } from './state/actions'
+export { ActionTypes, changeDocument } from './state/actions'
+export { Document, Element, RuntimeProvider, ReactRuntime } from './runtimes/react'

package/src/runtimes/react.tsx

@@ -0,0 +1,223 @@
+import {
+  createContext,
+  forwardRef,
+  memo,
+  ReactNode,
+  Ref,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
+
+import * as ReactPage from '../state/react-page'
+import type * as ReactBuilderPreview from '../state/react-builder-preview'
+import {
+  changeComponentHandle,
+  mountComponentEffect,
+  registerComponentEffect,
+  registerReactComponentEffect,
+} from '../state/actions'
+import type {
+  PropControllerDescriptor,
+  PropControllerDescriptorValueType,
+} from '../prop-controllers'
+import { ComponentIcon } from '../state/modules/components-meta'
+
+const contextDefaultValue = ReactPage.configureStore()
+
+export const ReactRuntime = {
+  registerComponent<
+    P extends Record<string, PropControllerDescriptor>,
+    C extends ReactPage.ComponentType<{ [K in keyof P]?: PropControllerDescriptorValueType<P[K]> }>
+  >(
+    component: C,
+    {
+      type,
+      label,
+      icon = 'Cube40',
+      hidden = false,
+      props,
+    }: { type: string; label: string; icon?: ComponentIcon; hidden?: boolean; props?: P },
+  ): () => void {
+    const unregisterComponent = contextDefaultValue.dispatch(
+      registerComponentEffect(type, { label, icon, hidden }, props ?? {}),
+    )
+
+    const unregisterReactComponent = contextDefaultValue.dispatch(
+      registerReactComponentEffect(type, (component as unknown) as ReactPage.ComponentType),
+    )
+
+    return () => {
+      unregisterComponent()
+      unregisterReactComponent()
+    }
+  },
+}
+
+const Context = createContext(contextDefaultValue)
+
+type RuntimeProviderProps = {
+  defaultRootElements?: Map<string, ReactPage.Element>
+  children?: ReactNode
+}
+
+export function RuntimeProvider({
+  children,
+  defaultRootElements,
+}: RuntimeProviderProps): JSX.Element {
+  const [store, setStore] = useState(() =>
+    ReactPage.configureStore({
+      preloadedState: contextDefaultValue.getState(),
+      rootElements: defaultRootElements,
+    }),
+  )
+
+  useEffect(() => {
+    // TODO(miguel): perform a more robust validation.
+    const isInBuilder = window.parent !== window
+
+    if (!isInBuilder) return
+
+    const initializePromise = initializeReactBuilderPreview()
+
+    return () => {
+      initializePromise.then(cleanUp => {
+        cleanUp()
+      })
+    }
+
+    async function initializeReactBuilderPreview(): Promise<() => void> {
+      const ReactBuilderPreview = await import('../state/react-builder-preview')
+
+      const store = await new Promise<ReactBuilderPreview.Store>(resolve => {
+        setStore(store => {
+          const nextStore = ReactBuilderPreview.configureStore({ preloadedState: store.getState() })
+
+          resolve(nextStore)
+
+          return nextStore
+        })
+      })
+
+      return store.dispatch(ReactBuilderPreview.initialize())
+    }
+  }, [])
+
+  return <Context.Provider value={store}>{children}</Context.Provider>
+}
+
+type State = ReactPage.State | ReactBuilderPreview.State
+
+function useSelector<R>(selector: (state: State) => R): R {
+  const store = useContext(Context)
+
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector)
+}
+
+function useComponent(type: string): ReactPage.ComponentType | null {
+  return useSelector(state => ReactPage.getReactComponent(state, type))
+}
+
+function useDocumentRootElement(documentKey: string): ReactPage.Element | null {
+  return useSelector(state => ReactPage.getDocumentRootElement(state, documentKey))
+}
+
+type Dispatch = ReactPage.Dispatch & ReactBuilderPreview.Dispatch
+
+function useDispatch(): Dispatch {
+  const store = useContext(Context)
+
+  return store.dispatch
+}
+
+type ElementDataProps = {
+  elementData: ReactPage.ElementData
+}
+
+const ElementData = memo(
+  forwardRef(function ElementData(
+    { elementData }: ElementDataProps,
+    ref: Ref<unknown>,
+  ): JSX.Element {
+    const Component = useComponent(elementData.type)
+
+    if (Component == null) {
+      return (
+        <div ref={ref as Ref<HTMLDivElement>}>
+          <p>Component Not Found</p>
+          <pre>
+            <code>{JSON.stringify(elementData, null, 2)}</code>
+          </pre>
+        </div>
+      )
+    }
+
+    return <Component {...elementData.props} key={elementData.key} ref={ref} />
+  }),
+)
+
+type ElementRefereceProps = {
+  elementReference: ReactPage.ElementReference
+}
+
+const ElementReference = memo(
+  forwardRef(function ElementReference(
+    { elementReference }: ElementRefereceProps,
+    ref: Ref<unknown>,
+  ): JSX.Element {
+    return (
+      <div ref={ref as Ref<HTMLDivElement>}>
+        <p>Not Implemented</p>
+        <pre>
+          <code>{JSON.stringify(elementReference, null, 2)}</code>
+        </pre>
+      </div>
+    )
+  }),
+)
+
+type ElementProps = {
+  element: ReactPage.Element
+}
+
+export const Element = memo(function Element({ element }: ElementProps): JSX.Element {
+  const elementKey = element.key
+  const dispatch = useDispatch()
+  const ref = useCallback(
+    (handle: unknown): void => {
+      dispatch(changeComponentHandle(elementKey, handle))
+    },
+    [dispatch, elementKey],
+  )
+
+  useEffect(() => dispatch(mountComponentEffect(elementKey)), [dispatch, elementKey])
+
+  return ReactPage.isElementReference(element) ? (
+    <ElementReference key={elementKey} ref={ref} elementReference={element} />
+  ) : (
+    <ElementData key={elementKey} ref={ref} elementData={element} />
+  )
+})
+
+type DocumentProps = {
+  documentKey: string
+}
+
+export const Document = memo(function Document({ documentKey }: DocumentProps): JSX.Element {
+  const documentRootElement = useDocumentRootElement(documentKey)
+
+  if (documentRootElement == null) {
+    return (
+      <div>
+        <p>Document Not Found</p>
+        <pre>
+          <code>{JSON.stringify({ documentKey }, null, 2)}</code>
+        </pre>
+      </div>
+    )
+  }
+
+  return <Element element={documentRootElement} />
+})

package/src/state/actions.ts

@@ -0,0 +1,239 @@
+import type { Operation } from 'ot-json0'
+
+import type { ComponentType } from './modules/react-components'
+import type { Measurable, BoxModel } from './modules/box-models'
+import type { ThunkAction } from 'redux-thunk'
+import { ComponentMeta } from './modules/components-meta'
+import { PropControllerDescriptor } from '../prop-controllers'
+import type { Size } from './react-builder-preview'
+
+export const ActionTypes = {
+  CHANGE_DOCUMENT: 'CHANGE_DOCUMENT',
+
+  REGISTER_COMPONENT: 'REGISTER_COMPONENT',
+  UNREGISTER_COMPONENT: 'UNREGISTER_COMPONENT',
+
+  REGISTER_REACT_COMPONENT: 'REGISTER_REACT_COMPONENT',
+  UNREGISTER_REACT_COMPONENT: 'UNREGISTER_REACT_COMPONENT',
+
+  MOUNT_COMPONENT: 'MOUNT_COMPONENT',
+  UNMOUNT_COMPONENT: 'UNMOUNT_COMPONENT',
+
+  CHANGE_COMPONENT_HANDLE: 'CHANGE_COMPONENT_HANDLE',
+
+  REGISTER_MEASURABLE: 'REGISTER_MEASURABLE',
+  UNREGISTER_MEASURABLE: 'UNREGISTER_MEASURABLE',
+
+  CHANGE_ELEMENT_BOX_MODELS: 'CHANGE_ELEMENT_BOX_MODELS',
+
+  CHANGE_DOCUMENT_ELEMENT_SIZE: 'CHANGE_DOCUMENT_ELEMENT_SIZE',
+  CHANGE_DOCUMENT_ELEMENT_SCROLL_TOP: 'CHANGE_DOCUMENT_ELEMENT_SCROLL_TOP',
+} as const
+
+type ChangeDocumentAction = {
+  type: typeof ActionTypes.CHANGE_DOCUMENT
+  payload: { documentKey: string; operation: Operation }
+}
+
+type RegisterComponentAction = {
+  type: typeof ActionTypes.REGISTER_COMPONENT
+  payload: {
+    type: string
+    meta: ComponentMeta
+    propControllerDescriptors: Record<string, PropControllerDescriptor>
+  }
+}
+
+type UnregisterComponentAction = {
+  type: typeof ActionTypes.UNREGISTER_COMPONENT
+  payload: { type: string }
+}
+
+type RegisterReactComponentAction = {
+  type: typeof ActionTypes.REGISTER_REACT_COMPONENT
+  payload: { type: string; component: ComponentType }
+}
+
+type UnregisterReactComponentAction = {
+  type: typeof ActionTypes.UNREGISTER_REACT_COMPONENT
+  payload: { type: string }
+}
+
+type MountComponentAction = {
+  type: typeof ActionTypes.MOUNT_COMPONENT
+  payload: { elementKey: string }
+}
+
+type UnmountComponentAction = {
+  type: typeof ActionTypes.UNMOUNT_COMPONENT
+  payload: { elementKey: string }
+}
+
+type ChangeComponentHandleAction = {
+  type: typeof ActionTypes.CHANGE_COMPONENT_HANDLE
+  payload: { elementKey: string; componentHandle: unknown }
+}
+
+type RegisterMeasurableAction = {
+  type: typeof ActionTypes.REGISTER_MEASURABLE
+  payload: { elementKey: string; measurable: Measurable }
+}
+
+type UnregisterMeasurableAction = {
+  type: typeof ActionTypes.UNREGISTER_MEASURABLE
+  payload: { elementKey: string }
+}
+
+type ChangeElementBoxModelsAction = {
+  type: typeof ActionTypes.CHANGE_ELEMENT_BOX_MODELS
+  payload: { changedElementBoxModels: Map<string, BoxModel | null> }
+}
+
+type ChangeDocumentElementSizeAction = {
+  type: typeof ActionTypes.CHANGE_DOCUMENT_ELEMENT_SIZE
+  payload: { size: Size }
+}
+
+type ChangeDocumentElementScrollTopAction = {
+  type: typeof ActionTypes.CHANGE_DOCUMENT_ELEMENT_SCROLL_TOP
+  payload: { scrollTop: number }
+}
+
+export type Action =
+  | ChangeDocumentAction
+  | RegisterComponentAction
+  | UnregisterComponentAction
+  | RegisterReactComponentAction
+  | UnregisterReactComponentAction
+  | MountComponentAction
+  | UnmountComponentAction
+  | ChangeComponentHandleAction
+  | RegisterMeasurableAction
+  | UnregisterMeasurableAction
+  | ChangeElementBoxModelsAction
+  | ChangeDocumentElementSizeAction
+  | ChangeDocumentElementScrollTopAction
+
+export function changeDocument(documentKey: string, operation: Operation): ChangeDocumentAction {
+  return { type: ActionTypes.CHANGE_DOCUMENT, payload: { documentKey, operation } }
+}
+
+export function registerComponent(
+  type: string,
+  meta: ComponentMeta,
+  propControllerDescriptors: Record<string, PropControllerDescriptor>,
+): RegisterComponentAction {
+  return {
+    type: ActionTypes.REGISTER_COMPONENT,
+    payload: { type, meta, propControllerDescriptors },
+  }
+}
+
+export function unregisterComponent(type: string): UnregisterComponentAction {
+  return { type: ActionTypes.UNREGISTER_COMPONENT, payload: { type } }
+}
+
+export function registerComponentEffect(
+  type: string,
+  meta: ComponentMeta,
+  propControllerDescriptors: Record<string, PropControllerDescriptor>,
+): ThunkAction<() => void, unknown, unknown, Action> {
+  return dispatch => {
+    dispatch(registerComponent(type, meta, propControllerDescriptors))
+
+    return () => {
+      dispatch(unregisterComponent(type))
+    }
+  }
+}
+
+function registerReactComponent(
+  type: string,
+  component: ComponentType,
+): RegisterReactComponentAction {
+  return { type: ActionTypes.REGISTER_REACT_COMPONENT, payload: { type, component } }
+}
+
+function unregisterReactComponent(type: string): UnregisterReactComponentAction {
+  return { type: ActionTypes.UNREGISTER_REACT_COMPONENT, payload: { type } }
+}
+
+export function registerReactComponentEffect(
+  type: string,
+  component: ComponentType,
+): ThunkAction<() => void, unknown, unknown, Action> {
+  return dispatch => {
+    dispatch(registerReactComponent(type, component))
+
+    return () => {
+      dispatch(unregisterReactComponent(type))
+    }
+  }
+}
+
+export function mountComponent(elementKey: string): MountComponentAction {
+  return { type: ActionTypes.MOUNT_COMPONENT, payload: { elementKey } }
+}
+
+export function unmountComponent(elementKey: string): UnmountComponentAction {
+  return { type: ActionTypes.UNMOUNT_COMPONENT, payload: { elementKey } }
+}
+
+export function mountComponentEffect(
+  elementKey: string,
+): ThunkAction<() => void, unknown, unknown, Action> {
+  return dispatch => {
+    dispatch(mountComponent(elementKey))
+
+    return () => {
+      dispatch(unmountComponent(elementKey))
+    }
+  }
+}
+
+export function changeComponentHandle(
+  elementKey: string,
+  componentHandle: unknown,
+): ChangeComponentHandleAction {
+  return { type: ActionTypes.CHANGE_COMPONENT_HANDLE, payload: { elementKey, componentHandle } }
+}
+
+export function registerMeasurable(
+  elementKey: string,
+  measurable: Measurable,
+): RegisterMeasurableAction {
+  return { type: ActionTypes.REGISTER_MEASURABLE, payload: { elementKey, measurable } }
+}
+
+export function unregisterMeasurable(elementKey: string): UnregisterMeasurableAction {
+  return { type: ActionTypes.UNREGISTER_MEASURABLE, payload: { elementKey } }
+}
+
+export function registerMeasurableEffect(
+  elementKey: string,
+  measurable: Measurable,
+): ThunkAction<() => void, unknown, unknown, Action> {
+  return dispatch => {
+    dispatch(registerMeasurable(elementKey, measurable))
+
+    return () => {
+      dispatch(unregisterMeasurable(elementKey))
+    }
+  }
+}
+
+export function changeElementBoxModels(
+  changedElementBoxModels: Map<string, BoxModel | null>,
+): ChangeElementBoxModelsAction {
+  return { type: ActionTypes.CHANGE_ELEMENT_BOX_MODELS, payload: { changedElementBoxModels } }
+}
+
+export function changeDocumentElementSize(size: Size): ChangeDocumentElementSizeAction {
+  return { type: ActionTypes.CHANGE_DOCUMENT_ELEMENT_SIZE, payload: { size } }
+}
+
+export function changeDocumentElementScrollTop(
+  scrollTop: number,
+): ChangeDocumentElementScrollTopAction {
+  return { type: ActionTypes.CHANGE_DOCUMENT_ELEMENT_SCROLL_TOP, payload: { scrollTop } }
+}

package/src/state/modules/box-models.ts

@@ -0,0 +1,112 @@
+import {
+  BoxModel,
+  createBox as createBoxWithoutScroll,
+  CreateBoxArgs,
+  getBox as getBoxWithoutScroll,
+  withScroll,
+} from 'css-box-model'
+
+import { Action, ActionTypes } from '../actions'
+
+export type { BoxModel }
+
+export function parse(rawString: string): number {
+  const value = Number(rawString.replace(/px$/, ''))
+
+  return Number.isFinite(value) ? value : 0
+}
+
+export function createBox(boxArgs: CreateBoxArgs): BoxModel {
+  return withScroll(createBoxWithoutScroll(boxArgs))
+}
+
+export function getBox(element: Element): BoxModel {
+  return withScroll(getBoxWithoutScroll(element))
+}
+
+export interface BoxModelHandle {
+  getBoxModel(): BoxModel | null
+}
+
+export type Measurable = Element | BoxModelHandle
+
+export function isMeasurable(value: unknown): value is Measurable {
+  if (value instanceof Element) return true
+
+  if (
+    typeof value === 'object' &&
+    value !== null &&
+    'getBoxModel' in value &&
+    typeof (value as { getBoxModel: unknown }).getBoxModel === 'function'
+  ) {
+    return true
+  }
+
+  return false
+}
+
+export function measure(measurable: Measurable): BoxModel | null {
+  if (measurable instanceof Element) return getBox(measurable)
+
+  return measurable.getBoxModel()
+}
+
+export type State = {
+  measurables: Map<string, Measurable>
+  boxModels: Map<string, BoxModel>
+}
+
+export function getInitialState(): State {
+  return { measurables: new Map(), boxModels: new Map() }
+}
+
+export function getMeasurables(state: State): Map<string, Measurable> {
+  return state.measurables
+}
+
+export function getBoxModels(state: State): Map<string, BoxModel> {
+  return state.boxModels
+}
+
+export function getBoxModel(state: State, elementKey: string): BoxModel | null {
+  return getBoxModels(state).get(elementKey) ?? null
+}
+
+export function reducer(state: State = getInitialState(), action: Action) {
+  switch (action.type) {
+    case ActionTypes.REGISTER_MEASURABLE:
+      return {
+        ...state,
+        measurables: new Map(getMeasurables(state)).set(
+          action.payload.elementKey,
+          action.payload.measurable,
+        ),
+      }
+
+    case ActionTypes.UNREGISTER_MEASURABLE: {
+      const nextMeasurables = new Map(getMeasurables(state))
+
+      const deleted = nextMeasurables.delete(action.payload.elementKey)
+
+      return deleted ? { ...state, measurables: nextMeasurables } : state
+    }
+
+    case ActionTypes.CHANGE_ELEMENT_BOX_MODELS: {
+      const { changedElementBoxModels } = action.payload
+
+      if (changedElementBoxModels.size === 0) return state
+
+      const nextBoxModels = new Map(getBoxModels(state))
+
+      changedElementBoxModels.forEach((boxModel, elementKey) => {
+        if (boxModel == null) nextBoxModels.delete(elementKey)
+        else nextBoxModels.set(elementKey, boxModel)
+      })
+
+      return { ...state, boxModels: nextBoxModels }
+    }
+
+    default:
+      return state
+  }
+}

package/src/state/modules/components-meta.ts

@@ -0,0 +1,44 @@
+import { Action, ActionTypes } from '../actions'
+
+export type ComponentIcon =
+  | 'Carousel40'
+  | 'Code40'
+  | 'Countdown40'
+  | 'Cube40'
+  | 'Divider40'
+  | 'Form40'
+  | 'Navigation40'
+  | 'SocialLinks40'
+  | 'Video40'
+
+export type ComponentMeta = { label: string; icon: ComponentIcon; hidden: boolean }
+
+export type State = Map<string, ComponentMeta>
+
+export function getInitialState({
+  componentsMeta = new Map(),
+}: { componentsMeta?: Map<string, ComponentMeta> } = {}): State {
+  return componentsMeta
+}
+
+export function getComponentsMeta(state: State): Map<string, ComponentMeta> {
+  return state
+}
+
+export function reducer(state: State = getInitialState(), action: Action): State {
+  switch (action.type) {
+    case ActionTypes.REGISTER_COMPONENT:
+      return new Map(state).set(action.payload.type, action.payload.meta)
+
+    case ActionTypes.UNREGISTER_COMPONENT: {
+      const nextState = new Map(state)
+
+      const deleted = nextState.delete(action.payload.type)
+
+      return deleted ? nextState : state
+    }
+
+    default:
+      return state
+  }
+}

package/src/state/modules/prop-controllers.ts

@@ -0,0 +1,45 @@
+import { Action, ActionTypes } from '../actions'
+import { PropControllerDescriptor } from '../../prop-controllers'
+
+export type { PropControllerDescriptor }
+
+export type State = Map<string, Record<string, PropControllerDescriptor>>
+
+export function getInitialState({
+  propControllerDescriptors = new Map(),
+}: {
+  propControllerDescriptors?: Map<string, Record<string, PropControllerDescriptor>>
+} = {}): State {
+  return propControllerDescriptors
+}
+
+function getPropControllerDescriptors(
+  state: State,
+): Map<string, Record<string, PropControllerDescriptor>> {
+  return state
+}
+
+export function getComponentPropControllerDescriptors(
+  state: State,
+  componentType: string,
+): Record<string, PropControllerDescriptor> | null {
+  return getPropControllerDescriptors(state).get(componentType) ?? null
+}
+
+export function reducer(state: State = getInitialState(), action: Action): State {
+  switch (action.type) {
+    case ActionTypes.REGISTER_COMPONENT:
+      return new Map(state).set(action.payload.type, action.payload.propControllerDescriptors)
+
+    case ActionTypes.UNREGISTER_COMPONENT: {
+      const nextState = new Map(state)
+
+      const deleted = nextState.delete(action.payload.type)
+
+      return deleted ? nextState : state
+    }
+
+    default:
+      return state
+  }
+}