"use *.tag.html extension" rule

[jbmoelker]

Summary

Proposed changes:

• add "use *.tag.html extension" rule (incl. summary, why and how).

Checklist

• The changes only affect or contain one style guide rule or section.
• The changes are in style guide format.
• The new style guide section has an entry in the Table of Contents (only if changes introduce new section).
• The changes can be merged into the target branch without conflicts.

[petergoes]

Completely agree

[adrianblynch]

I'm very much keeping this in mind, Opinionated RiotJS Style Guide..., but having a .tag.html extension when requiring tags on the server causes issues.

Works:

const riot = require('riot')
const tag = require('my.tag')

Fails:

const riot = require('riot')
const tag = require('my.tag.html')

When you require riot, it makes require aware of files with the .tag extension. If you change it to .tag.html, require doesn't know how to parse it and throws an error.

[jbmoelker]

@adrianblynch good point. I had never tried to import a tag directly. Are you using the actual file basename? Or is it a path (./path/to/my.tag)? Or is it actually a compiled tag (my.tag.js)?

Is this setup anywhere in the Riot docs? I'm wondering if Riot also has a way to configure the extension in this setup, since it does in the compiler. So that we could do something like this:

const riot = require('riot')
riot.settings.ext = 'tag.html' // don't know if this exists, looking for something it
const tag = require('my.tag')

Otherwise I think we should add a "browser only" note to this rule in this guide.

[jbmoelker]

@adrianblynch any chance you are using Webpack with a specific loader? Like this:

    module: {
        loaders: [
            {
                test: /\.tag$/,
                loader: "tag",
                exclude: path.resolve(__dirname, "node_modules")
            }
        ]
    }

So you could change this to test: /\.tag.html$/:

    module: {
        loaders: [
            {
                test: /\.tag.html$/,
                loader: "tag",
                exclude: path.resolve(__dirname, "node_modules")
            }
        ]
    }

[adrianblynch]

Hi @jbmoelker - We are using webpack but in this case it was requiring in tags, const tag = require('my.tag.html' that was causing an issue. We went back to .tag. So no biggie.