storybook-framework-qwik 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types.js';

package/dist/index.js

@@ -1 +1 @@
-export {};
+export * from './types.js';

package/dist/preset.d.ts

@@ -0,0 +1,5 @@
+import type { StorybookConfig } from '@storybook/builder-vite';
+export declare const core: StorybookConfig['core'];
+export declare const viteFinal: StorybookConfig['viteFinal'];
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
+export declare const previewHead: (head: string) => string;

package/dist/preset.js

@@ -2,10 +2,9 @@ import { mergeConfig } from 'vite';
 import { QWIK_LOADER } from '@builder.io/qwik/loader';
 export const core = {
     builder: '@storybook/builder-vite',
-    renderer: '@storybook/html',
+    renderer: 'storybook-framework-qwik',
 };
 export const viteFinal = async (defaultConfig, options) => {
-    console.log('VITE THING');
     const config = mergeConfig(defaultConfig, {
         build: {
             target: 'es2020',

package/dist/preview.d.ts

@@ -0,0 +1,4 @@
+import { ArgsStoryFn, RenderContext } from '@storybook/types';
+import { QwikRenderer } from './types.js';
+export declare const render: ArgsStoryFn<QwikRenderer<unknown>>;
+export declare function renderToCanvas<T>({ storyFn, showMain, showError }: RenderContext<QwikRenderer<T>>, canvasElement: QwikRenderer<T>['canvasElement']): Promise<void>;

package/dist/preview.js

@@ -1,13 +1,27 @@
-import { render } from '@builder.io/qwik';
-import { QwikCityMockProvider } from '@builder.io/qwik-city';
+import { render as renderQwik } from '@builder.io/qwik';
 import { jsx as _jsx } from '@builder.io/qwik/jsx-runtime';
-const qwikCityDecorator = (Story) => {
-    const parent = document.createElement('div');
-    const jsxNode = Story();
-    const tree = _jsx(QwikCityMockProvider, {
-        children: jsxNode,
-    }, 'QwikCityMockProvider');
-    render(parent, tree);
-    return parent;
+// returns the Qwik component as a JSX element (</MyComponent>)
+// If a story has a custom renderer, it will replace this function.
+export const render = (args, context) => {
+    const { component } = context;
+    if (typeof component === 'function') {
+        return component(args, context.name);
+    }
+    return component;
 };
-export const decorators = [qwikCityDecorator];
+export async function renderToCanvas({ storyFn, showMain, showError }, canvasElement) {
+    const container = document.createElement('div');
+    const tree = _jsx(storyFn, {}, 'qwik-story');
+    await renderQwik(container, tree);
+    canvasElement.childNodes.forEach((c) => c.remove());
+    canvasElement.append(container);
+    showMain();
+}
+// I don't know how to to HMR stuff correctly, and Vite seems to keep referencing old files when you make a change.
+// Force a reload when vite notifies of an update as a dirty temporary workaround.
+const viteHotMeta = import.meta.hot;
+if (viteHotMeta) {
+    viteHotMeta.on('vite:afterUpdate', () => {
+        document.location.reload();
+    });
+}

package/dist/qwik-city-decorator.d.ts

@@ -0,0 +1,3 @@
+import { Decorator } from './types.js';
+/** Wraps story in QwikCityMockProvider */
+export declare const qwikCityDecorator: Decorator;

package/dist/qwik-city-decorator.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from '@builder.io/qwik/jsx-runtime';
+import { QwikCityMockProvider } from '@builder.io/qwik-city';
+/** Wraps story in QwikCityMockProvider */
+export const qwikCityDecorator = (Story) => {
+    const storyNode = Story();
+    // equal to <QwikCityMockProvider><Story/></QwikCityMockProvider>
+    const tree = _jsx(QwikCityMockProvider, // avoid qwik-city types in return type
+    {
+        children: storyNode,
+    }, 'QwikCityMockProvider');
+    return tree;
+};

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+import { Component } from '@builder.io/qwik';
+import { WebRenderer } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+import type { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations, DecoratorFunction, LoaderFunction, StoryContext as GenericStoryContext, StrictArgs } from '@storybook/types';
+export interface QwikRenderer<T> extends WebRenderer {
+    component: Component<T>;
+    storyResult: ReturnType<Component<T>>;
+}
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export type Meta<TArgs = Args> = ComponentAnnotations<QwikRenderer<TArgs>, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<QwikRenderer<TArgs>, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryObj<TArgs = Args> = StoryAnnotations<QwikRenderer<TArgs>, TArgs>;
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<QwikRenderer<TArgs>, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<QwikRenderer<TArgs>, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<QwikRenderer<TArgs>, TArgs>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "storybook-framework-qwik",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Storybook for Qwik: View Qwik components in isolation.",
   "keywords": [
     "storybook",
-    "qwik"
+    "hydration",
+    "resumable",
+    "qwik",
+    "reactive",
+    "framework",
+    "components",
+    "builder.io"
   ],
   "type": "module",
   "//": "not sure why dist/preview is needed, but it is",
@@ -29,14 +35,20 @@
       "import": "./dist/preview.js",
       "types": "./dist/preview.d.ts"
     },
+    "./qwik-city-decorator": {
+      "require": "./dist/qwik-city-decorator.js",
+      "import": "./dist/qwik-city-decorator.js",
+      "types": "./dist/qwik-city-decorator.d.ts"
+    },
     "./package.json": "./package.json"
   },
-  "homepage": "TODO",
+  "homepage": "https://github.com/literalpie/storybook-framework-qwik",
   "bugs": {
-    "//": "TODO"
+    "url": "https://github.com/literalpie/storybook-framework-qwik"
   },
   "repository": {
     "type": "git",
+    "url": "https://github.com/literalpie/storybook-framework-qwik.git",
     "directory": "app/qwik"
   },
   "license": "MIT",
@@ -44,7 +56,8 @@
     "README.md",
     "./dist/*.js",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "./dist/*.d.ts"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -54,18 +67,13 @@
     "build": "tsc --outDir ./dist --listEmittedFiles"
   },
   "dependencies": {
-    "@builder.io/qwik": "^0.15.2",
-    "@builder.io/qwik-city": "^0.0.128",
-    "@storybook/addons": "7.0.0-beta.9",
-    "@storybook/builder-vite": "7.0.0-beta.9",
-    "@storybook/channel-postmessage": "7.0.0-beta.9",
-    "@storybook/channel-websocket": "7.0.0-beta.9",
-    "@storybook/client-api": "7.0.0-beta.9",
-    "@storybook/core-server": "7.0.0-beta.9",
-    "@storybook/html": "7.0.0-beta.9",
-    "@storybook/node-logger": "7.0.0-beta.9",
-    "@storybook/preview-web": "7.0.0-beta.9",
-    "magic-string": "^0.26.1"
+    "@storybook/builder-vite": "^7.0.0-beta.7"
+  },
+  "peerDependencies": {
+    "@builder.io/qwik": "^0.15.2"
+  },
+  "optionalDependencies": {
+    "@builder.io/qwik-city": "^0.0.128"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",