https://shakacode.com/component---src-template-blog-article-tsx-co…ed-locals-index-mdx-23a45d19c80fa4712256.js

1"use strict";(self.webpackChunkgatsby_starter_default=self.webpackChunkgatsby_starter_default||[]).push([[3577],{95325:function(a,e,n){n.r(e),n.d(e,{Head:function(){return v},default:function(){return b}});var s=n(28453),t=n(96540);function l(a){const e=Object.assign({p:"p",span:"span",h2:"h2",a:"a",h3:"h3"},(0,s.R)(),a.components);return t.createElement(t.Fragment,null,t.createElement(e.p,null,"Rails developers can break down their code into smaller,\nreusable partials when building complex web pages.\nThese partials can then be passed ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">locals</code>'}}),",\nwhich are parameters\nor\nvariables the partial needs to access."),"\n",t.createElement(e.p,null,"By default, templates will accept any locals passed to them as keyword arguments.\nThis meant templates had no control over the list of locals passed to them."),"\n",t.createElement(e.h2,{id:"before-rails-71",style:{position:"relative"}},t.createElement(e.a,{href:"#before-rails-71","aria-label":"before rails 71 permalink",className:"anchor before"},t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Before Rails 7.1"),"\n",t.createElement(e.p,null,"Before Rails 7.1,\nthere was no in-built method to define ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">locals</code>'}})," explicitly\nor\nrestrict the locals passed to the templates."),"\n",t.createElement(e.p,null,t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">local_assigns</code>'}})," is a Rails view helper method that you can use to check\nwhether the partial has been provided with local variables\nor\nnot.\nIt returns a hash of locals passed to the partials,\nas shown below:"),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token operator">&lt;</span><span class="token operator">%=</span> render partial<span class="token operator">:</span> <span class="token string-literal"><span class="token string">"payment_gateways"</span></span><span class="token punctuation">,</span> <span class="token symbol">locals</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">paypal</span><span class="token operator">:</span> <span class="token variable">@paypal</span><span class="token punctuation">,</span> <span class="token symbol">braintree</span><span class="token operator">:</span> <span class="token variable">@braintree</span> <span class="token punctuation">}</span>\n\n<span class="token operator">></span> local_assigns\n<span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token symbol">paypal</span><span class="token operator">:</span> <span class="token variable">@paypal</span><span class="token punctuation">,</span> <span class="token symbol">braintree</span><span class="token operator">:</span> <span class="token variable">@braintree</span> <span class="token punctuation">}</span>\n\n<span class="token operator">></span> local_assigns<span class="token punctuation">[</span><span class="token symbol">:paypal</span><span class="token punctuation">]</span>\n<span class="token operator">=></span> <span class="token comment">#&lt;PaymentGateway id: 1, name: "Paypal"...</span>\n\n<span class="token operator">></span> local_assigns<span class="token punctuation">.</span>has_key<span class="token operator">?</span><span class="token punctuation">(</span><span class="token symbol">:stripe</span><span class="token punctuation">)</span>\n<span class="token operator">=></span> <span class="token boolean">

1false</span></code></pre></div>'}}),"\n",t.createElement(e.p,null,"You can write a custom helper method to check if the locals\npassed to your templates are valid."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># app/views/shared/_payment_gateways.html.erb</span>\n\n<span class="token operator">&lt;</span><span class="token operator">%</span> verify_locals<span class="token punctuation">(</span>local_assigns<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token symbol">:paypal</span><span class="token punctuation">,</span> <span class="token symbol">:braintree</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span>\n\n<span class="token comment"># code for the rest of the file</span></code></pre></div>'}}),"\n",t.createElement(e.p,null,"You can implement the ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">verify_locals</code>'}})," method in ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ApplicationHelper</code>'}}),"\nand\nadd your custom logic to restrict particular locals\nor\nverify if unnecessary locals get passed to the template."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># app/helpers/application_helper.rb</span>\n\n<span class="token keyword">def</span> <span class="token method-definition"><span class="token function">verify_locals</span></span><span class="token punctuation">(</span>local_assigns<span class="token punctuation">,</span> expected_locals<span class="token punctuation">)</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>local_assigns<span class="token punctuation">.</span>keys <span class="token operator">-</span> expected_locals<span class="token punctuation">)</span><span class="token punctuation">.</span>any<span class="token operator">?</span>\n    <span class="token comment"># raise error</span>\n  <span class="token keyword">end</span>\n<span class="token keyword">end</span></code></pre></div>'}}),"\n",t.createElement(e.p,null,"Also,\nto set a default value in the template file,\nyou must use the ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">||</code>'}})," operator."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token operator">&lt;</span><span class="token operator">%</span> name <span class="token operator">=</span> <span class="token punctuation">(</span>local_assigns<span class="token punctuation">[</span><span class="token symbol">:name</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string-literal"><span class="token string">"Guest User"</span></span><span class="token punctuation">)</span>  <span class="token operator">%</span><span class="token operator">></span></code></pre></div>'}}),"\n",t.createElement(e.h2,{id:"in-rails-71",style:{position:"relative"}},t.createElement(e.a,{href:"#in-rails-71","aria-label":"in rails 71 permalink",className:"anchor before"},t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"In Rails 7.1"),"\n",t.createElement(e.p,null,"In Rails 7.1,\n",t.createElement(e.a,{href:"https://github.com/rails/rails/pull/45602"},"developers can define or restrict\nlocal variables a template can accept"),".\nTo implement this,\nyou must add a local magic comment inside the template."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># app/views/shared/_payment_gateways.html.erb</span>\n\n<span class="token operator">&lt;</span><span class="token operator">%</span><span class="token comment"># locals: (paypal:, braintree:) -%></span></code></pre></div>'}}),"\n",t.createElement(e.p,null,"Rendering a partial with local variables still works the same way,\nbut if you pass any local variables that are not expected,\nRails will raise an ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ActionView::Template::Error</code>'}}),"."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># app/views/orders/create.html.erb</span>\n\n<span class="token operator">&lt;</span><span class="token operator">%=</span> render partial<span class="token operator">:</span> <span class="token string-literal"><span class="token string">"payment_gateways"</span></span><span class="token punctuation">,</span> <span class="token symbol">locals</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">

1paypal</span><span class="token operator">:</span> <span class="token variable">@paypal</span><span class="token punctuation">,</span> <span class="token symbol">braintree</span><span class="token operator">:</span> <span class="token variable">@braintree</span> <span class="token punctuation">}</span>\n\n<span class="token comment"># Raises error if additional or invalid locals are passed</span>\n<span class="token comment"># app/views/orders/create.html.erb</span>\n\n<span class="token operator">&lt;</span><span class="token operator">%=</span> render partial<span class="token operator">:</span> <span class="token string-literal"><span class="token string">"payment_gateways"</span></span><span class="token punctuation">,</span> <span class="token symbol">locals</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">paypal</span><span class="token operator">:</span> <span class="token variable">@paypal</span><span class="token punctuation">,</span> <span class="token symbol">braintree</span><span class="token operator">:</span> <span class="token variable">@braintree</span><span class="token punctuation">,</span> <span class="token symbol">stripe</span><span class="token operator">:</span> <span class="token variable">@stripe</span> <span class="token punctuation">}</span>\n\nActionView<span class="token double-colon punctuation">::</span>Template<span class="token double-colon punctuation">::</span>Error <span class="token punctuation">(</span>unknown local<span class="token operator">:</span> <span class="token symbol">:stripe</span><span class="token punctuation">)</span><span class="token operator">:</span>\n\napp<span class="token operator">/</span>views<span class="token operator">/</span>orders<span class="token operator">/</span>create<span class="token punctuation">.</span>html<span class="token punctuation">.</span>erb<span class="token operator">:</span><span class="token number">10</span></code></pre></div>'}}),"\n",t.createElement(e.h3,{id:"setting-default-locals",style:{position:"relative"}},t.createElement(e.a,{href:"#setting-default-locals","aria-label":"setting default locals permalink",className:"anchor before"},t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Setting default locals"),"\n",t.createElement(e.p,null,"The feature will also raise an error if the expected locals are not passed."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token operator">&lt;</span><span class="token operator">%=</span> render partial<span class="token operator">:</span> <span class="token string-literal"><span class="token string">"payment_gateways"</span></span><span class="token punctuation">,</span> <span class="token symbol">locals</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">paypal</span><span class="token operator">:</span> <span class="token variable">@paypal</span> <span class="token punctuation">}</span>\n\nActionView<span class="token double-colon punctuation">::</span>Template<span class="token double-colon punctuation">::</span>Error <span class="token punctuation">(</span>missing local<span class="token operator">:</span> <span class="token symbol">:braintree</span><span class="token punctuation">)</span><span class="token operator">:</span>\n\napp<span class="token operator">/</span>views<span class="token operator">/</span>orders<span class="token operator">/</span>create<span class="token punctuation">.</span>

1html<span class="token punctuation">.</span>erb<span class="token operator">:</span><span class="token number">10</span></code></pre></div>'}}),"\n",t.createElement(e.p,null,"You can avoid the ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">missing local:</code>'}})," error\nby setting the default values for the locals in the magic comment."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># app/views/shared/_payment_gateways.html.erb</span>\n\n<span class="token operator">&lt;</span><span class="token operator">%</span><span class="token comment"># locals: (paypal: PaymentGateway.find_by_name("paypal"), braintree:...) -%></span></code></pre></div>'}}),"\n",t.createElement(e.h3,{id:"partials-with-no-locals",style:{position:"relative"}},t.createElement(e.a,{href:"#partials-with-no-locals","aria-label":"partials with no locals permalink",className:"anchor before"},t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Partials with no locals"),"\n",t.createElement(e.p,null,"You might need to render a partial without any locals in a few cases.\nTo ensure the partial does not accept any locals,\nyou need to set the local magic comment below."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># app/views/shared/_payment_gateways.html.erb</span>\n\n<span class="token operator">&lt;</span><span class="token operator">%</span><span class="token comment"># locals: () -%></span></code></pre></div>'}}),"\n",t.createElement(e.p,null,"If you try to pass any local to this partial,\nit would throw ",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">no locals accepted</code>'}})," error."),"\n",t.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">&lt;%= render partial: "payment_gateways", locals: { paypal: @paypal }\n\nActionView::Template::Error (no locals accepted):10</code></pre></div>'}}),"\n",t.createElement(e.p,null,"This feature will unlock the ability to pre-compile templates\nat application boot time instead of at runtime in the future."),"\n",t.createElement(e.p,null,"To know more about this feature,\nplease refer to this\n",t.createElement(e.a,{href:"https://github.com/rails/rails/pull/45602"},"PR"),"."))}var o=function(a){void 0===a&&(a={});const{wrapper:e}=Object.assign({},(0,s.R)(),a.components);return e?t.createElement(e,a,t.createElement(l,a)):l(a)},p=n(5588),r=n(65427),c=n(20504),i=n(43397),u=n(61942);const m=a=>a.replace(/\/+$/,""),d=(a,e)=>e?""+a+(e.startsWith("/")?e:"/"+e):a,g=(a,e)=>d(m(a),e),h=(a,e)=>d((a=>"undefined"!=typeof window?window.location.origin:m(a))(a),e),k=(a,e)=>{const n=(0,p.d)(e);return n?g(a,n):(a=>g(a,"/shakacode-og.png"))(a)},y=a=>{let{data:e,location:n,children:s}=a;const{frontmatter:l}=e.mdx,{siteUrl:o}=e.site.siteMetadata,p=h(o,n.pathname);return t.createElement(t.Fragment,null,t.createElement(r.A,null),t.createElement(c.A,{header:t.createElement(u.r,{breadcrumb:l.title}),main:t.createElement(t.Fragment,null,t.createElement(u.c,{body:s,title:l.title,author:l.author,date:l.date,link:p,categories:l.categories,featuredImage:l.featuredImage,showFeaturedImage:l.showFeaturedImage}),t.createElement(i.LN,null))}))};function b(a){return t.createElement(y,a,t.createElement(o,a))}const v=a=>{let{data:e,location:n}=a;const{frontmatter:s,excerpt:l}=e.mdx,{siteMetadata:o}

1=e.site,{siteUrl:p,title:r,description:c}=o,i=((a,e,n)=>a.excerpt||e||n)(s,l,c),u=k(p,s.featuredImage),m=g(p,n.pathname);return t.createElement(t.Fragment,null,t.createElement("title",null,s.title+" | "+r),t.createElement("link",{rel:"canonical",href:m}),t.createElement("meta",{name:"description",content:i}),t.createElement("meta",{property:"og:title",content:s.title}),t.createElement("meta",{property:"og:description",content:i}),t.createElement("meta",{property:"og:type",content:"article"}),t.createElement("meta",{property:"og:url",content:m}),t.createElement("meta",{property:"og:image",content:u}),t.createElement("meta",{name:"image",content:u}),t.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),t.createElement("meta",{name:"twitter:title",content:s.title}),t.createElement("meta",{name:"twitter:description",content:i}),t.createElement("meta",{name:"twitter:image",content:u}))}}}]);
2//# sourceMappingURL=component---src-template-blog-article-tsx-content-file-path-src-posts-rails-7-1-allows-templates-to-define-accepted-locals-index-mdx-23a45d19c80fa4712256.js.map