@grafloria/element 0.3.22 → 0.4.0

package/README.md

@@ -27,4 +27,34 @@ framework's template binding targets.
 For first-class framework idioms use `@grafloria/react`,
 `@grafloria/angular`, or `@grafloria/vue`.
 
+## Bundle size — what actually ships
+
+Don't judge this library by npm's **unpacked size** stat — that is
+uncompressed ESM source plus full TypeScript declarations (the whole family
+installs ~9 MB). None of it reaches your users as-is; what matters is what
+your bundler emits.
+
+Worst case, importing the **entire** public surface of `@grafloria/element`
+(the whole stack: engine, renderer, the custom element, every kit (diagram, dashboard, table…)), measured with esbuild (minify, ESM, code-splitting):
+
+| | minified | gzipped |
+|---|---|---|
+| eager bundle | 1660 KB | **451 KB** |
+| elkjs — lazy chunk, downloads **only** if ELK layout is invoked | 1,423 KB | 432 KB |
+
+A real app importing only what it uses ships less. Reproduce it in two minutes:
+
+```sh
+npm i -D esbuild @grafloria/element
+echo "export * from '@grafloria/element';" > entry.mjs
+npx esbuild entry.mjs --bundle --minify --format=esm --splitting --outdir=out
+gzip -k9 out/entry.js && wc -c out/entry.js out/entry.js.gz
+```
+
+`--splitting` matters: without it esbuild inlines the lazily-imported ELK
+chunk and inflates the number by ~1.4 MB. Real app bundlers (Angular CLI,
+Vite, Next.js) split by default. Since engine 0.3.0 / renderer 0.4.0 /
+element 0.4.0 the packages are **pure ESM** — every bundler tree-shakes them,
+and Node ≥ 20.19 can `require()` them too.
+
 MIT © [Grafloria](https://github.com/grafloria/grafloria)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@grafloria/element",
-  "version": "0.3.22",
-  "type": "commonjs",
+  "version": "0.4.0",
+  "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "peerDependencies": {
-    "@grafloria/engine": "^0.2.0",
-    "@grafloria/renderer": "^0.3.0"
+    "@grafloria/engine": "^0.3.0",
+    "@grafloria/renderer": "^0.4.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -38,14 +38,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "./esm/src/index.js",
+  "module": "./src/index.js",
   "files": [
     "src/**/*.js",
-    "src/**/*.d.ts",
-    "esm/**/*.js"
+    "src/**/*.d.ts"
   ],
   "sideEffects": [
-    "./src/index.js",
-    "./esm/src/index.js"
+    "./src/index.js"
   ]
 }

package/src/index.d.ts

@@ -12,13 +12,13 @@
  * on the server, where `customElements` does not exist). Call
  * `Grafloria.define('my-flow')` yourself if you want a different tag name.
  */
-export { GrafloriaFlowElement, defineGrafloriaFlow, GRAFLORIA_EVENTS } from './lib/grafloria-flow-element';
-export { Grafloria, render, renderStatic } from './lib/grafloria';
-export type { DiagramSpec, RenderSpec, RenderOptions } from './lib/grafloria';
-export { fromDocument } from './lib/load';
-export type { SavedDiagram, FromDocumentOptions, LoadedDiagramSpec } from './lib/load';
-export { registerNodeType, unregisterNodeType, registeredNodeTypes, getNodeType, hasNodeType, renderFromTemplate, } from './lib/node-type-registry';
-export type { NodeTypeRenderer } from './lib/node-type-registry';
+export { GrafloriaFlowElement, defineGrafloriaFlow, GRAFLORIA_EVENTS } from './lib/grafloria-flow-element.js';
+export { Grafloria, render, renderStatic } from './lib/grafloria.js';
+export type { DiagramSpec, RenderSpec, RenderOptions } from './lib/grafloria.js';
+export { fromDocument } from './lib/load.js';
+export type { SavedDiagram, FromDocumentOptions, LoadedDiagramSpec } from './lib/load.js';
+export { registerNodeType, unregisterNodeType, registeredNodeTypes, getNodeType, hasNodeType, renderFromTemplate, } from './lib/node-type-registry.js';
+export type { NodeTypeRenderer } from './lib/node-type-registry.js';
 export type { DiagramInstance, CreateDiagramOptions, NodeSpec, EdgeSpec, PortSpec, HydrationSnapshot, StaticRenderOptions, StaticRenderResult, Theme, } from '@grafloria/renderer';
 export { renderToStaticSVG, LIGHT_THEME, DARK_THEME } from '@grafloria/renderer';
 export { createDiagramApi } from '@grafloria/renderer';
@@ -74,15 +74,15 @@ export { GroupModel } from '@grafloria/engine';
 export { GroupCollapseService, PROXY_NODE_GROUP_KEY, PROXY_LINK_GROUP_KEY } from '@grafloria/engine';
 export { serveLayout } from '@grafloria/engine';
 export type { LayoutPort, LayoutServePort, LayoutProgress } from '@grafloria/engine';
-export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, umlDiagram, ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID, updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, bindCardEditing, matchColumns, rowIndexFromY, scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './lib/diagram-kit';
-export type { JoinColumn, JoinEnd, MatchTier, JoinGuidanceApi, JoinGuidanceOptions, JoinGuidanceHandle, } from './lib/diagram-kit';
-export type { ErColumn, ErEntitySpec, ErRelationshipSpec, ErCardinality, ErSide, ErDiagramOptions, UmlClassSpec, UmlRelationshipSpec, UmlRelationKind, UmlSide, UmlDiagramOptions, ErEntityDelta, UmlClassDelta, CardEditingHandle, } from './lib/diagram-kit';
-export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit';
-export type { HandleApi } from './lib/diagram-kit';
-export { bindDashboardGrid, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit';
-export type { DashboardGridApi, DashboardGridOptions, DashboardGridHandle, CellRect, WorldRect, DashboardGridGeometry, TileDelta, DashboardOptions, DashboardSpec, DashboardSnapshot, DashboardHandle, DashboardViewSpec, DashboardWidgetSpec, WidgetHandle, WidgetRenderer, KpiWidgetData, LineWidgetData, LineSeries, BarWidgetData, DonutWidgetData, FunnelWidgetData, TableWidgetData, } from './lib/dashboard-kit';
-export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit';
-export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle, } from './lib/stencil-kit';
+export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, umlDiagram, ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID, updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, bindCardEditing, matchColumns, rowIndexFromY, scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './lib/diagram-kit/index.js';
+export type { JoinColumn, JoinEnd, MatchTier, JoinGuidanceApi, JoinGuidanceOptions, JoinGuidanceHandle, } from './lib/diagram-kit/index.js';
+export type { ErColumn, ErEntitySpec, ErRelationshipSpec, ErCardinality, ErSide, ErDiagramOptions, UmlClassSpec, UmlRelationshipSpec, UmlRelationKind, UmlSide, UmlDiagramOptions, ErEntityDelta, UmlClassDelta, CardEditingHandle, } from './lib/diagram-kit/index.js';
+export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit/index.js';
+export type { HandleApi } from './lib/diagram-kit/index.js';
+export { bindDashboardGrid, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
+export type { DashboardGridApi, DashboardGridOptions, DashboardGridHandle, CellRect, WorldRect, DashboardGridGeometry, TileDelta, DashboardOptions, DashboardSpec, DashboardSnapshot, DashboardHandle, DashboardViewSpec, DashboardWidgetSpec, WidgetHandle, WidgetRenderer, KpiWidgetData, LineWidgetData, LineSeries, BarWidgetData, DonutWidgetData, FunnelWidgetData, TableWidgetData, } from './lib/dashboard-kit/index.js';
+export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit/index.js';
+export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle, } from './lib/stencil-kit/index.js';
 export * from '@grafloria/engine';
 export * from '@grafloria/renderer';
 export { NodeModel, PortModel, distanceToSegment, rotatePoint, coalesce, } from '@grafloria/engine';