Skip to content
This repository has been archived by the owner on Dec 15, 2023. It is now read-only.

chore: fix removing template from source loader in the docs #495

Merged
merged 1 commit into from
Sep 12, 2022

Conversation

josedialpad
Copy link
Contributor

@josedialpad josedialpad commented Sep 12, 2022

fix removing template from source loader in the docs

๐Ÿ› ๏ธ Type Of Change

  • Fix
  • Feature
  • Refactoring
  • Documentation

๐Ÿ“– Description

This fixes the error that breaks the docs page when clicking in Show code button in a story (for now only available when switching from stories of the same component or resetting controls from the "Slots, Props & Events" table).

To fix the bug that the "Show code" button is not available and instead shows "No code available", an issue was created in the Storybook repository https://github.com/storybookjs/storybook/issues/19160.
Storybook 7.0 is still in alpha version and seems to be unstable for upgrading. In the 6.5.10 version (latest stable version) the bug is still present so upgrading is not a solution for now.
The workaround is to use iframe stories but unfortunately generates other problems (performance, iframes that needs to be adjusted individually).

๐Ÿ’ก Context

๐Ÿ“ Checklist

  • I have reviewed my changes
  • I have added tests
  • I have added all relevant documentation
  • I have validated components with a screen reader
  • I have validated components keyboard navigation
  • I have considered the performance impact of my change
  • I have checked that my change did not significantly increase bundle size
  • I am exporting any new components or constants in the index.js in the component directory
  • I am exporting any new components or constants in the index.js in the root

๐Ÿ”ฎ Next Steps

Track the issue in Storybook to see if they come up with a solution or figure out the problem ourselves in the Sb's code to see if we can fix (I have a rough idea about where to look for the issue).

๐Ÿ“ท Screenshots / GIFs

2022-09-12.at.11.56.28.mp4

๐Ÿ”— Sources

@github-actions
Copy link

Thanks for contributing to Dialtone Vue! Please read below for some important info regarding Vue 3 compatibility.

Currently we need to maintain two branches in Dialtone Vue, one for Vue 2, one for Vue 3.

This means you must create two PRs for every feature change you make. One into staging and one into staging-vue3.

Many times the change you have made in Vue 2 will be identical to the change you need to make in Vue 3. To make this easier we have made a script that can copy your changes from this branch to a new branch off of staging-vue3 suffixed with -vue3.

run ./copy_pr_vue3.sh from the root dialtone-vue directory.

Once the new branch is created, you will need to look at your code to make sure it still makes sense and test that your changes all work in vue 3. If everything is good you can push it and create a PR into staging-vue3.

It is a required check for every PR to have a corresponding branch called yourbranch-vue3 so that we do not forget to do it. In the special case that you need to make a change to vue2 without making it in vue3, you can set the label vue2-only on this PR.

I got "commit SHA is a merge but no -m option was given."

This happens if there are merge commits in your branch. It's no problem, you can simply skip them with git cherry-pick --skip. We don't want to copy merge commits to the Vue 3 branch.

What if I make more changes to my vue 2 branch after running ./copy_pr_vue3.sh?

You can copy these to the existing -vue3 branch by running the script with a git SHA param like so:

./copy_pr_vue3.sh 2a78db7

where 2a78db7 is the last commit from your branch that was copied to the other branch (all commits after this will be copied)

If it's just one or two commits, you may prefer to just manually use git cherry-pick which will work fine as well.

What if I get a conflict?

It's possible to get a conflict when running copy_pr_vue3.sh as there are differences in Vue 2 and Vue 3 code. If this happens you can manually fix the conflict, commit it and do git cherry-pick --continue.

@github-actions
Copy link

โœ”๏ธ Deploy Preview ready!
๐Ÿ˜Ž Browse the preview: https://vue.dialpad.design/deploy-previews/pr-495/
๐Ÿ”จ If you experience an SSL issue then wait 2 minutes and try again.

Comment on lines +69 to 75
transformSource(src) {
const match = /^<template>(.*)<\/template>/.exec(src)
if(match) {
return match[1]
}
return src
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if we just remove this completely? Wondering if they fixed this in an update.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still needed in the current Storybook version we're using (6.5.7). Worth to try to remove once we update to newer versions.

@josedialpad josedialpad merged commit 328b6dc into staging Sep 12, 2022
@josedialpad josedialpad deleted the dt-524-fix-storybook-show-code branch September 12, 2022 18:33
@github-actions
Copy link

๐ŸŽ‰ This PR is included in version 2.26.0 ๐ŸŽ‰

The release is available on GitHub release

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
2 participants