@ditojs/admin 2.100.0 → 3.0.0

package/src/utils/schema/lookup.js

@@ -0,0 +1,266 @@
+import { appendDataPath } from '../data.js'
+import {
+  isObject,
+  isString,
+  isArray,
+  isFunction,
+  camelize
+} from '@ditojs/utils'
+import { reactive } from 'vue'
+import { getTypeOptions } from './types.js'
+import {
+  findNestedSchemaComponent,
+  isSchema,
+  isSingleComponentView
+} from './structure.js'
+// TODO: `getFormSchemas()` processes forms with `components()` callbacks on
+// every call, which also causes the only circular import between these
+// modules. Move this out of the lookup, see the form model.
+import { setupForm } from './setup.js'
+
+const emptySchema = {}
+
+export function hasFormSchema(schema) {
+  // Support both single form and multiple forms notation, as well as inlined
+  // components.
+  return (
+    isSchema(schema) &&
+    isObject(schema.form || schema.forms || schema.components)
+  )
+}
+
+export function hasMultipleFormSchemas(schema) {
+  return (
+    isSchema(schema) &&
+    Object.keys(schema?.forms || {}).length > 1
+  )
+}
+
+export function getViewFormSchema(schema, context) {
+  const { view } = schema
+  const viewSchema = view && context.flattenedViews[view]
+  return viewSchema
+    ? // NOTE: Views can have tabs, in which case the view component is nested
+      // in one of the tabs, go find it.
+      findNestedSchemaComponent(viewSchema, hasFormSchema) || null
+    : null
+}
+
+export function getViewSchema(schema, context) {
+  return getViewFormSchema(schema, context)
+    ? context.flattenedViews[schema.view]
+    : null
+}
+
+export function hasViewSchema(schema, context) {
+  return !!getViewSchema(schema, context)
+}
+
+export function getViewPath(schema, context) {
+  const view = getViewSchema(schema, context)
+  if (view) {
+    return isSingleComponentView(view)
+      ? view.fullPath
+      : `${view.fullPath}/${view.path}`
+  }
+  return null
+}
+
+export function getViewEditPath(schema, id, context) {
+  const path = getViewPath(schema, context)
+  return path ? `${path}/${id}` : null
+}
+
+export function getFormSchemas(schema, context, modifyForm) {
+  const viewSchema = context && getViewFormSchema(schema, context)
+  if (viewSchema) {
+    schema = viewSchema
+  } else if (schema.view) {
+    throw new Error(`Unknown view: '${schema.view}'`)
+  }
+
+  let { form, forms } = schema
+  if (!form && !forms) {
+    const { name, compact, clipboard, tabs, components } = schema
+    if (components || tabs) {
+      // Convert inlined forms to stand-alone forms, supporting `name`,
+      // `compact`, `clipboard`, `tabs` and `components` settings.
+      form = { type: 'form', name, compact, clipboard, tabs, components }
+    } else {
+      // No `forms`, `form` or `components`, return and empty `forms` object.
+      return {}
+    }
+  }
+  forms ||= { default: form }
+  return Object.fromEntries(
+    Object.entries(forms).map(([type, form]) => {
+      // Support `schema.components` callbacks to create components on the fly.
+      if (context && isFunction(form.components)) {
+        // Make the form schema reactive since `setupForm()` is async, so that
+        // the setting of defaults will be picked up by downstream code.
+        form = reactive({
+          ...form,
+          components: form.components(context)
+        })
+        // Process the form again, now that we have the components.
+        setupForm(context.api, form).catch(console.error)
+      }
+      return [type, modifyForm?.(form) ?? form]
+    })
+  )
+}
+
+export function getItemFormSchemaFromForms(forms, item) {
+  return forms[item?.type] || forms.default || null
+}
+
+export function getItemFormSchema(schema, item, context) {
+  return (
+    getItemFormSchemaFromForms(getFormSchemas(schema, context), item) ||
+    // Always return a schema object so we don't need to check for it.
+    emptySchema
+  )
+}
+
+export function isEmptySchema(schema) {
+  return schema === emptySchema
+}
+
+export function getNamedSchemas(schemas, defaults) {
+  const toObject = (array, toSchema) => {
+    return array.length > 0
+      ? array.reduce((object, value) => {
+          const schema = toSchema(value)
+          if (schema) {
+            object[schema.name] =
+              schema && defaults
+                ? { ...defaults, ...schema }
+                : schema
+          }
+          return object
+        }, {})
+      : null
+  }
+
+  return isArray(schemas)
+    ? toObject(schemas, value =>
+        isObject(value)
+          ? value
+          : {
+              name: camelize(value, false)
+            }
+      )
+    : isObject(schemas)
+      ? toObject(
+          Object.entries(schemas),
+          ([name, value]) =>
+            isObject(value)
+              ? {
+                  name,
+                  ...value
+                }
+              : isString(value)
+                ? {
+                    name,
+                    label: value
+                  }
+                : null
+        )
+      : null
+}
+
+export function getButtonSchemas(buttons) {
+  return getNamedSchemas(
+    buttons,
+    { type: 'button' } // Defaults
+  )
+}
+
+export function getPanelEntry(
+  schema,
+  dataPath = null,
+  componentPath = '',
+  tabComponent = null
+) {
+  return schema
+    ? {
+        schema,
+        // If the panel provides its own name, append it to the paths. This is
+        // used e.g. for $filters panels.
+        dataPath:
+          dataPath != null && schema.name
+            ? appendDataPath(dataPath, schema.name)
+            : dataPath,
+        componentPath: schema.name
+          ? appendDataPath(componentPath, schema.name)
+          : componentPath,
+        tabComponent
+      }
+    : null
+}
+
+export function getPanelEntries(
+  panelSchemas,
+  dataPath,
+  componentPath,
+  tabComponent = null,
+  panelEntries = []
+) {
+  if (panelSchemas) {
+    for (const [key, schema] of Object.entries(panelSchemas)) {
+      const entry = getPanelEntry(
+        schema,
+        appendDataPath(dataPath, key),
+        appendDataPath(componentPath, key),
+        tabComponent
+      )
+      if (entry) {
+        panelEntries.push(entry)
+      }
+    }
+  }
+  return panelEntries
+}
+
+// Returns the entries of the panel that the type of the component described by
+// `schema` provides, and of the panels in `schema.panels`. The type's panel is
+// addressed relative to `dataPath` and its component path,
+// `dataPathComponentPath`, while the panels in `schema.panels` continue
+// `schemaComponentPath`, the component path of `schema` itself, which also
+// contains the names of unnested components.
+export function getAllPanelEntries(
+  api,
+  schema,
+  dataPath,
+  dataPathComponentPath,
+  schemaComponentPath,
+  component = null,
+  tabComponent = null
+) {
+  const panelSchema = getTypeOptions(schema)?.getPanelSchema?.(
+    api,
+    schema,
+    dataPath,
+    component
+  )
+  const panelEntries = panelSchema
+    ? [
+        getPanelEntry(
+          panelSchema,
+          dataPath,
+          dataPathComponentPath,
+          tabComponent
+        )
+      ]
+    : []
+  // Allow each component to provide its own set of panels, in
+  // addition to the default one (e.g. getFiltersPanel(), $filters):
+  getPanelEntries(
+    schema?.panels,
+    dataPath,
+    schemaComponentPath,
+    tabComponent,
+    panelEntries
+  )
+  return panelEntries
+}

package/src/utils/schema/lookup.test.js

@@ -0,0 +1,61 @@
+import { registerTypeComponent } from './types.js'
+import { getAllPanelEntries } from './lookup.js'
+
+// Register minimal type options, as the actual type components can't be
+// imported without a Vue SFC compiler:
+registerTypeComponent('panel', {
+  defaultNested: false,
+  getPanelSchema: (api, schema) => schema
+})
+registerTypeComponent('list', {
+  defaultNested: true,
+  getPanelSchema: () => ({ type: 'panel', name: '$filters' })
+})
+registerTypeComponent('section', { defaultNested: false })
+
+describe('getAllPanelEntries()', () => {
+  const getPaths = entries =>
+    entries.map(({ dataPath, componentPath }) => ({ dataPath, componentPath }))
+
+  it('adds the names of panel components once to their paths', () => {
+    // Unnested components add their name to their component path, but not to
+    // their data path, so the panel is addressed relative to the data path.
+    const links = { type: 'panel', name: 'links' }
+    expect(
+      getPaths(getAllPanelEntries(null, links, 'book', 'main', 'main/links'))
+    ).toEqual([{ dataPath: 'book/links', componentPath: 'main/links' }])
+  })
+
+  it('continues the paths of nested components for type panels', () => {
+    const books = { type: 'list', name: 'books' }
+    expect(
+      getPaths(
+        getAllPanelEntries(
+          null,
+          books,
+          'shelf/books',
+          'main/books',
+          'main/books'
+        )
+      )
+    ).toEqual([
+      {
+        dataPath: 'shelf/books/$filters',
+        componentPath: 'main/books/$filters'
+      }
+    ])
+  })
+
+  it('continues the component path of components for their panels', () => {
+    const section = {
+      type: 'section',
+      name: 'section',
+      panels: { info: { type: 'panel' } }
+    }
+    expect(
+      getPaths(
+        getAllPanelEntries(null, section, 'book', 'main', 'main/section')
+      )
+    ).toEqual([{ dataPath: 'book/info', componentPath: 'main/section/info' }])
+  })
+})

package/src/utils/schema/setup.js

@@ -0,0 +1,354 @@
+import DitoMixin from '../../mixins/DitoMixin.js'
+import TypeMixin from '../../mixins/TypeMixin.js'
+import {
+  isObject,
+  isArray,
+  isFunction,
+  isPromise,
+  isModule,
+  camelize,
+  assignDeeply,
+  mapConcurrently
+} from '@ditojs/utils'
+import { markRaw } from 'vue'
+import { getTypeOptions } from './types.js'
+import {
+  iterateSchemaComponents,
+  iterateNestedSchemaComponents,
+  isForm,
+  isView,
+  isTab,
+  isPanel,
+  isMenu,
+  getSchemaIdentifier,
+  getPanelSchemas
+} from './structure.js'
+import { getFormSchemas } from './lookup.js'
+
+const resolvedSchemas = new WeakMap()
+
+export async function resolveSchema(value, unwrapModule = false) {
+  if (resolvedSchemas.has(value)) {
+    return resolvedSchemas.get(value)
+  }
+  let schema = value
+  if (isFunction(schema)) {
+    schema = schema()
+  }
+  if (isPromise(schema)) {
+    schema = await schema
+  }
+  if (isModule(schema)) {
+    // Copy to convert from module to object:
+    schema = { ...schema }
+    // Unwrap default or named schema
+    if (!schema.name && (unwrapModule || schema.default)) {
+      // Filter out internal key added by vite / vue 3 plugin when changing
+      // code in a dynamically imported vue component, see:
+      // https://github.com/vitejs/vite-plugin-vue/blob/abdf5f4f32d02af641e5f60871bde14535569b1e/packages/plugin-vue/src/main.ts#L133
+      const keys = Object.keys(schema).filter(key => key !== '_rerender_only')
+      if (keys.length === 1) {
+        const name = keys[0]
+        schema = schema[name]
+        if (name !== 'default') {
+          schema = { ...schema, name }
+        }
+      }
+    }
+  }
+  resolvedSchemas.set(value, schema)
+  return schema
+}
+
+export async function resolveSchemas(
+  unresolvedSchemas,
+  resolveItem = resolveSchema
+) {
+  let schemas = isFunction(unresolvedSchemas)
+    ? unresolvedSchemas()
+    : unresolvedSchemas
+  schemas = await resolveSchema(schemas, false)
+  if (isArray(schemas)) {
+    // Translate an array of dynamic import, each importing one named schema
+    // module to an object with named entries.
+    schemas = Object.fromEntries(
+      await mapConcurrently(
+        schemas,
+        async item => {
+          const schema = await resolveItem(item, true)
+          return [schema.name, schema]
+        }
+      )
+    )
+  } else if (isObject(schemas)) {
+    schemas = Object.fromEntries(
+      await mapConcurrently(
+        Object.entries(schemas),
+        async ([key, item]) => {
+          const schema = await resolveItem(item, true)
+          return [key, schema]
+        }
+      )
+    )
+  }
+  return schemas
+}
+
+export async function resolveViews(unresolvedViews) {
+  return resolveSchemas(unresolvedViews, async (schema, unwrapModule) => {
+    schema = await resolveSchema(schema, unwrapModule)
+    if (!schema.name && isMenu(schema)) {
+      // Generate a name for sub-menus from their label if it's missing.
+      // NOTE: This is never actually referenced from anywhere, but they need
+      // a name by which they're stored in the parent object.
+      schema = {
+        ...schema,
+        name: camelize(schema.label),
+        items: await resolveSchemas(schema.items)
+      }
+    }
+    return schema
+  })
+}
+
+export function flattenViews(views) {
+  return Object.fromEntries(
+    Object.entries(views).reduce(
+      (entries, [key, schema]) => {
+        if (isMenu(schema)) {
+          entries.push(...Object.entries(schema.items))
+        } else {
+          entries.push([key, schema])
+        }
+        return entries
+      },
+      []
+    )
+  )
+}
+
+export async function resolveSchemaComponent(schema) {
+  // Resolves async schema components and adds DitoMixin and TypeMixin to them.
+  let { component } = schema
+  if (component) {
+    component = await resolveSchema(component, true)
+    if (component) {
+      // Prevent warning: "Vue received a Component which was made a reactive
+      // object. This can lead to unnecessary performance overhead, and should
+      // be avoided by marking the component with `markRaw`":
+      schema.component = markRaw({
+        ...component,
+        mixins: [DitoMixin, TypeMixin, ...(component.mixins || [])]
+      })
+    }
+  }
+}
+
+export async function resolveSchemaComponents(schemas) {
+  // `schemas` are of the same possible forms as passed to `getNamedSchemas()`
+  await mapConcurrently(Object.values(schemas || {}), resolveSchemaComponent)
+}
+
+const processedSchemaDepths = new WeakMap()
+
+export function setupSchemaComponents(
+  api,
+  schema,
+  routes = null,
+  level = 0,
+  maxDepth = 1
+) {
+  if (schema) {
+    const depth = processedSchemaDepths.get(schema) ?? 0
+    if (depth < maxDepth) {
+      processedSchemaDepths.set(schema, depth + 1)
+      const promises = []
+      const process = (component, name, relativeLevel) => {
+        promises.push(
+          setupSchemaComponent(
+            api,
+            component,
+            name,
+            routes,
+            level + relativeLevel
+          )
+        )
+      }
+
+      iterateNestedSchemaComponents(schema, process)
+      iterateSchemaComponents(getPanelSchemas(schema), process)
+
+      return Promise.all(promises)
+    }
+  }
+}
+
+export function setupSchemaComponent(
+  api,
+  schema,
+  name,
+  routes = null,
+  level = 0
+) {
+  applySchemaDefaults(api, schema)
+
+  return Promise.all([
+    // Also process nested panel schemas.
+    mapConcurrently(
+      getPanelSchemas(schema),
+      panel => setupSchemaComponents(api, panel, routes, level)
+    ),
+    // Delegate schema processing to the actual type components.
+    getTypeOptions(schema)?.processSchema?.(
+      api,
+      schema,
+      name,
+      routes,
+      level
+    )
+  ])
+}
+
+export async function setupView(component, api, schema, name, fullPath = '') {
+  applySchemaDefaults(api, schema)
+  setupRouteSchema(api, schema, name, fullPath)
+  let children = []
+  if (isView(schema)) {
+    await setupNestedSchemas(api, schema)
+    await setupSchemaComponents(api, schema, children)
+  } else if (isMenu(schema)) {
+    children = await Promise.all(
+      Object.entries(schema.items).map(async ([name, item]) =>
+        setupView(component, api, item, name, schema.fullPath)
+      )
+    )
+  } else {
+    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
+  }
+  return {
+    path: schema.fullPath,
+    children,
+    component,
+    meta: {
+      api,
+      schema
+    }
+  }
+}
+
+export function applySchemaDefaults(api, schema) {
+  let defaults = (
+    api.defaults[schema.type] ||
+    api.defaults[camelize(schema.type)]
+  )
+  if (defaults) {
+    if (isFunction(defaults)) {
+      defaults = defaults(schema)
+    }
+    if (isObject(defaults)) {
+      for (const [key, value] of Object.entries(defaults)) {
+        if (schema[key] === undefined) {
+          schema[key] = value
+        } else {
+          schema[key] = assignDeeply(schema[key], value)
+        }
+      }
+    }
+  }
+}
+
+export function applyNestedSchemaDefaults(api, schema) {
+  // Process defaults for nested schemas. Note that this is also done when
+  // calling `setupSchemaComponents()`, but that function is async, and we
+  // need a sync version that only handles the defaults for filters, see
+  // `getFiltersPanel()`.
+  iterateNestedSchemaComponents(schema, component => {
+    applySchemaDefaults(api, component)
+    const forms = getFormSchemas(component)
+    for (const form of Object.values(forms)) {
+      applyNestedSchemaDefaults(api, form)
+    }
+  })
+}
+
+export function setupRouteSchema(api, schema, name, fullPath = null) {
+  // Used for view and source schemas, see SourceMixin.
+  schema.name ??= name
+  schema.path ??= api.normalizePath(name)
+  if (fullPath !== null) {
+    schema.fullPath = `${fullPath}/${schema.path}`
+  }
+}
+
+export async function setupForms(api, schema, level) {
+  const routes = []
+  // First resolve the forms and store the results back on the schema.
+  const { form, forms, components, maxDepth = 1 } = schema
+  if (forms) {
+    schema.forms = await resolveSchemas(forms, form =>
+      setupForm(api, form, routes, level, maxDepth)
+    )
+  } else if (form) {
+    schema.form = await setupForm(api, form, routes, level, maxDepth)
+  } else if (isObject(components)) {
+    // NOTE: Processing forms in computed components is not supported, since it
+    // only can be computed in conjunction with actual data.
+    const form = {
+      type: 'form',
+      components
+    }
+    await setupForm(api, form, routes, level, maxDepth)
+  }
+  return routes
+}
+
+export async function setupForm(
+  api,
+  schema,
+  routes = null,
+  level = 0,
+  maxDepth = 1
+) {
+  schema = await resolveSchema(schema, true)
+  if (!isForm(schema)) {
+    throw new Error(`Invalid form schema: '${getSchemaIdentifier(schema)}'`)
+  }
+  applySchemaDefaults(api, schema)
+  await setupNestedSchemas(api, schema)
+  await setupSchemaComponents(api, schema, routes, level, maxDepth)
+  return schema
+}
+
+export async function setupTab(api, schema) {
+  schema = await resolveSchema(schema, true)
+  if (!isTab(schema)) {
+    throw new Error(`Invalid tab schema: '${getSchemaIdentifier(schema)}'`)
+  }
+  applySchemaDefaults(api, schema)
+  return schema
+}
+
+export async function setupPanel(api, schema) {
+  schema = await resolveSchema(schema, true)
+  if (!isPanel(schema)) {
+    throw new Error(`Invalid panel schema: '${getSchemaIdentifier(schema)}'`)
+  }
+  applySchemaDefaults(api, schema)
+  return schema
+}
+
+export async function setupNestedSchemas(api, schema) {
+  const { tabs, panels } = schema
+  if (tabs) {
+    schema.tabs = await resolveSchemas(
+      tabs,
+      tab => setupTab(api, tab)
+    )
+  }
+  if (panels) {
+    schema.panels = await resolveSchemas(
+      panels,
+      panel => setupPanel(api, panel)
+    )
+  }
+}