feat: svelte support (#232)

histoire-dev · Aug 12, 2022 · d160204 · d160204
1 parent 4abb77f
commit d160204
Show file tree

Hide file tree

Showing 64 changed files with 2,663 additions and 77 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -62,7 +62,7 @@ module.exports = {
       },
     },
     {
-      files: ['**/cypress/integration/**'],
+      files: ['**/cypress/**'],
       extends: [
         'plugin:cypress/recommended',
       ],

diff --git a/.github/workflows/test-svelte3.yml b/.github/workflows/test-svelte3.yml
@@ -0,0 +1,64 @@
+name: Svelte 3 tests
+on:
+  - push
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    name: Build and test
+
+    env:
+      dir: ./examples/svelte3
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7.1.7
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        with:
+          path: |
+            ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+            ~/.cache/Cypress
+          key: pnpm-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-v1-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Build book
+        working-directory: ${{env.dir}}
+        run: pnpm run story:build
+
+      - name: Run tests
+        working-directory: ${{env.dir}}
+        run: pnpm run ci
+
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: ${{env.dir}}/cypress/screenshots
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: cypress-videos
+          path: ${{env.dir}}/cypress/videos
diff --git a/.github/workflows/test-vue3.yml b/.github/workflows/test-vue3.yml
@@ -1,7 +1,6 @@
 name: Vue 3 tests
 on:
   - push
-  - pull_request
 jobs:
   build-and-test:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -1,7 +1,6 @@
 name: Continuous tests
 on:
   - push
-  - pull_request
 jobs:
   build-and-test:
     runs-on: ubuntu-latest

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -12,6 +12,7 @@ module.exports = {
     ['meta', { property: 'og:image:height', content: '315' }],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { name: 'twitter:site', content: '@histoire_dev' }],
+    ['link', { rel: 'stylesheet', href: 'https://fonts.bunny.net/css?family=fira-sans:400,400i,600,600i' }],
   ],
 
   lastUpdated: true,
@@ -47,6 +48,10 @@ module.exports = {
             text: 'Vue 2.7',
             link: '/guide/vue2/getting-started',
           },
+          {
+            text: 'Svelte 3',
+            link: '/guide/svelte3/getting-started',
+          },
           {
             text: 'Configuration',
             link: '/guide/config',
@@ -99,7 +104,7 @@ module.exports = {
           ],
         },
         {
-          text: 'Story components (Vue 3)',
+          text: 'Story components (Vue)',
           collapsible: true,
           items: [
             {
@@ -112,16 +117,26 @@ module.exports = {
             },
           ],
         },
+        {
+          text: 'Story components (Svelte)',
+          collapsible: true,
+          items: [
+            {
+              text: 'Hst.Story',
+              link: '/reference/svelte3/story',
+            },
+            {
+              text: 'Hst.Variant',
+              link: '/reference/svelte3/variant',
+            },
+          ],
+        },
       ],
       '/guide/vue3/': [
         {
           text: 'Guide - Vue 3',
           collapsible: true,
           items: [
-            {
-              text: 'Why Histoire',
-              link: '/guide/',
-            },
             {
               text: 'Getting Started',
               link: '/guide/vue3/getting-started',
@@ -152,16 +167,30 @@ module.exports = {
             },
           ],
         },
-      ],
-      '/guide/vue2/': [
         {
-          text: 'Guide - Vue 2',
+          text: 'Learn more',
           collapsible: true,
           items: [
             {
-              text: 'Why Histoire',
+              text: 'About Histoire ⮌',
               link: '/guide/',
             },
+            {
+              text: 'Configuration ⮌',
+              link: '/guide/config',
+            },
+            {
+              text: 'Plugins ⮌',
+              link: '/guide/plugins/official',
+            },
+          ],
+        },
+      ],
+      '/guide/vue2/': [
+        {
+          text: 'Guide - Vue 2',
+          collapsible: true,
+          items: [
             {
               text: 'Getting Started',
               link: '/guide/vue2/getting-started',
@@ -192,15 +221,87 @@ module.exports = {
             },
           ],
         },
+        {
+          text: 'Learn more',
+          collapsible: true,
+          items: [
+            {
+              text: 'About Histoire ⮌',
+              link: '/guide/',
+            },
+            {
+              text: 'Configuration ⮌',
+              link: '/guide/config',
+            },
+            {
+              text: 'Plugins ⮌',
+              link: '/guide/plugins/official',
+            },
+          ],
+        },
+      ],
+      '/guide/svelte3/': [
+        {
+          text: 'Guide - Svelte 3',
+          collapsible: true,
+          items: [
+            {
+              text: 'Getting Started',
+              link: '/guide/svelte3/getting-started',
+            },
+            {
+              text: 'Stories',
+              link: '/guide/svelte3/stories',
+            },
+            {
+              text: 'State & Controls',
+              link: '/guide/svelte3/controls',
+            },
+            {
+              text: 'Events',
+              link: '/guide/svelte3/events',
+            },
+            {
+              text: 'Documentation',
+              link: '/guide/svelte3/docs',
+            },
+            {
+              text: 'Hierarchy',
+              link: '/guide/svelte3/hierarchy',
+            },
+          ],
+        },
+        {
+          text: 'Learn more',
+          collapsible: true,
+          items: [
+            {
+              text: 'About Histoire ⮌',
+              link: '/guide/',
+            },
+            {
+              text: 'Configuration ⮌',
+              link: '/guide/config',
+            },
+            {
+              text: 'Plugins ⮌',
+              link: '/guide/plugins/official',
+            },
+          ],
+        },
       ],
       '/guide/': [
         {
-          text: 'Guide',
+          text: 'About',
           items: [
             {
               text: 'Why Histoire',
               link: '/guide/',
             },
+            {
+              text: 'Getting Started',
+              link: '/guide/getting-started',
+            },
             {
               text: 'Configuration',
               link: '/guide/config',

diff --git a/docs/.vitepress/theme/style/index.pcss b/docs/.vitepress/theme/style/index.pcss
@@ -1,6 +1,12 @@
 @tailwind base;
 @tailwind components;
 
+body {
+  font-family: 'Fira Sans', Inter, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
 button {
   font-size: inherit;
 }
@@ -79,6 +85,10 @@ table {
   }
 }
 
+em {
+  @apply italic;
+}
+
 /* Vitepress fixes */
 
 .VPNavBar.has-sidebar .content {

diff --git a/docs/guide/config.md b/docs/guide/config.md
@@ -2,6 +2,8 @@
 
 To customize your experience, you can configure several parts of Histoire.
 
+[See the full configuration reference →](../reference/config.md)
+
 ## Config file
 
 ### Standalone file

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -36,17 +36,27 @@ Histoire is an Open-Source project supported by our sponsors - thank you!
 
 ## Supported frameworks
 
-| Framework | Versions | Support | Auto CodeGen | Auto Docs |
-| --------- | -------- | ------- | ------------ | ---- |
-| [Vue](https://vuejs.org/) | 3.2+ | ✅ | ✅ | - |
-| [Vue](https://v2.vuejs.org/) | 2.7+ | ✅ | ✅ | - |
-| [Svelte](https://svelte.dev/) | - | - | - | - |
-| [Solid](https://www.solidjs.com/) | - | - | - | - |
-| [Angular](https://angular.io/) | - | - | - | - |
-| [React](https://reactjs.org/) | - | - ([Alternative](https://www.ladle.dev)) | - | - |
-
+[Vite](https://vitejs.dev) currently supported versions:
+- `2.9+`
+- `3.0+`
 
-## Guides
+---
 
-- [Vue 3 →](./vue3/getting-started.md)
-- [Vue 2 →](./vue2/getting-started.md)
+| Framework | Version | Support* | Auto-CodeGen* | Auto-Docs* |
+| --------- | -------- | ------- | ------------ | ---- |
+| [Vue →](./vue3/getting-started.md) | `3.2+` | ✅ | ✅ | 🏗️ |
+| [Vue →](./vue2/getting-started.md) | `2.7+` | ✅ | ✅ | - |
+| [Svelte →](./svelte3/getting-started.md) | `3+` | ✅ | - | - |
+| Solid | - | - | - | - |
+| Angular | - | - | - | - |
+| React | - | - ([Alternative](https://www.ladle.dev)) | - | - |
+
+**<u>Support</u> means*:
+- Collect and render stories
+- Render controls pane content with state sync
+- Builtin controls wrappers
+- *Static source (soon)*
+
+*<u>*Auto-CodeGen*</u>: Generates copiable source code dynamically from the current story state.
+
+*<u>*Auto-Docs*</u>: Generates documentation and controls automatically by analyzing the imported components.