Extra types of sections

[TheKnarf]

Is there any way to add extra types of sections (in addition to 'script' and 'style'). I would very much like to have a 'jest'-section for unit tests and a 'storybook'-section for Storybook stories.

[Zauberfisch]

+1

A general purpose system would be great here.

[MunGell]

Yes, it is possible. This module was developed with such use cases in mind, you can select sets of loaders that will be applied to your code by setting relevant type attribute on either <style> or <script> tag. To configure types add them to the map option in webpack configuration.

[TheKnarf]

@MunGell Setting up custom loaders doesn't make it obvious how you would have a test-section that would be picked up by Jest.

[MunGell]

I see, you want to have multiple tags with various purposes. I will have a look at this use case. If you have any obvious solution to that - feel free to suggest a solution in PR.

[Zauberfisch]

I've never used jest, but couldn't you just make up a mime type, then tell one-loader to extract that and use some file-loader or something to put it into a jest file?

My guess would be that you can just make up <script type="application/x-jest-code">... my test code here ...</script>

[MunGell]

I think you are right, technically nothing stops us from having component file like that:

<script type="application/typescript">
class MyComponent extends Component {}
</script>

<style type="text/css">
.MyComponent {}
</style>

<script type="application/x-jest">
describe('', () => {})
</script>

in webpack.config.js:

{
    plugins: [
        new ExtractTextPlugin("tests.js"),
    ]
...
    map: {
        "text/css": ["css-loader", "style-loader"],
        "application/typescript": "babel-loader",
        "application/x-jest": ExtractTextPlugin.extract(/*optional: "babel-loader"*/)
    }
...
}

and then run jest --watch tests.js to continuously run tests (or any other way you prefer to run the tests)

I didn't test this code, but opinions are welcome!

[Zauberfisch]

Ok, turns out it won't work. You'll get:

Module Warning (from ./node_modules/one-loader/src/index.js):
(Emitted value instead of an instance of Error) Only one type script tag is allowed per component. The last one will be used.

or when using 2 style tags:

Module Warning (from ./node_modules/one-loader/src/loader.js):
(Emitted value instead of an instance of Error) Only one type of style tag is allowed per component. The last one will be used.

@MunGell is there a particular reason why it's limited to 1 tag per type?

[Zauberfisch]

thinking about it, it might actually be good to add one more tag that is generic for template or descriptive stuff.

Don't get me wrong, I still think we need to fix the problem that only <style> or <script> tag is allowed, but it would be useful to also add a new tag <template>

So a .one file could look like this:

<script type="application/typescript">
class MyComponent extends Component {}
</script>

<style type="text/css">
.MyComponent {}
</style>

<script type="application/x-jest">
describe('', () => {})
</script>

<template type="application/x-my-serverside-template">
{% for x in mylist %}
    * {{ x.name }}
{% else %}
    No items found.
{% endfor %}
</template>



<template type="application/x-storyboard">
- my
- story
- in
- here
</template>

Having a generic <template> to use for html or plain text like content feels semantically cleaner than <script>. Plus, some IDEs like WebStorm automatically support html syntax features inside <template>.

[MunGell]

@Zauberfisch I remember I had to put that warning in place due to some technical issue that multiple tags were bringing, will need to have another look.

On the extra tag - this should be a fairly quick fix, would you be interested in creating a PR for that?

[Zauberfisch]

@MunGell I took a quick look at it, but I realised I currently don't have the time to do some proper work that is not just a quick hack. So I'm afraid I won't be able to make a PR anytime soon.

But I'll probably come and revisit this at some later point if it hasn't been done by then.

[MunGell]

No worries at all, I will keep this issue open for anyone to pick up, unless I will have time to implement it myself.