Upgrade to Storybook v8 and latest Solid (#10)

* Updated renderer and framework

- Removed old artifacts (like Lerna githeads)
- Updated yarn
- Made bundling experience closer to main repo
- Fixed out-of-date code
- Updated dependencies
- Added .editorconfig

* Fix reactivity

* Fixed race condition in bundler

* Match exports

* Added prettier and eslint

* Create ci.yml

* Updated templates

* Added documentation

* Update README.md

* Improved race condition work around

* Add bundler check script

* Refactored CD scripts

* Ran Prettier

* Fix CI

* Revert "Fix CI"

This reverts commit b4511d6.

* Enable corepack

* Remove old flag

* Debug CI tool versions

* Used proper yarn version

Windows has issues with using proper yarn version when using fnm

* Update types.ts

* Fix bundler checks

* Switch to next versions

* Added global build script and renamed prep to build

* Added example app

* Update README.md

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>

* Ran formatter

* Update yarn.lock

* Fixed example

* Fixed dependency error and added CONTRIBUTING file

* Update CONTRIBUTING.md

* make example package private

* Update package READMEs

---------

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+
+[*.{js,jsx,json,yml,ts,tsx,vue,svelte,html}]
+indent_style = space
+indent_size = 2

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: CI
+on:
+  merge_group:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  format:
+    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
+      - 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
+      - name: Run linter
+        run: yarn check:lint

.github/workflows/solid-vite.yml

@@ -14,19 +14,32 @@ jobs:
     runs-on: ubuntu-latest
     name: Lib workflow
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node
-        uses: ./.github/workflows/actions/setup-node
-      - name: Install dependencies
-        run: yarn
-        shell: bash
-      - name: 'Build'
-        run: yarn build
-        shell: bash
-      - name: 'Publish to npm'
+      - 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
+      - name: Check bundling
+        run: yarn check
+        working-directory: packages/frameworks/solid-vite
+      - name: Publish to NPM
         if: github.event_name == 'release'
-        run: npm publish
-        shell: bash
+        run: yarn npm publish
+        working-directory: packages/frameworks/solid-vite
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/solid.yml

@@ -22,19 +22,32 @@ jobs:
     runs-on: ubuntu-latest
     name: Lib workflow
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node
-        uses: ./.github/workflows/actions/setup-node
-      - name: Install dependencies
-        run: yarn
-        shell: bash
-      - name: 'Build'
-        run: yarn build
-        shell: bash
-      - name: 'Publish to npm'
+      - 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
+      - name: Check bundling
+        run: yarn check
+        working-directory: packages/renderers/solid
+      - name: Publish to NPM
         if: github.event_name == 'release'
-        run: npm publish
-        shell: bash
+        run: yarn npm publish
+        working-directory: packages/renderers/solid
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,5 +1,16 @@
+# npm
 node_modules
-yarn-error.log
-.yarnrc.yml
+*.DS_Store
+
+# yarn (no zero-install)
+/**/.pnp.*
+/**/.yarn/*
+!/**/.yarn/patches
+!/**/.yarn/plugins
+!/**/.yarn/releases
+!/**/.yarn/sdks
+!/**/.yarn/versions
+
+# build
 dist
-.DS_Store
+bench

.nvmrc

@@ -0,0 +1 @@
+22.11.0

.yarnrc.yml

@@ -0,0 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules

CONTRIBUTING.md

@@ -0,0 +1,55 @@
+# Getting Started
+
+storybook-solidjs is developed against a specific node version which is defined in an `.nvmrc` file. You can use any Node version manager that uses the `.nvmrc` configuration file.
+
+## Ensure you have the required system utilities
+
+You will need to have the following installed:
+
+- git
+- Node.js
+- Yarn
+
+For Node.js and Yarn, it is recommended to use a Node version manager to install Node, and then use corepack to install Yarn.
+
+## Starting Development
+
+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).
+These checks run during CI, so remember to run `yarn fix:all` before pushing (or create a githook to do it automatically).
+
+<details>
+<summary>A warning for developers on Windows</summary>
+I don't recommend developing this on Windows due to issues that appear when using yarn.
+I've seen yarn not apply the correct version of itself, have issues when installing dependencies, and calculate checksums differently (which becomes a problem with CI checks).
+If you don't have an alternative Linux or MacOS development environment, I would recommend using WSL exclusively when developing on Windows.
+</details>
+
+## Testing
+
+The example application can be used to test the framework.
+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 can be fixed by specifying the node linker to be "node-modules".
+
+### Example External Testing App
+
+1. Create a SolidJS application using a template: `yarn dlx degit solidjs/templates/ts my-solid-app` and `cd my-solid-app` and `rm pnpm-lock.yaml`.
+2. Initialize a linkable Storybook project: `yarn dlx storybook@latest init --linkable`
+3. Create a `.yarnrc.yml` file with the following contents to avoid Yarn PnP:
+
+```yml
+nodeLinker: node-modules
+```
+
+4. Link to the framework and renderer with `yarn link <path>` (call twice with the absolute path to the framework "packages/frameworks/solid-vite" and renderer "packages/renderers/solid")
+5. Install dependencies with `yarn`
+6. Run Storybook with `yarn storybook`

README.md

@@ -7,7 +7,7 @@ This is a framework to allow using [Storybook](https://storybook.js.org/) with [
 | `JS` and `TS` integration with Storybook cli        |  ✅   |
 | Fine grained updates in storybook controls          |  ✅   |
 | Compatible with `@storybook/addon-interactions`     |  ✅   |
-| Compatible with `@storybook/testing-library`        |  ✅   |
+| Compatible with `@storybook/test`                   |  ✅   |
 | Automatic story actions                             |  ⏳   |
 | Full props table with description in docs view mode |  ⏳   |
 | Code snippets generation in docs view mode          |  ⏳   |
@@ -25,9 +25,9 @@ This is a framework to allow using [Storybook](https://storybook.js.org/) with [
 
 ## Setup
 
-In an existing Solid project, run `npx storybook@next init` (Storybook 7+ is required)
+In an existing Solid project, run `npx storybook@next init` (Storybook 8+ is required)
 
-See the [Storybook Docs](https://storybook.js.org/docs/7.0/solid/get-started/introduction) for the best documentation on getting started with Storybook.
+See the [Storybook Docs](https://storybook.js.org/docs?renderer=solid) for the best documentation on getting started with Storybook.
 
 ## License
 

eslint.config.js

@@ -0,0 +1,13 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import * as depend from 'eslint-plugin-depend';
+
+export default [
+  { ignores: ['**/dist/'] },
+  { files: ['**/*.{ts,tsx}'] },
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  depend.configs['flat/recommended'],
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+];

example/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+*storybook.log

example/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from 'storybook-solidjs-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('storybook-solidjs-vite'),
+    options: {},
+  },
+};
+export default config;

example/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import '../src/index.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

example/README.md

@@ -0,0 +1,3 @@
+## Example SolidJS App with Storybook
+
+Start the app with `yarn dev` and Storybook with `yarn storybook`.

example/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>

example/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "storybook-solid-example",
+  "private": true,
+  "version": "0.0.0",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-essentials": "next",
+    "@storybook/addon-interactions": "next",
+    "@storybook/addon-links": "next",
+    "@storybook/test": "next",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "solid-devtools": "^0.29.2",
+    "storybook": "next",
+    "storybook-solidjs": "workspace:*",
+    "storybook-solidjs-vite": "workspace:*",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vite-plugin-solid": "^2.8.2"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.2"
+  }
+}