@likec4/generators 1.5.0 → 1.29.0

package/src/__mocks__/data.ts

@@ -0,0 +1,463 @@
+import type { ComputedView, DiagramView } from '@likec4/core'
+
+export const fakeDiagram: DiagramView = {
+  edges: [
+    {
+      headArrow: [
+        [294, 487],
+        [291, 496],
+        [288, 487]
+      ],
+      id: 'cloud.frontend:cloud.backend',
+      label: 'requests',
+      labelBox: {
+        align: 'left',
+        width: 62,
+        x: 295,
+        y: 459
+      },
+      points: [
+        [291, 406],
+        [291, 432],
+        [291, 461],
+        [291, 487]
+      ],
+      relations: [
+        'cloud.frontend.dashboard:cloud.backend.graphql',
+        'cloud.frontend.adminPanel:cloud.backend.graphql'
+      ],
+      source: 'cloud.frontend',
+      target: 'cloud.backend'
+    },
+    {
+      headArrow: [
+        [294, 701],
+        [291, 711],
+        [288, 701]
+      ],
+      id: 'cloud.backend:amazon',
+      label: null,
+      labelBox: null,
+      points: [
+        [291, 641],
+        [291, 660],
+        [291, 681],
+        [291, 702]
+      ],
+      relations: ['cloud.backend.storage:amazon.s3'],
+      source: 'cloud.backend',
+      target: 'amazon'
+    },
+    {
+      headArrow: [
+        [344, 257],
+        [336, 263],
+        [338, 253]
+      ],
+      id: 'support:cloud.frontend',
+      label: null,
+      labelBox: null,
+      points: [
+        [413, 141],
+        [391, 176],
+        [364, 218],
+        [342, 255]
+      ],
+      relations: ['support:cloud.frontend.adminPanel'],
+      source: 'support',
+      target: 'cloud.frontend'
+    },
+    {
+      headArrow: [
+        [244, 253],
+        [246, 263],
+        [239, 257]
+      ],
+      id: 'customer:cloud.frontend',
+      label: 'opens',
+      labelBox: {
+        align: 'left',
+        width: 44,
+        x: 208,
+        y: 193
+      },
+      points: [
+        [169, 141],
+        [191, 176],
+        [218, 218],
+        [241, 255]
+      ],
+      relations: ['customer:cloud.frontend.dashboard'],
+      source: 'customer',
+      target: 'cloud.frontend'
+    }
+  ],
+  height: 855,
+  id: 'fakeView',
+  nodes: [
+    {
+      children: [],
+      color: 'primary',
+      id: 'amazon',
+      parent: null,
+      position: [165, 715],
+      relative: [165, 715],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'amazon'
+    },
+    {
+      children: ['cloud.backend', 'cloud.frontend'],
+      color: 'primary',
+      id: 'cloud',
+      parent: null,
+      position: [139, 210],
+      relative: [139, 210],
+      shape: 'rectangle',
+      size: {
+        height: 457,
+        width: 304
+      },
+      title: 'cloud'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'customer',
+      parent: null,
+      position: [0, 0],
+      relative: [0, 0],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'customer'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'support',
+      parent: null,
+      position: [330, 0],
+      relative: [330, 0],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'support'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'cloud.backend',
+      parent: 'cloud',
+      position: [165, 500],
+      relative: [26, 290],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'backend'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'cloud.frontend',
+      parent: 'cloud',
+      position: [165, 266],
+      relative: [26, 56],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'frontend'
+    }
+  ],
+  autoLayout: { direction: 'TB' },
+  rules: [
+    {
+      exprs: [
+        {
+          wildcard: true
+        }
+      ],
+      isInclude: true
+    }
+  ],
+  title: '',
+  viewOf: 'cloud',
+  width: 582
+} as any
+
+export const fakeDiagram2: DiagramView = {
+  edges: [
+    {
+      headArrow: [
+        [129, 456],
+        [126, 465],
+        [123, 456]
+      ],
+      id: 'system.frontend:system.backend',
+      label: 'requests',
+      labelBox: {
+        align: 'left',
+        width: 62,
+        x: 130,
+        y: 428
+      },
+      points: [
+        [126, 375],
+        [126, 400],
+        [126, 429],
+        [126, 456]
+      ],
+      relations: ['671e3db5eb605d5f245f247d95925bd0953e0e4c'],
+      source: 'system.frontend',
+      target: 'system.backend'
+    },
+    {
+      headArrow: [
+        [129, 221],
+        [126, 231],
+        [123, 221]
+      ],
+      id: 'client:system.frontend',
+      label: 'opens',
+      labelBox: {
+        align: 'left',
+        width: 44,
+        x: 130,
+        y: 193
+      },
+      points: [
+        [126, 141],
+        [126, 166],
+        [126, 195],
+        [126, 221]
+      ],
+      relations: ['99bffdfd5c78e024393e6223cd9b19225321a5e3'],
+      source: 'client',
+      target: 'system.frontend'
+    }
+  ],
+  height: 609,
+  id: '74f5364fa4b',
+  nodes: [
+    {
+      children: [],
+      color: 'primary',
+      id: 'client',
+      parent: null,
+      position: [0, 0],
+      relative: [0, 0],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'client'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'system.backend',
+      parent: null,
+      position: [0, 469],
+      relative: [0, 469],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'backend'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'system.frontend',
+      parent: null,
+      position: [0, 235],
+      relative: [0, 235],
+      shape: 'rectangle',
+      size: {
+        height: 140,
+        width: 251
+      },
+      title: 'frontend'
+    }
+  ],
+  autoLayout: { direction: 'TB' },
+  rules: [
+    {
+      exprs: [
+        {
+          wildcard: true
+        }
+      ],
+      isInclude: true
+    }
+  ],
+  title: 'frontend',
+  viewOf: 'system.frontend',
+  width: 251
+} as any
+
+export const fakeComputedView3Levels: ComputedView = {
+  edges: [
+    {
+      id: 'cloud.frontend.dashboard:cloud.backend.graphql',
+      label: null,
+      relations: ['cloud.frontend.dashboard:cloud.backend.graphql'],
+      source: 'cloud.frontend.dashboard',
+      target: 'cloud.backend.graphql'
+    },
+    {
+      id: 'cloud.frontend.adminPanel:cloud.backend.graphql',
+      label: null,
+      relations: ['cloud.frontend.adminPanel:cloud.backend.graphql'],
+      source: 'cloud.frontend.adminPanel',
+      target: 'cloud.backend.graphql'
+    },
+    {
+      id: 'cloud.backend.storage:amazon',
+      label: null,
+      relations: ['cloud.backend.storage:amazon.s3'],
+      source: 'cloud.backend.storage',
+      target: 'amazon'
+    },
+    {
+      id: 'cloud.backend.graphql:cloud.backend.storage',
+      label: null,
+      relations: ['cloud.backend.graphql:cloud.backend.storage'],
+      source: 'cloud.backend.graphql',
+      target: 'cloud.backend.storage'
+    },
+    {
+      id: 'support:cloud.frontend.adminPanel',
+      label: null,
+      relations: ['support:cloud.frontend.adminPanel'],
+      source: 'support',
+      target: 'cloud.frontend.adminPanel'
+    },
+    {
+      id: 'customer:cloud.frontend.dashboard',
+      label: null,
+      relations: ['customer:cloud.frontend.dashboard'],
+      source: 'customer',
+      target: 'cloud.frontend.dashboard'
+    }
+  ],
+  id: 'cloud3levels',
+  nodes: [
+    {
+      children: [],
+      color: 'primary',
+      id: 'amazon',
+      parent: null,
+      shape: 'rectangle',
+      title: 'amazon'
+    },
+    {
+      children: ['cloud.backend', 'cloud.frontend.adminPanel', 'cloud.frontend.dashboard'],
+      color: 'primary',
+      id: 'cloud',
+      navigateTo: 'fakeView',
+      parent: null,
+      shape: 'rectangle',
+      title: 'cloud'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'customer',
+      parent: null,
+      shape: 'rectangle',
+      title: 'customer'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'support',
+      parent: null,
+      shape: 'rectangle',
+      title: 'support'
+    },
+    {
+      children: ['cloud.backend.graphql', 'cloud.backend.storage'],
+      color: 'primary',
+      id: 'cloud.backend',
+      parent: 'cloud',
+      shape: 'rectangle',
+      title: 'backend'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'cloud.backend.graphql',
+      parent: 'cloud.backend',
+      shape: 'rectangle',
+      title: 'graphql'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'cloud.backend.storage',
+      parent: 'cloud.backend',
+      shape: 'rectangle',
+      title: 'storage'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'cloud.frontend.adminPanel',
+      parent: 'cloud',
+      shape: 'rectangle',
+      title: 'adminPanel'
+    },
+    {
+      children: [],
+      color: 'primary',
+      id: 'cloud.frontend.dashboard',
+      parent: 'cloud',
+      shape: 'rectangle',
+      title: 'dashboard'
+    }
+  ],
+  autoLayout: { direction: 'TB' },
+  rules: [
+    {
+      exprs: [
+        {
+          wildcard: true
+        },
+        {
+          element: 'cloud.frontend',
+          isChildren: true
+        },
+        {
+          element: 'cloud.backend',
+          isChildren: true
+        }
+      ],
+      isInclude: true
+    },
+    {
+      exprs: [
+        {
+          element: 'cloud.frontend',
+          isChildren: false
+        }
+      ],
+      isInclude: false
+    }
+  ],
+  title: 'Context: Cloud',
+  viewOf: 'cloud'
+} as any

package/src/d2/__snapshots__/generate-d2.spec.ts.snap

@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generate D2 - fakeComputedView 3 Levels 1`] = `
+"direction: down
+
+Amazon: {
+  label: "amazon"
+}
+Cloud: {
+  label: "cloud"
+
+  Backend: {
+    label: "backend"
+
+    Graphql: {
+      label: "graphql"
+    }
+    Storage: {
+      label: "storage"
+    }
+  }
+  FrontendAdminPanel: {
+    label: "adminPanel"
+  }
+  FrontendDashboard: {
+    label: "dashboard"
+  }
+}
+Customer: {
+  label: "customer"
+}
+Support: {
+  label: "support"
+}
+
+Cloud.FrontendDashboard -> Cloud.Backend.Graphql
+Cloud.FrontendAdminPanel -> Cloud.Backend.Graphql
+Cloud.Backend.Storage -> Amazon
+Cloud.Backend.Graphql -> Cloud.Backend.Storage
+Support -> Cloud.FrontendAdminPanel
+Customer -> Cloud.FrontendDashboard
+"
+`;
+
+exports[`generate D2 - fakeDiagram 1`] = `
+"direction: down
+
+Amazon: {
+  label: "amazon"
+}
+Cloud: {
+  label: "cloud"
+
+  Backend: {
+    label: "backend"
+  }
+  Frontend: {
+    label: "frontend"
+  }
+}
+Customer: {
+  label: "customer"
+}
+Support: {
+  label: "support"
+}
+
+Cloud.Frontend -> Cloud.Backend: "requests"
+Cloud.Backend -> Amazon
+Support -> Cloud.Frontend
+Customer -> Cloud.Frontend: "opens"
+"
+`;
+
+exports[`generate D2 - fakeDiagram2 1`] = `
+"direction: down
+
+Client: {
+  label: "client"
+}
+SystemBackend: {
+  label: "backend"
+}
+SystemFrontend: {
+  label: "frontend"
+}
+
+SystemFrontend -> SystemBackend: "requests"
+Client -> SystemFrontend: "opens"
+"
+`;

package/src/d2/generate-d2.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'vitest'
+import { fakeComputedView3Levels, fakeDiagram, fakeDiagram2 } from '../__mocks__/data'
+import { generateD2 } from './generate-d2'
+
+test('generate D2 - fakeDiagram', () => {
+  expect(generateD2(fakeDiagram)).toMatchSnapshot()
+})
+
+test('generate D2 - fakeDiagram2', () => {
+  expect(generateD2(fakeDiagram2)).toMatchSnapshot()
+})
+
+test('generate D2 - fakeComputedView 3 Levels', () => {
+  expect(generateD2(fakeComputedView3Levels)).toMatchSnapshot()
+})

package/src/d2/generate-d2.ts

@@ -0,0 +1,106 @@
+import type { ComputedEdge, ComputedNode, ComputedView, NodeId } from '@likec4/core'
+import { CompositeGeneratorNode, joinToNode, NL, toString } from 'langium/generate'
+import { isNullish as isNil } from 'remeda'
+
+const capitalizeFirstLetter = (value: string) => value.charAt(0).toLocaleUpperCase() + value.slice(1)
+
+const fqnName = (nodeId: string): string => nodeId.split('.').map(capitalizeFirstLetter).join('')
+
+const nodeName = (node: ComputedNode): string => {
+  return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id)
+}
+
+const d2direction = ({ autoLayout }: ComputedView) => {
+  switch (autoLayout.direction) {
+    case 'TB': {
+      return 'down'
+    }
+    case 'BT': {
+      return 'up'
+    }
+    case 'LR': {
+      return 'right'
+    }
+    case 'RL': {
+      return 'left'
+    }
+  }
+}
+
+const d2shape = ({ shape }: ComputedNode) => {
+  switch (shape) {
+    case 'queue':
+    case 'cylinder':
+    case 'rectangle':
+    case 'person': {
+      return shape
+    }
+    case 'storage': {
+      return 'stored_data' as const
+    }
+    case 'mobile':
+    case 'browser': {
+      return 'rectangle' as const
+    }
+  }
+}
+
+export function generateD2<V extends ComputedView>(view: V) {
+  const { nodes, edges } = view
+  const names = new Map<NodeId, string>()
+
+  const printNode = (node: ComputedNode, parentName?: string): CompositeGeneratorNode => {
+    const name = nodeName(node)
+    const fqnName = (parentName ? parentName + '.' : '') + name
+    names.set(node.id, fqnName)
+
+    const label = JSON.stringify(node.title)
+    const shape = d2shape(node)
+
+    return new CompositeGeneratorNode()
+      .append(name, ': {', NL)
+      .indent({
+        indentedChildren: indent =>
+          indent
+            .append('label: ', label, NL)
+            .appendIf(shape !== 'rectangle', 'shape: ', shape, NL)
+            .appendIf(
+              node.children.length > 0,
+              NL,
+              joinToNode(
+                nodes.filter(n => n.parent === node.id),
+                n => printNode(n, fqnName)
+              )
+            ),
+        indentation: 2
+      })
+      .append('}', NL)
+  }
+  //     return `${names.get(edge.source)} -> ${names.get(edge.target)}${edge.label ? ': ' + edge.label : ''}`
+  const printEdge = (edge: ComputedEdge): CompositeGeneratorNode => {
+    return new CompositeGeneratorNode()
+      .append(names.get(edge.source), ' -> ', names.get(edge.target))
+      .append(out => edge.label && out.append(': ', JSON.stringify(edge.label)))
+  }
+
+  return toString(
+    new CompositeGeneratorNode()
+      .append('direction: ', d2direction(view), NL, NL)
+      .append(
+        joinToNode(
+          nodes.filter(n => isNil(n.parent)),
+          n => printNode(n),
+          {
+            appendNewLineIfNotEmpty: true
+          }
+        )
+      )
+      .appendIf(
+        edges.length > 0,
+        NL,
+        joinToNode(edges, e => printEdge(e), {
+          appendNewLineIfNotEmpty: true
+        })
+      )
+  )
+}

package/src/d2/index.ts

@@ -0,0 +1 @@
+export * from './generate-d2'

package/src/index.ts

@@ -0,0 +1,6 @@
+export { generateD2 } from './d2/generate-d2'
+export { generateMermaid } from './mmd/generate-mmd'
+export { generateLikeC4Model } from './model/generate-likec4-model'
+export { generateReactNext } from './react-next/generate-react-next'
+export { generateReactTypes } from './react/generate-react-types'
+export { generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs } from './views-data-ts/generate-views-data'