@likec4/generators 0.2.2 → 0.4.0

package/dist/react/generate-react.js

@@ -25,6 +25,7 @@ export function generateReact(views) {
 
       import type { DiagramView, EmbeddedDiagramProps } from '@likec4/diagrams'
       import { EmbeddedDiagram } from '@likec4/diagrams'
+      import '@likec4/diagrams/dist/index.css'
     `
         .append(NL, NL);
     if (components.length == 0) {
@@ -32,30 +33,50 @@ export function generateReact(views) {
         return toString(out);
     }
     out
-        .append('export const LikeC4ViewData = {', NL)
-        .indent(indent => {
-        indent.append(joinToNode(views, view => expandToNode `'${view.id}': (${JSON5.stringify(view)} as any) as DiagramView`, {
-            separator: ',',
-            appendNewLineIfNotEmpty: true
-        }));
+        .append('export const LikeC4ViewsData = {', NL)
+        .indent({
+        indentation: 2,
+        indentedChildren: indent => {
+            indent.append(joinToNode(views, view => expandToNode `'${view.id}': (${JSON5.stringify(view)} as any) as DiagramView`, {
+                separator: ',',
+                appendNewLineIfNotEmpty: true
+            }));
+        },
     })
         .append('} as const', NL, NL)
         .appendTemplate `
-      export type ViewId = keyof typeof LikeC4ViewData
+      export type LikeC4ViewsData = typeof LikeC4ViewsData
+      export type ViewId = keyof LikeC4ViewsData
       export function isViewId(value: unknown): value is ViewId {
-        return typeof value === 'string' && value in LikeC4ViewData
+        return typeof value === 'string' && value in LikeC4ViewsData
       }
 
-      export type LikeC4ViewProps = Omit<EmbeddedDiagramProps, 'diagram'>;
-      export function LikeC4View({viewId, ...rest}: LikeC4ViewProps & { viewId: ViewId }) {
-        return <EmbeddedDiagram diagram={LikeC4ViewData[viewId]} {...rest}/>
+      export type LikeC4ViewProps = Omit<EmbeddedDiagramProps<LikeC4ViewsData, ViewId>, 'views'>;
+      export function LikeC4View(props: LikeC4ViewProps) {
+        return <EmbeddedDiagram views={LikeC4ViewsData} {...props}/>
       }
+
+      type LikeC4ViewsProps = Omit<EmbeddedDiagramProps<LikeC4ViewsData, ViewId>, 'views' | 'viewId'>
+      export const LikeC4Views = {
     `
-        .append(NL, NL, joinToNode(components, ({ id, name }) => expandToNode `
-            LikeC4View['${name}'] = (props: LikeC4ViewProps) => <EmbeddedDiagram diagram={LikeC4ViewData['${id}']} {...props}/>
-          `, {
-        separator: ',',
-        appendNewLineIfNotEmpty: true
-    }), NL);
+        .append(NL)
+        .indent({
+        indentation: 2,
+        indentedChildren: components.map(({ id, name }) => expandToNode `
+            ['${name}']: (props: LikeC4ViewsProps) => <LikeC4View viewId={'${id}'} {...props}/>,
+          `.append(NL))
+        // indentedChildren: [joinToNode(
+        //   components,
+        //   ({ id, name }) =>
+        //     expandToNode`
+        //       ['${name}']: (props: NamedViewProps) => <EmbeddedDiagram views={LikeC4ViewsData} viewId={'${id}'} {...props}/>
+        //     `,
+        //   {
+        //     separator: ',',
+        //     appendNewLineIfNotEmpty: true
+        //   }
+        // )],
+    })
+        .append('} as const', NL, NL);
     return toString(out);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/generators",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://like-c4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -66,15 +66,15 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@likec4/core": "0.2.2",
+    "@likec4/core": "0.4.0",
     "json5": "^2.2.3",
     "langium": "^1.1.0",
     "rambdax": "^9.1.0"
   },
   "devDependencies": {
-    "@types/node": "^18.15.6",
+    "@types/node": "^18.15.11",
     "typescript": "^5.0.3",
     "vite": "^4.2.1",
-    "vitest": "^0.29.8"
+    "vitest": "^0.30.1"
   }
 }