Skip to content

feat: create allow list for camelCased SVG attributes #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

mgdodge
Copy link
Contributor

@mgdodge mgdodge commented Jul 15, 2021

This addresses issue #62 in the vue 3 branch. Would need to be backported to vue 2 branch if approved.

@elevatebart
Copy link
Member

Thank you @mgdodge I really appreciate it.

Do you think you could make it so that if I am using SVG attributes outside of tags, it fails?

If not I will merge this anyway.

@mgdodge
Copy link
Contributor Author

mgdodge commented Jul 16, 2021

Not sure what you mean - you want it to only allow these attributes when the tag is an SVG tag? If that is the request, I specifically do not want that. The reason is that I need this for a vue component where the base tag in the template section is an SVG. That means I need to allow these attributes on the component tag itself. For example:

// my-component.vue
<script>
export default {
  props: ['iconName'],
  // other code here
}
</script>
<template>
  <svg>
    <g v-if="iconName === 'foo'"> <!-- foo icon content --></g>
    <g v-else><!-- other icon content --></g>
  </svg>
</template>
// vue-live demo
<template>
  <my-component preserveAspectRatio="xMidYMid slice" />
  <my-component icon-name="foo" />
</template>

As illustrated here, the SVG attributes would be entirely valid, even expected, on the main component tag, which would then be passed along.

@elevatebart
Copy link
Member

Good point, I will merge this.

I will also need to add a prop to have a custom list of accepted valid props.

It's always useful to make exceptions.

@elevatebart elevatebart changed the title Create allow list for camelCased SVG attributes feat: create allow list for camelCased SVG attributes Jul 16, 2021
@elevatebart elevatebart merged commit 1f35496 into vue-styleguidist:next Jul 16, 2021
@elevatebart
Copy link
Member

🎉 This PR is included in version 2.0.0-beta.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

elevatebart added a commit that referenced this pull request May 1, 2022
* fix: first compiling version

* fix: demo remove use of datepicker unused

* First release of a vue 3 compatible vue-live (#53)

* feat: new next configuration for sem rel

BREAKING CHANGE:  will deliver the next branch as alpha next

* fix: hook on the right event

* fix: use global h hyperscript

* fix: protect empty script

* fix: install vue-3 datepicker

* docs: use the new date picker

* docs: add a comment

* build: ren semantic on next

* build: run travis on next branch

* test: fix cypress

* fix: A bunch of fixes for the next branch (#55)

* refactor: abandon functional components

* fix: avoid warning of VueLiveDefaultLayout made reactive

* fix: prevent PrismEditor from inheriting Editor props

Otherwise the event onChange is triggered twice, once by PrismEditor textarea (payload: Event) and once by the Editor (payload: code string)

* fix: externalize Vue from library bundle

* docs: fix vue aliases

* docs: update path of vuejs

* Update README.md

* fix: use acorn walk instead of recast visit

For vite esm compat

* fix: remove recast remains

* style: update comment

* fix: allow aria and dashed attributes

closes #59

* test: update test to make colon acceptable

* fix: CSS scope ID (#64)

* chore: release alpha 6

* fix: ci update caniuse

* fix: allow for $ variables and functions handlers

* build: vue plugin before others for sfc

* fix: release semrel

* feat: create allow list for camelCased SVG attributes (#67)

Co-authored-by: Michael Dodge <[email protected]>

* fix: make npm start work again

* fix: make it run without eslint errors

* fix: make it run

* fix: update dependency and make jsx work

* build: eslint configuration

* build: fix unit test using jest

* fix: update inbrowser compiler for vite compat

* fix: remove console.log

* ci: remove travis from vue-live

Co-authored-by: Benoît Burgener <[email protected]>
Co-authored-by: Maksym Shopynskyi <[email protected]>
Co-authored-by: mgdodge <[email protected]>
Co-authored-by: Michael Dodge <[email protected]>
@github-actions
Copy link

github-actions bot commented Jun 2, 2022

🎉 This PR is included in version 3.0.0-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

elevatebart added a commit that referenced this pull request Jun 2, 2022
* fix: first compiling version

* fix: demo remove use of datepicker unused

* First release of a vue 3 compatible vue-live (#53)

* feat: new next configuration for sem rel

BREAKING CHANGE:  will deliver the next branch as alpha next

* fix: hook on the right event

* fix: use global h hyperscript

* fix: protect empty script

* fix: install vue-3 datepicker

* docs: use the new date picker

* docs: add a comment

* build: ren semantic on next

* build: run travis on next branch

* test: fix cypress

* fix: A bunch of fixes for the next branch (#55)

* refactor: abandon functional components

* fix: avoid warning of VueLiveDefaultLayout made reactive

* fix: prevent PrismEditor from inheriting Editor props

Otherwise the event onChange is triggered twice, once by PrismEditor textarea (payload: Event) and once by the Editor (payload: code string)

* fix: externalize Vue from library bundle

* docs: fix vue aliases

* docs: update path of vuejs

* Update README.md

* fix: use acorn walk instead of recast visit

For vite esm compat

* fix: remove recast remains

* style: update comment

* fix: allow aria and dashed attributes

closes #59

* test: update test to make colon acceptable

* fix: CSS scope ID (#64)

* chore: release alpha 6

* fix: ci update caniuse

* fix: allow for $ variables and functions handlers

* build: vue plugin before others for sfc

* fix: release semrel

* feat: create allow list for camelCased SVG attributes (#67)

Co-authored-by: Michael Dodge <[email protected]>

* fix: make npm start work again

* fix: make it run without eslint errors

* fix: make it run

* fix: update dependency and make jsx work

* build: eslint configuration

* build: fix unit test using jest

* fix: update inbrowser compiler for vite compat

* fix: remove console.log

* fix: build script with vite needs ordering of imports

* ci: run release on next

Co-authored-by: Benoît Burgener <[email protected]>
Co-authored-by: Maksym Shopynskyi <[email protected]>
Co-authored-by: mgdodge <[email protected]>
Co-authored-by: Michael Dodge <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

2 participants