Histoire with StencilJS elements and VueJS 3.4+

[rramsey]

Hi,

I think Historie will do what I want, but I just don't know the right way at this point. I have custom html elements I've created with StencilJS. I've used the vueOutputTarget plugin for Stencil to create vue wrappers around the custom components. I've created .vue files that import the wrapper for the component and the component displays just fine.
I've added the isCustomElement tag in my vite.config.ts with:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('my-'),
        }
      }
    }),
    vueJsx(),
  ]
})

In my main.ts file:

import { applyPolyfills, defineCustomElements } from '@my-components/my-library/loader';

applyPolyfills().then( () => {
  defineCustomElements();
});

To load and register all of my custom components.

App.vue:

<script setup lang="ts">
  import MyButton from "@/components/MyButton.vue";
</script>
<template>
  <MyButton />
</template>

MyButton.vue:

<script setup lang='ts'>
  import { MyButton } from '@my-components/my-library/dist/vue-library/lib/components';
</script>
<template>
  <my-button></my-button>
</template>

This works fine for me and when I run npm run dev vue pops up App.vue with MyButton.vue and the custom button component. So far so good.

I installed historie and got it working, except that my button never displays. I created src/components/stories/MyButtonStory.story.vue. It looks like:

<script setup lang="ts">
  import { reactive, ref } from "vue";
  import MyButton from "@/components/MyButton.vue";
  interface ButtonProps  {
    label: string,
    size: 'small' | 'medium' | 'large',
  }
  const sizes = [
      'small',
      'medium',
      'large'
  ]

  const state: ButtonProps = reactive({
    label: '',
    size: 'medium',
  });
</script>

<template>
  <Story>
    <template #controls>
      label: <input type="text" v-model="state.label" /> <br>
      size:  <select v-model="state.size">
               <option v-for="size in sizes" :value="size" :key="size">{{size}}</option>
             </select>
    </template>
    <p>Here is my button:</p>
    <MyButton></MyButton>
  </Story>
</template>

When I run npm run story:dev it correctly finds MyButtonStory.story.vue and loads it in the left hand menu. I see the controls on the right. I see "Here is my button:" in the middle. But no actual button. There are no errors in the console. The only messages are that devtools failed to load a source map and that <Suspense> is an experimental feature and its API will likely change. in MountStory.js.

I've tried loading the polyfils and defineCustomElements in the MyButton.vue, MyButtonStory.vue and in a setupFile referenced in historie.config.ts, but just got different error messages each time depending on where I try to load them.

Any ideas on this? I didn't see custom html elements or stencil specifically listed on th elist of supported frameworks, so maybe that support just isn't there. I assumed that since I could run a vue application and use the elements just fine, then Historie would work with that.

Sorry for the long post, just wanted to get the code in there.

Thanks for any help you can give.

[rramsey]

Ok, after playing around with this my button shows up in the story now. There may be a couple of factors that are complicating things so I'll pass all of that on to the devs.

• I'm running this in a lerna monorepo. So my stories are in lerna-repo/packages/my-histoire/src/components/stories/MyButtonStory.story.vue. The vue component in the story is in lerna-repo/packages/my-histoire/src/components/MyButton.vue. The installed node_modules is actually in lerna-repo/node_models/@my-components/my-library etc.
• I tried setting the iframe to false: <Story :layout="{ type: 'single', iframe: false }"> and that at least got me a different error in the console. The error I got was that the my-library folder was outside of the vite server root and was not included in the list of other files to include. So somewhere along the compile/build path histoire was not handling the path to the shared node_modules correctly. Don't know if it is a histoire thing or my goof up. But at least this got me on the right path.
• I copied lerna-repo/node_modules/@my-components/my-library into lerna-repo/packages/my-histoire/src/components and imported everything like import { applyPolyfills, defineCustomElements } from "@/my-library/loader"; -- the @ is a vite alias configured in /lerna-repo/packages/my-histoire/vite.config.ts. But the point is that all of my imports were referencing the my-library folder in lerna-repo/packages/my-histoire/src/components.

That finally got the button component I made in stencil to appear in the story. I haven't tried actually updating a property or anything yet.

Before I do any more, I need to make sure that I can build the app and deploy it on an apache webserver. That was my problem with storybook: everything worked beautifully locally, but storybook couldn't manage to actually build a static site that worked.

So I don't know if it was the iframe: false that worked or copying the library into the components folder (my money's on this). I also imported defineCustomComponents in several location and I'm betting it doesn't need to be in every file that is every loaded.

If the final result is that I have to copy a folder into src/components before I work with my stories, I'm willing to live with that inconvenience for now. But maybe this will give the devs something to work with and unltimately fix it

I'll update when I know more.

[rramsey]

Well darn. Histoire has exactly the same problems with builds that storybook does. Looks for a my-component.entry.js file that doesn't exist in the dist directory, copying over a copy of the file from the source of the custom component does not work and results in a different error.

Plus the build process assumes the site will be deployed in the root of the server. Instead of relative paths, if you deploy to https://my.server.com/some/path/ it looks for https://my.server.com/assets/.. It would be nice if 1) you could pass in a base-href flag to the build and 2) all file references were relative instead of absolute off the server root.

So for our purposes Histoire isn't a viable replacement for storybook. We'll have to roll our own solution.