Geek Answers Handbook

Precompiling Web Components

I am using the web component implementation in the knockout.js file in my project to abstract the user interface components that I reuse throughout my application. One of these components is the About popup, which contains tons of information about my application.

Abstracts about this component are great for development, since I can reuse it between different pages and rely on the interface, rather than the back, methodology for including it. However, the downside is SEO. I want the description of my application to be displayed by all large search engines, so I need to pre-compile some web components in my HTML to make sure that all robots see it. I think that the ideal scenario would be to do this at my build stage (currently using Grunt to build btw) - i.e. paste the contents of my component <about-app>into mine index.html.

Has anyone written a tool for this? Or should I just use a different approach for such scenarios when the web component contains a lot of (critical) content?

+4
source share
2 answers

Since I was so clear about what I was looking for here and I could not find it, I really went ahead and wrote my first node module with the accompanying Grunt task grunt-inline-web-components.

The configuration allows you to specify a jQuery style selector and paths to the template files that should be embedded in any matching nodes. This is a basic concept, but powerful enough. For example, if I give components, I want to “precompile” the class critical, then I can embed them in several separate places. Here is 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"
                ]
            }
        },
    },
});
0
source

PhantomJS node, .

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();
});
+1

More articles:


All Articles