@aurelia/storybook 2.1.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/.github/workflows/ci.yml +61 -0
  2. package/.github/workflows/publish.yml +82 -0
  3. package/.github/workflows/storybook-preview.yml +62 -0
  4. package/CHANGELOG.md +5 -0
  5. package/README.md +180 -1
  6. package/__tests__/create-aurelia-app.test.ts +94 -0
  7. package/__tests__/preset.test.ts +32 -3
  8. package/__tests__/preview.test.ts +9 -131
  9. package/__tests__/render.test.ts +15 -26
  10. package/apps/hello-world/package-lock.json +404 -287
  11. package/apps/hello-world/package.json +10 -10
  12. package/apps/hello-world/src/components/notification-center.ts +2 -2
  13. package/apps/hello-world/src/components/stat-card.ts +12 -4
  14. package/apps/hello-world/src/components/weather-widget.ts +2 -1
  15. package/apps/hello-world/src/stories/feedback-form.stories.ts +15 -9
  16. package/apps/hello-world/src/stories/hello-world.stories.ts +20 -9
  17. package/apps/hello-world/src/stories/notification-center.stories.ts +17 -10
  18. package/apps/hello-world/src/stories/stat-card.stories.ts +23 -13
  19. package/apps/hello-world/src/stories/weather-widget.stories.ts +18 -13
  20. package/apps/hello-world-rsbuild/.storybook/main.ts +16 -0
  21. package/apps/hello-world-rsbuild/.storybook/preview.ts +1 -0
  22. package/apps/hello-world-rsbuild/.stylelintrc.json +5 -0
  23. package/apps/hello-world-rsbuild/README.md +28 -0
  24. package/apps/hello-world-rsbuild/eslint.config.mjs +25 -0
  25. package/apps/hello-world-rsbuild/favicon.ico +0 -0
  26. package/apps/hello-world-rsbuild/index.html +17 -0
  27. package/apps/hello-world-rsbuild/package-lock.json +11131 -0
  28. package/apps/hello-world-rsbuild/package.json +56 -0
  29. package/apps/hello-world-rsbuild/src/components/feedback-form.html +111 -0
  30. package/apps/hello-world-rsbuild/src/components/feedback-form.ts +45 -0
  31. package/apps/hello-world-rsbuild/src/components/notification-center.html +119 -0
  32. package/apps/hello-world-rsbuild/src/components/notification-center.ts +27 -0
  33. package/apps/hello-world-rsbuild/src/components/stat-card.html +107 -0
  34. package/apps/hello-world-rsbuild/src/components/stat-card.ts +41 -0
  35. package/apps/hello-world-rsbuild/src/components/weather-widget.html +89 -0
  36. package/apps/hello-world-rsbuild/src/components/weather-widget.ts +31 -0
  37. package/apps/hello-world-rsbuild/src/hello-world.html +48 -0
  38. package/apps/hello-world-rsbuild/src/hello-world.ts +17 -0
  39. package/apps/hello-world-rsbuild/src/main.ts +6 -0
  40. package/apps/hello-world-rsbuild/src/my-app.html +1 -0
  41. package/apps/hello-world-rsbuild/src/my-app.ts +3 -0
  42. package/apps/hello-world-rsbuild/src/resource.d.ts +15 -0
  43. package/apps/hello-world-rsbuild/src/services/weather-service.ts +15 -0
  44. package/apps/hello-world-rsbuild/src/stories/feedback-form.stories.ts +58 -0
  45. package/apps/hello-world-rsbuild/src/stories/hello-world.stories.ts +64 -0
  46. package/apps/hello-world-rsbuild/src/stories/notification-center.stories.ts +88 -0
  47. package/apps/hello-world-rsbuild/src/stories/stat-card.stories.ts +75 -0
  48. package/apps/hello-world-rsbuild/src/stories/weather-widget.stories.ts +62 -0
  49. package/apps/hello-world-rsbuild/test/my-app.spec.ts +15 -0
  50. package/apps/hello-world-rsbuild/test/setup.ts +29 -0
  51. package/apps/hello-world-rsbuild/tsconfig.json +19 -0
  52. package/apps/hello-world-rsbuild/tsconfig.vitest.json +11 -0
  53. package/apps/hello-world-rsbuild/vite.config.ts +17 -0
  54. package/apps/hello-world-rsbuild/vitest.config.ts +15 -0
  55. package/apps/hello-world-webpack/package-lock.json +239 -264
  56. package/apps/hello-world-webpack/package.json +8 -7
  57. package/apps/hello-world-webpack/src/components/notification-center.ts +2 -2
  58. package/apps/hello-world-webpack/src/components/stat-card.ts +12 -4
  59. package/apps/hello-world-webpack/src/components/weather-widget.ts +2 -1
  60. package/apps/hello-world-webpack/src/my-app.stories.ts +6 -4
  61. package/apps/hello-world-webpack/src/stories/feedback-form.stories.ts +15 -9
  62. package/apps/hello-world-webpack/src/stories/hello-world.stories.ts +20 -9
  63. package/apps/hello-world-webpack/src/stories/notification-center.stories.ts +17 -10
  64. package/apps/hello-world-webpack/src/stories/stat-card.stories.ts +23 -13
  65. package/apps/hello-world-webpack/src/stories/weather-widget.stories.ts +18 -13
  66. package/dist/index.d.ts +25 -0
  67. package/dist/index.js +68 -14
  68. package/dist/index.js.map +1 -1
  69. package/dist/preset.d.ts +21 -0
  70. package/dist/preset.js +46 -2
  71. package/dist/preset.js.map +1 -1
  72. package/dist/preview/helpers.d.ts +2 -0
  73. package/dist/preview/helpers.js +6 -0
  74. package/dist/preview/helpers.js.map +1 -0
  75. package/dist/preview/render.d.ts +7 -0
  76. package/dist/preview/render.js +66 -15
  77. package/dist/preview/render.js.map +1 -1
  78. package/dist/preview/storybook-types-runtime.d.ts +1 -0
  79. package/dist/preview/storybook-types-runtime.js +5 -0
  80. package/dist/preview/storybook-types-runtime.js.map +1 -0
  81. package/dist/preview/storybook-types.d.ts +27 -0
  82. package/dist/preview/types-runtime.d.ts +1 -0
  83. package/dist/preview/types-runtime.js +5 -0
  84. package/dist/preview/types-runtime.js.map +1 -0
  85. package/dist/preview/types.d.ts +44 -0
  86. package/dist/preview.d.ts +3 -0
  87. package/dist/preview.js +71 -16
  88. package/dist/preview.js.map +1 -1
  89. package/dist/webpack.d.ts +10 -0
  90. package/dist/webpack.js +19 -1
  91. package/dist/webpack.js.map +1 -1
  92. package/package.json +54 -9
  93. package/rollup.config.mjs +5 -3
  94. package/scripts/sync-versions.cjs +55 -0
  95. package/src/index.ts +11 -1
  96. package/src/preset.ts +32 -2
  97. package/src/preview/helpers.ts +7 -0
  98. package/src/preview/render.ts +98 -30
  99. package/src/preview/storybook-types-runtime.ts +2 -0
  100. package/src/preview/storybook-types.ts +34 -0
  101. package/src/preview/types-runtime.ts +2 -0
  102. package/src/preview/types.ts +57 -2
  103. package/src/preview.ts +11 -1
  104. package/src/webpack.ts +19 -0
  105. package/CONTINUITY.md +0 -22
  106. package/dist/preview/types.js +0 -2
  107. package/dist/preview/types.js.map +0 -1
  108. /package/{jest.config.js → jest.config.cjs} +0 -0
@@ -1,20 +1,21 @@
1
1
  {
2
2
  "name": "examples",
3
3
  "description": "An Aurelia 2 client application.",
4
- "version": "0.1.0",
4
+ "version": "2.2.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "???"
8
8
  },
9
9
  "license": "UNLICENSED",
10
10
  "dependencies": {
11
- "@aurelia/router": "2.0.0-beta.25",
12
- "aurelia": "2.0.0-beta.25"
11
+ "@aurelia/router": "^2.0.0-rc.0",
12
+ "aurelia": "^2.0.0-rc.0"
13
13
  },
14
14
  "devDependencies": {
15
- "@aurelia/storybook": "^2.0.0",
16
- "@aurelia/testing": "2.0.0-beta.25",
17
- "@aurelia/webpack-loader": "2.0.0-beta.25",
15
+ "@aurelia/storybook": "^2.2.1",
16
+ "@aurelia/testing": "^2.0.0-rc.0",
17
+ "@aurelia/webpack-loader": "^2.0.0-rc.0",
18
+ "@storybook/builder-webpack5": "^10.2.0",
18
19
  "@types/node": "^22.10.2",
19
20
  "autoprefixer": "^10.4.20",
20
21
  "css-loader": "^7.1.2",
@@ -24,7 +25,7 @@
24
25
  "html-webpack-plugin": "^5.6.3",
25
26
  "postcss": "^8.4.49",
26
27
  "postcss-loader": "^8.1.1",
27
- "storybook": "^10.0.0",
28
+ "storybook": "^10.2.0",
28
29
  "style-loader": "^4.0.0",
29
30
  "stylelint": "^16.12.0",
30
31
  "stylelint-config-standard": "^36.0.1",
@@ -17,11 +17,11 @@ export class NotificationCenter {
17
17
  @bindable() onDismiss?: (notification: NotificationItem) => void;
18
18
 
19
19
  get visibleNotifications() {
20
- return this.notifications.slice(0, this.maxVisible);
20
+ return (this.notifications ?? []).slice(0, this.maxVisible);
21
21
  }
22
22
 
23
23
  dismiss(notification: NotificationItem) {
24
- this.notifications = this.notifications.filter((note) => note.id !== notification.id);
24
+ this.notifications = (this.notifications ?? []).filter((note) => note.id !== notification.id);
25
25
  this.onDismiss?.(notification);
26
26
  }
27
27
  }
@@ -16,16 +16,24 @@ export class StatCard {
16
16
  }
17
17
 
18
18
  get changeLabel() {
19
- const rounded = Number(this.change).toFixed(1).replace(/\.0$/, '');
20
- const sign = this.change > 0 ? '+' : '';
19
+ const numeric = typeof this.change === 'number' ? this.change : Number(this.change);
20
+ if (!Number.isFinite(numeric)) {
21
+ return '0%';
22
+ }
23
+ const rounded = numeric.toFixed(1).replace(/\.0$/, '');
24
+ const sign = numeric > 0 ? '+' : '';
21
25
  return `${sign}${rounded}%`;
22
26
  }
23
27
 
24
28
  get changeState(): TrendState {
25
- if (this.change > 0) {
29
+ const numeric = typeof this.change === 'number' ? this.change : Number(this.change);
30
+ if (!Number.isFinite(numeric)) {
31
+ return 'neutral';
32
+ }
33
+ if (numeric > 0) {
26
34
  return 'positive';
27
35
  }
28
- if (this.change < 0) {
36
+ if (numeric < 0) {
29
37
  return 'negative';
30
38
  }
31
39
  return 'neutral';
@@ -20,7 +20,8 @@ export class WeatherWidget {
20
20
  try {
21
21
  this.state = 'loading';
22
22
  this.error = '';
23
- this.report = await this.service.getWeather(this.location);
23
+ const location = this.location ?? 'Seattle, WA';
24
+ this.report = await this.service.getWeather(location);
24
25
  this.state = 'ready';
25
26
  } catch (err) {
26
27
  this.state = 'error';
@@ -1,15 +1,17 @@
1
+ import { defineAureliaStory } from '@aurelia/storybook';
1
2
  import { MyApp } from './my-app';
2
3
 
3
4
  const meta = {
4
5
  title: 'Example/MyApp',
5
6
  component: MyApp,
6
- render: () => ({
7
- template: `<my-app></my-app>`,
8
- }),
7
+ render: () =>
8
+ defineAureliaStory({
9
+ template: `<my-app></my-app>`,
10
+ }),
9
11
  };
10
12
 
11
13
  export default meta;
12
14
 
13
15
  export const Default = {
14
16
  args: {}
15
- };
17
+ };
@@ -1,25 +1,31 @@
1
+ import { defineAureliaStory } from '@aurelia/storybook';
1
2
  import { fn, userEvent, within } from 'storybook/test';
2
3
  import { FeedbackForm } from '../components/feedback-form';
3
4
 
5
+ type FeedbackFormArgs = {
6
+ topics: string[];
7
+ submitting?: boolean;
8
+ onSubmit?: (payload: unknown) => void;
9
+ };
10
+
4
11
  const meta = {
5
12
  title: 'Dashboard/FeedbackForm',
6
13
  component: FeedbackForm,
7
14
  parameters: {
8
15
  layout: 'centered',
9
16
  },
10
- render: (args) => ({
11
- template: `<feedback-form topics.bind="topics"
12
- submitting.bind="submitting"
13
- on-submit.bind="onSubmit"></feedback-form>`,
14
- props: args,
15
- components: [FeedbackForm],
16
- }),
17
+ render: (args: FeedbackFormArgs) =>
18
+ defineAureliaStory({
19
+ template: `<feedback-form topics.bind="topics"
20
+ submitting.bind="submitting"
21
+ on-submit.bind="onSubmit"></feedback-form>`,
22
+ props: args,
23
+ components: [FeedbackForm],
24
+ }),
17
25
  };
18
26
 
19
27
  export default meta;
20
28
 
21
- type Story = typeof meta;
22
-
23
29
  export const DefaultForm = {
24
30
  args: {
25
31
  topics: ['Bug report', 'Feature request', 'General question'],
@@ -1,12 +1,20 @@
1
+ import { defineAureliaStory } from '@aurelia/storybook';
1
2
  import { HelloWorld } from '../hello-world';
2
3
  import { fn, userEvent, within } from 'storybook/test';
3
4
 
5
+ type HelloWorldArgs = {
6
+ message?: string;
7
+ onIncrement?: () => void;
8
+ };
9
+
4
10
  const meta = {
5
11
  title: 'Example/HelloWorld',
6
12
  component: HelloWorld,
7
- render: () => ({
8
- template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
9
- }),
13
+ render: (args: HelloWorldArgs) =>
14
+ defineAureliaStory({
15
+ template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
16
+ props: args,
17
+ }),
10
18
  argTypes: {
11
19
  message: { control: 'text' },
12
20
  onIncrement: { action: 'increment' }
@@ -38,15 +46,18 @@ export const InteractiveHelloWorld = {
38
46
  };
39
47
 
40
48
  export const NoArgs = {
41
- render: () => ({
42
- template: `<hello-world></hello-world>`
43
- })
49
+ render: () =>
50
+ defineAureliaStory({
51
+ template: `<hello-world></hello-world>`,
52
+ })
44
53
  };
45
54
 
46
55
  export const WithCustomTemplate = {
47
- render: () => ({
48
- template: `<hello-world message.bind="message">Click me!</hello-world>`
49
- }),
56
+ render: (args: HelloWorldArgs) =>
57
+ defineAureliaStory({
58
+ template: `<hello-world message.bind="message">Click me!</hello-world>`,
59
+ props: args,
60
+ }),
50
61
  args: {
51
62
  message: 'This is a custom message'
52
63
  }
@@ -1,6 +1,14 @@
1
+ import { defineAureliaStory } from '@aurelia/storybook';
1
2
  import { fn, userEvent, within } from 'storybook/test';
2
3
  import { NotificationCenter, NotificationItem } from '../components/notification-center';
3
4
 
5
+ type NotificationCenterArgs = {
6
+ notifications: NotificationItem[];
7
+ maxVisible?: number;
8
+ showTimestamp?: boolean;
9
+ onDismiss?: (item: NotificationItem) => void;
10
+ };
11
+
4
12
  const baseNotifications: NotificationItem[] = [
5
13
  {
6
14
  id: 1,
@@ -35,20 +43,19 @@ const baseNotifications: NotificationItem[] = [
35
43
  const meta = {
36
44
  title: 'Dashboard/NotificationCenter',
37
45
  component: NotificationCenter,
38
- render: (args) => ({
39
- template: `<notification-center notifications.bind="notifications"
40
- max-visible.bind="maxVisible"
41
- on-dismiss.bind="onDismiss"
42
- show-timestamp.bind="showTimestamp"></notification-center>`,
43
- props: args,
44
- components: [NotificationCenter],
45
- }),
46
+ render: (args: NotificationCenterArgs) =>
47
+ defineAureliaStory({
48
+ template: `<notification-center notifications.bind="notifications"
49
+ max-visible.bind="maxVisible"
50
+ on-dismiss.bind="onDismiss"
51
+ show-timestamp.bind="showTimestamp"></notification-center>`,
52
+ props: args,
53
+ components: [NotificationCenter],
54
+ }),
46
55
  };
47
56
 
48
57
  export default meta;
49
58
 
50
- type Story = typeof meta;
51
-
52
59
  export const DefaultNotifications = {
53
60
  args: {
54
61
  notifications: baseNotifications,
@@ -1,29 +1,39 @@
1
+ import { defineAureliaStory } from '@aurelia/storybook';
1
2
  import { fn, userEvent, within } from 'storybook/test';
2
3
  import { StatCard } from '../components/stat-card';
3
4
 
5
+ type StatCardArgs = {
6
+ title: string;
7
+ value: number | string;
8
+ unit?: string;
9
+ change?: number;
10
+ changeCopy?: string;
11
+ description?: string;
12
+ onRefresh?: () => void;
13
+ };
14
+
4
15
  const meta = {
5
16
  title: 'Dashboard/StatCard',
6
17
  component: StatCard,
7
18
  parameters: {
8
19
  layout: 'centered',
9
20
  },
10
- render: (args) => ({
11
- components: [StatCard],
12
- template: `<stat-card title.bind="title"
13
- value.bind="value"
14
- unit.bind="unit"
15
- change.bind="change"
16
- change-copy.bind="changeCopy"
17
- description.bind="description"
18
- on-refresh.bind="onRefresh"></stat-card>`,
19
- props: args,
20
- }),
21
+ render: (args: StatCardArgs) =>
22
+ defineAureliaStory({
23
+ components: [StatCard],
24
+ template: `<stat-card title.bind="title"
25
+ value.bind="value"
26
+ unit.bind="unit"
27
+ change.bind="change"
28
+ change-copy.bind="changeCopy"
29
+ description.bind="description"
30
+ on-refresh.bind="onRefresh"></stat-card>`,
31
+ props: args,
32
+ }),
21
33
  };
22
34
 
23
35
  export default meta;
24
36
 
25
- type Story = typeof meta;
26
-
27
37
  export const DefaultCard = {
28
38
  args: {
29
39
  title: 'Active users',
@@ -1,16 +1,22 @@
1
+ import { defineAureliaStory } from '@aurelia/storybook';
1
2
  import { Registration } from 'aurelia';
2
3
  import { fn, userEvent, within } from 'storybook/test';
3
4
  import { WeatherWidget } from '../components/weather-widget';
4
5
  import { IWeatherService, WeatherService, WeatherSummary } from '../services/weather-service';
5
6
 
7
+ type WeatherWidgetArgs = {
8
+ location: string;
9
+ };
10
+
6
11
  const mockService: WeatherService = {
7
12
  async getWeather(location: string): Promise<WeatherSummary> {
13
+ const safeLocation = location ?? '';
8
14
  return {
9
- location,
10
- condition: location.includes('Berlin') ? 'Cloudy' : 'Sunny',
11
- temperature: location.includes('Berlin') ? 16 : 24,
12
- high: location.includes('Berlin') ? 18 : 27,
13
- low: location.includes('Berlin') ? 11 : 19,
15
+ location: safeLocation,
16
+ condition: safeLocation.includes('Berlin') ? 'Cloudy' : 'Sunny',
17
+ temperature: safeLocation.includes('Berlin') ? 16 : 24,
18
+ high: safeLocation.includes('Berlin') ? 18 : 27,
19
+ low: safeLocation.includes('Berlin') ? 11 : 19,
14
20
  };
15
21
  },
16
22
  };
@@ -21,18 +27,17 @@ const meta = {
21
27
  parameters: {
22
28
  layout: 'centered',
23
29
  },
24
- render: (args) => ({
25
- template: `<weather-widget location.bind="location"></weather-widget>`,
26
- props: args,
27
- components: [WeatherWidget],
28
- items: [Registration.instance(IWeatherService, mockService)],
29
- }),
30
+ render: (args: WeatherWidgetArgs) =>
31
+ defineAureliaStory({
32
+ template: `<weather-widget location.bind="location"></weather-widget>`,
33
+ props: args,
34
+ components: [WeatherWidget],
35
+ items: [Registration.instance(IWeatherService, mockService)],
36
+ }),
30
37
  };
31
38
 
32
39
  export default meta;
33
40
 
34
- type Story = typeof meta;
35
-
36
41
  export const DefaultWeather = {
37
42
  args: {
38
43
  location: 'Seattle, WA',
@@ -0,0 +1,25 @@
1
+ import { renderToCanvas } from './preview/render';
2
+ import { defineAureliaStory } from './preview/helpers';
3
+ export { renderToCanvas };
4
+ export declare const render: typeof renderToCanvas;
5
+ export { defineAureliaStory };
6
+ export type { AureliaRenderer, AureliaStoryResult, AureliaArgsStoryFn, AureliaRenderContext, AureliaStoryContext, AureliaParameters, AureliaStoryParameters } from './preview/types';
7
+ export declare const framework: {
8
+ name: string;
9
+ options: {};
10
+ };
11
+ export declare const frameworkOptions: {
12
+ builder: {
13
+ name: string;
14
+ options: {};
15
+ };
16
+ };
17
+ export declare const aureliaFramework: {
18
+ name: string;
19
+ options: {};
20
+ builder: string;
21
+ };
22
+ export declare const externals: {
23
+ react: string;
24
+ 'react-dom': string;
25
+ };
package/dist/index.js CHANGED
@@ -2,6 +2,25 @@ import Aurelia, { CustomElement } from 'aurelia';
2
2
 
3
3
  // Track Aurelia apps for cleanup
4
4
  const appMap = new Map();
5
+ function mergeStoryProps(parameters, storyArgs, storyProps) {
6
+ return { ...parameters?.args, ...storyArgs, ...storyProps };
7
+ }
8
+ function getAureliaParameters(storyContext) {
9
+ const parameters = storyContext?.parameters?.aurelia;
10
+ if (!parameters || typeof parameters !== 'object') {
11
+ return undefined;
12
+ }
13
+ return parameters;
14
+ }
15
+ function normalizeRegistrations(parameters) {
16
+ if (!parameters) {
17
+ return [];
18
+ }
19
+ const register = Array.isArray(parameters.register) ? parameters.register : [];
20
+ const components = Array.isArray(parameters.components) ? parameters.components : [];
21
+ const items = Array.isArray(parameters.items) ? parameters.items : [];
22
+ return [...register, ...components, ...items].filter(Boolean);
23
+ }
5
24
  async function teardown(element) {
6
25
  if (appMap.has(element)) {
7
26
  const app = appMap.get(element);
@@ -33,8 +52,6 @@ async function renderToCanvas({ storyFn, title, name, showMain, showError, story
33
52
  const { parameters, component, args } = storyContext;
34
53
  let app = appMap.get(rootElement);
35
54
  const story = storyFn();
36
- // Temporary debug logging
37
- console.log(`[DEBUG] Story: ${name}, forceRemount: ${forceRemount}, hasExistingApp: ${!!app}, canvasId: ${canvasElement.className}`);
38
55
  if (!story) {
39
56
  showError({
40
57
  title: `Expecting an Aurelia component from the story: "${name}" of "${title}".`,
@@ -53,15 +70,15 @@ async function renderToCanvas({ storyFn, title, name, showMain, showError, story
53
70
  }
54
71
  // Clear container before mounting new app
55
72
  hostElement.innerHTML = '';
56
- const mergedProps = { ...parameters?.args, ...args, ...story.props };
57
- const aureliaApp = appBootstrapFn(story, mergedProps, hostElement, component);
73
+ const mergedProps = mergeStoryProps(parameters, args, story.props);
74
+ const aureliaApp = appBootstrapFn(story, mergedProps, hostElement, component, storyContext);
58
75
  await aureliaApp.start();
59
76
  appMap.set(rootElement, aureliaApp);
60
77
  app = aureliaApp;
61
78
  }
62
79
  else {
63
80
  // update existing app props
64
- const mergedProps = { ...parameters?.args, ...args, ...story.props };
81
+ const mergedProps = mergeStoryProps(parameters, args, story.props);
65
82
  if (app?.root?.controller?.viewModel) {
66
83
  Object.assign(app.root.controller.viewModel, mergedProps);
67
84
  }
@@ -71,18 +88,46 @@ async function renderToCanvas({ storyFn, title, name, showMain, showError, story
71
88
  await teardown(rootElement);
72
89
  };
73
90
  }
74
- function createAureliaApp(story, args, domElement, component) {
91
+ function createAureliaApp(story, args, domElement, component, storyContext) {
75
92
  const aurelia = new Aurelia(story.container);
76
- if (story.items?.length) {
77
- aurelia.register(...story.items);
93
+ const { container } = aurelia;
94
+ const aureliaParameters = getAureliaParameters(storyContext);
95
+ const registerIfNeeded = (resource) => {
96
+ if (!resource) {
97
+ return;
98
+ }
99
+ if (CustomElement.isType(resource)) {
100
+ const definition = CustomElement.getDefinition(resource);
101
+ if (container.has(definition.key, false)) {
102
+ return;
103
+ }
104
+ }
105
+ aurelia.register(resource);
106
+ };
107
+ const registerAll = (resources) => {
108
+ if (!resources?.length) {
109
+ return;
110
+ }
111
+ for (const resource of resources) {
112
+ registerIfNeeded(resource);
113
+ }
114
+ };
115
+ if (aureliaParameters?.configureContainer && storyContext) {
116
+ aureliaParameters.configureContainer(container, storyContext);
78
117
  }
79
- if (story.components?.length) {
80
- aurelia.register(...story.components);
118
+ registerAll(normalizeRegistrations(aureliaParameters));
119
+ registerAll(story.items);
120
+ const storyComponents = (story.components ?? []).filter(Boolean);
121
+ const dedupedComponents = component
122
+ ? storyComponents.filter((entry) => entry !== component)
123
+ : storyComponents;
124
+ for (const entry of dedupedComponents) {
125
+ registerIfNeeded(entry);
81
126
  }
82
127
  let { template } = story;
83
128
  if (component) {
84
129
  template = template ?? createComponentTemplate(component, story.innerHtml);
85
- aurelia.register(component);
130
+ registerIfNeeded(component);
86
131
  }
87
132
  const App = CustomElement.define({
88
133
  name: 'sb-app',
@@ -91,6 +136,9 @@ function createAureliaApp(story, args, domElement, component) {
91
136
  }, class {
92
137
  });
93
138
  const app = Object.assign(new App(), args);
139
+ if (aureliaParameters?.configure && storyContext) {
140
+ aureliaParameters.configure(aurelia, storyContext);
141
+ }
94
142
  return aurelia.app({
95
143
  host: domElement,
96
144
  component: app,
@@ -98,9 +146,15 @@ function createAureliaApp(story, args, domElement, component) {
98
146
  }
99
147
  function createComponentTemplate(component, innerHtml) {
100
148
  const def = CustomElement.getDefinition(component);
101
- return `<${def.name} ${Object.values(def.bindables)
149
+ const bindings = Object.values(def.bindables)
102
150
  .map((bindable) => `${bindable.attribute}.bind="${bindable.name}"`)
103
- .join(' ')}>${innerHtml ?? ''}</${def.name}>`;
151
+ .join(' ');
152
+ const bindingAttributes = bindings ? ` ${bindings}` : '';
153
+ return `<${def.name}${bindingAttributes}>${innerHtml ?? ''}</${def.name}>`;
154
+ }
155
+
156
+ function defineAureliaStory(story) {
157
+ return story;
104
158
  }
105
159
 
106
160
  const render = renderToCanvas;
@@ -128,5 +182,5 @@ const externals = {
128
182
  'react-dom': 'ReactDOM'
129
183
  };
130
184
 
131
- export { aureliaFramework, externals, framework, frameworkOptions, render, renderToCanvas };
185
+ export { aureliaFramework, defineAureliaStory, externals, framework, frameworkOptions, render, renderToCanvas };
132
186
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/preview/render.ts","../src/index.ts"],"sourcesContent":["import { STORY_CHANGED } from 'storybook/internal/core-events';\nimport type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';\nimport type { AureliaRenderer } from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\ninterface AureliaStoryResult {\n template: string;\n components?: unknown[];\n Component?: unknown;\n container?: any;\n items?: unknown[];\n innerHtml?: string;\n props?: Record<string, any>;\n}\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, any>();\n\nasync function teardown(element: HTMLElement) {\n if (appMap.has(element)) {\n const app = appMap.get(element);\n if (app) {\n await app.stop();\n appMap.delete(element);\n }\n }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, context) => {\n const { id, component: Component } = context;\n \n if (!Component) {\n throw new Error(\n `Unable to render story ${id} as the component annotation is missing from the default export`\n );\n }\n return { Component, props: args, template: '' };\n};\n\nexport async function renderToCanvas(\n {\n storyFn,\n title,\n name,\n showMain,\n showError,\n storyContext,\n forceRemount,\n }: RenderContext<AureliaRenderer>,\n canvasElement: HTMLElement,\n bootstrapAppFn?: typeof createAureliaApp\n) {\n // Store reference to the original storybook root element\n const rootElement = canvasElement;\n\n // Ensure we have (or create) a single container inside the root where the Aurelia app actually renders\n let hostElement: HTMLElement;\n if (rootElement.id === 'storybook-root') {\n hostElement = rootElement.querySelector('.aurelia-story-container') as HTMLElement;\n if (!hostElement) {\n hostElement = document.createElement('div');\n hostElement.className = 'aurelia-story-container';\n hostElement.style.height = '100%';\n rootElement.appendChild(hostElement);\n }\n } else {\n hostElement = rootElement;\n }\n\n // All app instances are now tracked by the *root* element, ensuring we only ever have one per story iframe\n const appBootstrapFn = bootstrapAppFn ?? createAureliaApp;\n const { parameters, component, args } = storyContext;\n \n let app = appMap.get(rootElement);\n const story = storyFn() as AureliaStoryResult;\n \n // Temporary debug logging\n console.log(`[DEBUG] Story: ${name}, forceRemount: ${forceRemount}, hasExistingApp: ${!!app}, canvasId: ${canvasElement.className}`);\n\n if (!story) {\n showError({\n title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n description: `\n Did you forget to return the Aurelia component from the story?\n Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n `,\n });\n return () => {};\n }\n\n showMain();\n\n if (!app || forceRemount) {\n if (forceRemount && app) {\n await teardown(rootElement);\n app = undefined;\n }\n // Clear container before mounting new app\n hostElement.innerHTML = '';\n\n const mergedProps = { ...parameters?.args, ...args, ...story.props };\n\n const aureliaApp = appBootstrapFn(\n story,\n mergedProps,\n hostElement,\n component as Constructable\n );\n await aureliaApp.start();\n appMap.set(rootElement, aureliaApp);\n app = aureliaApp;\n } else {\n // update existing app props\n const mergedProps = { ...parameters?.args, ...args, ...story.props };\n if (app?.root?.controller?.viewModel) {\n Object.assign(app.root.controller.viewModel, mergedProps);\n }\n }\n\n // Return cleanup fn\n return async () => {\n await teardown(rootElement);\n };\n}\n\nexport function createAureliaApp(\n story: AureliaStoryResult,\n args: Record<string, any>,\n domElement: HTMLElement,\n component?: Constructable\n) {\n const aurelia = new Aurelia(story.container);\n\n if (story.items?.length) {\n aurelia.register(...story.items);\n }\n\n if (story.components?.length) {\n aurelia.register(...story.components);\n }\n\n let { template } = story;\n\n if (component) {\n template = template ?? createComponentTemplate(component, story.innerHtml);\n aurelia.register(component);\n }\n\n const App = CustomElement.define(\n {\n name: 'sb-app',\n template,\n containerless: true,\n },\n class {}\n );\n\n const app = Object.assign(new App(), args);\n\n return aurelia.app({\n host: domElement,\n component: app,\n });\n}\n\nexport function createComponentTemplate(\n component: Constructable,\n innerHtml?: string\n): string {\n const def = CustomElement.getDefinition(component);\n\n return `<${def.name} ${Object.values(def.bindables)\n .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n .join(' ')}>${innerHtml ?? ''}</${def.name}>`;\n}","import type { StorybookConfig } from 'storybook/internal/types';\nimport { renderToCanvas } from './preview/render';\n\nexport { renderToCanvas };\nexport const render = renderToCanvas;\n\n// Define the framework\nexport const framework = {\n name: '@aurelia/storybook',\n options: {}\n};\n\n// Framework configuration for Storybook\nexport const frameworkOptions = {\n builder: {\n name: '@storybook/builder-vite',\n options: {}\n }\n};\n\n// Export a complete framework configuration\nexport const aureliaFramework = {\n name: '@aurelia/storybook',\n options: {},\n builder: '@storybook/builder-vite'\n};\n\n// Provide external dependencies configuration\nexport const externals = {\n 'react': 'React',\n 'react-dom': 'ReactDOM'\n};\n"],"names":[],"mappings":";;AAeA;AACA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAoB;AAE1C,eAAe,QAAQ,CAAC,OAAoB,EAAA;AAC1C,IAAA,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;QACvB,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;QAC/B,IAAI,GAAG,EAAE;AACP,YAAA,MAAM,GAAG,CAAC,IAAI,EAAE;AAChB,YAAA,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;QACxB;IACF;AACF;AAaO,eAAe,cAAc,CAClC,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,GACmB,EACjC,aAA0B,EAC1B,cAAwC,EAAA;;IAGxC,MAAM,WAAW,GAAG,aAAa;;AAGjC,IAAA,IAAI,WAAwB;AAC5B,IAAA,IAAI,WAAW,CAAC,EAAE,KAAK,gBAAgB,EAAE;AACvC,QAAA,WAAW,GAAG,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAgB;QAClF,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC3C,YAAA,WAAW,CAAC,SAAS,GAAG,yBAAyB;AACjD,YAAA,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACjC,YAAA,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC;QACtC;IACF;SAAO;QACL,WAAW,GAAG,WAAW;IAC3B;;AAGA,IAAA,MAAM,cAAc,GAAG,cAAc,IAAI,gBAAgB;IACzD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,YAAY;IAEpD,IAAI,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC;AACjC,IAAA,MAAM,KAAK,GAAG,OAAO,EAAwB;;AAG7C,IAAA,OAAO,CAAC,GAAG,CAAC,CAAA,eAAA,EAAkB,IAAI,mBAAmB,YAAY,CAAA,kBAAA,EAAqB,CAAC,CAAC,GAAG,CAAA,YAAA,EAAe,aAAa,CAAC,SAAS,CAAA,CAAE,CAAC;IAEpI,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,SAAS,CAAC;AACR,YAAA,KAAK,EAAE,CAAA,gDAAA,EAAmD,IAAI,CAAA,MAAA,EAAS,KAAK,CAAA,EAAA,CAAI;AAChF,YAAA,WAAW,EAAE;;;AAGZ,MAAA,CAAA;AACF,SAAA,CAAC;AACF,QAAA,OAAO,MAAK,EAAE,CAAC;IACjB;AAEA,IAAA,QAAQ,EAAE;AAEV,IAAA,IAAI,CAAC,GAAG,IAAI,YAAY,EAAE;AACxB,QAAA,IAAI,YAAY,IAAI,GAAG,EAAE;AACvB,YAAA,MAAM,QAAQ,CAAC,WAAW,CAAC;YAC3B,GAAG,GAAG,SAAS;QACjB;;AAEA,QAAA,WAAW,CAAC,SAAS,GAAG,EAAE;AAE1B,QAAA,MAAM,WAAW,GAAG,EAAE,GAAG,UAAU,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE;AAEpE,QAAA,MAAM,UAAU,GAAG,cAAc,CAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAA0B,CAC3B;AACD,QAAA,MAAM,UAAU,CAAC,KAAK,EAAE;AACxB,QAAA,MAAM,CAAC,GAAG,CAAC,WAAW,EAAE,UAAU,CAAC;QACnC,GAAG,GAAG,UAAU;IAClB;SAAO;;AAEL,QAAA,MAAM,WAAW,GAAG,EAAE,GAAG,UAAU,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE;QACpE,IAAI,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE;AACpC,YAAA,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC;QAC3D;IACF;;IAGA,OAAO,YAAW;AAChB,QAAA,MAAM,QAAQ,CAAC,WAAW,CAAC;AAC7B,IAAA,CAAC;AACH;AAEM,SAAU,gBAAgB,CAC9B,KAAyB,EACzB,IAAyB,EACzB,UAAuB,EACvB,SAAyB,EAAA;IAEzB,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;AAE5C,IAAA,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE;QACvB,OAAO,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;IAClC;AAEA,IAAA,IAAI,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE;QAC5B,OAAO,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC;IACvC;AAEA,IAAA,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK;IAExB,IAAI,SAAS,EAAE;QACb,QAAQ,GAAG,QAAQ,IAAI,uBAAuB,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;AAC1E,QAAA,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC;IAC7B;AAEA,IAAA,MAAM,GAAG,GAAG,aAAa,CAAC,MAAM,CAC9B;AACE,QAAA,IAAI,EAAE,QAAQ;QACd,QAAQ;AACR,QAAA,aAAa,EAAE,IAAI;KACpB,EACD,MAAA;AAAQ,KAAA,CACT;AAED,IAAA,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,IAAI,CAAC;IAE1C,OAAO,OAAO,CAAC,GAAG,CAAC;AACjB,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,SAAS,EAAE,GAAG;AACf,KAAA,CAAC;AACJ;AAEM,SAAU,uBAAuB,CACrC,SAAwB,EACxB,SAAkB,EAAA;IAElB,MAAM,GAAG,GAAG,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC;AAElD,IAAA,OAAO,CAAA,CAAA,EAAI,GAAG,CAAC,IAAI,CAAA,CAAA,EAAI,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,SAAS;AAC/C,SAAA,GAAG,CAAC,CAAC,QAAQ,KAAK,CAAA,EAAG,QAAQ,CAAC,SAAS,CAAA,OAAA,EAAU,QAAQ,CAAC,IAAI,GAAG;AACjE,SAAA,IAAI,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,CAAA,EAAA,EAAK,GAAG,CAAC,IAAI,CAAA,CAAA,CAAG;AACjD;;AC1KO,MAAM,MAAM,GAAG;AAEtB;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,OAAO,EAAE;;AAGX;AACO,MAAM,gBAAgB,GAAG;AAC9B,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE,yBAAyB;AAC/B,QAAA,OAAO,EAAE;AACV;;AAGH;AACO,MAAM,gBAAgB,GAAG;AAC9B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,OAAO,EAAE;;AAGX;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,WAAW,EAAE;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../src/preview/render.ts","../src/preview/helpers.ts","../src/index.ts"],"sourcesContent":["import type { RenderContext, ArgsStoryFn } from './storybook-types';\nimport type {\n AureliaRenderer,\n AureliaStoryResult,\n AureliaParameters,\n AureliaStoryContext,\n} from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, any>();\n\nfunction mergeStoryProps(\n parameters: { args?: Record<string, any> } | undefined,\n storyArgs: Record<string, any> | undefined,\n storyProps: Record<string, any> | undefined\n) {\n return { ...parameters?.args, ...storyArgs, ...storyProps };\n}\n\nfunction getAureliaParameters(\n storyContext?: AureliaStoryContext\n): AureliaParameters | undefined {\n const parameters = storyContext?.parameters?.aurelia;\n if (!parameters || typeof parameters !== 'object') {\n return undefined;\n }\n return parameters as AureliaParameters;\n}\n\nfunction normalizeRegistrations(\n parameters: AureliaParameters | undefined\n): unknown[] {\n if (!parameters) {\n return [];\n }\n\n const register = Array.isArray(parameters.register) ? parameters.register : [];\n const components = Array.isArray(parameters.components) ? parameters.components : [];\n const items = Array.isArray(parameters.items) ? parameters.items : [];\n\n return [...register, ...components, ...items].filter(Boolean);\n}\n\nasync function teardown(element: HTMLElement) {\n if (appMap.has(element)) {\n const app = appMap.get(element);\n if (app) {\n await app.stop();\n appMap.delete(element);\n }\n }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, context) => {\n const { id, component: Component } = context;\n \n if (!Component) {\n const label = context.title && context.name ? `${context.title} / ${context.name}` : id;\n throw new Error(\n `Unable to render story ${label} as the component annotation is missing from the default export`\n );\n }\n return { Component, props: args };\n};\n\nexport async function renderToCanvas(\n {\n storyFn,\n title,\n name,\n showMain,\n showError,\n storyContext,\n forceRemount,\n }: RenderContext<AureliaRenderer>,\n canvasElement: HTMLElement,\n bootstrapAppFn?: typeof createAureliaApp\n) {\n // Store reference to the original storybook root element\n const rootElement = canvasElement;\n\n // Ensure we have (or create) a single container inside the root where the Aurelia app actually renders\n let hostElement: HTMLElement;\n if (rootElement.id === 'storybook-root') {\n hostElement = rootElement.querySelector('.aurelia-story-container') as HTMLElement;\n if (!hostElement) {\n hostElement = document.createElement('div');\n hostElement.className = 'aurelia-story-container';\n hostElement.style.height = '100%';\n rootElement.appendChild(hostElement);\n }\n } else {\n hostElement = rootElement;\n }\n\n // All app instances are now tracked by the *root* element, ensuring we only ever have one per story iframe\n const appBootstrapFn = bootstrapAppFn ?? createAureliaApp;\n const { parameters, component, args } = storyContext;\n \n let app = appMap.get(rootElement);\n const story = storyFn() as AureliaStoryResult;\n \n if (!story) {\n showError({\n title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n description: `\n Did you forget to return the Aurelia component from the story?\n Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n `,\n });\n return () => {};\n }\n\n showMain();\n\n if (!app || forceRemount) {\n if (forceRemount && app) {\n await teardown(rootElement);\n app = undefined;\n }\n // Clear container before mounting new app\n hostElement.innerHTML = '';\n\n const mergedProps = mergeStoryProps(parameters, args, story.props);\n\n const aureliaApp = appBootstrapFn(\n story,\n mergedProps,\n hostElement,\n component as Constructable,\n storyContext\n );\n await aureliaApp.start();\n appMap.set(rootElement, aureliaApp);\n app = aureliaApp;\n } else {\n // update existing app props\n const mergedProps = mergeStoryProps(parameters, args, story.props);\n if (app?.root?.controller?.viewModel) {\n Object.assign(app.root.controller.viewModel, mergedProps);\n }\n }\n\n // Return cleanup fn\n return async () => {\n await teardown(rootElement);\n };\n}\n\nexport function createAureliaApp(\n story: AureliaStoryResult,\n args: Record<string, any>,\n domElement: HTMLElement,\n component?: Constructable,\n storyContext?: AureliaStoryContext\n) {\n const aurelia = new Aurelia(story.container);\n const { container } = aurelia;\n const aureliaParameters = getAureliaParameters(storyContext);\n\n const registerIfNeeded = (resource: unknown) => {\n if (!resource) {\n return;\n }\n\n if (CustomElement.isType(resource)) {\n const definition = CustomElement.getDefinition(resource);\n if (container.has(definition.key, false)) {\n return;\n }\n }\n\n aurelia.register(resource);\n };\n\n const registerAll = (resources?: unknown[]) => {\n if (!resources?.length) {\n return;\n }\n\n for (const resource of resources) {\n registerIfNeeded(resource);\n }\n };\n\n if (aureliaParameters?.configureContainer && storyContext) {\n aureliaParameters.configureContainer(container, storyContext);\n }\n\n registerAll(normalizeRegistrations(aureliaParameters));\n registerAll(story.items);\n\n const storyComponents = (story.components ?? []).filter(Boolean);\n const dedupedComponents = component\n ? storyComponents.filter((entry) => entry !== component)\n : storyComponents;\n\n for (const entry of dedupedComponents) {\n registerIfNeeded(entry);\n }\n\n let { template } = story;\n\n if (component) {\n template = template ?? createComponentTemplate(component, story.innerHtml);\n registerIfNeeded(component);\n }\n\n const App = CustomElement.define(\n {\n name: 'sb-app',\n template,\n containerless: true,\n },\n class {}\n );\n\n const app = Object.assign(new App(), args);\n\n if (aureliaParameters?.configure && storyContext) {\n aureliaParameters.configure(aurelia, storyContext);\n }\n\n return aurelia.app({\n host: domElement,\n component: app,\n });\n}\n\nexport function createComponentTemplate(\n component: Constructable,\n innerHtml?: string\n): string {\n const def = CustomElement.getDefinition(component);\n\n const bindings = Object.values(def.bindables)\n .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n .join(' ');\n const bindingAttributes = bindings ? ` ${bindings}` : '';\n\n return `<${def.name}${bindingAttributes}>${innerHtml ?? ''}</${def.name}>`;\n}\n","import type { AureliaStoryResult } from './types';\n\nexport function defineAureliaStory<TArgs = Record<string, unknown>>(\n story: AureliaStoryResult<TArgs>\n): AureliaStoryResult<TArgs> {\n return story;\n}\n","import { renderToCanvas } from './preview/render';\nimport { defineAureliaStory } from './preview/helpers';\n\nexport { renderToCanvas };\nexport const render = renderToCanvas;\nexport { defineAureliaStory };\nexport type {\n AureliaRenderer,\n AureliaStoryResult,\n AureliaArgsStoryFn,\n AureliaRenderContext,\n AureliaStoryContext,\n AureliaParameters,\n AureliaStoryParameters\n} from './preview/types';\n\n// Define the framework\nexport const framework = {\n name: '@aurelia/storybook',\n options: {}\n};\n\n// Framework configuration for Storybook\nexport const frameworkOptions = {\n builder: {\n name: '@storybook/builder-vite',\n options: {}\n }\n};\n\n// Export a complete framework configuration\nexport const aureliaFramework = {\n name: '@aurelia/storybook',\n options: {},\n builder: '@storybook/builder-vite'\n};\n\n// Provide external dependencies configuration\nexport const externals = {\n 'react': 'React',\n 'react-dom': 'ReactDOM'\n};\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Optionally adjust the Vite configuration.
3
+ */
4
+ export declare function viteFinal(config: any): Promise<any>;
5
+ /**
6
+ * Optionally adjust the Rsbuild configuration (Rspack-based).
7
+ */
8
+ export declare function rsbuildFinal(config: any): Promise<any>;
9
+ /**
10
+ * A function to configure webpack.
11
+ * @param config
12
+ * @returns
13
+ */
14
+ export declare function webpackFinal(config: any): Promise<any>;
15
+ declare const _default: {
16
+ viteFinal: typeof viteFinal;
17
+ rsbuildFinal: typeof rsbuildFinal;
18
+ webpackFinal: typeof webpackFinal;
19
+ };
20
+ export default _default;
21
+ export declare const previewAnnotations: string[];