Fix source snippet generation (#13)

* Update CONTRIBUTING.md * Added source decorator * Fix missing type info in releases * Change versions * Add authentication to publishing * Update README.md * Update README.md * Update README.md * Remove logs and cover object methods * Move try catch up * Add testing for source transformer * Optimize workflows and add testing to CI * Move checkout to parents * Added shell property * Update CONTRIBUTING.md
storybookjs · Nov 12, 2024 · 04ed357 · 04ed357
1 parent 73abe6c
commit 04ed357
Show file tree

Hide file tree

Showing 16 changed files with 784 additions and 135 deletions.
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -0,0 +1,27 @@
+name: Setup Standard Workflow
+runs:
+  using: composite
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+    - name: Enable Corepack
+      shell: bash
+      run: corepack enable && corepack install
+    - name: Print versions
+      shell: bash
+      run: node --version && yarn --version
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir-path
+      shell: bash
+      run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+    - uses: actions/cache@v4
+      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+    - name: Install project dependencies
+      shell: bash
+      run: yarn install
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -10,49 +10,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-      - name: Enable Corepack
-        run: corepack enable && corepack install
-      - name: Print versions
-        run: node --version && yarn --version
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-      - uses: actions/cache@v4
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install project dependencies
-        run: yarn install
+      - uses: ./.github/actions/setup
       - name: Run formatter
         run: yarn check:format
   lint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-      - name: Enable Corepack
-        run: corepack enable && corepack install
-      - name: Print versions
-        run: node --version && yarn --version
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-      - uses: actions/cache@v4
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install project dependencies
-        run: yarn install
+      - uses: ./.github/actions/setup
       - name: Run linter
         run: yarn check:lint
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Run tests
+        run: yarn check:test
diff --git a/.github/workflows/solid-vite.yml b/.github/workflows/solid-vite.yml
@@ -15,25 +15,7 @@ jobs:
     name: Lib workflow
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-      - name: Enable Corepack
-        run: corepack enable && corepack install
-      - name: Print versions
-        run: node --version && yarn --version
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-      - uses: actions/cache@v4
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install project dependencies
-        run: yarn install
+      - uses: ./.github/actions/setup
       - name: Check bundling
         run: yarn check
         working-directory: packages/frameworks/solid-vite
@@ -42,4 +24,4 @@ jobs:
         run: yarn npm publish
         working-directory: packages/frameworks/solid-vite
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/solid.yml b/.github/workflows/solid.yml
@@ -23,25 +23,7 @@ jobs:
     name: Lib workflow
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-      - name: Enable Corepack
-        run: corepack enable && corepack install
-      - name: Print versions
-        run: node --version && yarn --version
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-      - uses: actions/cache@v4
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install project dependencies
-        run: yarn install
+      - uses: ./.github/actions/setup
       - name: Check bundling
         run: yarn check
         working-directory: packages/renderers/solid
@@ -50,4 +32,4 @@ jobs:
         run: yarn npm publish
         working-directory: packages/renderers/solid
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,6 @@ node_modules
 # build
 dist
 bench
+
+# vite
+vite.config.ts.timestamp-*
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -18,8 +18,9 @@ Install dependencies with `yarn`.
 
 To build packages, run `yarn build`, either in the top-level for all or inside a specific package for one.
 
-For formatting and linting, run `yarn check:all` to run checks and `yarn fix:all` to apply fixes where possible.
-There is also `*:format` and `*:lint` variants for running them separately (e.g. `yarn check:format` to check formatting).
+For formatting, linting, and testing, run `yarn check:all` to run checks and `yarn fix:all` to apply fixes where possible.
+There is also `*:format`, `*:lint`, and `*:test` variants for running them separately (e.g. `yarn check:format` to check formatting).
+(There is no `fix:test` variant)
 These checks run during CI, so remember to run `yarn fix:all` before pushing (or create a githook to do it automatically).
 
 <details>
@@ -37,7 +38,8 @@ It has `yarn storybook` for testing Storybook and `yarn dev` for testing the app
 For testing with external projects that use Yarn, the framework and renderer can be linked locally.
 
 **Note:** The default Yarn Plug n' Play installs WILL NOT work when testing.
-This is because Yarn PnP will use virtual paths for dependencies of linked dependencies. The framework does not resolve these virtual paths, so your test app will break.
+This is because Yarn PnP will use virtual paths for dependencies of linked dependencies.
+The framework does not resolve these virtual paths, so your test app will break.
 This can be fixed by specifying the node linker to be "node-modules".
 
 ### Example External Testing App

diff --git a/README.md b/README.md
@@ -2,30 +2,28 @@
 
 This is a framework to allow using [Storybook](https://storybook.js.org/) with [SolidJS](https://www.solidjs.com/).
 
-| Feature                                             | State |
-| --------------------------------------------------- | :---: |
-| `JS` and `TS` integration with Storybook cli        |  ✅   |
-| Fine grained updates in storybook controls          |  ✅   |
-| Compatible with `@storybook/addon-interactions`     |  ✅   |
-| Compatible with `@storybook/test`                   |  ✅   |
-| Automatic story actions                             |  ⏳   |
-| Full props table with description in docs view mode |  ⏳   |
-| Code snippets generation in docs view mode          |  ⏳   |
-| `SolidJS` docs in the official Storybook website    |  ⏳   |
+## Features
+
+- [x] `JS` and `TS` integration with Storybook CLI
+- [x] Fine grained updates in storybook controls
+- [x] Compatible with `@storybook/addon-interactions`
+- [x] Compatible with `@storybook/test`
+- [x] Code snippets generation in docs view mode
+- [ ] Automatic story actions
+- [ ] Full props table with description in docs view mode
+- [ ] `SolidJS` docs in the official Storybook website
 
 ## Notes about pending features ⏳
 
 - **Automatic story actions**: Feature under research. For now actions can be implemented manually by using the `@storybook/addon-actions` API.
 
 - **Full props table with description in docs view mode**: Feature under research. For now, props are rendered partially in the docs view table with a blank description.
 
-- **Code snippets generation in docs view mode**: Feature under research. Because `solid` components lack a virtual dom, a common `jsx-parser` doesn't work for generating a code snippet from the rendered story. For now, it outputs the original story source code. To output a more complex code implementation, you can use the `render` key inside a `csf` story definition.
-
 - **`SolidJS` docs in the official Storybook website**: It's still pending to add documentation about Storybook stories definitions using SolidJS.
 
 ## Setup
 
-In an existing Solid project, run `npx storybook@next init` (Storybook 8+ is required)
+In an existing Solid project, run `npx storybook@latest init` (Storybook 8+ is required)
 
 See the [Storybook Docs](https://storybook.js.org/docs?renderer=solid) for the best documentation on getting started with Storybook.
 

diff --git a/example/package.json b/example/package.json
@@ -31,6 +31,6 @@
     "vite-plugin-solid": "^2.8.2"
   },
   "dependencies": {
-    "solid-js": "^1.9.2"
+    "solid-js": "^1.9.3"
   }
 }
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^18.0.0",
+    "esbuild": "^0.24.0",
     "esbuild-plugin-alias": "^0.2.1",
     "esbuild-plugin-solid": "^0.6.0",
     "eslint": "^9.13.0",
@@ -29,20 +30,24 @@
     "rollup": "^4.24.0",
     "rollup-plugin-dts": "^6.1.1",
     "slash": "^5.1.0",
+    "solid-js": "^1.9.3",
     "sort-package-json": "^2.10.1",
     "ts-node": "^10.9.2",
     "tsup": "^8.3.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0"
+    "typescript-eslint": "^8.10.0",
+    "vitest": "^2.1.4"
   },
   "scripts": {
     "build": "yarn workspaces foreach --all -pt run build",
-    "check:all": "yarn run check:lint && yarn run check:format",
+    "check:all": "yarn run check:lint && yarn run check:test && yarn run check:format",
     "check:format": "prettier --check .",
     "check:lint": "eslint .",
+    "check:test": "vitest run --no-isolate",
     "fix:all": "yarn run fix:lint && yarn run fix:format",
     "fix:format": "prettier --write .",
-    "fix:lint": "eslint . --fix"
+    "fix:lint": "eslint . --fix",
+    "test": "vitest"
   },
   "packageManager": "yarn@4.5.1"
 }
diff --git a/packages/frameworks/solid-vite/package.json b/packages/frameworks/solid-vite/package.json
@@ -1,7 +1,7 @@
 {
   "name": "storybook-solidjs-vite",
   "type": "module",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Storybook for SolidJS and Vite: Develop SolidJS in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,7 +45,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepack": "yarn build",
+    "prepack": "yarn build --optimized --reset",
     "build": "npx jiti ../../../scripts/prepare/build.ts",
     "check": "npx jiti ../../../scripts/prepare/check.ts"
   },
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@storybook/types": "next",
-    "solid-js": "^1.9.2",
+    "solid-js": "^1.9.3",
     "storybook": "next",
     "storybook-solidjs": "workspace:*",
     "vite": "^5.4.8"

diff --git a/packages/renderers/solid/package.json b/packages/renderers/solid/package.json
@@ -1,7 +1,7 @@
 {
   "name": "storybook-solidjs",
   "type": "module",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Storybook SolidJS renderer",
   "keywords": [
     "storybook"
@@ -42,7 +42,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepack": "yarn build",
+    "prepack": "yarn build --optimized --reset",
     "build": "npx jiti ../../../scripts/prepare/build.ts",
     "check": "npx jiti ../../../scripts/prepare/check.ts"
   },
@@ -52,13 +52,12 @@
     "@storybook/preview-api": "next",
     "@storybook/test": "next",
     "@storybook/types": "next",
+    "@types/babel__standalone": "link:.yarn/cache/null",
     "async-mutex": "^0.5.0",
-    "esbuild": "^0.24.0",
-    "esbuild-plugin-solid": "^0.6.0",
     "storybook": "next"
   },
   "peerDependencies": {
-    "solid-js": "^1.9.2"
+    "solid-js": "^1.9.3"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -74,5 +73,8 @@
       "./src/entry-preview-docs.tsx"
     ],
     "platform": "browser"
+  },
+  "dependencies": {
+    "@babel/standalone": "^7.26.2"
   }
 }
diff --git a/packages/renderers/solid/src/docs/jsxDecorator.tsx b/packages/renderers/solid/src/docs/jsxDecorator.tsx