@storybook/ember 8.0.0-alpha.1 → 8.0.0-alpha.11

package/dist/client/preview/config.d.ts

@@ -1,3 +1,4 @@
+import './globals';
 export { renderToCanvas } from './render';
 export declare const parameters: {
     renderer: "ember";

package/dist/client/preview/config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parameters = exports.renderToCanvas = void 0;
+require("./globals");
 var render_1 = require("./render");
 Object.defineProperty(exports, "renderToCanvas", { enumerable: true, get: function () { return render_1.renderToCanvas; } });
 exports.parameters = { renderer: 'ember' };

package/dist/client/preview/docs/config.d.ts

@@ -0,0 +1,3 @@
+import type { ArgTypesEnhancer } from '@storybook/types';
+export declare const parameters: {};
+export declare const argTypesEnhancers: ArgTypesEnhancer[];

package/dist/client/preview/docs/config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argTypesEnhancers = exports.parameters = void 0;
+const docs_tools_1 = require("@storybook/docs-tools");
+const jsondoc_1 = require("./jsondoc");
+exports.parameters = {
+    docs: {
+        story: { iframeHeight: '80px' },
+        extractArgTypes: jsondoc_1.extractArgTypes,
+        extractComponentDescription: jsondoc_1.extractComponentDescription,
+    },
+};
+exports.argTypesEnhancers = [docs_tools_1.enhanceArgTypes];

package/dist/client/preview/docs/jsondoc.d.ts

@@ -0,0 +1,3 @@
+export declare const getJSONDoc: () => any;
+export declare const extractArgTypes: (componentName: string) => any;
+export declare const extractComponentDescription: (componentName: string) => any;

package/dist/client/preview/docs/jsondoc.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractComponentDescription = exports.extractArgTypes = exports.getJSONDoc = void 0;
+/* eslint-disable no-underscore-dangle */
+const global_1 = require("@storybook/global");
+const getJSONDoc = () => {
+    return global_1.global.__EMBER_GENERATED_DOC_JSON__;
+};
+exports.getJSONDoc = getJSONDoc;
+const extractArgTypes = (componentName) => {
+    const json = (0, exports.getJSONDoc)();
+    if (!(json && json.included)) {
+        return null;
+    }
+    const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+    if (!componentDoc) {
+        return null;
+    }
+    return componentDoc.attributes.arguments.reduce((acc, prop) => {
+        acc[prop.name] = {
+            name: prop.name,
+            defaultValue: prop.defaultValue,
+            description: prop.description,
+            table: {
+                defaultValue: { summary: prop.defaultValue },
+                type: {
+                    summary: prop.type,
+                    required: prop.tags.length
+                        ? prop.tags.some((tag) => tag.name === 'required')
+                        : false,
+                },
+            },
+        };
+        return acc;
+    }, {});
+};
+exports.extractArgTypes = extractArgTypes;
+const extractComponentDescription = (componentName) => {
+    const json = (0, exports.getJSONDoc)();
+    if (!(json && json.included)) {
+        return null;
+    }
+    const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+    if (!componentDoc) {
+        return null;
+    }
+    return componentDoc.attributes.description;
+};
+exports.extractComponentDescription = extractComponentDescription;

package/dist/client/preview/render.js

@@ -1,21 +1,19 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToCanvas = void 0;
 const global_1 = require("@storybook/global");
 const ts_dedent_1 = require("ts-dedent");
-// @ts-expect-error (Converted from ts-ignore)
-const component_1 = __importDefault(require("@ember/component")); // eslint-disable-line import/no-unresolved
 const { document } = global_1.global;
 const rootEl = document.getElementById('storybook-root');
-const config = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/config/environment`);
-const app = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/app`).default.create({
-    autoboot: false,
-    rootElement: rootEl,
-    ...config.APP,
-});
+function loadEmberApp() {
+    const config = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/config/environment`);
+    return global_1.global.require(`${global_1.global.STORYBOOK_NAME}/app`).default.create({
+        autoboot: false,
+        rootElement: rootEl,
+        ...config.APP,
+    });
+}
+const app = loadEmberApp();
 let lastPromise = app.boot();
 let hasRendered = false;
 let isRendering = false;
@@ -33,7 +31,7 @@ function render(options, el) {
         return appInstancePrivate.boot().then(() => appInstancePrivate);
     })
         .then((instance) => {
-        instance.register('component:story-mode', component_1.default.extend({
+        instance.register('component:story-mode', Ember.Component.extend({
             layout: template || options,
             ...context,
         }));

package/dist/client/preview/types.d.ts

@@ -9,10 +9,6 @@ export interface OptionsArgs {
     context: any;
     element: any;
 }
-/**
- * @deprecated Use `EmberRenderer` instead.
- */
-export type EmberFramework = EmberRenderer;
 export interface EmberRenderer extends WebRenderer {
     component: any;
     storyResult: OptionsArgs;

package/dist/index.d.ts

@@ -1 +1 @@
-import './client/preview';
+export * from './types';

package/dist/index.js

@@ -1,7 +1,21 @@
 "use strict";
 /// <reference types="webpack-env" />
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-require("./client/preview");
+__exportStar(require("./types"), exports);
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined')
     module?.hot?.decline();

package/dist/index.mjs

@@ -1,5 +1,5 @@
 /// <reference types="webpack-env" />
-import './client/preview';
+export * from './types';
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined')
     module?.hot?.decline();

package/dist/preset.d.ts

@@ -1,4 +1,5 @@
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 export declare const addons: PresetProperty<'addons'>;
+export declare const webpackFinal: StorybookConfig['webpackFinal'];
 export declare const core: PresetProperty<'core', StorybookConfig>;

package/dist/preset.js

@@ -1,12 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.core = exports.addons = void 0;
+exports.core = exports.webpackFinal = exports.addons = void 0;
 const path_1 = require("path");
+const builder_webpack5_1 = require("@storybook/builder-webpack5");
+const core_common_1 = require("@storybook/core-common");
 const getAbsolutePath = (input) => (0, path_1.dirname)(require.resolve((0, path_1.join)(input, 'package.json')));
 exports.addons = [
     require.resolve('./server/framework-preset-babel-ember'),
     require.resolve('./server/framework-preset-ember-docs'),
 ];
+const webpackFinal = async (baseConfig, options) => {
+    const { virtualModules } = await (0, builder_webpack5_1.getVirtualModules)(options);
+    const babelOptions = await options.presets.apply('babel', {}, options);
+    const typescriptOptions = await options.presets.apply('typescript', {}, options);
+    return {
+        ...baseConfig,
+        module: {
+            ...baseConfig.module,
+            rules: [
+                ...(baseConfig.module?.rules ?? []),
+                {
+                    test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
+                    use: [
+                        {
+                            loader: require.resolve('babel-loader'),
+                            options: {
+                                cacheDirectory: (0, core_common_1.resolvePathInStorybookCache)('babel'),
+                                ...babelOptions,
+                            },
+                        },
+                    ],
+                    include: [(0, core_common_1.getProjectRoot)()],
+                    exclude: [/node_modules/, ...Object.keys(virtualModules)],
+                },
+            ],
+        },
+    };
+};
+exports.webpackFinal = webpackFinal;
 const core = async (config, options) => {
     const framework = await options.presets.apply('framework');
     return {

package/dist/preset.mjs

@@ -1,9 +1,39 @@
 import { dirname, join } from 'path';
+import { getVirtualModules } from '@storybook/builder-webpack5';
+import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common';
 const getAbsolutePath = (input) => dirname(require.resolve(join(input, 'package.json')));
 export const addons = [
     require.resolve('./server/framework-preset-babel-ember'),
     require.resolve('./server/framework-preset-ember-docs'),
 ];
+export const webpackFinal = async (baseConfig, options) => {
+    const { virtualModules } = await getVirtualModules(options);
+    const babelOptions = await options.presets.apply('babel', {}, options);
+    const typescriptOptions = await options.presets.apply('typescript', {}, options);
+    return {
+        ...baseConfig,
+        module: {
+            ...baseConfig.module,
+            rules: [
+                ...(baseConfig.module?.rules ?? []),
+                {
+                    test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
+                    use: [
+                        {
+                            loader: require.resolve('babel-loader'),
+                            options: {
+                                cacheDirectory: resolvePathInStorybookCache('babel'),
+                                ...babelOptions,
+                            },
+                        },
+                    ],
+                    include: [getProjectRoot()],
+                    exclude: [/node_modules/, ...Object.keys(virtualModules)],
+                },
+            ],
+        },
+    };
+};
 export const core = async (config, options) => {
     const framework = await options.presets.apply('framework');
     return {

package/dist/server/framework-preset-babel-ember.d.ts

@@ -1,3 +1,3 @@
-import type { PresetProperty } from '@storybook/types';
-export declare const babel: PresetProperty<'babel'>;
+import type { PresetProperty, PresetPropertyFn } from '@storybook/types';
+export declare const babel: PresetPropertyFn<'babel'>;
 export declare const previewAnnotations: PresetProperty<'previewAnnotations'>;

package/dist/server/framework-preset-babel-ember.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewAnnotations = exports.babel = void 0;
 const ember_template_compiler_1 = require("ember-source/dist/ember-template-compiler");
-const core_common_1 = require("@storybook/core-common");
+const util_1 = require("../util");
 let emberOptions;
 function precompileWithPlugins(string, options) {
     const precompileOptions = options;
@@ -17,7 +17,6 @@ const babel = (config, options) => {
             if (e.preset && e.preset.emberOptions) {
                 emberOptions = e.preset.emberOptions;
                 if (options.presetsList) {
-                    // eslint-disable-next-line no-param-reassign
                     delete options.presetsList[index].preset.emberOptions;
                 }
             }
@@ -45,6 +44,6 @@ const babel = (config, options) => {
 };
 exports.babel = babel;
 const previewAnnotations = (entry = []) => {
-    return [...entry, (0, core_common_1.findDistEsm)(__dirname, 'client/preview/config')];
+    return [...entry, (0, util_1.findDistFile)(__dirname, 'client/preview/config')];
 };
 exports.previewAnnotations = previewAnnotations;

package/dist/server/framework-preset-ember-docs.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewAnnotations = void 0;
-const core_common_1 = require("@storybook/core-common");
 const docs_tools_1 = require("@storybook/docs-tools");
+const util_1 = require("../util");
 const previewAnnotations = (entry = [], options) => {
     if (!(0, docs_tools_1.hasDocsOrControls)(options))
         return entry;
-    return [...entry, (0, core_common_1.findDistEsm)(__dirname, 'client/docs/config')];
+    return [...entry, (0, util_1.findDistFile)(__dirname, 'client/preview/docs/config')];
 };
 exports.previewAnnotations = previewAnnotations;

package/dist/types.d.ts

@@ -22,4 +22,7 @@ type StorybookConfigFramework = {
  * The interface for Storybook configuration in `main.ts` files.
  */
 export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
+declare global {
+    var __EMBER_GENERATED_DOC_JSON__: any;
+}
 export {};

package/dist/util.d.ts

@@ -0,0 +1 @@
+export declare const findDistFile: (cwd: string, relativePath: string) => string;

package/dist/util.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findDistFile = void 0;
+const path_1 = __importDefault(require("path"));
+const find_up_1 = require("find-up");
+const findDistFile = (cwd, relativePath) => {
+    const nearestPackageJson = (0, find_up_1.sync)('package.json', { cwd });
+    if (!nearestPackageJson) {
+        throw new Error(`Could not find package.json in: ${cwd}`);
+    }
+    const packageDir = path_1.default.dirname(nearestPackageJson);
+    return path_1.default.join(packageDir, 'dist', relativePath);
+};
+exports.findDistFile = findDistFile;

package/dist/util.mjs

@@ -0,0 +1,10 @@
+import path from 'path';
+import { sync as findUpSync } from 'find-up';
+export const findDistFile = (cwd, relativePath) => {
+    const nearestPackageJson = findUpSync('package.json', { cwd });
+    if (!nearestPackageJson) {
+        throw new Error(`Could not find package.json in: ${cwd}`);
+    }
+    const packageDir = path.dirname(nearestPackageJson);
+    return path.join(packageDir, 'dist', relativePath);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.11",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
@@ -32,27 +32,31 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.0.0-alpha.1",
-    "@storybook/core-common": "8.0.0-alpha.1",
-    "@storybook/docs-tools": "8.0.0-alpha.1",
+    "@storybook/builder-webpack5": "8.0.0-alpha.11",
+    "@storybook/core-common": "8.0.0-alpha.11",
+    "@storybook/docs-tools": "8.0.0-alpha.11",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "8.0.0-alpha.1",
-    "@storybook/types": "8.0.0-alpha.1",
+    "@storybook/preview-api": "8.0.0-alpha.11",
+    "@storybook/types": "8.0.0-alpha.11",
+    "babel-loader": "9.1.3",
+    "find-up": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@types/babel__preset-env": "^7",
     "ember-source": "~3.28.1",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "@types/ember__component": "4.0.8",
-    "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
-    "babel-plugin-htmlbars-inline-precompile": "2 || 3",
-    "ember-source": "~3.28.1"
+    "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",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

package/template/cli/Button.stories.js

@@ -6,13 +6,13 @@ import { linkTo } from '@storybook/addon-links';
 export default {
   title: 'Example/Button',
   render: (args) => ({
-    template: hbs`<button {{action onClick}}>{{label}}</button>`,
+    template: hbs`<button {{on "click" this.onClick}}>{{this.label}}</button>`,
     context: args,
   }),
   argTypes: {
     label: { control: 'text' },
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/ember/writing-docs/autodocs
   tags: ['autodocs'],
 };
 
@@ -27,13 +27,14 @@ export const Text = {
 export const Emoji = {
   args: {
     label: '😀 😎 👍 💯',
+    onClick: action('onClick'),
   },
 };
 
 export const TextWithAction = {
   render: () => ({
     template: hbs`
-    <button {{action onClick}}>
+    <button {{on "click" this.onClick}}>
       Trigger Action
     </button>
   `,
@@ -50,12 +51,12 @@ export const TextWithAction = {
 export const ButtonWithLinkToAnotherStory = {
   render: () => ({
     template: hbs`
-    <button {{action onClick}}>
+    <button {{on "click" this.onClick}}>
       Go to Welcome Story
     </button>
   `,
     context: {
-      onClick: linkTo('example-introduction--page'),
+      onClick: linkTo('example-button--docs'),
     },
   }),
   name: 'button with link to another story',

package/dist/client/preview/index.d.ts

@@ -1 +0,0 @@
-import './globals';

package/dist/client/preview/index.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("./globals");

package/jest.config.js

@@ -1,7 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../jest.config.node');
-
-module.exports = {
-  ...baseConfig,
-  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
-};