@likec4/generators 1.31.0 → 1.32.1

package/src/react/__snapshots__/valid-code.snap

@@ -0,0 +1,111 @@
+/* prettier-ignore-start */
+/* eslint-disable */
+
+/******************************************************************************
+ * This file was generated
+ * DO NOT EDIT MANUALLY!
+ ******************************************************************************/
+
+import type { PropsWithChildren } from 'react'
+import type { JSX } from 'react/jsx-runtime'
+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'
+
+import type { Aux, SpecAux } from '@likec4/core/types';
+
+export type $Specs = SpecAux<
+  // Element kinds
+  | "actor"
+  | "component"
+  | "system",
+  // Deployment kinds
+  | "env"
+  | "vm",
+  // Relationship kinds
+  | "dislike"
+  | "like",
+  // Tags
+  | "tag1"
+  | "tag2",
+  // Metadata keys
+  | "key1"
+  | "key2"
+>
+
+export type $Aux = Aux<
+  "computed",
+  // Elements
+  | "alice"
+  | "bob"
+  | "cloud"
+  | "cloud.backend"
+  | "cloud.frontend"
+  | "cloud.backend.api"
+  | "cloud.backend.db",
+  // Deployments
+  | "dev"
+  | "prod"
+  | "dev.api"
+  | "dev.vm1"
+  | "prod.vm1"
+  | "prod.vm2",
+  // Views
+  | "view1"
+  | "view2",
+  // Project ID
+  "from-builder",
+  $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']
+
+
+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 LikeC4ModelProvider(props: PropsWithChildren): JSX.Element;
+
+type IconRendererProps = {
+  node: {
+    id: string
+    title: string
+    icon?: string | undefined
+  }
+}
+declare function RenderIcon(props: IconRendererProps): JSX.Element;
+
+type LikeC4ViewProps = GenericLikeC4ViewProps<$Aux>;
+declare function LikeC4View({viewId, ...props}: LikeC4ViewProps): JSX.Element;
+
+type ReactLikeC4Props = GenericReactLikeC4Props<$Aux>
+declare function ReactLikeC4({viewId, ...props}: ReactLikeC4Props): JSX.Element;
+
+export {
+  type LikeC4ViewProps,
+  type ReactLikeC4Props,
+  isLikeC4ViewId,
+  useLikeC4Model,
+  useLikeC4View,
+  likec4model,
+  LikeC4ModelProvider,
+  LikeC4View,
+  RenderIcon,
+  ReactLikeC4
+}
+/* prettier-ignore-end */

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

@@ -0,0 +1,67 @@
+import { Builder } from '@likec4/core/builder'
+import { describe, it } from 'vitest'
+import { generateReactTypes } from './generate-react-types'
+
+describe('generateReactTypes', () => {
+  const m = Builder
+    .specification({
+      elements: {
+        actor: {},
+        system: {},
+        component: {},
+      },
+      deployments: {
+        env: {},
+        vm: {},
+      },
+      relationships: {
+        like: {},
+        dislike: {},
+      },
+      tags: {
+        tag1: {},
+        tag2: {},
+      },
+      metadataKeys: ['key1', 'key2'],
+    })
+    .model(({ actor, system, component, relTo }, _) =>
+      _(
+        actor('alice'),
+        actor('bob'),
+        system('cloud').with(
+          component('backend').with(
+            component('api'),
+            component('db', {
+              tags: ['tag2'],
+            }),
+          ),
+          component('frontend'),
+        ),
+      )
+    )
+    .deployment(({ env, vm, instanceOf }, _) =>
+      _(
+        env('prod').with(
+          vm('vm1'),
+          vm('vm2'),
+        ),
+        env('dev').with(
+          vm('vm1'),
+          instanceOf('cloud.backend.api'),
+        ),
+      )
+    )
+    // Test Element View
+    .views(({ view, $include }, _) =>
+      _(
+        // rules inside
+        view('view1', $include('cloud.backend')),
+        view('view2', $include('cloud.*')),
+      )
+    )
+
+  it('generate valid code', async ({ expect }) => {
+    const aux = generateReactTypes(m.toLikeC4Model())
+    await expect(aux).toMatchFileSnapshot('__snapshots__/valid-code.snap')
+  })
+})

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

@@ -1,45 +1,10 @@
-import type { LikeC4Model } from '@likec4/core'
-import { compareNatural, sortNaturalByFqn } from '@likec4/core'
+import { invariant } from '@likec4/core'
+import type { AnyLikeC4Model } from '@likec4/core/model'
+import { generateAux } from '../model/generate-aux'
 
-function toUnion(unionset: string[] | Set<string>) {
-  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') + ';'
-}
-
-export function generateReactTypes(model: LikeC4Model.Layouted) {
-  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: [] as string[],
-    kinds: new Set<string>(),
-    tags: [] as string[],
-  })
-  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: new Set<string>(),
-    tags,
-  })
+export function generateReactTypes(model: AnyLikeC4Model) {
+  invariant(!model.isParsed(), 'can not generate react types for parsed model')
+  const aux = generateAux(model)
 
   return `
 /* prettier-ignore-start */
@@ -52,39 +17,20 @@ export function generateReactTypes(model: LikeC4Model.Layouted) {
 
 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;
 
@@ -97,26 +43,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/src/views-data-ts/generate-views-data.ts

@@ -3,6 +3,9 @@ import JSON5 from 'json5'
 import { CompositeGeneratorNode, expandToNode, joinToNode, NL, toString } from 'langium/generate'
 import { generateViewId } from './generateViewId'
 
+/**
+ * Generate *.js file with views data
+ */
 export function generateViewsDataJs(diagrams: Iterable<DiagramView>) {
   const views = Array.from(diagrams)
   const out = new CompositeGeneratorNode()
@@ -33,11 +36,11 @@ export function generateViewsDataJs(diagrams: Iterable<DiagramView>) {
             view => expandToNode`${JSON5.stringify(view.id)}: ${JSON5.stringify(view)}`,
             {
               separator: ',',
-              appendNewLineIfNotEmpty: true
-            }
-          )
+              appendNewLineIfNotEmpty: true,
+            },
+          ),
         )
-      }
+      },
     })
     .append('}', NL, NL).appendTemplate`
 
@@ -54,6 +57,9 @@ export function generateViewsDataJs(diagrams: Iterable<DiagramView>) {
   return toString(out)
 }
 
+/**
+ * Generate *.ts file with views data
+ */
 export function generateViewsDataTs(diagrams: Iterable<DiagramView>) {
   const views = Array.from(diagrams)
   const out = new CompositeGeneratorNode()
@@ -88,16 +94,16 @@ export function generateViewsDataTs(diagrams: Iterable<DiagramView>) {
             view =>
               expandToNode`${JSON5.stringify(view.id)}: (${
                 JSON5.stringify(
-                  view
+                  view,
                 )
               } as unknown) as DiagramView`,
             {
               separator: ',',
-              appendNewLineIfNotEmpty: true
-            }
-          )
+              appendNewLineIfNotEmpty: true,
+            },
+          ),
         )
-      }
+      },
     })
     .append('} as const satisfies Record<LikeC4ViewId, DiagramView>', NL, NL).appendTemplate`
     export type LikeC4Views = typeof LikeC4Views
@@ -115,6 +121,9 @@ export function generateViewsDataTs(diagrams: Iterable<DiagramView>) {
   return toString(out)
 }
 
+/**
+ * Generate *.d.ts
+ */
 export function generateViewsDataDTs(diagrams: Iterable<DiagramView>) {
   const views = Array.from(diagrams)
   const out = new CompositeGeneratorNode()