develwoutacause’s avatardevelwoutacause’s Twitter Archive—№ 344

              1. …in reply to @passle_
                @passle_ @OpenWc I was upgrading an existing project. Let's see what I can remember... First I ran npm init @open-wc and chose to upgrade storybook. It ran successfully but no files were written. Eventually, I realized I was pressing enter on "Storybook" which is apparently wrong.
            1. …in reply to @develwoutacause
              @passle_ @OpenWc @open Later, I realized I need to use right arrow to "check" Storybook *and then* enter to accept. There should be some warning of "You didn't pick anything and won't actually generate anything".
          1. …in reply to @develwoutacause
            @passle_ @OpenWc @open Then npm run storybook fails with some missing dependencies. I had to npm install core-js concurrently --save-dev. The storybook script also references npm run build:ts, which just wasn't the convention I used, so I converted that to tsc -p ... --watch.
        1. …in reply to @develwoutacause
          @passle_ @OpenWc @open Finally it runs and I start writing my first story. I couldn't really find any examples of using #LitElement so I settled for some lit-html with web components. The default glob doesn't include *.ts files I think, which is immediately concerning but I just used JS to start.
      1. …in reply to @develwoutacause
        @passle_ @OpenWc @open I was able to write a simple story with hard coded arguments and define some parameters which showed up as knobs, however it was all done manually. I read that I should generate a custom-elements.json for docs, but I'm unclear if that would auto-generate knobs as well.
    1. …in reply to @develwoutacause
      @passle_ @OpenWc @open I then used web-component-analyzer to generate this JSON, it worked great, but I had to manually remove a giant "This is experimental" comment. I'm not sure how important this is considering @open-wc seems to not be bothered by this and just says to use it?
  1. …in reply to @develwoutacause
    @passle_ @OpenWc @open When I get to automating this, it would be a real pain to strip out that comment. It should print to stderr or be tunable by a flag. The analyzer also includes my component styles in the docs, which is just wrong?
    1. …in reply to @develwoutacause
      @passle_ @OpenWc @open Finally docs are generated but knobs aren't, so I guesd custom-elements.json doesn't do that? I found withKnob and withWebComponentsKnob decorators, but these don't seem to have ant effect. I couldn't get these to do anything, even just throw an error about the problem.
      1. …in reply to @develwoutacause
        @passle_ @OpenWc @open Eventually, I also found storiesOf which seems like a different way of writing stories, but it isn't actually exported by its package anymore? github.com/open-wc/open-wc/tree/master/packages%2Fdemoing-storybook%2Findex.js?L=4 I assume this was deprecated or something, but I'm not clear on what the "right" way of doing this is.
        1. …in reply to @develwoutacause
          @passle_ @OpenWc @open Last couple issues were thay @open-wc/demoing-storybook doesn't have types and I found several references to npmjs.com/package/storybook-addon-web-components-knobs. I'm unclear if I should be using this package, or if there's any difference, or if it's a private package, or what?
          1. …in reply to @develwoutacause
            @passle_ @OpenWc @open That's everything I remember atm, there were probably a couple more I've forgotten about. Just generally confusing and I couldn't get knobs autogenerated, no matter what I did. Storybook isn't easily debuggable, and I just didn't want to dive into that. 😩