Precompiling web components

Question

I'm using the web component implementation in knockout.js in a project of mine in order to abstract UI components that I reuse throughout my app. One of those components is an About popup which contains a bunch of info on my app.

Abstracting this About component is great for development, as I can reuse it between different pages and rely on front-end, not back-end, methodology for including it. The downside however, is SEO. I want my app's description to be seen by all the big search engines, so I need to precompile certain web components in my HTML to be sure that all robots see it. I'm thinking the ideal scenario would be to do this in my build step (currently using Grunt to build btw) - ie. inline the content of my <about-app> component in my index.html.

Has anyone written a tool to accomplish this? Or should I just use a different approach for these kinds of scenarios where the web component contains a lot of (crucial) content?

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

You could use PhantomJS from node, like this answer suggests.

var page = require('webpage').create();  
page.open('http://localhost', function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var p = page.evaluate(function () {
            return document.getElementsByTagName('html')[0].innerHTML
        });
        console.log(p);
    }
    phantom.exit();
});

edited May 23 '17 at 11:54

Community

1
1

answered Nov 04 '14 at 13:29

kzh

19,810
13
73
97

Thanks for the answer, this does look like a pretty good solution. I'll leave the question open for now, though. Feel like a build tool solution for this might come around eventually, I'll close it then. – fredrikekelund Nov 06 '14 at 12:30

score 0 · Accepted Answer · answered Nov 10 '14 at 07:27

Since I was so clear on exactly what I was looking for here, and I couldn't find it, I actually went ahead and wrote my first node module with an accompanying Grunt task - grunt-inline-web-components.

The config lets you specify jQuery style selectors and paths to template files that should be inlined in any matching nodes. It's a basic concept, but powerful enough. For example, if I give the components I want to "pre-compile" a class of critical, then I can inline them in just a few select places. Here's some code to illustrate:

grunt.initConfig({
    inline_web_components: {
        options: {
            components: {
                "about-app": "components/about-app.html",
                "my-component:first": "components/my-component.html",
                "flashy-button.critical": "components/flashy-button.html"
            }
        },
        dist: {
            dist: {
                files: [
                    expand: true,
                    cwd: "app",
                    src: "{,*/}*.html",
                    dest: "dist"
                ]
            }
        },
    },
});

Precompiling web components

2 Answers2