"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[82556],{74350:(e,s,t)=>{t.d(s,{Z:()=>n});const n=t.p+"assets/images/social-card-105335e6b4ebb3f62aa9b04e33a76dea.png"},13381:(e,s,t)=>{t.d(s,{Z:()=>a});var n=t(24246),r=(t(27378),t(6698));function a({url:e}){return(0,n.jsx)("div",{style:{padding:10},children:(0,n.jsx)(r.Z,{url:e,style:{minWidth:"min(100%,45vw)",width:800,maxWidth:"100%",overflow:"hidden"},bodyStyle:{padding:0},children:(0,n.jsx)("iframe",{src:e,title:e,style:{display:"block",width:"100%",height:300}})})})}},6698:(e,s,t)=>{t.d(s,{Z:()=>l});var n=t(24246),r=(t(27378),t(40624));const a={browserWindow:"browserWindow_my1Q",browserWindowHeader:"browserWindowHeader_jXSR",row:"row_KZDM",buttons:"buttons_uHc7",right:"right_oyze",browserWindowAddressBar:"browserWindowAddressBar_Pd8y",dot:"dot_giz1",browserWindowMenuIcon:"browserWindowMenuIcon_Vhuh",bar:"bar_rrRL",browserWindowBody:"browserWindowBody_Idgs"};function i(e,s,t){return s in e?Object.defineProperty(e,s,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[s]=t,e}function o(e){for(var s=1;s<arguments.length;s++){var t=null!=arguments[s]?arguments[s]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(s){i(e,s,t[s])}))}return e}function c(e,s){return s=null!=s?s:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):function(e,s){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable}))),t.push.apply(t,n)}return t}(Object(s)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(s,t))})),e}function l({children:e,minHeight:s,url:t="http://localhost:3000",style:i,bodyStyle:l}){return(0,n.jsxs)("div",{className:a.browserWindow,style:c(o({},i),{minHeight:s}),children:[(0,n.jsxs)("div",{className:a.browserWindowHeader,children:[(0,n.jsxs)("div",{className:a.buttons,children:[(0,n.jsx)("span",{className:a.dot,style:{background:"#f25f58"}}),(0,n.jsx)("span",{className:a.dot,style:{background:"#fbbe3c"}}),(0,n.jsx)("span",{className:a.dot,style:{background:"#58cb42"}})]}),(0,n.jsx)("div",{className:(0,r.Z)(a.browserWindowAddressBar,"text--truncate"),children:t}),(0,n.jsx)("div",{className:a.browserWindowMenuIcon,children:(0,n.jsxs)("div",{children:[(0,n.jsx)("span",{className:a.bar}),(0,n.jsx)("span",{className:a.bar}),(0,n.jsx)("span",{className:a.bar})]})})]}),(0,n.jsx)("div",{className:a.browserWindowBody,style:l,children:e})]})}},5310:(e,s,t)=>{t.d(s,{Z:()=>n});const n=t.p+"assets/images/social-card-105335e6b4ebb3f62aa9b04e33a76dea.png"},90830:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var n=t(24246),r=t(71670),a=(t(6698),t(13381));const i={title:"Docusaurus 3.3",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:new Date("2024-05-03T00:00:00.000Z")},o=void 0,c={permalink:"/blog/releases/3.3",editUrl:"https://github.com/facebook/docusaurus/edit/main/website/blog/releases/3.3/index.mdx",source:"@site/blog/releases/3.3/index.mdx",title:"Docusaurus 3.3",description:"We are happy to announce Docusaurus 3.3.",date:"2024-05-03T00:00:00.000Z",tags:[{label:"release",permalink:"/blog/tags/release"}],readingTime:2.56,hasTruncateMarker:!0,authors:[{name:"S\xe9bastien Lorber",title:"Docusaurus maintainer, This Week In React editor",url:"https://thisweekinreact.com",twitter:"sebastienlorber",email:"sebastien@thisweekinreact.com",imageURL:"https://github.com/slorber.png",key:"slorber"}],frontMatter:{title:"Docusaurus 3.3",authors:["slorber"],tags:["release"],image:"./img/social-card.png",date:"2024-05-03T00:00:00.000Z"},unlisted:!1,lastUpdatedAt:1716830654e3,lastUpdatedBy:"Tatsunori Uchino",nextItem:{title:"Docusaurus 3.2",permalink:"/blog/releases/3.2"}},l={image:t(74350).Z,authorsImageUrls:[void 0]},d=[{value:"Highlights",id:"highlights",level:2},{value:"Prepare for React 19",id:"prepare-for-react-19",level:3},{value:"<code>createSitemapItems</code>",id:"createsitemapitems",level:3},{value:"Pages plugin improvements",id:"pages-plugin-improvements",level:3},{value:"Other changes",id:"other-changes",level:2}];function u(e){const s={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["We are happy to announce ",(0,n.jsx)(s.strong,{children:"Docusaurus 3.3"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["Upgrading should be easy. Our ",(0,n.jsx)(s.a,{href:"/community/release-process",children:"release process"})," respects ",(0,n.jsx)(s.a,{href:"https://semver.org/",children:"Semantic Versioning"}),". Minor versions do not include any breaking changes."]}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{alt:"Docusaurus blog post social card",src:t(5310).Z+"",width:"1200",height:"600"})}),"\n","\n",(0,n.jsx)(s.h2,{id:"highlights",children:"Highlights"}),"\n",(0,n.jsx)(s.h3,{id:"prepare-for-react-19",children:"Prepare for React 19"}),"\n",(0,n.jsxs)(s.p,{children:["The React core team recently ",(0,n.jsxs)(s.a,{href:"https://react.dev/blog/2024/04/25/react-19",children:["released the first ",(0,n.jsx)(s.strong,{children:"React 19 beta"})]}),". They also ",(0,n.jsxs)(s.a,{href:"https://react.dev/blog/2024/04/25/react-19-upgrade-guide",children:["published an upgrade guide and a ",(0,n.jsx)(s.strong,{children:"React v18.3 release"})]})," with new warnings to help us identify issues ",(0,n.jsx)(s.strong,{children:"before upgrading to React 19"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["Docusaurus v3 depends on React ",(0,n.jsx)(s.code,{children:"18.x"}),". When initializing a new Docusaurus sites, it will use that new React ",(0,n.jsx)(s.code,{children:"18.3"})," release. It's also the case if you decide to upgrade your dependencies, or re-generate your package manager lockfile."]}),"\n",(0,n.jsxs)(s.p,{children:["It turns out in its current state, ",(0,n.jsx)(s.strong,{children:"Docusaurus had a few of those extra warnings to fix"}),", notably this one immediately appearing on your dev console on any page load and navigation:"]}),"\n",(0,n.jsxs)(s.blockquote,{children:["\n",(0,n.jsx)(s.p,{children:"Warning: LoadableComponent uses the legacy contextTypes API which is no longer supported and will be removed in the next major release. Use React.createContext() with static contextType instead."}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["In ",(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10079",children:"#10079"}),", we got Docusaurus ready for React 19. We fixed all the React 18.3 warnings we encountered. In case we missed any, don't hesitate to ",(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/issues/10099",children:(0,n.jsx)(s.strong,{children:"report new warnings"})})," if you see them, to us but also to other Docusaurus third-party plugin authors."]}),"\n",(0,n.jsx)(s.h3,{id:"createsitemapitems",children:(0,n.jsx)(s.code,{children:"createSitemapItems"})}),"\n",(0,n.jsxs)(s.p,{children:["In ",(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10083",children:"#10083"}),", we introduced a new flexible ",(0,n.jsx)(s.code,{children:"createSitemapItems()"})," hook to the sitemap plugin. This enables users to create/filter/transform/enhance the sitemap items with their own custom logic."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-ts",children:"export default {\n  presets: [\n    [\n      '@docusaurus/preset-classic',\n      {\n        sitemap: {\n          // highlight-start\n          createSitemapItems: async ({\n            defaultCreateSitemapItems,\n            ...params\n          }) => {\n            const items = await defaultCreateSitemapItems(params);\n            return items.filter((item) => !item.url.includes('/tags/'));\n          },\n          // highlight-end\n        },\n      },\n    ],\n  ],\n};\n"})}),"\n",(0,n.jsx)(s.h3,{id:"pages-plugin-improvements",children:"Pages plugin improvements"}),"\n",(0,n.jsxs)(s.p,{children:["The Docusaurus ",(0,n.jsx)(s.a,{href:"/docs/api/plugins/@docusaurus/plugin-content-pages",children:"pages plugin"})," has historically been lagging behind the docs and blog plugins in terms of available feature."]}),"\n",(0,n.jsxs)(s.p,{children:["In ",(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10032",children:"#10032"})," we normalized the options available on each core content plugins by adding a few the missing page plugins APIs related to the edit url and the last update metadata displayed at the bottom on Markdown pages."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"export default {\n  presets: [\n    [\n      '@docusaurus/preset-classic',\n      {\n        pages: {\n          // highlight-start\n          editUrl:\n            'https://github.com/facebook/docusaurus/tree/main/website/src/pages',\n          editLocalizedFiles: true,\n          showLastUpdateAuthor: true,\n          showLastUpdateTime: true,\n          // highlight-end\n        },\n      },\n    ],\n  ],\n};\n"})}),"\n",(0,n.jsx)(a.Z,{url:"/examples/markdownPageExample"}),"\n",(0,n.jsx)(s.admonition,{title:"Only for Markdown pages",type:"note",children:(0,n.jsx)(s.p,{children:"These new plugin options only apply to Markdown pages, and have no effect on React pages for which you have full control over the layout with JSX."})}),"\n",(0,n.jsx)(s.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,n.jsx)(s.p,{children:"Other notable changes include:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10064",children:"#10064"}),": new site config option ",(0,n.jsx)(s.code,{children:"siteConfig.markdown.anchors.maintainCase"})]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/9767",children:"#9767"}),": new ",(0,n.jsx)(s.code,{children:"docusaurus deploy --target-dir"})," option"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10042",children:"#10042"}),": new (experimental) plugin API: ",(0,n.jsx)(s.code,{children:"route.props"})]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10060",children:"#10060"}),": optimizes the App entrypoint, avoid useless re-renders on navigations"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10080",children:"#10080"}),": ",(0,n.jsx)(s.code,{children:"<Admonition>"})," component can render properly without heading/icon"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10091",children:"#10091"}),": ",(0,n.jsx)(s.code,{children:"<Tabs>"})," props can now override defaults"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10090",children:"#10090"}),": ",(0,n.jsx)(s.code,{children:"docusaurus serve"})," works better with a ",(0,n.jsx)(s.code,{children:"/baseUrl/"})," pathname prefix"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10070",children:"#10070"}),": add missing theme translations for ",(0,n.jsx)(s.code,{children:"pt-BR"})]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/facebook/docusaurus/pull/10025",children:"#10025"}),": doc sidebar item label now impacts the doc pagination label"]}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["Check the ",(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"/changelog/3.3.0",children:"3.3.0 changelog entry"})})," for an exhaustive list of changes."]})]})}function h(e={}){const{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},71670:(e,s,t)=>{t.d(s,{Z:()=>o,a:()=>i});var n=t(27378);const r={},a=n.createContext(r);function i(e){const s=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(a.Provider,{value:s},e.children)}}}]);