ionic-team / stencil-helmet Goto Github PK

View Code? Open in Web Editor NEW

24.0 8.0 12.0 389 KB

Declaratively update the <head> from a Stencil app.

Home Page: https://npm.im/@stencil-community/helmet

License: MIT License

TypeScript 100.00%

stencil component

stencil-helmet's Introduction

Stencil Helmet

Declaratively update the <head> from a Stencil app.

This is a Stencil component meant to be used within Stencil apps to declaratively update the document <head>. You pass it elements that you'd normally place in <head>, and it updates <head> accordingly. Each instance will override duplicate tags from preceding instances.

Note that, because it uses virtual DOM as input, stencil-helmet can only be used within Stencil apps and not as a standalone web component.

Installation

npm install @stencil-community/helmet

Usage

import Helmet from '@stencil-community/helmet';

//...
export class MyComponent {
  render() {
    return (
      <div>
        <Helmet>
          <title>{this.title}</title>
          <meta name="description" content={this.description}/>
          <link rel="stylesheet" href="/styles.css"/>
        </Helmet>
      </div>
    );
  }
}

stencil-helmet's People

Contributors

Stargazers

Watchers

Forkers

liquoriceboy dominicboettger tricki arctek jscheper adamlacombe mimeojs leechy igk1972 thedigitaloctopus

stencil-helmet's Issues

Not working on Production environment

Hi there!

The library successfully updates all the metatags if it's running on the dev environment. But when it's running on Production - metatags are not updated.

The @stencil/helmet dependency is located in the "dependencies" object of the package.json file. Version - 0.3.2.

Any suggestions on what is wrong?

Thank you!

Dont re-use tags when route changes

Hi, I was trying your awesome plugin with @stencil/router, however I noticed, that If a certain route does not have a Helmet tag, previously declared tags just stay "online". This causes a few problems:

Current behavior
I have a page-not-found component, which will trigger if no other route matches the requested path. If I add a <meta name="robots" content="noindex, nofollow" /> to the 404 component and than go back to the homepage, the robots dont change. The only solution I found is to add <meta name="robots" content="index, follow"> to every route in my app, but this becomes very repetitive.

Desired behavior
Dont re-use previously declared tags, but simply remove them, which basically means we fall back to the original tags declared in index.html

Make render[tag] functions pure

Right now, all of the render functions append elements to the head directly. I'm thinking it might make more sense to return an element instead. That gets us:

Easier unit testing of renders functions
Simpler to map between states.
Could just use document.head.replaceChild.

Use document.createDocumentFragment

Could we use createDocumentFragment to batch updates to the head instead of each VNode getting rendered to the head independently? It should be simple in the case of appending a node, but renders with side effects would be different.

test2

test1

Problem with link tags not getting updated correctly.

It seems as though link tags are not being updated correctly. Meta and title tags are fine.

Header is not updated during page navigation

Hi,

I'm currently playing with Stencils and the helmet plugin. I added the plugin to the "Sample App Template" and added some meta-tags on the different pages.

After "build --prerender", I see, that the page specific tags are properly added to the HTML output.

Current behavior

When I open one page and navigate to another, the page header is not updated. Only after a reload of that page, the actual page header is used.

Desired behavior

The page header as defined in the page's component shall immediately be applied during page navigation.

Update version

Can you please update the version to be compatible with the latest stencil version?
The version currently released on npmjs creates build errors with the childitems. I think the latest commits will fix this.