AgnosticUI / agnosticui

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.
https://agnosticui.com
Apache License 2.0
723 stars 47 forks source link

Agnostic UI for Vue not working with Histoire #260

Open JoJk0 opened 1 year ago

JoJk0 commented 1 year ago

Describe the bug I want to use Agnostic UI with Histoire so I can build my own component library with stories. At the moment it's not possible

Error while collecting story **:
SyntaxError: Unexpected token '}'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)
    at async link (node:internal/modules/esm/module_job:67:21)

To Reproduce https://stackblitz.com/edit/histoire-vue3-starter-ybomb1?file=package.json,src%2FBaseButton.vue

  1. Use Histoire's official starter template https://histoire.dev/guide/getting-started.html
  2. Install agnostic-vue
  3. Import Button from agnostic-vue package inside BaseButton.vue
  4. Replace button with Button
  5. Observe error in node console

Alternatively, I managed to reproduce it coming from Agnostic Ui's official starter template: https://stackblitz.com/edit/github-sxfr9i?file=histoire.setup.mjs,src%2Fcomponents%2Fvue%2FButton.stories.vue,vite.config.js,package.json

Expected behavior It loads Agnostic UI Button component in Histoire

Desktop (please complete the following information):

JoJk0 commented 1 year ago

I'm not 100% sure on whether the issue lies in Histoire or Agnostic UI so I created an issue on Histoire as well https://github.com/histoire-dev/histoire/issues/542

JoJk0 commented 1 year ago

I managed to find a workaround to use the 'raw' components from source. Looks like the issue lies in built script for ES6 modules.

<script lang="ts" setup>
import { Button } from 'agnostic-vue/src/components'
</script>

<template>
  <Button>
    <slot />
  </Button>
</template>