@makeswift/runtime 0.0.0-a500663 → 0.0.0-b97578f

package/src/prop-controllers/index.ts

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

package/src/react.ts

@@ -1,3 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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

@@ -1,239 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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
-  }
-}