ktsn / birdseye Goto Github PK

It would be useful to generate snapshot tests from catalogs to check UI regressions automatically on CI.

For implementing #2, I noticed there are many cases previewed components throws errors during editing props/data. For example, props validation, unexpected null value and so on.

It would be useful capture and log such errors so that it prevents clashing the birdseye app by trivial errors. Also the log would be useful for the users for debugging components.

1. Show pattern data (props, data, etc...) on the app
2. Allow users to edit their values.
3. The changes are pull back to the actual file (such as <birdseye> custom block on Vue SFC) by pressing something like "Save" button.

It would be useful also supporting the following features:

• Add a new pattern on the app.
• Remove an existing pattern on the app.

It should be useful to log emitted events from components since we can confirm the output from them.

The log would include event name and passed arguments.

It is common in Vue ecosystem to extend Vue constructor or inject some object from root instance.

Example for vue-router:

import Vue from 'vue'
import Router from 'vue-router'

// extend Vue constructor with vue-router
Vue.use(Router)

const router = new Router({ /* ... */ })

// inject vue-router instance to pass it into root component options.
new Vue({
  router,
  // ...
})

So we should provide some functionality to achieve this pattern on @birdseye/vue.

We simply could provide both of them some function and let return instrument function from that.

import Vue from 'vue'
import Router from 'vue-router'
import birdseye from '@birdseye/app'
import { createInstrument } from '@birdseye/vue'

// prepare router
Vue.use(Router)
const router = new Router({ /* ... */ })

// create instrument function with Vue constructor and router instance
const instrument = createInstrument(Vue, {
  router
})

// Load all your component
const load = ctx => ctx.keys().map(ctx)
const components = load(require.context('./src/components', true, /\.vue$/))

// Mount component catalog
birdseye('#app', instrument(components))

We could allow users to write slot content as meta data.

<birdseye>
{
  "name": "Component",
  "patterns": [
    {
      "name": "Slot pattern",
      "props": {},
      "slot": {
        "default": "<p>This is slotted content</p>"
      }
    }
  ]
}
</birdseye>

The current implementation is that the root instance of previewed component is lazily created/mounted. vue-devtools cannot detect such lazy-mounted component because it walks DOM tree just after the page is loaded.

We should change the implementation to mount preview's root instance immediately and dynamically inject each component with retaining the root instance to support vue-devtools.

It would be useful if we collect props and data info from components. For example:

• Provide appropriate form type for props type. (#2 )
• Automatically passing default value of props type to component if the value is not specified.

There are cases that we have container components in a catalog component and we want to stub it as it generally access some global resources like store, api etc.

We can apply the same way that vue-test-utils does to achieve it.

• https://github.com/vuejs/vue-test-utils/blob/dev/packages/create-instance/add-stubs.js
• https://github.com/vuejs/vue-test-utils/blob/dev/packages/create-instance/patch-create-element.js#L48