Core architecture fixes -- Review in steps

packages/angular/autogen/component.ts

@@ -76,14 +76,14 @@ ${
   ngAfterViewInit (): void {
     this.component = new ${componentName}${genericsStr}(${constructorArgs})
     ${dataType ? `
-      if (this.data) {
+      if (this.data !== undefined) {
         this.component.setData(this.data)
         ${isStandAlone ? '' : 'this.componentContainer?.render()'}
       }` : ''}
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    ${dataType ? 'if (changes.data) { this.component?.setData(this.data) }' : ''}
+    ${dataType ? 'if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }' : ''}
     this.component?.setConfig(this.getConfig())
     ${isStandAlone ? '' : 'this.componentContainer?.render()'}
   }

packages/angular/autogen/index.ts

@@ -1,8 +1,5 @@
-import { writeFileSync } from 'fs'
-import { exec } from 'child_process'
-
 // Components
-import { getComponentList } from '@unovis/shared/integrations/components'
+import { runComponentGenerator } from '@unovis/shared/integrations/autogen'
 
 // Types
 import { AngularComponentInput } from '@unovis/shared/integrations/types'
@@ -14,43 +11,44 @@ import { getImportStatements, kebabCase, getConfigSummary } from '@unovis/shared
 import { getComponentCode } from './component'
 import { getModuleCode } from './module'
 
-const components = getComponentList() as AngularComponentInput[]
-
 const skipProperties = ['renderIntoProvidedDomNode']
 
-for (const component of components) {
-  const { configProperties, configInterfaceMembers, generics, statements } = getConfigSummary(component, skipProperties, false)
-  const importStatements = getImportStatements(component.name, statements, configInterfaceMembers, generics, component.isStandAlone ? [] : ['ContainerCore'])
-
-  const componentCode = getComponentCode(
-    component.name,
-    generics,
-    configProperties,
-    component.angularProvide,
-    importStatements,
-    component.dataType,
-    component.kebabCaseName,
-    component.isStandAlone,
-    component.renderIntoProvidedDomNode,
-    component.angularStyles
-  )
-  const moduleCode = getModuleCode(component.name, component.kebabCaseName)
-
-  const nameKebabCase = component.kebabCaseName ?? kebabCase(component.name)
-  const pathComponentBase = `src/${component.isStandAlone ? 'html-' : ''}components/${nameKebabCase}`
-  const pathComponent = `${pathComponentBase}/${nameKebabCase}.component.ts`
-  const pathModule = `${pathComponentBase}/${nameKebabCase}.module.ts`
-
-  exec(`mkdir ${pathComponentBase}`, () => {
-    writeFileSync(pathComponent, componentCode)
-    writeFileSync(pathModule, moduleCode)
-    exec(`pnpm exec eslint ${pathComponent} ${pathModule} --fix`)
-  })
-
-  // eslint-disable-next-line no-console
-  console.log(`${component.name} generated`)
-  // eslint-disable-next-line no-console
-  console.log(`  ${pathComponent}`)
-  // eslint-disable-next-line no-console
-  console.log(`  ${pathModule}`)
-}
+const getComponentDirPath = (component: AngularComponentInput): string =>
+  `${component.isStandAlone ? 'html-' : ''}components/${component.kebabCaseName ?? kebabCase(component.name)}`
+
+runComponentGenerator<AngularComponentInput>({
+  generateComponentFiles: (component) => {
+    const { configProperties, configInterfaceMembers, generics, statements } = getConfigSummary(component, skipProperties, false)
+    const importStatements = getImportStatements(component.name, statements, configInterfaceMembers, generics, component.isStandAlone ? [] : ['ContainerCore'])
+
+    const componentCode = getComponentCode(
+      component.name,
+      generics,
+      configProperties,
+      component.angularProvide,
+      importStatements,
+      component.dataType,
+      component.kebabCaseName,
+      component.isStandAlone,
+      component.renderIntoProvidedDomNode,
+      component.angularStyles
+    )
+    const moduleCode = getModuleCode(component.name, component.kebabCaseName)
+
+    const nameKebabCase = component.kebabCaseName ?? kebabCase(component.name)
+    const dirPath = `src/${getComponentDirPath(component)}`
+    return [
+      { path: `${dirPath}/${nameKebabCase}.component.ts`, content: componentCode },
+      { path: `${dirPath}/${nameKebabCase}.module.ts`, content: moduleCode },
+    ]
+  },
+  getBarrelExports: (component) => {
+    const nameKebabCase = component.kebabCaseName ?? kebabCase(component.name)
+    const dirPath = `./${getComponentDirPath(component)}`
+    return [
+      `export { Vis${component.name}Component } from '${dirPath}/${nameKebabCase}.component'`,
+      `export { Vis${component.name}Module } from '${dirPath}/${nameKebabCase}.module'`,
+    ]
+  },
+  barrelHeader: ['// Core', 'export * from \'./core\'', ''],
+})

packages/angular/src/components.ts

@@ -1,82 +1,59 @@
 // Core
 export * from './core'
 
-// SVG Components
 export { VisAreaComponent } from './components/area/area.component'
 export { VisAreaModule } from './components/area/area.module'
-
-export { VisAnnotationsComponent } from './components/annotations/annotations.component'
-export { VisAnnotationsModule } from './components/annotations/annotations.module'
-
 export { VisAxisComponent } from './components/axis/axis.component'
 export { VisAxisModule } from './components/axis/axis.module'
-
 export { VisBrushComponent } from './components/brush/brush.component'
 export { VisBrushModule } from './components/brush/brush.module'
-
-export { VisChordDiagramComponent } from './components/chord-diagram/chord-diagram.component'
-export { VisChordDiagramModule } from './components/chord-diagram/chord-diagram.module'
-
 export { VisCrosshairComponent } from './components/crosshair/crosshair.component'
 export { VisCrosshairModule } from './components/crosshair/crosshair.module'
-
-export { VisDonutComponent } from './components/donut/donut.component'
-export { VisDonutModule } from './components/donut/donut.module'
-
 export { VisFreeBrushComponent } from './components/free-brush/free-brush.component'
 export { VisFreeBrushModule } from './components/free-brush/free-brush.module'
-
-export { VisGraphComponent } from './components/graph/graph.component'
-export { VisGraphModule } from './components/graph/graph.module'
-
 export { VisGroupedBarComponent } from './components/grouped-bar/grouped-bar.component'
 export { VisGroupedBarModule } from './components/grouped-bar/grouped-bar.module'
-
 export { VisLineComponent } from './components/line/line.component'
 export { VisLineModule } from './components/line/line.module'
-
-export { VisNestedDonutComponent } from './components/nested-donut/nested-donut.component'
-export { VisNestedDonutModule } from './components/nested-donut/nested-donut.module'
-
-export { VisPlotlineComponent } from './components/plotline/plotline.component'
-export { VisPlotlineModule } from './components/plotline/plotline.module'
-
-export { VisSankeyComponent } from './components/sankey/sankey.component'
-export { VisSankeyModule } from './components/sankey/sankey.module'
-
 export { VisScatterComponent } from './components/scatter/scatter.component'
 export { VisScatterModule } from './components/scatter/scatter.module'
-
 export { VisStackedBarComponent } from './components/stacked-bar/stacked-bar.component'
 export { VisStackedBarModule } from './components/stacked-bar/stacked-bar.module'
-
 export { VisTimelineComponent } from './components/timeline/timeline.component'
 export { VisTimelineModule } from './components/timeline/timeline.module'
-
 export { VisXYLabelsComponent } from './components/xy-labels/xy-labels.component'
 export { VisXYLabelsModule } from './components/xy-labels/xy-labels.module'
-
-export { VisTopoJSONMapComponent } from './components/topojson-map/topojson-map.component'
-export { VisTopoJSONMapModule } from './components/topojson-map/topojson-map.module'
-
 export { VisPlotbandComponent } from './components/plotband/plotband.component'
 export { VisPlotbandModule } from './components/plotband/plotband.module'
-
-// HTML Components
+export { VisPlotlineComponent } from './components/plotline/plotline.component'
+export { VisPlotlineModule } from './components/plotline/plotline.module'
+export { VisChordDiagramComponent } from './components/chord-diagram/chord-diagram.component'
+export { VisChordDiagramModule } from './components/chord-diagram/chord-diagram.module'
+export { VisDonutComponent } from './components/donut/donut.component'
+export { VisDonutModule } from './components/donut/donut.module'
+export { VisGraphComponent } from './components/graph/graph.component'
+export { VisGraphModule } from './components/graph/graph.module'
+export { VisNestedDonutComponent } from './components/nested-donut/nested-donut.component'
+export { VisNestedDonutModule } from './components/nested-donut/nested-donut.module'
+export { VisRadialBarComponent } from './components/radial-bar/radial-bar.component'
+export { VisRadialBarModule } from './components/radial-bar/radial-bar.module'
+export { VisSankeyComponent } from './components/sankey/sankey.component'
+export { VisSankeyModule } from './components/sankey/sankey.module'
+export { VisTopoJSONMapComponent } from './components/topojson-map/topojson-map.component'
+export { VisTopoJSONMapModule } from './components/topojson-map/topojson-map.module'
+export { VisTreemapComponent } from './components/treemap/treemap.component'
+export { VisTreemapModule } from './components/treemap/treemap.module'
+export { VisTooltipComponent } from './components/tooltip/tooltip.component'
+export { VisTooltipModule } from './components/tooltip/tooltip.module'
+export { VisAnnotationsComponent } from './components/annotations/annotations.component'
+export { VisAnnotationsModule } from './components/annotations/annotations.module'
 export { VisLeafletMapComponent } from './html-components/leaflet-map/leaflet-map.component'
 export { VisLeafletMapModule } from './html-components/leaflet-map/leaflet-map.module'
-
 export { VisLeafletFlowMapComponent } from './html-components/leaflet-flow-map/leaflet-flow-map.component'
 export { VisLeafletFlowMapModule } from './html-components/leaflet-flow-map/leaflet-flow-map.module'
-
 export { VisBulletLegendComponent } from './html-components/bullet-legend/bullet-legend.component'
 export { VisBulletLegendModule } from './html-components/bullet-legend/bullet-legend.module'
-
 export { VisFlowLegendComponent } from './html-components/flow-legend/flow-legend.component'
 export { VisFlowLegendModule } from './html-components/flow-legend/flow-legend.module'
-
 export { VisRollingPinLegendComponent } from './html-components/rolling-pin-legend/rolling-pin-legend.component'
 export { VisRollingPinLegendModule } from './html-components/rolling-pin-legend/rolling-pin-legend.module'
-
-export { VisTooltipComponent } from './components/tooltip/tooltip.component'
-export { VisTooltipModule } from './components/tooltip/tooltip.module'

packages/angular/src/components/area/area.component.ts

@@ -156,14 +156,14 @@ export class VisAreaComponent<Datum> implements AreaConfigInterface<Datum>, Afte
   ngAfterViewInit (): void {
     this.component = new Area<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/axis/axis.component.ts

@@ -174,14 +174,14 @@ export class VisAxisComponent<Datum> implements AxisConfigInterface<Datum>, Afte
   ngAfterViewInit (): void {
     this.component = new Axis<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/brush/brush.component.ts

@@ -103,14 +103,14 @@ export class VisBrushComponent<Datum> implements BrushConfigInterface<Datum>, Af
   ngAfterViewInit (): void {
     this.component = new Brush<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/chord-diagram/chord-diagram.component.ts

@@ -131,14 +131,14 @@ export class VisChordDiagramComponent<N extends ChordInputNode, L extends ChordI
   ngAfterViewInit (): void {
     this.component = new ChordDiagram<N, L>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/crosshair/crosshair.component.ts

@@ -193,14 +193,14 @@ export class VisCrosshairComponent<Datum> implements CrosshairConfigInterface<Da
   ngAfterViewInit (): void {
     this.component = new Crosshair<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/donut/donut.component.ts

@@ -138,14 +138,14 @@ export class VisDonutComponent<Datum> implements DonutConfigInterface<Datum>, Af
   ngAfterViewInit (): void {
     this.component = new Donut<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/free-brush/free-brush.component.ts

@@ -101,14 +101,14 @@ export class VisFreeBrushComponent<Datum> implements FreeBrushConfigInterface<Da
   ngAfterViewInit (): void {
     this.component = new FreeBrush<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/graph/graph.component.ts

@@ -420,14 +420,14 @@ export class VisGraphComponent<N extends GraphInputNode, L extends GraphInputLin
   ngAfterViewInit (): void {
     this.component = new Graph<N, L>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/grouped-bar/grouped-bar.component.ts

@@ -145,14 +145,14 @@ export class VisGroupedBarComponent<Datum> implements GroupedBarConfigInterface<
   ngAfterViewInit (): void {
     this.component = new GroupedBar<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }

packages/angular/src/components/line/line.component.ts

@@ -144,14 +144,14 @@ export class VisLineComponent<Datum> implements LineConfigInterface<Datum>, Afte
   ngAfterViewInit (): void {
     this.component = new Line<Datum>(this.getConfig())
 
-    if (this.data) {
+    if (this.data !== undefined) {
       this.component.setData(this.data)
       this.componentContainer?.render()
     }
   }
 
   ngOnChanges (changes: SimpleChanges): void {
-    if (changes.data) { this.component?.setData(this.data) }
+    if (changes.data && this.data !== undefined) { this.component?.setData(this.data) }
     this.component?.setConfig(this.getConfig())
     this.componentContainer?.render()
   }