-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using ts-nameof with Vue #83
Comments
@lundmikkel how are you compiling it? This is a compile time transformation so it needs to get injected into the compiler. Generally the instructions are: https://github.com/dsherret/ts-nameof/blob/master/packages/ts-nameof/setup/tsc.md (which sucks, but that's the current state of things because compiler plugins aren't supported in tsconfig.json by default) |
In vue.config.js I have // ... chainWebpack
config.module
.rule('ts')
.exclude.add(/node_modules/)
.end()
.test(/\.ts$/)
.use('ts-loader')
.loader('ts-loader')
.options({
transpileOnly: true,
// Transformer functions do not work with happy pack mode due to process forking, see:
// https://github.com/TypeStrong/ts-loader#getcustomtransformers--program-program---before-transformerfactory-after-transformerfactory--
getCustomTransformers: path.resolve(__dirname, 'vue-ts-nameof.js'),
appendTsSuffixTo: ['\\.vue$'],
happyPackMode: true
})
.end();
// ... Content of vue-ts-nameof.js const tsNameof = require('ts-nameof');
module.exports = () => ({
before: [tsNameof]
}); Hope this can help in any way |
In order to make it work you can simply do this: In vue.config.js you need to add: const tsNameof = require('ts-nameof');
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [{
loader: 'ts-loader',
options: {
getCustomTransformers: () => ({ before: [tsNameof] })
}
}]
}
...
]
}
...
}
...
} |
I tried something like the following but it is not working:
Sample.vue
vue.config.js:
Error says:
Do you have any example how to use it in vue? If not maybe with your help I can find out and create a PR with a sample. So others can use it? |
@fairking Have you tried my workaround? #83 (comment) But I think whithin a template it will never work 🤔 <template>
<div>{{myClassName}} - {{nameof<MyClass>()}}<div> // <- this one 🤔, you should move this into a variable
<template> |
Tried. Got the following error:
See my example here: https://github.com/fairking/vue-ts-nameof-sample |
@fairking I think you've already made progress and haven't noticed 😃 Your new problem is that |
I'm not quite sure if my workaround supports embedded code in <script lang="ts" src="./code.ts" /> So maybe cause you have code in your vue file, you need to find a improved way of handling this, good luck and post your results so others can benefit from it 😀 |
Moving ts scripts outside of .vue is not an option for me. The entire component must be in on single file otherwise it makes development nightmare. Sorry I am not an angular guy :-) |
I had the same problem. Almost got it to work (
This comment actually guided me to the answer, so thanks @Shinigami92 😄 If someone is still trying to make this work, this is how I accomplished this. In
so this declaration file would be visible globally. My const tsNameOf = require('ts-nameof');
module.exports = {
chainWebpack: config => {
config.module
.rule('ts')
.test(/\.ts$/)
.use('ts-loader')
.loader('ts-loader')
.options({
transpileOnly: true,
getCustomTransformers: () => ({ before: [tsNameOf] }),
appendTsSuffixTo: [/\.vue$/],
happyPackMode: true
})
.end()
.use('ts-nameof')
.loader('ts-nameof-loader')
.end() I added the However it seems, that at this moment const tsNameOf = require('ts-nameof');
module.exports = {
chainWebpack: config => {
// Delete the rule completely
config.module.rules.delete('eslint');
config.module
.rule('ts')
.test(/\.ts$/)
.use('ts-loader')
.loader('ts-loader')
.options({
transpileOnly: true,
getCustomTransformers: () => ({ before: [tsNameOf] }),
appendTsSuffixTo: [/\.vue$/],
happyPackMode: true
})
.end()
.use('ts-nameof')
.loader('ts-nameof-loader')
.end()
.use('eslint') // Add the loader here
.loader('eslint-loader')
.options({
extensions: [
'.ts',
'.tsx',
'.vue'
],
cache: true,
emitWarning: false,
emitError: false,
formatter: undefined
})
}
}; |
I created a plugin for vite https://www.npmjs.com/package/vite-plugin-ts-nameof You still need |
I've tried to install the npm package using both
npm install ts-nameof @types/ts-nameof --save-dev
andnpm install @types/ts-nameof --save-dev
, and included a reference to ts-nameof in my tsconfig.json like this:But without much luck. Do you have any suggestions as how to continue?
The text was updated successfully, but these errors were encountered: