How can I use eslint to force some files to have a certain function export with a certain name?
For example, I want files of type *.page.jsx to have a function export called Head
❗ Incorrect file index.page.jsx
export default function Page () {
return <h1>Hello World!</h1>;
}
✅ Correct file index.page.jsx
export default function Page () {
return <h1>Hello World!</h1>;
}
export function Head() {
return <title>Hello World!</title>;
}
Related
I use vite to build my program and I want that script tag in index.html doesn`t has these attribute 【type="module" crossorigin】。what should I change my vite.config.js
Create a vite plugin to transform your html.
const noAttr = () => {
return {
name: "no-attribute",
transformIndexHtml(html) {
return html.replace(`type="module" crossorigin`, "");
}
}
export default defineConfig({
plugins: [noAttr()]
})
I am trying to pass a function as property inside a component in Vue3. Here is the code:
// ExampleComponent.vue
<template>
Here goes component content...
</template>
<script>
export default {
name: ''
}
</script>
<script setup>
import { onMounted } from "vue"
const props = defineProps({
onLoad: {
type: Function,
default() {
return {}
}
}
})
onMounted(() => {
if (props.onLoad) { // This doesn't work and passes every time
props.onLoad()
}
})
</script>
Here is the parent component calling child ExampleComponent.vue. It may or may not pass the onLoad function.
<ExampleComponent \>
What I want is that call this function only if the property on-load is passed? Is there a way in Vue3 to check if the property is passed explicitly?
you can use watcheffect :
javascript
watchEffect(() => {
if(props.onLoad) props.onLoad()
});
once '''onLoad''' value changed, it will tigger.
I am a Japanese not good at English sorry.
I have a nuxt project like this.
The mode is spa.
Directory construction
pages - index.vue
index
|_ child.vue
|_ index.vue
pages/index.vue
<template>
<div>
{{ title }}
<router-view />
</div>
</template>
<script>
export default {
computed: {
title () {
let title = ''
if (this.$route.path === '/') {
title = 'Parent'
} else if (this.$route.path === '/child') {
title = 'Child'
}
return title
}
}
}
</script>
When I build(or generate), you can get static file of child/index.html.
I upload inside the dist to server.
But if I access to http://deployedrootpath/child, the computed property doesn't work.
I think this happens because these static files are created before created hook.
It can only know returned value from asyncData hook.
So I did like this.
middleware/redirect.js
export default function ({ route, redirect }) {
if (route.path === '/child/') {
// I need to set some params because of navigation duplication error of vue-router.
redirect('/child', { params: { 'redirect': true } })
}
}
pages/index/child.vue
<template>
<div>
child
</div>
</template>
<script>
export default {
middleware: 'redirect'
}
</script>
Actually it worked but I know this is a terrible way.
And even if there is no way except for this, I want to at least hide params from redirected url.
Please help me.
I solved.
nuxt.config.js
trailingSlash: true
This make the static files path and $route.path same.
https://nuxtjs.org/api/configuration-router/#trailingslash
Here's my application:
index.js
function index(req, res) {
res.render('admin/index');
}
module.exports = index;
index.ejs
<%
if(data) {
%>
<div class="alert alert-danger" role="alert">login fail</div>
<%
}
%>
I got an error saying:
data is not defined
I want to check whether the variable exists, and to display the dialog if it does. What should I do?
Either rewrite the check as follows:
<% if (typeof data !== 'undefined') { %>
... or check the property on locals (local variables object) instead:
<% if (locals.data) { %>
Explanation: when EJS compiles a template into a function, it does not populate its variables' stack based on the options supplied. Instead, it wraps this function with with statement:
with (locals || {}) {
(function() {
// ... here goes the template content
})();
}
Now, the data object (second parameter of render) is passed into the template function as locals variable, it's against this object all the checks are made. The point is, if accessed somevar is never defined in the local template scope (by var statement), and doesn't exist in locals object either, it'll cause a ReferenceError: somevar is not defined error.
(one can disable with-wrapping, setting _with option of template to false, but by default it's just undefined)
I am trying to write Typescript in IntelliJ and do not know how to tell IntelliJ to 'import' some third party Javascript files. IntelliJ (or is it Node.JS?) gives the following complaint:
C:/Temp/Typescript Example Project/ts/FinancialService.ts(2,17): error TS2095: Could not find symbol 'com'.
C:/Temp/Typescript Example Project/ts/FinancialService.ts(4,31): error TS2095: Could not find symbol 'com'.
I would like to 'import' Thirdparty.Calculator.js:
var com = com || {};
com.thirdparty = com.thirdparty || {};
com.thirdparty.Calculator = function() {
this.add = function(a, b) {
return a + b;
};
this.square = function(n) {
return n*n;
};
};
This is what FinancialService.ts looks like:
class FinancialService {
calculator: com.thirdparty.Calculator;
constructor() {
this.calculator = new com.thirdparty.Calculator();
}
calculateStuff(a: number) {
return this.calculator.square(a);
}
}
IntelliJ appears to transpile the Typescript as the following works and the correct values are logged to the console:
<html>
<head>
<script src="js/Thirdparty.Calculator.js"></script>
<script src="ts/FinancialService.js"></script>
<script>
var cal = new com.thirdparty.Calculator();
console.log("Calculator.square() is " + cal.square(9));
var fs = new FinancialService();
console.log("FinancialService.calculateStuff() is " + fs.calculateStuff(4));
</script>
</head>
<body>
</body>
</html>
How can I configure my project so that IntelliJ knows about Thirdparty.Calculator.js?
You could add Thirdparty.Calculator.d.ts to your project for TypeScript compilation purposes:
declare module com.thirdparty {
export class Calculator {
add(a: number, b: number) : number;
square(n: number) : number;
}
}
This would obviously need to grow with the third party library.
For very little extra effort, you could just convert it to TypeScript...
module com.thirdparty {
export class Calculator {
add = function(a: number, b: number) {
return a + b;
};
square(n: number) : number {
return n*n;
}
}
}