Suggestions for improving maintainability

Hello.

I want to implement best practices in tooling that inspired by Storybook and Vite repositories.

The goal is to make it easier for maintainers to participate in the project.

Related: #11

Checklist

Zero changes to the storybook-builder-vite package code

ESLint and Prettier https://github.com/eirslett/storybook-builder-vite/pull/193

• Move the Prettier configuration from package.json to .prettierrc.
• Synchronize .editorconfig with the Prettier standard.
• Add ESLint with Prettier config.
• Add the TypeScript plugin to ESlint.
• Run Prettier before ESLint

Testing

• Add Jest for unit testing.
• Add Cypress for E2E testing.
• Running tests on a pull request and publish events.

Documentation https://github.com/eirslett/storybook-builder-vite/pull/200

• Create a guide for developers in CONTRIBUTING.md.
• Add scripts for running examples.

Docker https://github.com/eirslett/storybook-builder-vite/pull/202

• Create docker-compose.yml with CI and Storybook services.
• Add scripts for Docker compose services.

Minor changes to the package code: syntax and typing

Run lint https://github.com/eirslett/storybook-builder-vite/pull/196

• Run lint on all codebase.
• Fix code inspection warnings from a JetBrains IDE for the packages/storybook-builder-vite directory.
• Create .git-blame-ignore-revs file.

TypeScript https://github.com/eirslett/storybook-builder-vite/pull/195

• Use TypeScript (with right tsconfig.json for comfort debugging).
• Convert all codebase from *.js to *.ts.
• Typization.

Minor changes in examples package.json and Github Actions

• Workspaces: use NPM or Pnpm, because Yarn is not working out of the box like it should be.

  Details: https://github.com/eirslett/storybook-builder-vite/issues/188#issuecomment-1005851871

@eirslett, @IanVS

May I create a one pull request with all suggested features?

Best wishes, Sergey.

[mrauhu]

I think we need more information here about the issues with yarn.

@joshwooding basically, I can’t run examples using Yarn.

You’ve only said that it’s not working. Are you receiving errors with storybook, are you receiving errors with yarn?

Reproduction of the Yarn workspace related issue

Let’s try running the Vue example in a clean environment:

git clone https://github.com/eirslett/storybook-builder-vite
cd storybook-builder-vite
yarn
yarn workspace example-vue storybook

System

Output

C:\Work\storybook\storybook-builder-vite>yarn workspace example-vue storybook
info @storybook/vue3 v6.4.3
info
info => Loading presets
Pre-bundling dependencies:
  @base2/pretty-print-object
  @emotion/core
  @emotion/is-prop-valid
  @emotion/styled
  @mdx-js/react
  (...and 77 more)
(this will be run only when your dependencies or config have changed)
info => Using prebuilt manager
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.4.3 for Vue3 started                 │
│   14 s for preview                                 │
│                                                    │
│    Local:            http://localhost:51916/       │
│    On your network:  http://172.20.192.1:51916/    │
│                                                    │
│   A new version (6.4.9) is available!              │
│                                                    │
│   Upgrade now: npx sb@latest upgrade               │
│                                                    │
│   Read full changelog: https://git.io/fhFYe        │
│                                                    │
╰────────────────────────────────────────────────────╯
18:20:13 [vite] Internal server error: Failed to resolve import "@vue/server-renderer" from "stories\Button.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Work/storybook/storybook-builder-vite/packages/example-vue/stories/Button.vue
  65 |  import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"
  66 |
  67 |  function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
     |                                         ^
  68 |    _push(`<button${
  69 |      _ssrRenderAttrs(_mergeProps({
      at formatError (C:\Work\storybook\storybook-builder-vite\node_modules\vite\dist\node\chunks\dep-7e125991.js:42587:46)
      at TransformContext.error (C:\Work\storybook\storybook-builder-vite\node_modules\vite\dist\node\chunks\dep-7e125991.js:42583:19)
      at normalizeUrl (C:\Work\storybook\storybook-builder-vite\node_modules\vite\dist\node\chunks\dep-7e125991.js:80909:26)
      at async TransformContext.transform (C:\Work\storybook\storybook-builder-vite\node_modules\vite\dist\node\chunks\dep-7e125991.js:81049:57)
      at async Object.transform (C:\Work\storybook\storybook-builder-vite\node_modules\vite\dist\node\chunks\dep-7e125991.js:42803:30)
      at async doTransform (C:\Work\storybook\storybook-builder-vite\node_modules\vite\dist\node\chunks\dep-7e125991.js:57478:29)

Errors

Server-side

[vite] Internal server error: Failed to resolve import "@vue/server-renderer" from "stories\*.vue". Does the file exist?

Client-side

GET http://localhost:51916/stories/*.vue net::ERR_ABORTED 404 (Not Found) *.stories.js

Maybe it’s an OS related issue?!

Let’s go, try the same in a isolated environment.

Docker

Dockerfile

FROM node:lts-alpine

ARG PORT=7007
ENV PORT=${PORT}

RUN apk add --no-cache git

WORKDIR /app

RUN git clone https://github.com/eirslett/storybook-builder-vite

WORKDIR /app/storybook-builder-vite

RUN yarn
RUN 

EXPOSE ${PORT}/tcp

CMD yarn workspace example-vue storybook -p ${PORT}

docker-compose.yml

version: '3'

services:
  example:
    build: .
    ports:
      - "127.0.0.1:7007:7007"

docker-compose up --build example

Errors

Not changed at all:

Server-side

[vite] Internal server error: Failed to resolve import "@vue/server-renderer" from "stories/*.vue". Does the file exist?

Client-side

GET http://localhost:7007/stories/*.vue net::ERR_ABORTED 404 (Not Found) *.stories.js

So, after this experiments, I suggest to change the package manager.

[mrauhu]

@Codex- thank you for suggestion, I will check out the Playwright solution.