Code Monkey home page Code Monkey logo

vs-code-plugin's Introduction

AesopLogo_small

AESOP

Meet Aesop: the lightweight Storybook preview extension.

This humble helper displays your Storybook alongside a codebase for more responsive workflow. It integrates with existing Storybook addons and features, and it is optimized to use minimal system resources.

Screenshots

Aesop Awoken

Here we activate the "Aesop Awaken" command from the command palette to jumpstart the initialization process that checks whether your storybook is currently running. In this case, we have already run a Storybook server from the command line, so Aesop dynamically selects the port where the content is being served and displays it in a webview.

Features

If you are working in a project folder on a Storybook-enabled application, Aesop will run a Storybook process at startup and display the same suite you're used to right inside Visual Studio Code as an attached Node child process.

Or, if you're used to starting up your Storybook from the CLI with additional arguments, Aesop won't impede your workflow โ€” it understands Node processes, and will happily retrieve your running Storybook.

How To Use The Extension

Simply install the extension from the Visual Studio Code Marketplace and open a project folder with a Storybook dependency as your main workspace folder.

Then you can start previewing Storybook directly in your editor after following a few steps:

First, execute the 'Aesop Awaken' command from the command palette, or by using the shortcut keybinding.

From here, Aesop checks to see whether or not you currently have a Storybook process running.

If it does not find a Storybook process, it will spin up a new instance of Storybook using your npm script within your package.json, along with any arguments you've supplied.

If it does find a Storybook process, it dynamically captures the location in which the content is being served and displays it within a webview directly in your IDE.

Requirements

Aesop only depends on the ps-node library. This is used to simplify certain lookup functions while accessing running Node processes, but will likely be removed in a future version to make Aesop dependency-free.

If your system does not support Netstat, you may experience some issues using this beta release.

Extension Settings

Because Aesop is lightweight, it is also minimal config. It contributes one hotkey command chord to activate: CTRL / CMD K + A

The Aesop team aims to provide further customization options and improved UI integration within Visual Studio Code as development continues.

Release Notes

Please contact the developers at https://github.com/storybookjs/vs-code-plugin with comments, questions, and any features you would like to see in a future version of Aesop.

Known Issues

On Windows, you MUST have Storybook already running for Aesop to work. We are currently tackling this issue and expect it to be resolved soon.

0.1.0

Aesop is pleased to make your acquaintance.

If you are downloading the repository to play with Aesop's code, you may need to install dependencies for the sample React and Vue component files before use. Happy testing!

vs-code-plugin's People

Contributors

arlogui avatar dependabot[bot] avatar giacomo9999 avatar imgbotapp avatar jimmyandrade avatar keithrcagney avatar kennyjjma avatar ndelangen avatar olamiwhat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vs-code-plugin's Issues

Add support for non-root Storybook installations

I have a project where the Storybook has been installed in a sub-directory of the project root.
I could see support for this in two ways - provide a setting to configure the path to the directory where Storybook is installed or provide support for VS Codes Workspaces. With support for Workspaces, I could include my sub-directory as a workspace folder, making it a kind of root directory for Aesop to scan for Storybook installations.

[Bug] Windows: When awakening aesop after it had been, it tries to start a new storybook server

Describe the bug

When I have a running storybook server from the first aesop awaken.
Running that command again seem to spawn another command to start up storybook.

It then creates multiple tabs of aesop.

Steps to reproduce the behavior

  1. Run awaken aesop
  2. Wait till server starts and aesop pops up
  3. Run awaken aesop again
  4. Another terminal is created that's starting the server
  5. Multiple aesop tabs pop up.

Expected behavior

If an existing server is running, it should just open the webview instead of running another command.

Screenshots and/or logs

oddity with aesop

Things to notice:

  • On the first awaken aesop it didn't pop up the aesop view
  • On the second attempt it tried to open it again and as well open 2 aesop tabs
  • Every time awaken aesop is activated it just generates more tabs.

Environment

  • OS: Windows
  • Node.js version: v12.18.3
  • NPM version: 6.4.1
  • VSCode version (if applicable): 1.53.0-insider

[Bug] "your screen size is bogus" error when attempting to awaken aesop

Describe the bug

When I do aesop awaken, I get the following back immediately:

Failed looking for running Node processes. Error: your 131072x1 screen size is bogus. expect trouble

Environment

  • OS: Windows 10 + Ubuntu 20 in WSL2
  • Node.js version: v12.20.0
  • NPM version: 6.4.18

Additional context

My guess would be that this is something to do with running VSCode in WSL.

Really excited about Aesop, so I hope this is fixable!

Write a contribution guide

I'd love to be able to debug and test this locally, but right now I have not a clue on how to actually do this.

Could we add a contribution guide so other people could understand how to develop this locally?

[Bug] Preview is not taking full height of the editor

Thank you so much for developing this addon! I see so much potential in it! Here's a bug that is getting on my way currently:

Describe the bug

When loading Aesop, I'd expect my Storybook to take the full height of the editor, but unfortunately that's not the case.

Steps to reproduce the behavior

  1. Awaken aesop
  2. See the gap at the bottom

Expected behavior

The preview takes full height so users can better visualize the addon panel without feeling cluttered.

Screenshots and/or logs

image

Environment

  • OS: macOS Catalina

Extra remarks

I also have the feeling that the webview is scaled up. The fonts are bigger, it feels too tight.

Issue running current version of extension with Storybook

First of all i would like to thank you for the time and effort you've put into this.

Now onto the issue at hand. While working on some updates on the documentation and reading about the release in twitter, i decided to use the extension and some issues have popped up.

I followed the instructions to install it and use it and i'm experiencing some "snafus" (pardon the bad pun).

In vscode pressing "F1" and selecting the command aesop awaken while Storybook is not running i can see the notification that it found a Storybook project and it then changes to "Retrieving running Storybook process" and it doesn't do anything, the extension window will not pop up. It will stay like that forever as you can see in the image below (this was after waiting for 10 minutes of waiting)
aesop_storybook_issue_1

Also one other thing, if i'm already running Storybook and press "F1" and select the command "aesop awaken" it will spawn the window and i can see my Storybook. But if for any chance i close the window and i restart Storybook and enable the extension once more i'm presented with the following:
aesop_storybook_issue_2

To add a bit more context i'm running the extension in

Version: 1.41.1 (user setup)
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T14:58:56.166Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

Feel free to provide feedback so that we can close this issue and continue to improve this extension as i think that it would be a awesome resource to the Storybook community and depending on maintainers, something to be featured in the documentation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.