Rework Ember framework to use Vite

code/frameworks/ember/build-config.ts

@@ -7,21 +7,27 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./client'],
+        entryPoint: './src/client/index.ts',
+      },
+      {
+        exportEntries: ['./client/config'],
+        entryPoint: './src/client/config.ts',
+      },
+      {
+        exportEntries: ['./client/docs/config'],
+        entryPoint: './src/client/docs/config.ts',
+      },
     ],
     node: [
       {
         exportEntries: ['./node'],
         entryPoint: './src/node/index.ts',
       },
-      {
-        exportEntries: ['./server/framework-preset-babel-ember'],
-        entryPoint: './src/server/framework-preset-babel-ember.ts',
-        dts: false,
-      },
       {
         exportEntries: ['./preset'],
         entryPoint: './src/preset.ts',
-        dts: false,
       },
     ],
   },

code/frameworks/ember/package.json

@@ -29,40 +29,54 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "default": "./dist/client/index.js"
+    },
+    "./client/config": {
+      "types": "./dist/client/config.d.ts",
+      "default": "./dist/client/config.js"
+    },
+    "./client/docs/config": {
+      "types": "./dist/client/docs/config.d.ts",
+      "default": "./dist/client/docs/config.js"
+    },
     "./node": {
       "types": "./dist/node/index.d.ts",
       "default": "./dist/node/index.js"
     },
     "./package.json": "./package.json",
-    "./preset": "./dist/preset.js",
-    "./server/framework-preset-babel-ember": "./dist/server/framework-preset-babel-ember.js"
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "default": "./dist/preset.js"
+    }
   },
   "files": [
     "dist/**/*",
     "template/cli/**/*",
+    "addon-main.cjs",
     "README.md",
     "*.js",
     "*.d.ts",
     "!src/**/*"
   ],
   "dependencies": {
-    "@storybook/builder-webpack5": "workspace:*",
+    "@storybook/builder-vite": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "babel-loader": "9.1.3",
-    "empathic": "2.0.0"
+    "content-tag": "^4.0.0",
+    "ts-dedent": "^2.0.0",
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
-    "ember-source": "~3.28.1",
-    "typescript": "^5.8.3"
+    "@types/node": "^22.0.0",
+    "ember-source": "^6.8.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4"
   },
   "peerDependencies": {
-    "@babel/core": "*",
-    "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
-    "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
-    "ember-source": "~3.28.1 || >=4.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "storybook": "workspace:^"
+    "ember-source": ">=6.8.0",
+    "storybook": "workspace:^",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/ember/src/client/config.ts

@@ -0,0 +1,13 @@
+import { enhanceArgTypes } from 'storybook/internal/docs-tools';
+import type { ArgTypesEnhancer, Parameters } from 'storybook/internal/types';
+
+export { renderToCanvas, render } from './render';
+
+export const parameters: Parameters = {
+  renderer: 'ember',
+  docs: {
+    story: { inline: true },
+  },
+};
+
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

code/frameworks/ember/src/client/docs/config.ts

@@ -0,0 +1,15 @@
+import { SourceType } from 'storybook/internal/docs-tools';
+import type { DecoratorFunction, Parameters } from 'storybook/internal/types';
+
+import { sourceDecorator } from './sourceDecorator';
+
+export const parameters: Parameters = {
+  docs: {
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+    },
+  },
+};
+
+export const decorators: DecoratorFunction[] = [sourceDecorator];

code/frameworks/ember/src/client/docs/sourceDecorator.ts

@@ -0,0 +1,86 @@
+import { SourceType } from 'storybook/internal/docs-tools';
+import type { ArgTypes, Args, DecoratorFunction } from 'storybook/internal/types';
+
+import { emitTransformCode, useEffect, useRef } from 'storybook/preview-api';
+
+import type { StoryFn } from '../public-types';
+import type { EmberRenderer } from '../types';
+
+function skipSourceRender(context: Parameters<DecoratorFunction<EmberRenderer>>[1]) {
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory;
+
+  // always render if the user forces it
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    return false;
+  }
+
+  // never render if the user is forcing the block to render code, or
+  // if the user provides code, or if it's not an args story.
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
+}
+
+export const sourceDecorator: DecoratorFunction<EmberRenderer> = (storyFn, context) => {
+  const source = useRef<string | undefined>(undefined);
+  const story = storyFn();
+
+  useEffect(() => {
+    const renderedForSource = context?.parameters.docs?.source?.excludeDecorators
+      ? (context.originalStoryFn as StoryFn)(context.args, context)
+      : story;
+
+    if (!skipSourceRender(context)) {
+      const code =
+        generateGlimmerSource(renderedForSource, context.args, context.argTypes) ?? undefined;
+      emitTransformCode(code, context);
+      source.current = code;
+    }
+  });
+
+  return story;
+};
+
+export function generateGlimmerSource(
+  component: object & { name?: string },
+  args: Args,
+  argTypes: ArgTypes
+): string | null {
+  const name = component.name;
+  if (!name) {
+    return null;
+  }
+
+  const propsArray = Object.entries(args)
+    .map(([k, v]) => toArgument(k, v, argTypes))
+    .filter((p) => p);
+
+  if (propsArray.length === 0) {
+    return `<${name} />`;
+  } else if (propsArray.length > 3) {
+    return `<${name}\n  ${propsArray.join('\n  ')}\n/>`;
+  }
+  return `<${name} ${propsArray.join(' ')} />`;
+}
+
+function toArgument(key: string, value: unknown, argTypes: ArgTypes): string | null {
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  const argType = argTypes[key];
+
+  // event should be skipped
+  if (argType && argType.action) {
+    return null;
+  }
+
+  if (typeof value === 'string') {
+    return `@${key}=${JSON.stringify(value)}`;
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return `@${key}={{${JSON.stringify(value)}}}`;
+  }
+
+  return null;
+}

code/frameworks/ember/src/client/globals.ts

@@ -0,0 +1 @@
+globalThis.STORYBOOK_ENV = 'ember';

code/frameworks/ember/src/client/index.ts

@@ -0,0 +1,5 @@
+import './globals.ts';
+
+export { renderToCanvas } from './render';
+export * from './public-types';
+export * from './portable-stories';

code/frameworks/ember/src/client/portable-stories.ts

@@ -0,0 +1,42 @@
+import type {
+  NamedOrDefaultProjectAnnotations,
+  NormalizedProjectAnnotations,
+} from 'storybook/internal/types';
+
+import {
+  setProjectAnnotations as originalSetProjectAnnotations,
+  setDefaultProjectAnnotations,
+} from 'storybook/preview-api';
+
+import * as INTERNAL_DEFAULT_PROJECT_ANNOTATIONS from './render';
+import type { EmberRenderer } from './types';
+
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/preact';
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ * ```
+ *
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(
+  projectAnnotations:
+    | NamedOrDefaultProjectAnnotations<any>
+    | NamedOrDefaultProjectAnnotations<any>[]
+): NormalizedProjectAnnotations<EmberRenderer> {
+  setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
+  return originalSetProjectAnnotations(
+    projectAnnotations
+  ) as NormalizedProjectAnnotations<EmberRenderer>;
+}