@likec4/generators 1.46.4 → 1.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/generators",
-  "version": "1.46.4",
+  "version": "1.48.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -9,9 +9,10 @@
   "files": [
     "dist",
     "src",
-    "!**/*.spec.ts",
-    "!**/__mocks__/*",
-    "!**/__snapshots__/*",
+    "**/package.json",
+    "!**/__*/**",
+    "!**/*.spec.*",
+    "!**/*.snap",
     "!**/*.map"
   ],
   "repository": {
@@ -25,9 +26,9 @@
     ".": {
       "sources": "./src/index.ts",
       "default": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.mts",
+        "import": "./dist/index.mjs",
+        "default": "./dist/index.mjs"
       }
     }
   },
@@ -36,27 +37,29 @@
     "access": "public"
   },
   "dependencies": {
+    "remeda": "^2.32.0",
     "json5": "^2.2.3",
     "langium": "3.5.0",
-    "remeda": "^2.32.0",
-    "@likec4/core": "1.46.4"
+    "@likec4/core": "1.48.0",
+    "@likec4/log": "1.48.0"
   },
   "devDependencies": {
-    "@types/node": "~22.19.3",
+    "@types/node": "~22.19.7",
     "typescript": "5.9.3",
-    "unbuild": "3.5.0",
-    "vitest": "4.0.16",
-    "@likec4/tsconfig": "1.46.1",
+    "obuild": "^0.4.20",
+    "vitest": "4.0.18",
+    "@likec4/tsconfig": "1.48.0",
     "@likec4/devops": "1.42.0"
   },
   "scripts": {
     "typecheck": "tsc -b --verbose",
-    "build": "unbuild",
+    "build": "obuild",
     "lint": "run -T eslint src/ --fix",
     "clean": "likec4ops clean",
+    "pack": "pnpm pack",
     "test": "vitest run --no-isolate",
     "test:watch": "vitest"
   },
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js"
+  "types": "dist/index.d.mts",
+  "module": "dist/index.mjs"
 }

package/src/d2/generate-d2.ts

@@ -36,12 +36,16 @@ const d2shape = ({ shape }: Node) => {
     case 'queue':
     case 'cylinder':
     case 'rectangle':
-    case 'person': {
+    case 'document': {
       return shape
     }
+    case 'person': {
+      return 'c4-person' as const
+    }
     case 'storage': {
       return 'stored_data' as const
     }
+    case 'bucket':
     case 'mobile':
     case 'browser': {
       return 'rectangle' as const

package/src/mmd/generate-mmd.ts

@@ -1,3 +1,4 @@
+import { nonexhaustive } from '@likec4/core'
 import type { LikeC4ViewModel } from '@likec4/core/model'
 import type { aux, NodeId, ProcessedView as AnyView } from '@likec4/core/types'
 import { CompositeGeneratorNode, joinToNode, NL, toString } from 'langium/generate'
@@ -14,21 +15,38 @@ const nodeName = (node: Node): string => {
   return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id)
 }
 
-const mmdshape = ({ shape }: Node): [start: string, end: string] => {
+const toSingleQuotes = (str: string): string => str.replace(/\\?"/g, `'`)
+
+const mmdshape = ({ shape, title }: Node): string => {
+  const label = `label: ${JSON.stringify(title)}`
   switch (shape) {
-    case 'queue':
-    case 'cylinder':
-      return ['[(', ')]']
+    case 'queue': {
+      return `@{ shape: horizontal-cylinder, ${label} }`
+    }
     case 'person': {
-      return ['[fa:fa-user ', ']']
+      return `@{ icon: "fa:user", shape: rounded, ${label} }`
+    }
+    case 'storage': {
+      return `@{ shape: disk, ${label} }`
+    }
+    case 'cylinder': {
+      return `@{ shape: cylinder, ${label} }`
     }
-    case 'storage':
-      return ['([', '])']
     case 'mobile':
-    case 'browser':
+    case 'browser': {
+      return `@{ shape: rounded, ${label} }`
+    }
+    case 'bucket': {
+      return `@{ shape: trap-t, ${label} }`
+    }
     case 'rectangle': {
-      return ['[', ']']
+      return `@{ shape: rectangle, ${label} }`
     }
+    case 'document': {
+      return `@{ shape: doc, ${label} }`
+    }
+    default:
+      nonexhaustive(shape)
   }
 }
 
@@ -42,13 +60,11 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
     const fqnName = (parentName ? parentName + '.' : '') + name
     names.set(node.id, fqnName)
 
-    const label = node.title.replaceAll('\n', '\\n')
-    const shape = mmdshape(node)
-
     const baseNode = new CompositeGeneratorNode()
     if (node.children.length > 0) {
+      const label = toSingleQuotes(node.title)
       baseNode
-        .append('subgraph ', fqnName, '[', JSON.stringify(node.title), ']', NL)
+        .append('subgraph ', fqnName, '["`', label, '`"]', NL)
         .indent({
           indentedChildren: [
             joinToNode(
@@ -63,7 +79,7 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
         })
         .append('end', NL)
     } else {
-      baseNode.append(fqnName, shape[0], label, shape[1])
+      baseNode.append(fqnName, mmdshape(node))
     }
     return baseNode
   }
@@ -72,7 +88,7 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
     return new CompositeGeneratorNode().append(
       names.get(edge.source),
       ' -.',
-      edge.label ? ' "' + edge.label.replaceAll('\n', '\\n') + '" .-' : '-',
+      edge.label ? ' "`' + toSingleQuotes(edge.label) + '`" .-' : '-',
       '> ',
       names.get(edge.target),
     )
@@ -80,11 +96,10 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
 
   return toString(
     new CompositeGeneratorNode()
-      .appendIf(
-        view.title !== null && view.title.length > 0,
+      .append(
         '---',
         NL,
-        `title: ${JSON.stringify(view.title)}`,
+        `title: ${JSON.stringify(toSingleQuotes(viewmodel.titleOrId))}`,
         NL,
         '---',
         NL,

package/src/puml/generate-puml.ts

@@ -1,3 +1,4 @@
+import { nonexhaustive } from '@likec4/core'
 import type { LikeC4ViewModel } from '@likec4/core/model'
 import type {
   aux,
@@ -13,7 +14,7 @@ import type {
 } from '@likec4/core/types'
 import { RichText } from '@likec4/core/types'
 import { CompositeGeneratorNode, joinToNode, NL, toString } from 'langium/generate'
-import { isNullish as isNil } from 'remeda'
+import { isEmptyish, isNullish as isNil } from 'remeda'
 
 const capitalizeFirstLetter = (value: string) => value.charAt(0).toLocaleUpperCase() + value.slice(1)
 
@@ -67,14 +68,21 @@ const pumlShape = ({ shape }: ComputedNode) => {
     case 'cylinder': {
       return 'database' as const
     }
+    case 'document':
     case 'mobile':
+    case 'bucket':
     case 'browser': {
       return 'rectangle' as const
     }
+    default:
+      nonexhaustive(shape)
   }
 }
 
-const escapeLabel = (label: string | null | undefined) => isNil(label) ? null : JSON.stringify(label).slice(1, -1)
+const escapeLabel = (label: string | null | undefined) =>
+  isEmptyish(label) ? null : JSON.stringify(label)
+    .slice(1, -1)
+    .replace(/\\"/g, '"') // Unescape double quotes - PUML does not support escaped double quotes
 
 export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
   const view = viewmodel.$view
@@ -90,7 +98,7 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
 
   const printHeader = () => {
     return new CompositeGeneratorNode()
-      .append('title "', view.title || view.id, '"', NL)
+      .append('title "', viewmodel.titleOrId, '"', NL)
       .append(pumlDirection(view), ' direction', NL)
   }
 
@@ -147,8 +155,8 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
       .append(shape, ' ')
       .append('"')
       .append('==', label)
-      .appendIf(!!tech, '\\n', '<size:10>[', tech!, ']</size>')
-      .appendIf(description.nonEmpty, '\\n\\n', escapeLabel(description.text)!)
+      .appendIf(!!tech, `\\n<size:10>[`, tech!, ']</size>')
+      .appendIf(description.nonEmpty, `\\n\\n`, escapeLabel(description.text)!)
       .append('"', ' <<', fqn, '>> ', 'as ', fqn, NL)
   }
 
@@ -189,20 +197,37 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
   }
 
   const printEdge = (edge: ComputedEdge): CompositeGeneratorNode => {
-    const tech = escapeLabel(edge.technology) || ''
-    const label = escapeLabel(edge.label) || ''
+    const tech = edge.technology || ''
+    const label = edge.label || tech
     const color = pumlColor(edge.color, relationshipsColorProvider('line'), '#777777')
 
-    const colorTag = (color: string) => `<color:${color}>`
+    const withColor = (text: string) => `<color:${color}>${text.replaceAll('"', `'`)}`
 
-    return new CompositeGeneratorNode()
-      .append(names.get(edge.source), ' .[', color, ',thickness=2].> ', names.get(edge.target))
-      .appendIf(!!(label || tech), ' : "', colorTag(color))
-      .appendIf(!!label, label, colorTag(color))
-      .appendIf(!!(label && tech), '\\n')
-      .appendIf(!!tech, colorTag(color), '<size:8>[', tech, ']</size>')
-      .appendIf(!!(label || tech), '"')
-      .append(NL)
+    const out = new CompositeGeneratorNode()
+      .append(
+        names.get(edge.source),
+        ' .[',
+        color,
+        ',thickness=2].> ',
+        names.get(edge.target),
+      )
+
+    if (label || tech) {
+      out.append(
+        ' : ',
+        // Prepend color to each line
+        label
+          .split('\n')
+          .map(l => isEmptyish(l) ? l : withColor(l))
+          .join('\\n'),
+      )
+      // Append technology if it exists and is different from the label
+      if (tech && tech !== label) {
+        out.append('\\n<size:8>[', withColor(tech), ']</size>')
+      }
+    }
+
+    return out.append(NL)
   }
 
   return toString(

package/src/puml/index.ts

@@ -1 +1 @@
-export * from './generate-puml'
+export { generatePuml } from './generate-puml'

package/src/react/generate-react-types.ts

@@ -19,7 +19,7 @@ export function generateReactTypes(model: AnyLikeC4Model, options: { useCorePack
 import type { PropsWithChildren } from 'react'
 import type { JSX } from 'react/jsx-runtime'
 import type { LikeC4Model } from '${useCorePackage ? '@likec4/core' : 'likec4'}/model'
-import type { DiagramView } from '${useCorePackage ? '@likec4/core/types' : 'likec4/model'}'
+import type { LayoutedView } from '${useCorePackage ? '@likec4/core/types' : 'likec4/model'}'
 import type {
   LikeC4ViewProps as GenericLikeC4ViewProps,
   ReactLikeC4Props as GenericReactLikeC4Props
@@ -31,7 +31,7 @@ declare function isLikeC4ViewId(value: unknown): value is $ViewId;
 
 declare const likec4model: LikeC4Model<$Aux>;
 declare function useLikeC4Model(): LikeC4Model<$Aux>;
-declare function useLikeC4View(viewId: $ViewId): DiagramView<$Aux>;
+declare function useLikeC4View(viewId: $ViewId): LayoutedView<$Aux>;
 
 declare function LikeC4ModelProvider(props: PropsWithChildren): JSX.Element;
 

package/dist/d2/generate-d2.d.ts

@@ -1,3 +0,0 @@
-import type { LikeC4ViewModel } from '@likec4/core/model';
-import type { aux } from '@likec4/core/types';
-export declare function generateD2(viewmodel: LikeC4ViewModel<aux.Unknown>): any;

package/dist/d2/generate-d2.js

@@ -1,83 +0,0 @@
-import { CompositeGeneratorNode, joinToNode, NL, toString } from "langium/generate";
-import { isNullish as isNil } from "remeda";
-const capitalizeFirstLetter = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
-const fqnName = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter).join("");
-const nodeName = (node) => {
-  return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
-};
-const d2direction = ({ autoLayout }) => {
-  switch (autoLayout.direction) {
-    case "TB": {
-      return "down";
-    }
-    case "BT": {
-      return "up";
-    }
-    case "LR": {
-      return "right";
-    }
-    case "RL": {
-      return "left";
-    }
-  }
-};
-const d2shape = ({ shape }) => {
-  switch (shape) {
-    case "queue":
-    case "cylinder":
-    case "rectangle":
-    case "person": {
-      return shape;
-    }
-    case "storage": {
-      return "stored_data";
-    }
-    case "mobile":
-    case "browser": {
-      return "rectangle";
-    }
-  }
-};
-export function generateD2(viewmodel) {
-  const view = viewmodel.$view;
-  const { nodes, edges } = view;
-  const names = /* @__PURE__ */ new Map();
-  const printNode = (node, parentName) => {
-    const name = nodeName(node);
-    const fqnName2 = (parentName ? parentName + "." : "") + name;
-    names.set(node.id, fqnName2);
-    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, fqnName2)
-        )
-      ),
-      indentation: 2
-    }).append("}", NL);
-  };
-  const printEdge = (edge) => {
-    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/dist/d2/index.d.ts

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

package/dist/d2/index.js

@@ -1 +0,0 @@
-export * from "./generate-d2.js";

package/dist/index.d.ts

@@ -1,7 +0,0 @@
-export { generateD2 } from './d2/generate-d2';
-export { generateMermaid } from './mmd/generate-mmd';
-export { generateLikeC4Model } from './model/generate-likec4-model';
-export { generatePuml } from './puml/generate-puml';
-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';

package/dist/index.js

@@ -1,7 +0,0 @@
-export { generateD2 } from "./d2/generate-d2.js";
-export { generateMermaid } from "./mmd/generate-mmd.js";
-export { generateLikeC4Model } from "./model/generate-likec4-model.js";
-export { generatePuml } from "./puml/generate-puml.js";
-export { generateReactNext } from "./react-next/generate-react-next.js";
-export { generateReactTypes } from "./react/generate-react-types.js";
-export { generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs } from "./views-data-ts/generate-views-data.js";

package/dist/mmd/generate-mmd.d.ts

@@ -1,3 +0,0 @@
-import type { LikeC4ViewModel } from '@likec4/core/model';
-import type { aux } from '@likec4/core/types';
-export declare function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>): any;

package/dist/mmd/generate-mmd.js

@@ -1,92 +0,0 @@
-import { CompositeGeneratorNode, joinToNode, NL, toString } from "langium/generate";
-import { isNullish as isNil } from "remeda";
-const capitalizeFirstLetter = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
-const fqnName = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter).join("");
-const nodeName = (node) => {
-  return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
-};
-const mmdshape = ({ shape }) => {
-  switch (shape) {
-    case "queue":
-    case "cylinder":
-      return ["[(", ")]"];
-    case "person": {
-      return ["[fa:fa-user ", "]"];
-    }
-    case "storage":
-      return ["([", "])"];
-    case "mobile":
-    case "browser":
-    case "rectangle": {
-      return ["[", "]"];
-    }
-  }
-};
-export function generateMermaid(viewmodel) {
-  const view = viewmodel.$view;
-  const { nodes, edges } = view;
-  const names = /* @__PURE__ */ new Map();
-  const printNode = (node, parentName) => {
-    const name = nodeName(node);
-    const fqnName2 = (parentName ? parentName + "." : "") + name;
-    names.set(node.id, fqnName2);
-    const label = node.title.replaceAll("\n", "\\n");
-    const shape = mmdshape(node);
-    const baseNode = new CompositeGeneratorNode();
-    if (node.children.length > 0) {
-      baseNode.append("subgraph ", fqnName2, "[", JSON.stringify(node.title), "]", NL).indent({
-        indentedChildren: [
-          joinToNode(
-            nodes.filter((n) => n.parent === node.id),
-            (n) => printNode(n, fqnName2),
-            {
-              appendNewLineIfNotEmpty: true
-            }
-          )
-        ],
-        indentation: 2
-      }).append("end", NL);
-    } else {
-      baseNode.append(fqnName2, shape[0], label, shape[1]);
-    }
-    return baseNode;
-  };
-  const printEdge = (edge) => {
-    return new CompositeGeneratorNode().append(
-      names.get(edge.source),
-      " -.",
-      edge.label ? ' "' + edge.label.replaceAll("\n", "\\n") + '" .-' : "-",
-      "> ",
-      names.get(edge.target)
-    );
-  };
-  return toString(
-    new CompositeGeneratorNode().appendIf(
-      view.title !== null && view.title.length > 0,
-      "---",
-      NL,
-      `title: ${JSON.stringify(view.title)}`,
-      NL,
-      "---",
-      NL
-    ).append("graph ", view.autoLayout.direction, NL).indent({
-      indentedChildren: (indent) => {
-        indent.append(
-          joinToNode(
-            nodes.filter((n) => isNil(n.parent)),
-            (n) => printNode(n),
-            {
-              appendNewLineIfNotEmpty: true
-            }
-          )
-        ).appendIf(
-          edges.length > 0,
-          joinToNode(edges, (e) => printEdge(e), {
-            appendNewLineIfNotEmpty: true
-          })
-        );
-      },
-      indentation: 2
-    })
-  );
-}

package/dist/mmd/index.d.ts

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

package/dist/mmd/index.js

@@ -1 +0,0 @@
-export * from "./generate-mmd.js";

package/dist/model/generate-aux.d.ts

@@ -1,4 +0,0 @@
-import type { AnyLikeC4Model } from '@likec4/core/model';
-export declare function generateAux(model: AnyLikeC4Model, options?: {
-    useCorePackage?: boolean;
-}): string;

package/dist/model/generate-aux.js

@@ -1,67 +0,0 @@
-import {
-  compareNatural,
-  sortNaturalByFqn
-} from "@likec4/core/utils";
-import { keys, map, pipe, values } from "remeda";
-function toUnion(elements) {
-  if (elements.length === 0) {
-    return "never";
-  }
-  let union = elements.sort(compareNatural).map((v) => `  | ${JSON.stringify(v)}`);
-  return union.join("\n").trimStart();
-}
-function elementIdToUnion(_elements) {
-  const elements = values(_elements);
-  if (elements.length === 0) {
-    return "never";
-  }
-  let union = pipe(
-    elements,
-    sortNaturalByFqn,
-    map((v) => `  | ${JSON.stringify(v.id)}`)
-  );
-  return union.join("\n").trimStart();
-}
-export function generateAux(model, options = {}) {
-  const { useCorePackage = false } = options;
-  return `
-import type { Aux, SpecAux } from '${useCorePackage ? "@likec4/core/types" : "likec4/model"}';
-
-export type $Specs = SpecAux<
-  // Element kinds
-  ${toUnion(keys(model.specification.elements))},
-  // Deployment kinds
-  ${toUnion(keys(model.specification.deployments ?? {}))},
-  // Relationship kinds
-  ${toUnion(keys(model.specification.relationships ?? {}))},
-  // Tags
-  ${toUnion(keys(model.specification.tags ?? {}))},
-  // Metadata keys
-  ${toUnion(model.specification.metadataKeys ?? [])}
->
-
-export type $Aux = Aux<
-  ${JSON.stringify(model.stage)},
-  // Elements
-  ${elementIdToUnion(model.$data.elements)},
-  // Deployments
-  ${elementIdToUnion(model.$data.deployments.elements)},
-  // Views
-  ${toUnion(keys(model.$data.views))},
-  // Project ID
-  ${JSON.stringify(model.projectId)},
-  $Specs
->
-
-export type $ElementId = $Aux['ElementId']
-export type $DeploymentId = $Aux['DeploymentId']
-export type $ViewId = $Aux['ViewId']
-
-export type $ElementKind = $Aux['ElementKind']
-export type $RelationKind = $Aux['RelationKind']
-export type $DeploymentKind = $Aux['DeploymentKind']
-export type $Tag = $Aux['Tag']
-export type $Tags = readonly $Aux['Tag'][]
-export type $MetadataKey = $Aux['MetadataKey']
-`.trimStart();
-}

package/dist/model/generate-likec4-model.d.ts

@@ -1,4 +0,0 @@
-import type { LikeC4Model } from '@likec4/core/model';
-export declare function generateLikeC4Model(model: LikeC4Model<any>, options?: {
-    useCorePackage?: boolean;
-}): string;

package/dist/model/generate-likec4-model.js

@@ -1,22 +0,0 @@
-import JSON5 from "json5";
-import { generateAux } from "./generate-aux.js";
-export function generateLikeC4Model(model, options = {}) {
-  const aux = generateAux(model, options);
-  const { useCorePackage = false } = options;
-  return `
-/* prettier-ignore-start */
-/* eslint-disable */
-
-/******************************************************************************
- * This file was generated
- * DO NOT EDIT MANUALLY!
- ******************************************************************************/
-
-import { LikeC4Model } from '${useCorePackage ? "@likec4/core" : "likec4"}/model'
-${aux}
-
-export const likec4model: LikeC4Model<$Aux> = new LikeC4Model(${JSON5.stringify(model.$data, { space: 2, quote: "'" })} as any) as any
-
-/* prettier-ignore-end */
-`.trimStart();
-}

package/dist/model/generate-likec4.d.ts

@@ -1,2 +0,0 @@
-import type { ParsedLikeC4ModelData } from '@likec4/core';
-export declare function generateLikeC4(_model: ParsedLikeC4ModelData): void;

package/dist/model/generate-likec4.js

@@ -1,2 +0,0 @@
-export function generateLikeC4(_model) {
-}

package/dist/puml/generate-puml.d.ts

@@ -1,3 +0,0 @@
-import type { LikeC4ViewModel } from '@likec4/core/model';
-import type { aux } from '@likec4/core/types';
-export declare function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>): any;