storybook-vue-addon - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/esbuild.js

 import {
   src_default
-} from "./chunk-XGHS4HKD.js";
+} from "./chunk-JGF6HVSM.js";
 
@@ -5,0 +5,0 @@ // src/esbuild.ts

dist/index.js

 import {
   src_default
-} from "./chunk-XGHS4HKD.js";
+} from "./chunk-JGF6HVSM.js";
 export {
   src_default as default
 };

dist/nuxt.js

 import {
   src_default
-} from "./chunk-XGHS4HKD.js";
+} from "./chunk-JGF6HVSM.js";
 
@@ -5,0 +5,0 @@ // src/nuxt.ts

dist/rollup.js

 import {
   src_default
-} from "./chunk-XGHS4HKD.js";
+} from "./chunk-JGF6HVSM.js";
 
@@ -5,0 +5,0 @@ // src/rollup.ts

dist/storybook.js

 import {
   vite_default
-} from "./chunk-E3I4I7UR.js";
+} from "./chunk-PNEZC7GQ.js";
 import {
-  N,
   parse
-} from "./chunk-XGHS4HKD.js";
+} from "./chunk-JGF6HVSM.js";
 
 // src/core/indexer.ts
 import fs from "fs/promises";
+import { toId } from "@storybook/csf";
 async function indexer(fileName, options) {
@@ -16,9 +16,21 @@ const code = (await fs.readFile(fileName, { encoding: "utf-8" })).toString();
 function indexerCode(code, { makeTitle }) {
-  const { meta, stories } = parse(code);
+  const { meta, stories, docs } = parse(code);
+  const indexedStories = stories.map(({ id, title }) => ({
+    id: toId(meta.title || "default", id),
+    name: title
+  }));
+  if (docs) {
+    indexedStories.push({
+      id: toId(meta.title || "default", "docs"),
+      name: "Docs",
+      parameters: {
+        // Otherwise it is added as an ordinary story: https://github.com/storybookjs/storybook/blob/224e9b807ee2359504d7b6ae15907fa80c8ee1b3/code/lib/core-server/src/utils/StoryIndexGenerator.ts#L260-L263
+        docsOnly: true
+      }
+    });
+    meta.tags.push("stories-mdx");
+  }
   return {
-    meta: { title: makeTitle(meta.title) },
-    stories: stories.map(({ id, title }) => ({
-      id: N(meta.title || "default", id),
-      name: title
-    }))
+    meta: { title: makeTitle(meta.title), tags: meta.tags },
+    stories: indexedStories
   };
@@ -25,0 +37,0 @@ }

dist/vite.js

 import {
   vite_default
-} from "./chunk-E3I4I7UR.js";
-import "./chunk-XGHS4HKD.js";
+} from "./chunk-PNEZC7GQ.js";
+import "./chunk-JGF6HVSM.js";
 export {
   vite_default as default
 };

dist/webpack.js

 import {
   src_default
-} from "./chunk-XGHS4HKD.js";
+} from "./chunk-JGF6HVSM.js";
 
@@ -5,0 +5,0 @@ // src/webpack.ts

package.json

 {
   "name": "storybook-vue-addon",
   "type": "module",
-  "version": "0.2.1",
-  "packageManager": "pnpm@7.29.3",
+  "version": "0.3.0",
+  "packageManager": "pnpm@8.2.0",
   "description": "Storybook stories in native Vue format",
@@ -79,4 +79,6 @@ "license": "MIT",
   "dependencies": {
-    "consola": "^2.15.3",
-    "prettier": "^2.8.4",
+    "@storybook/csf": "^0.1.0",
+    "@storybook/mdx2-csf": "^1.0.0",
+    "consola": "^3.0.2",
+    "prettier": "^2.8.7",
     "prettier-plugin-organize-imports": "^3.2.2",
@@ -86,26 +88,26 @@ "unplugin": "^1.3.1"
   "peerDependencies": {
-    "vite": "^4.2.0",
+    "vite": "^4.2.1",
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@nuxt/schema": "^3.3.1",
+    "@nuxt/schema": "^3.4.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@types/node": "^18.15.3",
+    "@types/node": "^18.15.11",
     "@types/prettier": "^2.7.2",
-    "@vitest/coverage-c8": "^0.29.3",
+    "@vitest/coverage-c8": "^0.30.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "esno": "^0.16.3",
     "fast-glob": "^3.2.12",
-    "nodemon": "^2.0.21",
-    "rimraf": "^4.4.0",
-    "rollup": "^3.19.1",
-    "tsup": "^6.6.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.0",
-    "vitest": "^0.29.3",
+    "nodemon": "^2.0.22",
+    "rimraf": "^5.0.0",
+    "rollup": "^3.20.2",
+    "tsup": "^6.7.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.2.1",
+    "vitest": "^0.30.1",
     "vue": "^3.2.47",
-    "webpack": "^5.76.2"
+    "webpack": "^5.79.0"
   },
@@ -112,0 +114,0 @@ "scripts": {

README.md

@@ -47,2 +47,3 @@ # Storybook Vue Addon
 - Syntax highlighting and full editor support (including Volar) for writing story templates
+- Add markdown documentation in a custom `docs` block, directly in your `stories.vue` files (see below for details)
 - The component that is displayed needs only be declared once (via `<Stories :component="...">`) and not for every story
@@ -91,2 +92,41 @@ - Simple integration with Storybook and automatic Vite support
 
+## Adding documentation
+
+You can add documentation for your components directly in your story SFC using the custom `docs` block.
+
+```vue
+<template>Define your stories here as above</template>
+
+<docs lang="md">
+import { Canvas } from '@storybook/blocks';
+
+# Documentation
+
+Everything in one place. Isn't it great?
+
+You can render stories in the docs using the `<Canvas>` component.
+
+<Canvas />
+</docs>
+```
+
+You can use Markdown’s readable syntax (such as # heading) for your documentation, include stories, and freely embed JSX component blocks at any point in the file. See [Storybook Docs](https://storybook.js.org/docs/vue/writing-docs/introduction) for more information.
+There are a few minor differences to standard MDX documentation pages:
+
+- The `<Meta of=...>` tag is not needed.
+- You don't need to import the stories file. Simply refer to the defined stories by their name. For example:
+  ```vue
+  <template>
+    <Stories>
+      <Story title="Unchecked">
+        <Checkbox label="Unchecked" />
+      </Story>
+    </Stories>
+  </template>
+  <docs>
+    import { Canvas } from '@storybook/blocks';
+    <Canvas of={Unchecked} />
+  </docs>
+  ```
+
 ## Manual usage
@@ -93,0 +133,0 @@

No alert changes

Improved metrics

Number of package files

32

increased by10.34%

Number of lines in readme file

269

increased by17.47%

Worsened metrics

Total package byte prevSize

89092

decreased by-15.22%

Dependency count

8

increased by33.33%

Lines of code

2266

decreased by-15.48%

Dependency changes

• + Added@storybook/csf@^0.1.0

• + Added@storybook/mdx2-csf@^1.0.0

• + Added@storybook/csf@0.1.6(transitive)

• + Added@storybook/mdx2-csf@1.1.0(transitive)

• + Addedconsola@3.2.3(transitive)

• - Removedconsola@2.15.3(transitive)

• Updatedconsola@^3.0.2

• Updatedprettier@^2.8.7