@makeswift/runtime 0.0.0-a500663

package/src/state/modules/react-components.tsx

@@ -0,0 +1,47 @@
+import type {
+  ClassAttributes,
+  ComponentClass,
+  PropsWithoutRef,
+  RefAttributes,
+  VoidFunctionComponent,
+} from 'react'
+
+import { Action, ActionTypes } from '../actions'
+
+export type ComponentType<P = Record<string, any>, T = any> =
+  | ComponentClass<PropsWithoutRef<P> & ClassAttributes<T>>
+  | VoidFunctionComponent<PropsWithoutRef<P> & RefAttributes<T>>
+
+export type State = Map<string, ComponentType>
+
+export function getInitialState({
+  reactComponents = new Map(),
+}: { reactComponents?: Map<string, ComponentType> } = {}): State {
+  return reactComponents
+}
+
+function getReactComponents(state: State): Map<string, ComponentType> {
+  return state
+}
+
+export function getReactComponent(state: State, type: string): ComponentType | null {
+  return getReactComponents(state).get(type) ?? null
+}
+
+export function reducer(state: State = getInitialState(), action: Action) {
+  switch (action.type) {
+    case ActionTypes.REGISTER_REACT_COMPONENT:
+      return new Map(state).set(action.payload.type, action.payload.component)
+
+    case ActionTypes.UNREGISTER_REACT_COMPONENT: {
+      const nextState = new Map(state)
+
+      const deleted = nextState.delete(action.payload.type)
+
+      return deleted ? nextState : state
+    }
+
+    default:
+      return state
+  }
+}

package/src/state/modules/read-only-documents.ts

@@ -0,0 +1,51 @@
+import type { Action } from '../actions'
+
+export type Data = undefined | null | boolean | number | string | Data[] | { [key: string]: Data }
+
+export type ElementData = { type: string; key: string; props: Record<string, Data> }
+
+export type ElementReference = { type: 'reference'; key: string; value: string }
+
+export type Element = ElementData | ElementReference
+
+export function isElementReference(element: Element): element is ElementReference {
+  return !('props' in element)
+}
+
+export type Document = {
+  rootElement: Element
+}
+
+export function createDocument(rootElement: Element): Document {
+  return { rootElement }
+}
+
+export type State = Map<string, Document>
+
+export function getInitialState({
+  rootElements = new Map(),
+}: { rootElements?: Map<string, Element> } = {}): State {
+  const initialState = new Map()
+
+  rootElements.forEach((rootElement, elementKey) => {
+    initialState.set(elementKey, createDocument(rootElement))
+  })
+
+  return initialState
+}
+
+function getDocuments(state: State): Map<string, Document> {
+  return state
+}
+
+export function getDocument(state: State, documentKey: string): Document | null {
+  return getDocuments(state).get(documentKey) ?? null
+}
+
+export function getDocumentRootElement(state: State, documentKey: string): Element | null {
+  return getDocument(state, documentKey)?.rootElement ?? null
+}
+
+export function reducer(state: State = getInitialState(), _action: Action): State {
+  return state
+}

package/src/state/modules/read-write-documents.ts

@@ -0,0 +1,75 @@
+import { Operation } from 'ot-json0'
+import { removeIn, setIn } from 'immutable'
+
+import * as ReadOnlyDocuments from './read-only-documents'
+import { Action, ActionTypes } from '../actions'
+
+export type { Document, Element, ElementData, ElementReference } from './read-only-documents'
+export { isElementReference } from './read-only-documents'
+export type { Operation }
+
+function apply(data: ReadOnlyDocuments.Element, operation: Operation): ReadOnlyDocuments.Element {
+  let applied = data
+
+  operation.forEach(component => {
+    // @ts-expect-error: `ld` isn't in all possible values of `component`
+    if (component.ld != null) applied = removeIn(applied, component.p)
+
+    // @ts-expect-error: `od` isn't in all possible values of `component`
+    if (component.od != null) applied = removeIn(applied, component.p)
+
+    // @ts-expect-error: `li` isn't in all possible values of `component`
+    if (component.li != null) applied = setIn(applied, component.p, component.li)
+
+    // @ts-expect-error: `oi` isn't in all possible values of `component`
+    if (component.oi != null) applied = setIn(applied, component.p, component.oi)
+  })
+
+  return applied
+}
+
+export type State = ReadOnlyDocuments.State
+
+export function getInitialState({
+  rootElements,
+}: {
+  rootElements?: Map<string, ReadOnlyDocuments.Element>
+} = {}): State {
+  return ReadOnlyDocuments.getInitialState({ rootElements })
+}
+
+function getReadOnlyDocumentsStateSlice(state: State): ReadOnlyDocuments.State {
+  return state
+}
+
+export function getDocumentRootElement(
+  state: State,
+  documentKey: string,
+): ReadOnlyDocuments.Element | null {
+  return ReadOnlyDocuments.getDocumentRootElement(
+    getReadOnlyDocumentsStateSlice(state),
+    documentKey,
+  )
+}
+
+export function reducer(state: State = getInitialState(), action: Action): State {
+  switch (action.type) {
+    case ActionTypes.CHANGE_DOCUMENT: {
+      const currentRootElement = getDocumentRootElement(state, action.payload.documentKey)
+
+      if (currentRootElement == null) return state
+
+      const nextRootElement = apply(currentRootElement, action.payload.operation)
+
+      return currentRootElement === nextRootElement
+        ? state
+        : new Map(state).set(
+            action.payload.documentKey,
+            ReadOnlyDocuments.createDocument(nextRootElement),
+          )
+    }
+
+    default:
+      return state
+  }
+}

package/src/state/react-builder-preview.ts

@@ -0,0 +1,271 @@
+import {
+  applyMiddleware,
+  combineReducers,
+  createStore,
+  Dispatch as ReduxDispatch,
+  Middleware,
+  MiddlewareAPI,
+  PreloadedState,
+  Store as ReduxStore,
+} from 'redux'
+import thunk, { ThunkAction, ThunkDispatch } from 'redux-thunk'
+import deepEqual from '../utils/deepEqual'
+
+import * as Documents from './modules/read-write-documents'
+import * as ReactComponents from './modules/react-components'
+import * as BoxModels from './modules/box-models'
+import * as ComponentsMeta from './modules/components-meta'
+import * as PropControllers from './modules/prop-controllers'
+import {
+  Action,
+  changeDocumentElementSize,
+  registerComponent,
+  registerMeasurable,
+  unregisterMeasurable,
+} from './actions'
+import { ActionTypes } from './actions'
+
+export type { Operation } from './modules/read-write-documents'
+export type { BoxModelHandle } from './modules/box-models'
+export { createBox, getBox, parse } from './modules/box-models'
+
+const reducer = combineReducers({
+  documents: Documents.reducer,
+  reactComponents: ReactComponents.reducer,
+  boxModels: BoxModels.reducer,
+  componentsMeta: ComponentsMeta.reducer,
+  propControllers: PropControllers.reducer,
+})
+
+export type State = ReturnType<typeof reducer>
+
+function getBoxModelsStateSlice(state: State): BoxModels.State {
+  return state.boxModels
+}
+
+function getMeasurables(state: State): Map<string, BoxModels.Measurable> {
+  return BoxModels.getMeasurables(getBoxModelsStateSlice(state))
+}
+
+function getBoxModels(state: State): Map<string, BoxModels.BoxModel> {
+  return BoxModels.getBoxModels(getBoxModelsStateSlice(state))
+}
+
+function getBoxModel(state: State, elementKey: string): BoxModels.BoxModel | null {
+  return BoxModels.getBoxModel(getBoxModelsStateSlice(state), elementKey)
+}
+
+function getComponentsMetaStateSlice(state: State): ComponentsMeta.State {
+  return state.componentsMeta
+}
+
+function getComponentsMeta(state: State): Map<string, ComponentsMeta.ComponentMeta> {
+  return ComponentsMeta.getComponentsMeta(getComponentsMetaStateSlice(state))
+}
+
+function getPropControllersStateSlice(state: State): PropControllers.State {
+  return state.propControllers
+}
+
+function getComponentPropControllerDescriptors(
+  state: State,
+  componentType: string,
+): Record<string, PropControllers.PropControllerDescriptor> | null {
+  return PropControllers.getComponentPropControllerDescriptors(
+    getPropControllersStateSlice(state),
+    componentType,
+  )
+}
+
+function measureElements(): ThunkAction<void, State, unknown, Action> {
+  return (dispatch, getState) => {
+    const measurables = getMeasurables(getState())
+    const currentBoxModels = getBoxModels(getState())
+    const measuredBoxModels = new Map(
+      Array.from(measurables.entries())
+        .map(([elementKey, measurable]) => {
+          const boxModel = BoxModels.measure(measurable)
+
+          return boxModel ? ([elementKey, boxModel] as const) : null
+        })
+        .filter((entry): entry is NonNullable<typeof entry> => entry != null),
+    )
+    const changedBoxModels = new Map<string, BoxModels.BoxModel | null>()
+
+    currentBoxModels.forEach((_boxModel, elementKey) => {
+      if (!measuredBoxModels.has(elementKey)) changedBoxModels.set(elementKey, null)
+    })
+
+    measuredBoxModels.forEach((measuredBoxModel, elementKey) => {
+      const currentBoxModel = getBoxModel(getState(), elementKey)
+
+      if (currentBoxModel == null || !deepEqual(currentBoxModel, measuredBoxModel)) {
+        changedBoxModels.set(elementKey, measuredBoxModel)
+      }
+    })
+
+    if (changedBoxModels.size > 0) {
+      dispatch({
+        type: ActionTypes.CHANGE_ELEMENT_BOX_MODELS,
+        payload: { changedElementBoxModels: changedBoxModels },
+      })
+    }
+  }
+}
+
+export function startMeasuringElements(): ThunkAction<() => void, State, unknown, Action> {
+  return dispatch => {
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)
+
+    return () => {
+      cancelAnimationFrame(animationFrameHandle)
+    }
+
+    function handleAnimationFrameRequest() {
+      dispatch(measureElements())
+
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)
+    }
+  }
+}
+
+export type Size = {
+  offsetWidth: number
+  offsetHeight: number
+  clientWidth: number
+  clientHeight: number
+  scrollWidth: number
+  scrollHeight: number
+  scrollTop: number
+  scrollLeft: number
+}
+
+function getElementSize(element: HTMLElement): Size {
+  return {
+    offsetWidth: element.offsetWidth,
+    offsetHeight: element.offsetHeight,
+    clientWidth: element.clientWidth,
+    clientHeight: element.clientHeight,
+    scrollWidth: element.scrollWidth,
+    scrollHeight: element.scrollHeight,
+    scrollTop: element.scrollTop,
+    scrollLeft: element.scrollLeft,
+  }
+}
+
+function startMeasuringDocumentElement(): ThunkAction<() => void, unknown, unknown, Action> {
+  return dispatch => {
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)
+    let lastSize: Size
+
+    return () => {
+      cancelAnimationFrame(animationFrameHandle)
+    }
+
+    function handleAnimationFrameRequest() {
+      const nextSize = getElementSize(window.document.documentElement)
+
+      if (!deepEqual(lastSize, nextSize)) {
+        lastSize = nextSize
+
+        dispatch(changeDocumentElementSize(nextSize))
+      }
+
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)
+    }
+  }
+}
+
+export function initialize(): ThunkAction<() => void, State, unknown, Action> {
+  return dispatch => {
+    const stopMeasuringElements = dispatch(startMeasuringElements())
+    const stopMeasuringDocumentElement = dispatch(startMeasuringDocumentElement())
+
+    return () => {
+      stopMeasuringElements()
+      stopMeasuringDocumentElement()
+    }
+  }
+}
+
+export type Dispatch = ThunkDispatch<State, unknown, Action>
+
+function measureBoxModelsMiddleware(): Middleware<Dispatch, State, Dispatch> {
+  return ({ dispatch }: MiddlewareAPI<Dispatch>) => (next: ReduxDispatch<Action>) => {
+    return (action: Action): Action => {
+      switch (action.type) {
+        case ActionTypes.CHANGE_COMPONENT_HANDLE: {
+          if (BoxModels.isMeasurable(action.payload.componentHandle)) {
+            dispatch(registerMeasurable(action.payload.elementKey, action.payload.componentHandle))
+          } else {
+            dispatch(unregisterMeasurable(action.payload.elementKey))
+          }
+
+          break
+        }
+
+        case ActionTypes.UNMOUNT_COMPONENT:
+          dispatch(unregisterMeasurable(action.payload.elementKey))
+          break
+      }
+
+      return next(action)
+    }
+  }
+}
+
+export function messageChannelMiddleware(): Middleware<Dispatch, State, Dispatch> {
+  return ({ dispatch, getState }: MiddlewareAPI<Dispatch, State>) => (
+    next: ReduxDispatch<Action>,
+  ) => {
+    const messageChannel = new MessageChannel()
+
+    window.parent.postMessage(messageChannel.port2, '*', [messageChannel.port2])
+
+    messageChannel.port1.onmessage = (event: MessageEvent<Action>) => dispatch(event.data)
+
+    const state = getState()
+    const registeredComponentsMeta = getComponentsMeta(state)
+
+    registeredComponentsMeta.forEach((componentMeta, componentType) => {
+      const propControllerDescriptors = getComponentPropControllerDescriptors(state, componentType)
+
+      if (propControllerDescriptors != null) {
+        messageChannel.port1.postMessage(
+          registerComponent(componentType, componentMeta, propControllerDescriptors),
+        )
+      }
+    })
+
+    return (action: Action): Action => {
+      switch (action.type) {
+        case ActionTypes.CHANGE_ELEMENT_BOX_MODELS:
+        case ActionTypes.MOUNT_COMPONENT:
+        case ActionTypes.UNMOUNT_COMPONENT:
+        case ActionTypes.REGISTER_COMPONENT:
+        case ActionTypes.UNREGISTER_COMPONENT:
+        case ActionTypes.CHANGE_DOCUMENT_ELEMENT_SIZE:
+          messageChannel.port1.postMessage(action)
+          break
+
+        case ActionTypes.CHANGE_DOCUMENT_ELEMENT_SCROLL_TOP:
+          window.document.documentElement.scrollTop = action.payload.scrollTop
+          break
+      }
+
+      return next(action)
+    }
+  }
+}
+
+export type Store = ReduxStore<State, Action> & { dispatch: Dispatch }
+
+export function configureStore({
+  preloadedState,
+}: { preloadedState?: PreloadedState<State> } = {}): Store {
+  return createStore(
+    reducer,
+    preloadedState,
+    applyMiddleware(thunk, measureBoxModelsMiddleware(), messageChannelMiddleware()),
+  )
+}

package/src/state/react-page.ts

@@ -0,0 +1,73 @@
+import {
+  applyMiddleware,
+  combineReducers,
+  createStore,
+  PreloadedState,
+  Store as ReduxStore,
+} from 'redux'
+import thunk, { ThunkDispatch } from 'redux-thunk'
+
+import * as Documents from './modules/read-only-documents'
+import * as ReactComponents from './modules/react-components'
+import * as ComponentsMeta from './modules/components-meta'
+import * as PropControllers from './modules/prop-controllers'
+import { Action } from './actions'
+
+export type {
+  Data,
+  Document,
+  Element,
+  ElementData,
+  ElementReference,
+} from './modules/read-only-documents'
+export { isElementReference } from './modules/read-only-documents'
+export type { ComponentType } from './modules/react-components'
+
+const reducer = combineReducers({
+  documents: Documents.reducer,
+  reactComponents: ReactComponents.reducer,
+  componentsMeta: ComponentsMeta.reducer,
+  propControllers: PropControllers.reducer,
+})
+
+export type State = ReturnType<typeof reducer>
+
+function getDocumentsStateSlice(state: State): Documents.State {
+  return state.documents
+}
+
+export function getDocumentRootElement(
+  state: State,
+  documentKey: string,
+): Documents.Element | null {
+  return Documents.getDocumentRootElement(getDocumentsStateSlice(state), documentKey)
+}
+
+function getReactComponentsStateSlice(state: State): ReactComponents.State {
+  return state.reactComponents
+}
+
+export function getReactComponent(
+  state: State,
+  type: string,
+): ReactComponents.ComponentType | null {
+  return ReactComponents.getReactComponent(getReactComponentsStateSlice(state), type)
+}
+
+export type Dispatch = ThunkDispatch<State, unknown, Action>
+
+export type Store = ReduxStore<State, Action> & { dispatch: Dispatch }
+
+export function configureStore({
+  rootElements,
+  preloadedState,
+}: {
+  rootElements?: Map<string, Documents.Element>
+  preloadedState?: PreloadedState<State>
+} = {}): Store {
+  return createStore(
+    reducer,
+    { ...preloadedState, documents: Documents.getInitialState({ rootElements }) },
+    applyMiddleware(thunk),
+  )
+}

package/src/style.css

@@ -0,0 +1,8 @@
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}

package/src/utils/deepEqual.ts

@@ -0,0 +1,33 @@
+import shallowEqual from "./shallowEqual";
+
+const { hasOwnProperty } = Object.prototype;
+
+const deepEqual = (a: unknown, b: unknown): boolean => {
+  if (shallowEqual(a, b)) return true;
+
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  )
+    return false;
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (
+      !hasOwnProperty.call(b, keysA[i]) ||
+      // @ts-expect-error: {}[string] is OK.
+      !deepEqual(a[keysA[i]], b[keysA[i]])
+    )
+      return false;
+  }
+
+  return true;
+};
+
+export default deepEqual;

package/src/utils/is.ts

@@ -0,0 +1,5 @@
+export default function is(x: unknown, y: unknown): boolean {
+  if (x === y) return x !== 0 || y !== 0 || 1 / x === 1 / y;
+
+  return x !== x && y !== y;
+}

package/src/utils/shallowEqual.ts

@@ -0,0 +1,30 @@
+import is from "./is";
+
+const { hasOwnProperty } = Object.prototype;
+
+const shallowEqual = (a: unknown, b: unknown): boolean => {
+  if (is(a, b)) return true;
+
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  )
+    return false;
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (let i = 0; i < keysA.length; i += 1) {
+    // @ts-expect-error: {}[string] is OK.
+    if (!hasOwnProperty.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+
+  return true;
+};
+
+export default shallowEqual;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "dist/types",
+    "emitDeclarationOnly": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./src", "./types"]
+}

package/types/ot-json0.d.ts

@@ -0,0 +1,35 @@
+declare module 'ot-json0' {
+  type JSONData = null | boolean | number | string | Array<JSONData> | { [ey: string]: JSONData }
+
+  type ReadOnlyJSONData =
+    | null
+    | boolean
+    | number
+    | string
+    | ReadonlyArray<ReadOnlyJSONData>
+    | { readonly [key: string]: ReadOnlyJSONData }
+
+  export type Snapshot = JSONData
+
+  export type ReadOnlySnapshot = ReadOnlyJSONData
+
+  type Path = Array<string | number>
+
+  type OperationComponent =
+    | { p: Path; li: ReadOnlySnapshot }
+    | { p: Path; ld: ReadOnlySnapshot }
+    | { p: Path; ld: ReadOnlySnapshot; li: ReadOnlySnapshot }
+    | { p: Path; oi: ReadOnlySnapshot }
+    | { p: Path; od: ReadOnlySnapshot }
+    | { p: Path; od: ReadOnlySnapshot; oi: ReadOnlySnapshot }
+
+  export type Operation = ReadonlyArray<OperationComponent>
+
+  type Type = {
+    apply(snapshot: Snapshot, op: Operation): Snapshot
+    invert(op: Operation): Operation
+    compose(op1: Operation, op2: Operation): Operation
+  }
+
+  export const type: Type
+}

package/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import * as path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    emptyOutDir: false,
+    sourcemap: true,
+    minify: false,
+    // @ts-expect-error: we provide `build.rollupOptions.input` so `build.lib.entry` isn't required.
+    lib: { formats: ['es', 'cjs'] },
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'src'),
+        ['prop-controllers']: path.resolve(__dirname, 'src', 'prop-controllers'),
+        react: path.resolve(__dirname, 'src', 'react'),
+        ['box-model']: path.resolve(__dirname, 'src', 'box-model'),
+        components: path.resolve(__dirname, 'src', 'components'),
+      },
+      output: {
+        entryFileNames: '[name].[format].js',
+        chunkFileNames: '[name].[format].js',
+      },
+      external: ['react', 'styled-components'],
+    },
+  },
+})