fix(type-aliases): add `title` prop for imported inline SVG React components #9612

axmmisaka · 2023-12-04T19:53:54Z

This PR would make TypeScript server stop complaining should one decide to use the "title" prop in imported inline SVG elements

Pre-flight checklist

I have read the Contributing Guidelines on pull requests.
If this is a code change: ~~I have written unit tests and/or added dogfooding pages to fully verify the new behavior.~~ (this PR involves only typechecking and I don't think it's applicable)
If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

fix #9609; this PR changes typing interface to adapt webpack behaviour.

Test Plan

Open up docusaurus.new and yarn install this change
In src/components/HomePageFeatures (or any other place), do

import Mountain from '@site/static/img/undraw_docusaurus_mountain.svg';
const test = (): JSX.Element => (
<>
    <Mountain role="img" />
    <Mountain role="img" title="Wow cool dinosaur" />
</>);

Run yarn typecheck
Confirm that tsc does not complain

Test links

https://stackblitz.com/edit/github-sdux4y?file=src%2Fcomponents%2FHomepageFeatures%2Findex.tsx&view=editor

Deploy preview: https://deploy-preview-_____--docusaurus-2.netlify.app/

Related issues/PRs

#9609

This would make TypeScript server stop complaining should one decide to use the "title" prop Relate issue: #9609

netlify · 2023-12-04T19:57:13Z

✅ [V2]

Name	Link
🔨 Latest commit	`1d155bf`
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/656f4d30bde6d80008fe5aff
😎 Deploy Preview	https://deploy-preview-9612--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2023-12-04T20:00:08Z

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 78	🟢 98	🟢 100	🟢 100	🟠 89	Report
/docs/installation	🟠 71	🟢 98	🟢 100	🟢 100	🟠 89	Report
/docs/category/getting-started	🟠 76	🟢 100	🟢 100	🟢 90	🟠 89	Report
/blog	🟠 74	🟢 100	🟢 100	🟢 90	🟠 89	Report
/blog/preparing-your-site-for-docusaurus-v3	🟠 63	🟢 97	🟢 100	🟢 100	🟠 89	Report
/blog/tags/release	🟠 75	🟢 100	🟢 100	🟠 80	🟠 89	Report
/blog/tags	🟠 75	🟢 100	🟢 100	🟢 90	🟠 89	Report

slorber · 2023-12-05T16:14:33Z

LGTM thanks 👍

Fix #9609

Note: title is not a valid svg attribute, and this SVGR prop gets mapped to a child <title> element, as documented in gregberge/svgr#88

import SvgrComponent from './SvgrComponent'

<SvgrComponent title="This is a title" />
// The output will be:
// <svg><title>This is a title</title></svg>
// Instead of:
// <svg title="This is a title" />

packages/docusaurus-module-type-aliases/src/index.d.ts

…ponents (#9612) Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com> Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com> Co-authored-by: Ivan Mar (sOkam!) <7308253+heysokam@users.noreply.github.com> Co-authored-by: c0h1b4 <dwidman@gmail.com> Co-authored-by: Janessa Garrow <janessa.garrow@gmail.com> Co-authored-by: ozaki <29860391+OzakIOne@users.noreply.github.com> Co-authored-by: axmmisaka <6500159+axmmisaka@users.noreply.github.com> Co-authored-by: Tatsunori Uchino <tats.u@live.jp> Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com> fix(i18n): complete translations for theme-common.json Brazilian Portuguese (pt-BR) (#9477) fix(content-blog): add baseUrl for author.image_url (#9581) fix(type-aliases): add `title` prop for imported inline SVG React components (#9612) fix(utils): Markdown link replacement with <> but no spaces (#9617) fix(live-codeblock): stabilize react-live transformCode callback, fix editor/preview desync (#9631) fix(cli): output help when no conventional config + no subcommand (#9648) fix CI job (#9604) fix Lint Autofix workflow (#9632) fix(pwa-plugin): upgrade workbox (#9668) fix(create-docusaurus): fix init template code blocks, and little improvements (#9696) fix(theme): allow empty code blocks and live playgrounds (#9704)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: Joey Clover <joey@popos.local> Co-authored-by: reece-white <93522192+reece-white@users.noreply.github.com> Co-authored-by: Shreesh Nautiyal <114166000+Shreesh09@users.noreply.github.com> Co-authored-by: Nick Gerleman <nick@nickgerleman.com> Co-authored-by: Chongyi Zheng <git@zcy.dev> Co-authored-by: MCR Studio <99176216+mcrstudio@users.noreply.github.com> Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com> Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com> Co-authored-by: Ivan Mar (sOkam!) <7308253+heysokam@users.noreply.github.com> Co-authored-by: c0h1b4 <dwidman@gmail.com> Co-authored-by: Janessa Garrow <janessa.garrow@gmail.com> Co-authored-by: ozaki <29860391+OzakIOne@users.noreply.github.com> Co-authored-by: axmmisaka <6500159+axmmisaka@users.noreply.github.com> Co-authored-by: Tatsunori Uchino <tats.u@live.jp> Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com> Co-authored-by: Sanjaiyan Parthipan <parthipankalayini@gmail.com> Co-authored-by: Jack Robson <143492403+jack-robson@users.noreply.github.com> Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> Co-authored-by: eitsupi <50911393+eitsupi@users.noreply.github.com> fix(create-docusaurus): fix readme docusaurus 2 ref (#9487) fix(theme): fix firefox CSS :has() support bug (#9530) fix(theme): docs html sidebar items should always be visible (#9531) fix: v3 admonitions should support v2 title syntax for nested admonitions (#9535) fix(theme-classic): fixed wrong cursor on dropdown menu in navbar, when window is small (#9398) fix(theme): upgrade prism-react-renderer, fix html script and style tag highlighting (#9567) fix: add v2 retrocompatible support for quoted admonitions (#9570) fix(i18n): complete translations for theme-common.json Brazilian Portuguese (pt-BR) (#9477) fix(content-blog): add baseUrl for author.image_url (#9581) fix(type-aliases): add `title` prop for imported inline SVG React components (#9612) fix(utils): Markdown link replacement with <> but no spaces (#9617) fix(live-codeblock): stabilize react-live transformCode callback, fix editor/preview desync (#9631) fix(cli): output help when no conventional config + no subcommand (#9648) fix CI job (#9604) fix Lint Autofix workflow (#9632) fix(pwa-plugin): upgrade workbox (#9668) fix(create-docusaurus): fix init template code blocks, and little improvements (#9696) fix(theme): allow empty code blocks and live playgrounds (#9704) fix(core): various broken anchor link fixes (#9732) fix: remove old useless mdx typedefs (#9733) fix(theme-common): fix missing code block MagicComments style in Visual Basic (.NET) 16 (#9727) fix(core): conditionally include `hostname` parameter when using… (#9407) fix(create-docusaurus): fix typo in init template sample docs (#9783) fix(mdx-loader): allow spaces before `mdx-code-block` info string (#9776) fix(core): links with target "_blank" should no be checked by the broken link checker (#9788) fix(core): broken links optimization behaves differently than non-optimized logic (#9791)

Add title prop for imported inline SVG React components

8bdb9ed

This would make TypeScript server stop complaining should one decide to use the "title" prop Relate issue: #9609

axmmisaka requested a review from slorber as a code owner December 4, 2023 19:53

facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 4, 2023

slorber added the pr: bug fix This PR fixes a bug in a past release. label Dec 5, 2023

slorber reviewed Dec 5, 2023

View reviewed changes

packages/docusaurus-module-type-aliases/src/index.d.ts Outdated Show resolved Hide resolved

Update packages/docusaurus-module-type-aliases/src/index.d.ts

1d155bf

slorber added the to backport This PR is planned to be backported to a stable version of Docusaurus label Dec 5, 2023

slorber merged commit 8dd1e13 into facebook:main Dec 5, 2023
30 of 31 checks passed

axmmisaka deleted the title-prop-for-inline-svg branch December 8, 2023 11:27

slorber added a commit that referenced this pull request Jan 5, 2024

fix(type-aliases): add title prop for imported inline SVG React com…

ab6147a

…ponents (#9612) Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

slorber added backported This PR has been backported to a stable version of Docusaurus and removed to backport This PR is planned to be backported to a stable version of Docusaurus labels Jan 5, 2024

NikolayS mentioned this pull request Apr 24, 2024

[Snyk] Security upgrade @docusaurus/plugin-pwa from 2.0.0-alpha.66 to 3.1.0 NikolayS/docusaurus#200

Open

Abuchtela mentioned this pull request May 20, 2024

[Snyk] Upgrade @docusaurus/preset-classic from 3.0.0 to 3.2.1 Abuchtela/aptos-core#42

Open

This was referenced May 25, 2024

[Snyk] Upgrade @docusaurus/core from 3.0.0 to 3.3.2 therev3l4/xcp-ng-org#7

Open

[Snyk] Upgrade @docusaurus/preset-classic from 3.0.0 to 3.3.2 therev3l4/xcp-ng-org#8

Open

This was referenced May 26, 2024

[Snyk] Upgrade @docusaurus/module-type-aliases from 3.0.0 to 3.3.2 qdraw/starsky#1593

Open

[Snyk] Upgrade @docusaurus/types from 3.0.0 to 3.3.2 qdraw/starsky#1594

Open

[Snyk] Upgrade @docusaurus/tsconfig from 3.0.0 to 3.3.2 qdraw/starsky#1595

Open

This was referenced Jun 8, 2024

[Snyk] Upgrade @docusaurus/core from 3.1.0 to 3.3.2 rong4ivy/dspy#2

Open

[Snyk] Upgrade @docusaurus/preset-classic from 3.1.0 to 3.3.2 rong4ivy/dspy#3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(type-aliases): add `title` prop for imported inline SVG React components #9612

fix(type-aliases): add `title` prop for imported inline SVG React components #9612

axmmisaka commented Dec 4, 2023 •

edited by slorber

netlify bot commented Dec 4, 2023 •

edited

github-actions bot commented Dec 4, 2023 •

edited

slorber commented Dec 5, 2023 •

edited

fix(type-aliases): add title prop for imported inline SVG React components #9612

fix(type-aliases): add title prop for imported inline SVG React components #9612

Conversation

axmmisaka commented Dec 4, 2023 • edited by slorber

Pre-flight checklist

Motivation

Test Plan

Test links

Related issues/PRs

netlify bot commented Dec 4, 2023 • edited

✅ [V2]

github-actions bot commented Dec 4, 2023 • edited

⚡️ Lighthouse report for the deploy preview of this PR

slorber commented Dec 5, 2023 • edited

fix(type-aliases): add `title` prop for imported inline SVG React components #9612

fix(type-aliases): add `title` prop for imported inline SVG React components #9612

axmmisaka commented Dec 4, 2023 •

edited by slorber

netlify bot commented Dec 4, 2023 •

edited

github-actions bot commented Dec 4, 2023 •

edited

slorber commented Dec 5, 2023 •

edited