Add support for custom blocks in .vue files #499

asselin · 2016-11-25T21:02:25Z

This builds on vuejs/vue#4157 adding support in vue-loader for custom blocks. If a custom block is found in a .vue file, the loader for it will be looked up in the webpack vue configuration block just like a language is for script/style/template.

I think this improvement could probably cover the requests in some other feature requests, such as #457, #423, #413, #223, and having the ability in a UI kit project to specify (e.g.) Sass in a .vue file for a GUI component that is meant to be extracted and concatenated, and compiled into CSS by the application that pulls in and uses the UI kit.

This is a pretty simplistic implementation-- if there are issues that you think should be addressed in order to merge this, please let me know.

yyx990803 · 2016-11-28T15:13:25Z

lib/loader.js

@@ -271,6 +273,20 @@ module.exports = function (content) {
      '__vue_options__.staticRenderFns = __vue_template__.staticRenderFns\n'
  }

+  // add requires for customBlocks
+  if (parts.customBlocks && parts.customBlocks.length) {


We should avoid adding any code to the file unless there is a matching loader for the custom block.

yyx990803 · 2016-11-28T15:13:40Z

lib/loader.js

@@ -155,6 +155,8 @@ module.exports = function (content) {
          return loader + '!' + rewriter + ensureBang(ensureLoader(lang))
        case 'script':
          return injectString + ensureBang(ensureLoader(lang))
+        default:
+          return ensureBang(loaders[type])


This would probably throw if loaders[type] doesn't exist

Did you code updated?

Sorry, should have replied to this. This won't throw because there's a guard on line 289 that emits a warning in this case. This is covered by the warning should be raised when a loader is not specified for a custom block unit test.

yyx990803 · 2016-11-28T15:14:10Z

Thanks for the PR! A few issues that need to be fixed, and ideally we need a test case for this too.

asselin · 2016-11-28T17:39:51Z

Thanks for the feedback! I fixed the 2 issues and added them to the PR. I'll work on adding some tests and updating the documentation one night this week.

asselin · 2016-11-28T17:42:12Z

Hmmm. I think I messed up my rebase... I'll try fixing that so the patch is cleaner...

asselin · 2016-12-15T14:32:39Z

FYI, I haven't forgotten about building unit tests for this PR; I've just been slammed with a number of things demanding my time right now. I still intend to finish this up, targeting the week of Dec 26-30.

asselin · 2016-12-25T22:20:37Z

Unit tests added, please let me know if there are any other changes required.

K3TH3R · 2016-12-26T03:59:00Z

@asselin this is looking great. I have one question though, would there be a way to 'ignore' certain custom blocks in different Webpack builds? Perhaps this is just me missing something in the documentation, or maybe it's something that needs to be added but, as an example, I wouldn't necessarily want to have vue-loader parsing documentation or unit-tests when I'm in the middle of development.

I guess maybe with Webpack's caching system this might not make a huge performance issue, but even when thinking about CI systems, it would be nice to be able to have some way to "ignore" certain custom blocks.

asselin · 2016-12-26T23:33:53Z

@iamkether If you want to leave some part of the .vue file out of the generated code, you can specify to use the null-loader in the webpack config file (for example, omit unit tests from debug & release builds). vue-loader will still process that section of the .vue file, but passing it to the null loader will effectively make it cease processing there.

asselin · 2016-12-26T23:34:54Z

@yyx990803 or @kazupon: This PR is ready for a 2nd review (and merge, hopefully).

K3TH3R · 2016-12-27T05:33:29Z

@asselin ah, okay, that makes sense, thank you.

kazupon

reviewed done 👀
please check my comments 💬

kazupon · 2017-01-08T15:28:38Z

docs/en/start/spec.md

@@ -22,6 +22,10 @@ export default {
  color: red;
 }
 </style>
+
+<custom1>
+	This could be e.g. documentation for the component.


Do we need indent?

It was indented by a tab. Changed to 2 spaces.

kazupon · 2017-01-08T15:33:10Z

docs/en/start/spec.md

@@ -66,6 +70,66 @@ More details can be found in [Using Pre-Processors](../configurations/pre-proces

 - By default, contents will be extracted and dynamically inserted into the document's `<head>` as an actual `<style>` tag using `style-loader`. It's also possible to [configure Webpack so that all styles in all components are extracted into a single CSS file](../configurations/extract-css.md).

+### Custom Blocks
+
+Additional custom blocks can be included in a `*.vue` file for any project specific needs.  `vue-loader` will use the tag name to look up which webpack loaders should be applied to the contents of the section.  The webpack loaders should be specified in the `loaders` hash of the `vue` section of the webpack configuration in the same way that languages are specified for the standard sections of the file.  See [Advanced Loader Configuration](../configurations/advanced.md).


Please arrange the space.

Sorry, I'm not clear on what you're asking for here. Is it 1 space between sentences instead of 2? If so, I just changed that and will push.

sorry, my poor explanation. 🙇
exactly!

kazupon · 2017-01-08T15:35:50Z

lib/loader.js

@@ -155,6 +155,8 @@ module.exports = function (content) {
          return loader + '!' + rewriter + ensureBang(ensureLoader(lang))
        case 'script':
          return injectString + ensureBang(ensureLoader(lang))
+        default:
+          return ensureBang(loaders[type])


Did you code updated?

asselin · 2017-01-08T20:17:41Z

@kazupon I made updates to the documentation, and see my comment about the test not being necessary. If I didn't make the changes you were looking for on the doc, please let me know. Thanks!

kazupon · 2017-01-09T10:43:10Z

@asselin Thanks! LGTM!

/ping @yyx990803
Please check just in case.

asselin · 2017-01-17T15:09:42Z

@yyx990803 Is this good to merge now? Any other cleanup needed?

FYI, I have a follow-on PR that I'm going to submit that adds support for adding attribute values from custom blocks to the webpack command as query parms.

Thanks!

yyx990803 · 2017-01-17T16:53:32Z

@asselin sorry for dragging on, just busy with other stuff and don't want to rush-review this. Will try to finalize this week or next.

asselin · 2017-01-26T21:36:56Z

Rebased in on current master, and added a fix for extract-text-plugin 2.0 rc

asselin · 2017-01-27T16:57:50Z

@yyx990803 I see that you're spending some time on vue-loader; any chance this PR could be merged soon?

Add in additional changes that add attributes on custom blocks as query parms for the loader

yyx990803 requested changes Nov 28, 2016

View reviewed changes

asselin force-pushed the add-custom-block-support branch from ff9314a to 972181c Compare November 28, 2016 20:51

QingWei-Li mentioned this pull request Dec 4, 2016

Use loader as template lang QingWei-Li/vue-markdown-loader#6

Closed

asselin force-pushed the add-custom-block-support branch from 5a4035f to 0d809ec Compare December 25, 2016 22:18

kazupon reviewed Jan 8, 2017

View reviewed changes

kazupon approved these changes Jan 9, 2017

View reviewed changes

kazupon mentioned this pull request Jan 11, 2017

Feature Request: Testing area #570

Closed

This was referenced Jan 17, 2017

unit tests in single file (fixes #223) #247

Closed

[feature request][discussion welcome] Component Translation Section #457

Closed

including unit tests in vue component #223

Closed

Support theming through attributes on style tags #413

Closed

kazupon added the custom blocks label Jan 28, 2017

Rebase changes onto current version of master

002d637

Add in additional changes that add attributes on custom blocks as query parms for the loader

asselin force-pushed the add-custom-block-support branch from f60c06d to 002d637 Compare January 30, 2017 16:23

Merge branch 'master' into add-custom-block-support

2257a7a

yyx990803 approved these changes Jan 31, 2017

View reviewed changes

yyx990803 merged commit 7d3e005 into vuejs:master Jan 31, 2017

xalexec pushed a commit to Transnal/vue-loader that referenced this pull request Mar 26, 2017

Rebase changes onto current version of master (vuejs#499)

883bf12

Add in additional changes that add attributes on custom blocks as query parms for the loader

Add support for custom blocks in .vue files #499

Add support for custom blocks in .vue files #499

Uh oh!

Conversation

asselin commented Nov 25, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yyx990803 commented Nov 28, 2016

Uh oh!

asselin commented Nov 28, 2016

Uh oh!

asselin commented Nov 28, 2016

Uh oh!

asselin commented Dec 15, 2016

Uh oh!

asselin commented Dec 25, 2016

Uh oh!

K3TH3R commented Dec 26, 2016

Uh oh!

asselin commented Dec 26, 2016

Uh oh!

asselin commented Dec 26, 2016

Uh oh!

K3TH3R commented Dec 27, 2016

Uh oh!

kazupon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

asselin commented Jan 8, 2017

Uh oh!

kazupon commented Jan 9, 2017

Uh oh!

asselin commented Jan 17, 2017

Uh oh!

yyx990803 commented Jan 17, 2017

Uh oh!

asselin commented Jan 26, 2017

Uh oh!

asselin commented Jan 27, 2017

Uh oh!

Uh oh!