@likec4/generators 1.31.0 → 1.32.0

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

@@ -1,2 +1,3 @@
-import type { ComputedView } from '@likec4/core';
-export declare function generateD2<V extends ComputedView>(view: V): any;
+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

@@ -38,7 +38,8 @@ const d2shape = ({ shape }) => {
     }
   }
 };
-export function generateD2(view) {
+export function generateD2(viewmodel) {
+  const view = viewmodel.$view;
   const { nodes, edges } = view;
   const names = /* @__PURE__ */ new Map();
   const printNode = (node, parentName) => {

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 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,6 +1,7 @@
 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,2 +1,3 @@
-import type { ComputedView } from '@likec4/core';
-export declare function generateMermaid<V extends ComputedView>(view: V): any;
+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

@@ -22,7 +22,8 @@ const mmdshape = ({ shape }) => {
     }
   }
 };
-export function generateMermaid(view) {
+export function generateMermaid(viewmodel) {
+  const view = viewmodel.$view;
   const { nodes, edges } = view;
   const names = /* @__PURE__ */ new Map();
   const printNode = (node, parentName) => {

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

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

package/dist/model/generate-aux.js

@@ -0,0 +1,66 @@
+import {
+  compareNatural,
+  sortNaturalByFqn
+} from "@likec4/core";
+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) {
+  return `
+import type { Aux, SpecAux } from '@likec4/core/types';
+
+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,2 +1,2 @@
-import { type LikeC4Model } from '@likec4/core';
-export declare function generateLikeC4Model(model: LikeC4Model): any;
+import type { LikeC4Model } from '@likec4/core/model';
+export declare function generateLikeC4Model(model: LikeC4Model<any>): any;

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

@@ -1,7 +1,11 @@
 import JSON5 from "json5";
 import { CompositeGeneratorNode, toString } from "langium/generate";
+import { capitalize } from "remeda";
+import { generateAux } from "./generate-aux.js";
 export function generateLikeC4Model(model) {
   const out = new CompositeGeneratorNode();
+  const aux = generateAux(model);
+  const ModelData = capitalize(model.stage) + "LikeC4ModelData";
   out.appendTemplate`
     /* prettier-ignore-start */
     /* eslint-disable */
@@ -11,17 +15,11 @@ export function generateLikeC4Model(model) {
      * DO NOT EDIT MANUALLY!
      ******************************************************************************/
 
-    import { LikeC4Model } from 'likec4/model'
+    import { LikeC4Model } from '@likec4/core/model'
+    import type { ${ModelData} } from '@likec4/core/types'
+    ${aux}
 
-    export const likeC4Model = LikeC4Model.fromDump(${JSON5.stringify(model.$model, {
-    space: 2,
-    quote: "'"
-  })})
-
-    export type LikeC4ModelTypes = typeof likeC4Model.Aux
-    export type LikeC4ElementId = LikeC4ModelTypes['Fqn']
-    export type LikeC4DeploymentId = LikeC4ModelTypes['Deployment']
-    export type LikeC4ViewId = LikeC4ModelTypes['ViewId']
+    export const likec4model: LikeC4Model<$Aux> = new LikeC4Model(<${ModelData}<$Aux>>(${JSON5.stringify(model.$data, { space: 2, quote: "'" })} as unknown))
 
     /* prettier-ignore-end */
   `;

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

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

package/dist/puml/generate-puml.js

@@ -0,0 +1,176 @@
+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 pumlColor = (color, customColorProvider, defaultColor = "#3b82f6") => {
+  switch (color) {
+    case "blue":
+    case "primary": {
+      return "#3b82f6";
+    }
+    case "amber": {
+      return "#a35829";
+    }
+    case "gray": {
+      return "#737373";
+    }
+    case "green": {
+      return "#428a4f";
+    }
+    case "indigo": {
+      return "#6366f1";
+    }
+    case "slate":
+    case "muted": {
+      return "#64748b";
+    }
+    case "red": {
+      return "#ac4d39";
+    }
+    case "sky":
+    case "secondary": {
+      return "#0284c7";
+    }
+    case null:
+    case void 0: {
+      return defaultColor;
+    }
+    default:
+      return customColorProvider(color) || color;
+  }
+};
+const pumlDirection = ({ autoLayout }) => {
+  switch (autoLayout.direction) {
+    case "TB": {
+      return "top to bottom";
+    }
+    case "BT": {
+      console.warn("Bottom to top direction is not supported. Defaulting to top to bottom.");
+      return "top to bottom";
+    }
+    case "LR": {
+      return "left to right";
+    }
+    case "RL": {
+      console.warn("Right to left direction is not supported. Defaulting to left to right.");
+      return "left to right";
+    }
+  }
+};
+const pumlShape = ({ shape }) => {
+  switch (shape) {
+    case "queue":
+    case "rectangle":
+    case "person": {
+      return shape;
+    }
+    case "storage":
+    case "cylinder": {
+      return "database";
+    }
+    case "mobile":
+    case "browser": {
+      return "rectangle";
+    }
+  }
+};
+const escapeLabel = (label) => isNil(label) ? null : JSON.stringify(label).slice(1, -1);
+export function generatePuml(viewmodel) {
+  const view = viewmodel.$view;
+  const customColorDefinitions = viewmodel.$model.specification.customColors ?? {};
+  const { nodes, edges } = view;
+  const customColors = new Map(Object.entries(customColorDefinitions));
+  const elemntColorProvider = (key) => (colorKey) => customColors.get(colorKey)?.elements[key];
+  const relationshipsColorProvider = (key) => (colorKey) => customColors.get(colorKey)?.relationships[key];
+  const names = /* @__PURE__ */ new Map();
+  const printHeader = () => {
+    return new CompositeGeneratorNode().append('title "', view.title || view.id, '"', NL).append(pumlDirection(view), " direction", NL);
+  };
+  const printTheme = () => {
+    return new CompositeGeneratorNode().append("hide stereotype", NL).append("skinparam ranksep ", "60", NL).append("skinparam nodesep ", "30", NL).append("skinparam {", NL).indent({
+      indentedChildren: (indent) => indent.append("arrowFontSize ", "10", NL).append("defaultTextAlignment ", "center", NL).append("wrapWidth ", "200", NL).append("maxMessageSize ", "100", NL).append("shadowing ", "false", NL),
+      indentation: 2
+    }).append("}", NL);
+  };
+  const printStereotypes = (node) => {
+    const shape = pumlShape(node);
+    const fqn = fqnName(node.id);
+    return new CompositeGeneratorNode().append("skinparam ", shape, "<<", fqn, ">>", "{", NL).indent({
+      indentedChildren: (indent) => indent.append("BackgroundColor ", pumlColor(node.color, elemntColorProvider("fill")), NL).append(
+        "FontColor ",
+        customColors.has(node.color) ? pumlColor(node.color, elemntColorProvider("hiContrast")) : "#FFFFFF",
+        NL
+      ).append("BorderColor ", pumlColor(node.color, elemntColorProvider("stroke")), NL),
+      indentation: 2
+    }).append("}", NL);
+  };
+  const printNode = (node) => {
+    const shape = pumlShape(node);
+    const fqn = fqnName(node.id);
+    const label = escapeLabel(node.title) || nodeName(node);
+    const tech = escapeLabel(node.technology);
+    names.set(node.id, fqn);
+    return new CompositeGeneratorNode().append(shape, " ").append('"').append("==", label).appendIf(!!tech, "\\n", "<size:10>[", tech, "]</size>").appendIf(!!node.description, "\\n\\n", escapeLabel(node.description)).append('"', " <<", fqn, ">> ", "as ", fqn, NL);
+  };
+  const printBoundary = (node) => {
+    const label = escapeLabel(node.title) || nodeName(node);
+    const fqn = fqnName(node.id);
+    names.set(node.id, fqn);
+    return new CompositeGeneratorNode().append('rectangle "', label, '" <<', fqn, ">> as ", fqn, " {", NL).indent({
+      indentedChildren: (indent) => indent.append(
+        "skinparam ",
+        "RectangleBorderColor<<",
+        fqn,
+        ">> ",
+        pumlColor(node.color, elemntColorProvider("fill")),
+        NL
+      ).append(
+        "skinparam ",
+        "RectangleFontColor<<",
+        fqn,
+        ">> ",
+        pumlColor(node.color, elemntColorProvider("fill")),
+        NL
+      ).append("skinparam ", "RectangleBorderStyle<<", fqn, ">> ", "dashed", NL, NL).append(joinToNode(
+        nodes.filter((n) => n.parent === node.id),
+        (c) => c.children.length > 0 ? printBoundary(c) : printNode(c)
+      )),
+      indentation: 2
+    }).append("}", NL);
+  };
+  const printEdge = (edge) => {
+    const tech = escapeLabel(edge.technology) || "";
+    const label = escapeLabel(edge.label) || "";
+    const color = pumlColor(edge.color, relationshipsColorProvider("lineColor"), "#777777");
+    const colorTag = (color2) => `<color:${color2}>`;
+    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);
+  };
+  return toString(
+    new CompositeGeneratorNode().append("@startuml", NL).append(printHeader(), NL).append(printTheme(), NL).append(
+      joinToNode(
+        nodes.filter((n) => n.children.length == 0),
+        (n) => printStereotypes(n),
+        {
+          appendNewLineIfNotEmpty: true
+        }
+      )
+    ).append(
+      joinToNode(
+        nodes.filter((n) => isNil(n.parent)),
+        (n) => n.children.length > 0 ? printBoundary(n) : printNode(n),
+        {
+          appendNewLineIfNotEmpty: true
+        }
+      )
+    ).appendIf(
+      edges.length > 0,
+      NL,
+      joinToNode(edges, (e) => printEdge(e), {
+        appendNewLineIfNotEmpty: true
+      })
+    ).append(`@enduml`, NL)
+  );
+}

package/dist/puml/index.d.ts

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

package/dist/puml/index.js

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

package/dist/react/generate-react-types.d.ts

@@ -1,2 +1,2 @@
-import type { LikeC4Model } from '@likec4/core';
-export declare function generateReactTypes(model: LikeC4Model.Layouted): string;
+import type { AnyLikeC4Model } from '@likec4/core/model';
+export declare function generateReactTypes(model: AnyLikeC4Model): string;

package/dist/react/generate-react-types.js

@@ -1,41 +1,8 @@
-import { compareNatural, sortNaturalByFqn } from "@likec4/core";
-function toUnion(unionset) {
-  if (unionset instanceof Set) {
-    unionset = [...unionset].sort(compareNatural);
-  }
-  const union = unionset.map((v) => `  | ${JSON.stringify(v)}`);
-  if (union.length === 0) {
-    union.push("  never");
-  }
-  return union.join("\n") + ";";
-}
+import { invariant } from "@likec4/core";
+import { generateAux } from "../model/generate-aux.js";
 export function generateReactTypes(model) {
-  const {
-    fqns,
-    tags,
-    kinds
-  } = sortNaturalByFqn([...model.elements()]).reduce((acc, d) => {
-    acc.fqns.push(d.id);
-    acc.kinds.add(d.kind);
-    acc.tags.push(...d.tags);
-    return acc;
-  }, {
-    fqns: [],
-    kinds: /* @__PURE__ */ new Set(),
-    tags: []
-  });
-  const deploymentFqns = sortNaturalByFqn([...model.deployment.elements()]).map((e) => e.id);
-  const {
-    viewIds
-  } = [...model.views()].reduce((acc, d) => {
-    acc.viewIds.add(d.id);
-    acc.tags.push(...d.tags);
-    acc.tags.push(...d.includedTags);
-    return acc;
-  }, {
-    viewIds: /* @__PURE__ */ new Set(),
-    tags
-  });
+  invariant(!model.isParsed(), "can not generate react types for parsed model");
+  const aux = generateAux(model);
   return `
 /* prettier-ignore-start */
 /* eslint-disable */
@@ -47,39 +14,20 @@ export function generateReactTypes(model) {
 
 import type { PropsWithChildren } from 'react'
 import type { JSX } from 'react/jsx-runtime'
-import type {
-  DiagramView,
-  LikeC4Model as GenericLikeC4Model,
-} from 'likec4/model'
+import type { LikeC4Model } from '@likec4/core/model'
+import type { DiagramView } from '@likec4/core/types'
 import type {
   LikeC4ViewProps as GenericLikeC4ViewProps,
   ReactLikeC4Props as GenericReactLikeC4Props
 } from 'likec4/react'
 
-type LikeC4ElementId =
-${toUnion(fqns)}
-
-type LikeC4DeploymentId =
-${toUnion(deploymentFqns)}
-
-type LikeC4ViewId =
-${toUnion(viewIds)}
-
-type LikeC4ElementKind =
-${toUnion(kinds)}
-
-type LikeC4Tag =
-${toUnion(new Set(tags))}
-
-declare function isLikeC4ViewId(value: unknown): value is LikeC4ViewId;
+${aux}
 
-type Aux = GenericLikeC4Model.Typed<LikeC4ElementId, LikeC4DeploymentId, LikeC4ViewId, DiagramView<LikeC4ViewId>>;
-type LikeC4Model = GenericLikeC4Model<Aux>;
-type LikeC4ViewModel = GenericLikeC4Model.View<Aux>;
+declare function isLikeC4ViewId(value: unknown): value is $ViewId;
 
-declare const likeC4Model: LikeC4Model;
-declare function useLikeC4Model(): LikeC4Model;
-declare function useLikeC4View(viewId: LikeC4ViewId): DiagramView<LikeC4ViewId>;
+declare const likec4model: LikeC4Model<$Aux>;
+declare function useLikeC4Model(): LikeC4Model<$Aux>;
+declare function useLikeC4View(viewId: $ViewId): DiagramView<$Aux>;
 
 declare function LikeC4ModelProvider(props: PropsWithChildren): JSX.Element;
 
@@ -92,26 +40,19 @@ type IconRendererProps = {
 }
 declare function RenderIcon(props: IconRendererProps): JSX.Element;
 
-type LikeC4ViewProps = GenericLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>;
+type LikeC4ViewProps = GenericLikeC4ViewProps<$Aux>;
 declare function LikeC4View({viewId, ...props}: LikeC4ViewProps): JSX.Element;
 
-type ReactLikeC4Props = GenericReactLikeC4Props<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
+type ReactLikeC4Props = GenericReactLikeC4Props<$Aux>
 declare function ReactLikeC4({viewId, ...props}: ReactLikeC4Props): JSX.Element;
 
 export {
-  type LikeC4ElementId,
-  type LikeC4DeploymentId,
-  type LikeC4ViewId,
-  type LikeC4Tag,
-  type LikeC4ElementKind,
   type LikeC4ViewProps,
   type ReactLikeC4Props,
-  type LikeC4Model,
   isLikeC4ViewId,
   useLikeC4Model,
   useLikeC4View,
-  useLikeC4ViewModel,
-  likeC4Model,
+  likec4model,
   LikeC4ModelProvider,
   LikeC4View,
   RenderIcon,

package/dist/views-data-ts/generate-views-data.d.ts

@@ -1,4 +1,13 @@
 import type { DiagramView } from '@likec4/core';
+/**
+ * Generate *.js file with views data
+ */
 export declare function generateViewsDataJs(diagrams: Iterable<DiagramView>): any;
+/**
+ * Generate *.ts file with views data
+ */
 export declare function generateViewsDataTs(diagrams: Iterable<DiagramView>): any;
+/**
+ * Generate *.d.ts
+ */
 export declare function generateViewsDataDTs(diagrams: Iterable<DiagramView>): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/generators",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -33,15 +33,15 @@
   "dependencies": {
     "json5": "^2.2.3",
     "langium": "3.5.0",
-    "remeda": "^2.21.3",
-    "@likec4/core": "1.31.0"
+    "remeda": "^2.23.0",
+    "@likec4/core": "1.32.0"
   },
   "devDependencies": {
-    "@types/node": "^20.17.30",
+    "@types/node": "^20.19.0",
     "typescript": "^5.8.3",
     "unbuild": "^3.5.0",
-    "vitest": "^3.1.2",
-    "@likec4/tsconfig": "1.31.0"
+    "vitest": "^3.2.3",
+    "@likec4/tsconfig": "1.32.0"
   },
   "scripts": {
     "typecheck": "tsc -b --verbose",