Skip to content

Documentation for deprecated options #1309

@defnorep

Description

@defnorep

What problem does this feature solve?

My issue doesn't fit neatly within either Bug Report or Feature Request -- it's likely closest to Feature Request as I am requesting more information in the documentation. Please see the Proposed API section for my proposed resolution to this matter.

It doesn't seem to be clear from the migration documentation how we are supposed to migrate usage of postLoaders to a Webpack Module Rule, specifically for the default template SFC block. In Vue Loader 14, we were able to assign a Webpack loader to the html property of postLoaders to obtain access to the emitted render function. The documentation does indicate how to process a new type of template language (pug), but not how to work with the render function that is emitted from a default template block.

In my case, I parse the emitted render function with an AST to extract parameters of specific function calls instead of statically parsing file contents using gettext. I have attempted to load the output from a template block in a number of different ways, referring to the Webpack documentation as well as the Vue Loader documentation. My loader is able to parse the script block but not the render function emitted from the template. Should we be targeting test with /\.html$/, or /\.vue$/? Do we need to use a resourceQuery? Do we need to use enforce: 'post'? Do we need to add a new language extension to every template block? There are a lot of variables in this that the standard Webpack documentation cannot address easily. I suppose this is one of the challenges of being coupled to Webpack -- their documentation needs to be complemented.

I seem to have the most success with this rule:

    {
      resourceQuery: /^\?vue/,
      enforce: 'post',
      loader: resolve(__dirname, '../translations/webpackLoader'),
    },

Though it seems bare:

Starting new source: /[redacted]/modules/common/components/SampleComponent/index.vue
var render = function () {}
var staticRenderFns = []

export { render, staticRenderFns }

Component template for reference:

<template>
  <div>
    <h2>{{ label }}</h2>
    <p>This is dummy text</p>
    <p>{{ $t('Sample Component for !{name}', 'This is the context', { name }) }}</p>
  </div>
</template>

What does the proposed API look like?

If there is an obvious reason for not being able to parse the template block's render function, I can create a PR to call it out in the docs right away. If there is not an obvious reason, I will spend some time creating a reproduction repository and file a bug report so we can investigate further and then add our findings (examples and explanations) to the docs.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions