@qkix/chartkit-vue-renderer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 qkix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# @qkix/chartkit-vue-renderer
+
+Vue 3 renderer for [Chartkit](https://www.npmjs.com/package/@qkix/chartkit-core)
+charts. The chart is an **SVG built on the server** - a page with a chart on it
+ships exactly as much chart library as a page without one: none.
+
+```bash
+npm install @qkix/chartkit-vue-renderer
+```
+
+Works in Nuxt (server-rendered, nothing to hydrate) and in any plain Vue 3 app.
+
+## A chart on its own
+
+```vue
+<script setup lang="ts">
+import { Chart, type ChartSpec } from '@qkix/chartkit-vue-renderer';
+
+defineProps<{ spec: ChartSpec }>();
+</script>
+
+<template>
+  <Chart :spec="spec" locale="en-US" />
+</template>
+```
+
+| Prop        |                                                                                            |
+| ----------- | ------------------------------------------------------------------------------------------ |
+| `spec`      | the chart                                                                                  |
+| `locale`    | number formatting, worth passing explicitly when building on a server                      |
+| `id-prefix` | prefix for the ids the accessible name points at - needed when a page holds several charts |
+
+`class`, `style` and any other attribute you put on `<Chart>` land on the
+wrapping element.
+
+A spec that will not draw renders **nothing**, the same as any other broken
+content. A half-drawn chart would look like real data.
+
+## A chart inside a Better Blocks document
+
+```vue
+<script setup lang="ts">
+import { BlocksRenderer } from '@qkix/better-blocks-vue-renderer';
+import { chartBlockPlugin } from '@qkix/chartkit-vue-renderer';
+
+defineProps<{ content: unknown }>();
+</script>
+
+<template>
+  <BlocksRenderer :content="content" :block-plugins="[chartBlockPlugin]" />
+</template>
+```
+
+Neither package knows the other's internals. Leave the plugin out and the chart
+is not drawn, while the rest of the document renders normally - content is never
+lost by a front end that has not been taught about charts.
+
+Unlike the React plugin this is a constant rather than a factory: a Vue
+component reads what it needs from its own props, so there is nothing to close
+over.
+
+Charts in one document get distinct id prefixes derived from their title, so
+their accessible names never collide.
+
+## License
+
+MIT

package/dist/Chart.vue.d.ts

@@ -0,0 +1,12 @@
+import { ChartSpec } from '@qkix/chartkit-core';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    spec: ChartSpec;
+    /** Locale for number formatting. Worth passing explicitly when building on a server. */
+    locale?: string;
+    /** Prefix for the ids the accessible name points at. Needed when a page holds several charts. */
+    idPrefix?: string;
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=Chart.vue.d.ts.map

package/dist/Chart.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.vue.d.ts","sourceRoot":"","sources":["../src/Chart.vue"],"names":[],"mappings":";AAqDA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAElE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;;AAuDF,wBAMG"}

package/dist/ChartBlock.vue.d.ts

@@ -0,0 +1,11 @@
+import { ChartSpec } from '@qkix/chartkit-core';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    node: {
+        spec?: ChartSpec;
+        [attribute: string]: unknown;
+    };
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ChartBlock.vue.d.ts.map

package/dist/ChartBlock.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBlock.vue.d.ts","sourceRoot":"","sources":["../src/ChartBlock.vue"],"names":[],"mappings":";AAgDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE;QAAE,IAAI,CAAC,EAAE,SAAS,CAAC;QAAC,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;CAC1D,CAAC;;AAmEF,wBAMG"}

package/dist/blockPlugin.d.ts

@@ -0,0 +1,64 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { ChartSpec } from '@qkix/chartkit-core';
+/**
+ * Chartkit as a Better Blocks block plugin.
+ *
+ * `chartBlock` in `@qkix/chartkit-core` carries the framework-free half - the
+ * type, the validator, the migrator. This adds the Vue component.
+ *
+ * The `satisfies` below is the load-bearing line: chartkit-core writes its
+ * definition structurally rather than importing `BlockDefinition`, because a
+ * chart has no business depending on a rich-text document format. This package
+ * legitimately depends on both, so this is where the two are checked against
+ * each other.
+ */
+/**
+ * The plugin to hand to `BlocksRenderer`'s `blockPlugins`.
+ *
+ * A constant rather than a factory, unlike the React one: a Vue component reads
+ * what it needs from its own props, so there is nothing to close over.
+ */
+export declare const chartBlockPlugin: {
+    component: DefineComponent<{
+        node: {
+            spec?: ChartSpec;
+            [attribute: string]: unknown;
+        };
+    }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+        node: {
+            spec?: ChartSpec;
+            [attribute: string]: unknown;
+        };
+    }> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    type: string;
+    content: "void";
+    validate(node: {
+        type: string;
+        spec?: unknown;
+        [attribute: string]: unknown;
+    }, context: {
+        path: string;
+        fail: (path: string, message: string) => void;
+    }): void;
+    migrate(node: {
+        type: string;
+        spec?: unknown;
+        [attribute: string]: unknown;
+    }): {
+        status: "unchanged";
+        reason?: undefined;
+        node?: undefined;
+    } | {
+        status: "skipped";
+        reason: string;
+        node?: undefined;
+    } | {
+        status: "migrated";
+        node: {
+            spec: ChartSpec;
+            type: string;
+        };
+        reason?: undefined;
+    };
+};
+//# sourceMappingURL=blockPlugin.d.ts.map

package/dist/blockPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blockPlugin.d.ts","sourceRoot":"","sources":["../src/blockPlugin.ts"],"names":[],"mappings":";;AAAA;;;;;;;;;;;GAWG;AAOH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;gBAI+c,CAAC;;;;;gBAAD,CAAC;;;;;;;;YAAsoM,CAAC;;;;;;;;YAAihB,CAAC;;;;cAAsG,CAAC;YAAyB,CAAC;;;;YAAsF,CAAC;;;;;;;cAAmJ,CAAC;;CADx9O,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Chart } from './Chart.vue';
+export { chartBlockPlugin } from './blockPlugin';
+export type { ChartSpec, ChartType, Series, ChartOptions } from '@qkix/chartkit-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGjD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,41 @@
+import { defineComponent as a, computed as o, openBlock as l, createElementBlock as p, mergeProps as u, createCommentVNode as i, createBlock as m } from "vue";
+import { renderChart as d, chartBlock as h } from "@qkix/chartkit-core";
+const _ = ["innerHTML"], f = /* @__PURE__ */ a({
+  inheritAttrs: !1,
+  __name: "Chart",
+  props: {
+    spec: {},
+    locale: {},
+    idPrefix: {}
+  },
+  setup(n) {
+    const r = n, e = o(
+      () => d(r.spec, { locale: r.locale, idPrefix: r.idPrefix })
+    ), t = o(() => e.value.ok ? e.value.svg : "");
+    return (s, c) => t.value ? (l(), p("div", u({ key: 0 }, s.$attrs, { innerHTML: t.value }), null, 16, _)) : i("", !0);
+  }
+}), v = /* @__PURE__ */ a({
+  __name: "ChartBlock",
+  props: {
+    node: {}
+  },
+  setup(n) {
+    const r = n, e = o(() => r.node.spec), t = o(() => {
+      var c;
+      return `chartkit-${String(((c = e.value) == null ? void 0 : c.title) ?? "chart").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40) || "chart"}`;
+    });
+    return (s, c) => e.value ? (l(), m(f, {
+      key: 0,
+      spec: e.value,
+      "id-prefix": t.value
+    }, null, 8, ["spec", "id-prefix"])) : i("", !0);
+  }
+}), x = {
+  ...h,
+  component: v
+};
+export {
+  f as Chart,
+  x as chartBlockPlugin
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/Chart.vue","../src/ChartBlock.vue","../src/blockPlugin.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A Chartkit chart, as a Vue component.\n *\n * The work happens in `@qkix/chartkit-core`, which turns a spec into a finished\n * SVG string. This is the thin part - and being thin is the point: the rendered\n * page carries an SVG and nothing else. No hydration work, no client-side chart\n * library, no bytes. The SVG is built synchronously, so the server and the\n * client produce identical markup.\n */\nimport { computed } from 'vue';\n\nimport { renderChart, type ChartSpec } from '@qkix/chartkit-core';\n\nconst props = defineProps<{\n  spec: ChartSpec;\n  /** Locale for number formatting. Worth passing explicitly when building on a server. */\n  locale?: string;\n  /** Prefix for the ids the accessible name points at. Needed when a page holds several charts. */\n  idPrefix?: string;\n}>();\n\n// `class`, `style` and anything else the consumer puts on <Chart> is bound to\n// the wrapper by hand, so nothing is left dangling when the chart draws nothing.\ndefineOptions({ inheritAttrs: false });\n\nconst result = computed(() =>\n  renderChart(props.spec, { locale: props.locale, idPrefix: props.idPrefix })\n);\n\n// An invalid spec renders nothing, the same as any other broken content. A\n// half-drawn chart would look like real data, which is worse than an absence.\nconst svg = computed(() => (result.value.ok ? result.value.svg : ''));\n</script>\n\n<template>\n  <!-- The markup is this library's own output, from a builder that escapes every\n       author-controlled value on the way in - see chartkit-core's svg.ts. -->\n  <div v-if=\"svg\" v-bind=\"$attrs\" v-html=\"svg\"></div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Adapts a Better Blocks chart node to the Chart component.\n *\n * Better Blocks hands a registered block its whole node, since it cannot know\n * what attributes the block has. Chart takes a spec. This is the one line\n * between them.\n */\nimport { computed } from 'vue';\n\nimport type { ChartSpec } from '@qkix/chartkit-core';\n\nimport Chart from './Chart.vue';\n\nconst props = defineProps<{\n  node: { spec?: ChartSpec; [attribute: string]: unknown };\n}>();\n\nconst spec = computed(() => props.node.spec);\n\n// Charts in one document must not share the ids their accessible names point\n// at. There is no node id to lean on, so the title is the most stable thing\n// available.\nconst idPrefix = computed(() => {\n  const slug =\n    String(spec.value?.title ?? 'chart')\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-')\n      .replace(/^-|-$/g, '')\n      .slice(0, 40) || 'chart';\n  return `chartkit-${slug}`;\n});\n</script>\n\n<template>\n  <Chart v-if=\"spec\" :spec=\"spec\" :id-prefix=\"idPrefix\" />\n</template>\n","/**\n * Chartkit as a Better Blocks block plugin.\n *\n * `chartBlock` in `@qkix/chartkit-core` carries the framework-free half - the\n * type, the validator, the migrator. This adds the Vue component.\n *\n * The `satisfies` below is the load-bearing line: chartkit-core writes its\n * definition structurally rather than importing `BlockDefinition`, because a\n * chart has no business depending on a rich-text document format. This package\n * legitimately depends on both, so this is where the two are checked against\n * each other.\n */\n\nimport type { VueBlockPlugin } from '@qkix/better-blocks-vue-renderer';\nimport { chartBlock } from '@qkix/chartkit-core';\n\nimport ChartBlock from './ChartBlock.vue';\n\n/**\n * The plugin to hand to `BlocksRenderer`'s `blockPlugins`.\n *\n * A constant rather than a factory, unlike the React one: a Vue component reads\n * what it needs from its own props, so there is nothing to close over.\n */\nexport const chartBlockPlugin = {\n  ...chartBlock,\n  component: ChartBlock,\n} satisfies VueBlockPlugin;\n"],"names":["props","__props","result","computed","renderChart","svg","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","spec","idPrefix","_a","_createBlock","Chart","chartBlockPlugin","chartBlock","ChartBlock"],"mappings":";;;;;;;;;;;AAcA,UAAMA,IAAQC,GAYRC,IAASC;AAAA,MAAS,MACtBC,EAAYJ,EAAM,MAAM,EAAE,QAAQA,EAAM,QAAQ,UAAUA,EAAM,SAAA,CAAU;AAAA,IAAA,GAKtEK,IAAMF,EAAS,MAAOD,EAAO,MAAM,KAAKA,EAAO,MAAM,MAAM,EAAG;qBAMvDG,EAAA,SAAXC,EAAA,GAAAC,EAAmD,OAAnDC,EAAmD,EAAA,KAAA,EAAA,GAA3BC,UAAM,EAAE,WAAQJ,EAAA,MAAA,CAAG,GAAA,MAAA,IAAAK,CAAA;;;;;;;;ACxB7C,UAAMV,IAAQC,GAIRU,IAAOR,EAAS,MAAMH,EAAM,KAAK,IAAI,GAKrCY,IAAWT,EAAS,MAAM;;AAO9B,aAAO,YALL,SAAOU,IAAAF,EAAK,UAAL,gBAAAE,EAAY,UAAS,OAAO,EAChC,cACA,QAAQ,eAAe,GAAG,EAC1B,QAAQ,UAAU,EAAE,EACpB,MAAM,GAAG,EAAE,KAAK,OACE;AAAA,IACzB,CAAC;qBAIcF,EAAA,cAAbG,EAAwDC,GAAA;AAAA;MAApC,MAAMJ,EAAA;AAAA,MAAO,aAAWC,EAAA;AAAA,IAAA;;ICXjCI,IAAmB;AAAA,EAC9B,GAAGC;AAAA,EACH,WAAWC;AACb;"}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@qkix/chartkit-vue-renderer",
+  "version": "0.1.0",
+  "description": "Vue 3 renderer for Chartkit charts - server-rendered SVG with zero client-side JavaScript, and the Better Blocks block plugin that draws a chart inside a document",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@qkix/chartkit-core": "^0.2.4"
+  },
+  "peerDependencies": {
+    "@qkix/better-blocks-vue-renderer": ">=0.1.0",
+    "vue": ">=3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@qkix/better-blocks-vue-renderer": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^10.8.1",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0",
+    "@qkix/eslint-config": "0.0.0",
+    "@qkix/better-blocks-vue-renderer": "^0.1.0",
+    "@qkix/tsconfig": "0.0.0"
+  },
+  "keywords": [
+    "chart",
+    "charts",
+    "svg",
+    "vue",
+    "vue3",
+    "nuxt",
+    "chartkit",
+    "strapi",
+    "ssr",
+    "zero-js"
+  ],
+  "license": "MIT",
+  "author": "qkix",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qkix/strapi-plugins.git",
+    "directory": "packages/chartkit-vue-renderer"
+  },
+  "bugs": {
+    "url": "https://github.com/qkix/strapi-plugins/issues"
+  },
+  "homepage": "https://github.com/qkix/strapi-plugins#readme",
+  "engines": {
+    "node": ">=20.0.0 <=24.x.x",
+    "npm": ">=6.0.0"
+  },
+  "nx": {
+    "tags": [
+      "scope:renderer-extension"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "rm -rf dist",
+    "lint": "eslint . && prettier --check .",
+    "format": "prettier --write .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  }
+}