mrodal / vue-inheritance-loader Goto Github PK

View Code? Open in Web Editor NEW

38.0 38.0 5.0 44 KB

Webpack loader to be used along with vue-loader for Single File Components that provides template extension

JavaScript 100.00%

vue-inheritance-loader's People

Contributors

Stargazers

Watchers

Forkers

xingtianyoulong dntstp chumager lucasleandro1204 topsave2013

vue-inheritance-loader's Issues

Breaks when using custom blocks

This loader breaks when someone has custom blocks in their SFC's - for example I've got <route> custom blocks as I am using vue-auto-routing:

Cannot read property 'options' of undefined

I get "Unable to read property 'options' of undefined" src / index.js on line 26.
this._compiler for some reason is not present, but not enough to tell why

Apparently a simple condition solves, but I don't know what consequences it could bring.
let aliases = (this._compiler && this._compiler.options.resolve.alias) || null;

make it friends with template(lang="pug")

hi, thanks for this great solution!

it works exactly what I need
But one little moment - I use pug, so I had to convert my templates, wich I'd like to chain in inheritance, back to html, my eyes are bleeding now, but I will survive

Cannot read property 'options' of undefined

I've got the same issue as #7 when doing a production build.

This fork has fixed the issue for me:

https://github.com/dntstp/vue-inheritance-loader

dependency schema-utils is not in package.json

Hi, can you add this dependency? you use it and is not in your package.json and yarn berry use strict dependencies, so I need to add a configuration to allow it to use the package.

Best regards.

Support for absolute paths

If your inheriting component is deeply nested inside your folder structure you may end up with an 'extends' statement looking like this:

<template extends="../../../../../../BaseComponents.vue">

which will break if you now move the child.

The BaseComponent should be accessable with an absolute path beginning from the root e.g.:
@/Widgets/BaseComponent.vue where '@/' points to 'src/'

alias problems...

Hi, how are you?

I've a new problem...

Since I've started using your loader I were always in dev mode with hot reloading... there were no problems since the last change and all was fine.

Today I've to transpile to publish and there were an error with the "extends" resolution.

I've and alias for mi FW.

      resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
          itdfw: itdfwPath,
          default: "/var/www/itdfw/DEFAULT/vue/src",
        },
      },

I works well in all my client site, and it also works well with extends in dev mode. but when I builded the site I got this error:

 ERROR  Failed to compile with 1 errors                                                                13:18:40

 error  in ./src/components/Area.vue?vue&type=script&lang=js&

Module build failed (from ./.yarn/$$virtual/thread-loader-virtual-ef62e45dc5/6/home/jcmunoz/.yarn/berry/cache/thread-loader-npm-2.1.3-ed21f3c893-2.zip/node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
ENOENT: no such file or directory, open '/var/www/itdfw/dobleimpacto.itdmovil.cl/vue/src/components/itdfw/components/GenericInput.vue'
    at PoolWorker.fromErrorObj (/var/www/itdfw/dobleimpacto.itdmovil.cl/vue/.yarn/$$virtual/thread-loader-virtual-ef62e45dc5/6/home/jcmunoz/.yarn/berry/cache/thread-loader-npm-2.1.3-ed21f3c893-2.zip/node_modules/thread-loader/dist/WorkerPool.js:262:12)

you can see the alias is not working.

but if I instead use the module name of mi fw:

 warning  in ./src/components/Area.vue

Module build failed (from ./.yarn/unplugged/vue-inheritance-loader-virtual-da37d749a7/node_modules/vue-inheritance-loader/src/index.js):
Error: ENOENT: no such file or directory, open '/var/www/itdfw/dobleimpacto.itdmovil.cl/vue/src/components/@chumager/itdfw-site-base/components/GenericInput.vue'

 @ ./src lazy ^\.\/.*$ namespace object
 @ /home/jcmunoz/Develop/node.js/itdfw-site-base/src/ITDImport.js
 @ /home/jcmunoz/Develop/node.js/itdfw-site-base/src/ITDmain.js
 @ ./src/main.js
 @ multi ./src/main.js

In resume, it I use alias I got error and can't build, if I use module name, I get a warning and the component doesn't show at all.

I'll look if it could be a "link" problem from my module (it has yarn link to avoid upload the module all the time), but I doubt it because it has always worked.

I didn't review If it could be a problem in other place because the only components with problems are those how uses extends and the path is an alias.

Let me know if I can help you some way.

Best regards.

How to use this in Jest tests?

I'm using this and it is working great, but I cannot run unit tests with this. Could be my ignorance, but what do I need to do to get it running?

The props of custom components are changed to lowercase

Child component can not receive expected props passed from parent because they are converted to lower case.

I read the code and find the case of tag is under consideration while attribute's is not, it seems necessary to add another option lowerCaseAttributeNames: false for parser.

function parseDOM(source) {
  return htmlparser.parseDOM(source, {recognizeSelfClosing: true, lowerCaseTags: false});
}

Fix yarn berry problem and schema-utils version.

with yarn berry the module should declare all it's dependencies so schema-utils have to be declared in package.js

Also there is an implementation difference between schema-utils 3.0.0 and 2.7.1.

So it's necessary to check the version or object from schema-utils.

How to listen to an event from the base template

Hi,

Is it possible to listen to an event which is fired by the base template?

I want to do something like this:

// BaseTemplate.vue
<template extendable>
  <extension-point></extension-point>
  <q-btn label="Save" color="primary" type="submit" @click="emitOnSave" />
</template>

<script>
export default {
  name: 'BaseTemplate',
  methods: {
    emitOnSave () {
      this.$emit('onSave')
    }
  }
}
</script>

// ChildTemplate.vue
<template extends="BaseTemplate.vue" @onSave="saveThis">
  <extensions>
    <extension>
      Some content..
    </extension>
  </extensions>
</template>

<script>

import BaseTemplate from 'BaseTemplate.vue'

export default {
  name: 'ChildTemplate',
  extends: BaseTemplate,
  methods: {
    saveThis () {
      console.log('saveThis gets fired')
    }
  }
}
</script>

The method saveThis doesn't get fired. Will it be possible to do something like this?

Laravel 6 Mix errors

When added to webpack.mix.js (according to #4 ):

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: ['vue-inheritance-loader']
            }
        ]
    }
});

this error happens:

root@likemusic:~/ea# docker-compose run --rm node yarn watch
yarn run v1.22.4
$ npm run development -- --watch
npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1606504130646-0.5953826234112498/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> @ development /var/www
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

/var/www/node_modules/webpack-cli/bin/cli.js:281
                                throw err;
                                ^

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
    at VueLoaderPlugin.apply (/var/www/node_modules/vue-loader/lib/plugin-webpack4.js:59:13)
    at webpack (/var/www/node_modules/webpack/lib/webpack.js:51:13)
    at processOptions (/var/www/node_modules/webpack-cli/bin/cli.js:272:16)
    at /var/www/node_modules/webpack-cli/bin/cli.js:364:3
    at Object.parse (/var/www/node_modules/yargs/yargs.js:576:18)
    at /var/www/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/var/www/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1118:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.Module._load (internal/modules/cjs/loader.js:875:14)
    at Module.require (internal/modules/cjs/loader.js:1022:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/var/www/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1118:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.Module._load (internal/modules/cjs/loader.js:875:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-11-27T19_08_55_120Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

As I understand, this is because standard vue-loader still used. Threrefore I have tried to replace in node_modules/laravel-mix/src/components/Vue.js this:

    webpackConfig(webpackConfig) {
        webpackConfig.module.rules.push({
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-loader',
                    options: Config.vue || {}
                }
            ]
        });

        webpackConfig.plugins.push(new VueLoaderPlugin());

        this.updateCssLoaders(webpackConfig);
    }

with that:

    webpackConfig(webpackConfig) {
        webpackConfig.module.rules.push({
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-inheritance-loader',
                    options: Config.vue || {}
                }
            ]
        });

//        webpackConfig.plugins.push(new VueLoaderPlugin());

        this.updateCssLoaders(webpackConfig);

I've got many errors like this:

ERROR in ./resources/js/Domain/Common/Controls/Button/ButtonCreate.vue 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-inheritance-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
> <script>
|     import BaseBootstrapButtonInfo from "../Base/BootstrapButton/BaseBootstrapButtonInfo";
|
 @ ./resources/js/app.js 47:31-86
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/Domain/Invoices/ExpenseConformities/Dkv/DkvExpenseConformityForm.vue 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-inheritance-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
> <script>
|     import BaseExpenseConformityForm from "../Base/BaseExpenseConformityForm";
|
 @ ./resources/js/app.js 137:45-122
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/Domain/Invoices/ExpenseConformities/Bank/BankExpenseConformityForm.vue 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-inheritance-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
> <script>
|     import BaseExpenseConformityForm from "../Base/BaseExpenseConformityForm";
|
 @ ./resources/js/app.js 140:46-125
 @ multi ./resources/js/app.js ./resources/sass/app.scss

Any ideas how to fix? Does anyone use this package with laravel mix?

Laravel Mix v4 configuration

Hi, what would be the configuration for Laravel Mix v4?
Although I've tried I couldn't make it work.
Thanks in advance!

render conditionally

Hi, how can I conditionally render an extension point?

AFAIK the mere existence of <extension point="x">, even if its empty, will render the content, so if I've a inner tag with v-if directive it'll render nothing if the condition is not accomplished.

the v-if directive does nothing in the <extension> tag, so I don't know how to render conditionally preserving the <extension-point> if the condition is false

EDIT:
Finally I realize you can wrap the <extension> in a <template> with v-if directive, but it's not in the Readme and it shows like you can only use extensions and extension tags inside the template...

Eitherway it'll be nice to hace at least the v-if directive in the extension tag.

Best regards.

Problem with vue-router

npm tells me I need vue-loader@^15.6.0, but this needs webpack@^4.0.0 or @^5.0.0-0, but then at least 3 other dependencies that can't be upgraded requires webpack@^1 or 2 or 3.
I'm new to npm, how to proceed?

Base path for children templates should be relative to current template

In case I have a structure like this:

customers
|--- index
     |--- CustomerListPage.vue
shared
|--- pages
     |--- PageBase.vue
     |--- ListPage.vue

My templates should be like

PageBase.vue

<template>
</template>

ListPage.vue

<template extends="./PageBase.vue">
</template>

CustomerListPage.vue

<template extends="../../shared/pages/ListPage.vue">
</template>

But that doesn't work. ListPage.vue must also have the value as ../../shared/pages/Page.vue to make it work.

I found in resolveComponent function you passed initialPath to the children too.

Please have a look.

Thank you.

Failed to compile

"vue": "^2.6.11",
"vue-inheritance-loader": "^0.2.5"

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
Errors compiling template:
invalid expression: Unexpected token '&' in

I just used the usage provided by the documentation 🙁

mrodal / vue-inheritance-loader Goto Github PK

vue-inheritance-loader's People

Contributors

Stargazers

Watchers

Forkers

vue-inheritance-loader's Issues

Recommend Projects

Recommend Topics

Recommend Org