stickyflow 0.0.0-stage → 0.2.0

package/dist/web-component/index.js

@@ -0,0 +1,141 @@
+import { createViewer } from '../chunk-N6WVHOUQ.js';
+import { render } from '../chunk-KFJIFHXG.js';
+import '../chunk-6LQJUAD4.js';
+import '../chunk-6JKNT2YC.js';
+
+// src/runtime/webComponent/config.ts
+var OBSERVED_ATTRS = ["source", "interactive", "padding", "diagram-id"];
+var boolAttr = (value) => value !== null && value !== "false";
+function readConfig(getAttribute) {
+  const paddingRaw = getAttribute("padding");
+  const padding = paddingRaw != null && paddingRaw !== "" && Number.isFinite(Number(paddingRaw)) ? Number(paddingRaw) : void 0;
+  return {
+    source: getAttribute("source"),
+    interactive: boolAttr(getAttribute("interactive")),
+    padding,
+    diagramId: getAttribute("diagram-id") ?? void 0
+  };
+}
+
+// src/runtime/webComponent/shadowView.ts
+var SHADOW_STYLE = `
+  :host { display: block; position: relative; }
+  .sf-container { width: 100%; height: 100%; }
+  svg { display: block; max-width: 100%; }
+  .sf-error { color: #b91c1c; font: 13px/1.4 system-ui, sans-serif; padding: 8px; white-space: pre-wrap; }
+  [data-sf-role="entity"], [data-sf-role="link"] { cursor: pointer; }
+  [data-sf-selected] { stroke: #2563eb !important; stroke-width: 4 !important; }
+`;
+function createShadowContainer(root) {
+  const style = document.createElement("style");
+  style.textContent = SHADOW_STYLE;
+  const container = document.createElement("div");
+  container.className = "sf-container";
+  root.append(style, container);
+  return container;
+}
+function showRenderError(container, error) {
+  const box = document.createElement("div");
+  box.className = "sf-error";
+  box.textContent = `stickyflow: ${error.message ?? error}`;
+  container.replaceChildren(box);
+}
+function mountInteractiveDiagram(container, source, config) {
+  return createViewer({
+    container,
+    source,
+    interactive: true,
+    diagramId: config.diagramId,
+    renderOptions: { padding: config.padding }
+  });
+}
+function mountStaticDiagram(container, source, config) {
+  container.innerHTML = render(source, { padding: config.padding }).svg;
+}
+function mountShadowDiagram(root, config) {
+  const container = createShadowContainer(root);
+  if (config.source === null) {
+    return { viewer: null, rendered: false };
+  }
+  try {
+    const viewer = config.interactive ? mountInteractiveDiagram(container, config.source, config) : null;
+    if (!config.interactive) {
+      mountStaticDiagram(container, config.source, config);
+    }
+    return { viewer, rendered: true };
+  } catch (error) {
+    showRenderError(container, error);
+    return { viewer: null, rendered: false };
+  }
+}
+
+// src/runtime/webComponent/element.ts
+var ElementBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var StickyflowDiagram = class extends ElementBase {
+  static get observedAttributes() {
+    return [...OBSERVED_ATTRS];
+  }
+  root;
+  view = null;
+  sourceProp = null;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.rerender();
+  }
+  disconnectedCallback() {
+    this.teardown();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.rerender();
+    }
+  }
+  set source(value) {
+    this.sourceProp = value;
+    if (this.isConnected) {
+      this.rerender();
+    }
+  }
+  get source() {
+    return this.sourceProp ?? this.getAttribute("source");
+  }
+  get viewer() {
+    return this.view;
+  }
+  config() {
+    const config = readConfig((name) => this.getAttribute(name));
+    return { ...config, source: this.sourceProp ?? config.source };
+  }
+  teardown() {
+    this.view?.destroy();
+    this.view = null;
+    this.root.replaceChildren();
+  }
+  rerender() {
+    this.teardown();
+    const config = this.config();
+    const mount = mountShadowDiagram(this.root, config);
+    this.view = mount.viewer;
+    if (mount.rendered) {
+      this.dispatchEvent(new CustomEvent("sf-render", { detail: { interactive: config.interactive } }));
+    }
+  }
+};
+
+// src/runtime/webComponent/index.ts
+function defineStickyflowDiagram(tagName = "stickyflow-diagram") {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, StickyflowDiagram);
+  }
+}
+
+export { StickyflowDiagram, defineStickyflowDiagram };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/web-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/runtime/webComponent/config.ts","../../src/runtime/webComponent/shadowView.ts","../../src/runtime/webComponent/element.ts","../../src/runtime/webComponent/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export interface DiagramConfig {\n  source: string | null;\n  interactive: boolean;\n  padding?: number;\n  diagramId?: string;\n}\n\nexport const OBSERVED_ATTRS = ['source', 'interactive', 'padding', 'diagram-id'] as const;\n\nconst boolAttr = (value: string | null): boolean => value !== null && value !== 'false';\n\nexport function readConfig(getAttribute: (name: string) => string | null): DiagramConfig {\n  const paddingRaw = getAttribute('padding');\n  const padding =\n    paddingRaw != null && paddingRaw !== '' && Number.isFinite(Number(paddingRaw)) ? Number(paddingRaw) : undefined;\n  return {\n    source: getAttribute('source'),\n    interactive: boolAttr(getAttribute('interactive')),\n    padding,\n    diagramId: getAttribute('diagram-id') ?? undefined,\n  };\n}\n","import { render } from '../../render';\nimport { createViewer, type Viewer } from '../viewer';\nimport type { DiagramConfig } from './config';\n\nconst SHADOW_STYLE = `\n  :host { display: block; position: relative; }\n  .sf-container { width: 100%; height: 100%; }\n  svg { display: block; max-width: 100%; }\n  .sf-error { color: #b91c1c; font: 13px/1.4 system-ui, sans-serif; padding: 8px; white-space: pre-wrap; }\n  [data-sf-role=\"entity\"], [data-sf-role=\"link\"] { cursor: pointer; }\n  [data-sf-selected] { stroke: #2563eb !important; stroke-width: 4 !important; }\n`;\n\nexport interface ShadowDiagramMount {\n  viewer: Viewer | null;\n  rendered: boolean;\n}\n\nfunction createShadowContainer(root: ShadowRoot): HTMLDivElement {\n  const style = document.createElement('style');\n  style.textContent = SHADOW_STYLE;\n  const container = document.createElement('div');\n  container.className = 'sf-container';\n  root.append(style, container);\n  return container;\n}\n\nfunction showRenderError(container: HTMLDivElement, error: unknown): void {\n  const box = document.createElement('div');\n  box.className = 'sf-error';\n  box.textContent = `stickyflow: ${(error as Error).message ?? error}`;\n  container.replaceChildren(box);\n}\n\nfunction mountInteractiveDiagram(container: HTMLDivElement, source: string, config: DiagramConfig): Viewer {\n  return createViewer({\n    container,\n    source,\n    interactive: true,\n    diagramId: config.diagramId,\n    renderOptions: { padding: config.padding },\n  });\n}\n\nfunction mountStaticDiagram(container: HTMLDivElement, source: string, config: DiagramConfig): void {\n  container.innerHTML = render(source, { padding: config.padding }).svg;\n}\n\nexport function mountShadowDiagram(root: ShadowRoot, config: DiagramConfig): ShadowDiagramMount {\n  const container = createShadowContainer(root);\n  if (config.source === null) {\n    return { viewer: null, rendered: false };\n  }\n\n  try {\n    const viewer = config.interactive ? mountInteractiveDiagram(container, config.source, config) : null;\n    if (!config.interactive) {\n      mountStaticDiagram(container, config.source, config);\n    }\n    return { viewer, rendered: true };\n  } catch (error) {\n    showRenderError(container, error);\n    return { viewer: null, rendered: false };\n  }\n}\n","import type { Viewer } from '../viewer';\nimport { type DiagramConfig, OBSERVED_ATTRS, readConfig } from './config';\nimport { mountShadowDiagram } from './shadowView';\n\nconst ElementBase: typeof HTMLElement =\n  typeof HTMLElement === 'undefined' ? (class {} as unknown as typeof HTMLElement) : HTMLElement;\n\nexport class StickyflowDiagram extends ElementBase {\n  static get observedAttributes(): string[] {\n    return [...OBSERVED_ATTRS];\n  }\n\n  private readonly root: ShadowRoot;\n  private view: Viewer | null = null;\n  private sourceProp: string | null = null;\n\n  constructor() {\n    super();\n    this.root = this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback(): void {\n    this.rerender();\n  }\n\n  disconnectedCallback(): void {\n    this.teardown();\n  }\n\n  attributeChangedCallback(): void {\n    if (this.isConnected) {\n      this.rerender();\n    }\n  }\n\n  set source(value: string | null) {\n    this.sourceProp = value;\n    if (this.isConnected) {\n      this.rerender();\n    }\n  }\n\n  get source(): string | null {\n    return this.sourceProp ?? this.getAttribute('source');\n  }\n\n  get viewer(): Viewer | null {\n    return this.view;\n  }\n\n  private config(): DiagramConfig {\n    const config = readConfig(name => this.getAttribute(name));\n    return { ...config, source: this.sourceProp ?? config.source };\n  }\n\n  private teardown(): void {\n    this.view?.destroy();\n    this.view = null;\n    this.root.replaceChildren();\n  }\n\n  private rerender(): void {\n    this.teardown();\n    const config = this.config();\n    const mount = mountShadowDiagram(this.root, config);\n    this.view = mount.viewer;\n    if (mount.rendered) {\n      this.dispatchEvent(new CustomEvent('sf-render', { detail: { interactive: config.interactive } }));\n    }\n  }\n}\n","export type { DiagramConfig } from './config';\nexport { StickyflowDiagram } from './element';\n\nimport { StickyflowDiagram } from './element';\n\nexport function defineStickyflowDiagram(tagName = 'stickyflow-diagram'): void {\n  if (typeof customElements === 'undefined') {\n    return;\n  }\n  if (!customElements.get(tagName)) {\n    customElements.define(tagName, StickyflowDiagram);\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,83 @@
 {
   "name": "stickyflow",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Framework-independent SFL parser, render-scene, SVG runtime and interactive viewer.",
+  "type": "module",
+  "license": "Apache-2.0",
+  "author": "D-Queck",
+  "keywords": [
+    "sfl",
+    "diagram",
+    "svg",
+    "renderer",
+    "viewer",
+    "flowchart",
+    "swimlane",
+    "text-to-diagram",
+    "diagram-as-code"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Stickyflow/stickyflow.js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Stickyflow/stickyflow.js/issues"
+  },
+  "homepage": "https://github.com/Stickyflow/stickyflow.js#readme",
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./viewer": {
+      "types": "./dist/viewer/index.d.ts",
+      "import": "./dist/viewer/index.js",
+      "require": "./dist/viewer/index.cjs"
+    },
+    "./interaction": {
+      "types": "./dist/interaction/index.d.ts",
+      "import": "./dist/interaction/index.js",
+      "require": "./dist/interaction/index.cjs"
+    },
+    "./web-component": {
+      "types": "./dist/web-component/index.d.ts",
+      "import": "./dist/web-component/index.js",
+      "require": "./dist/web-component/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "smoke": "node scripts/smoke.mjs",
+    "verify": "npm run build && npm run smoke",
+    "test": "vitest run --config ./vitest.config.ts",
+    "test:dom": "vitest run --config ./vitest.dom.config.ts",
+    "test:watch": "vitest --config ./vitest.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check",
+    "lint:fix": "biome check --write",
+    "format": "biome format --write",
+    "ci": "npm run lint && npm run typecheck && npm test && npm run test:dom && npm run verify",
+    "prepublishOnly": "npm run ci"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.11",
+    "@types/jsdom": "^30.0.0",
+    "@types/node": "^26.2.0",
+    "jsdom": "^29.1.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  }
+}