#Storysource not working with Vite

37 messages · Page 1 of 1 (latest)

verbal mural
#
  1. Create Project with any framework Svelte
  2. Add SB to it @next so alpha.50
  3. Add the storysource plugin then create a component and a story for it
  4. Hangs on Loading source...
#

SB is the alpha 50

verbal mural
#

Storysource not working with Vite

verbal mural
#

Note that I am using Svelte, could that be why?

civic gyro
#

Hm, I'm not sure. Thanks for bringing this up. You said above "with any framework", did you try with something other than svelte?

verbal mural
#

Technically Vue

#

but not React admittedly

#

Will try react now

#

Switched to my Linux machine.

#

Btw, it also doesnt work on 6.5.13

civic gyro
#

ok, that's helpful, thanks.

#

Maybe you can create a small reproduction and file an issue, and tag me on it?

verbal mural
#

Yep, easily

#

Bringing up my Vue3 one rn

civic gyro
#

thanks

verbal mural
#

I have already created an issue, will add onto it and tag you

civic gyro
#

thanks!

verbal mural
#

Alright just tested it on Vue again, it seems to be sort of working on Vue

#

It is just a Svelte thing.

#

will change issue

civic gyro
verbal mural
#

No, but I will attempt this and report back

civic gyro
#

I'm not suggesting you should try it, sorry, just wondering if that could be a reason.

verbal mural
#

It could very well be the reason. It is possible that the reason the story source is not loading is because I am using the old method

#

using something like:

args {
  bla : 123
}
#

instead of

<ActualComponent actualprop="foo"></ActualComponent>
civic gyro
#

addon-svelte-csf isn't necessarily the "new" way. It's an alternative, and actually, writing your stories using it can result in less functionality because it doesn't work well with some of the rest of storybook features

verbal mural
#

I see.

But it appears that I may have been approaching things the wrong way. It appears storysource does not actually display the source code for the SFC that is the .svelte file

#

but just the code of the story which might not be what I want.

#

I just want a nice area in SB which conveniently shows my true svelte source code

#

But it is not too much of a big deal, my developers and I can simply view the files directly.

civic gyro
#

@warm stag Is it a known limitation that storysource does not show svelte SFC files? I'm guessing so.

warm stag
#

Sounds plausible. You might be able to set the docs.source.type parameter to ‘dynamic’ and see what that does

verbal mural
# 
export default {
  title: 'Components/CTACard',
  component: CTACard,
  tags: ['docsPage'],
  render: (args) => ({
    Component: CTACard,
    props: args,
  }),
  parameters : {
    docs : {
      source : {type : 'dynamic' }
    }  
  }
};
#

like that?

#

Ok I did that as well as this and it doesnt work so oh well

# 
export const Primary = Template.bind({});
Primary.parameters = {
  docs: {
    source: {
      type: "dynamic",
    },
  },
};