Does anyone know how to test the riot files from riot 4 version or higher?
example file: test-page.riot
<test-page>
<h4>{ state.heading }</h4>
<script>
export default {
state: {
heading: ''
},
onMounted() {
this.change_heading()
}
change_heading() {
this.state.heading = 'Test page'
this.update()
}
}
</script>
</test-page>
I tried Jest but it works with javascript files and not with riot.
Related
I want to enable Vue 3 experimental feature reactivityTransform in Nuxt 3 (3.0.0-rc.3). I've tried the solution provided here, but it did not work and I did get the following error:
Type '{ vue: { reactivityTransform: true; }; }' is not assignable to type 'UserConfig'.
Here is my nuxt.config.ts file:
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
vite: {
vue: {
reactivityTransform: true
}
},
});
Any idea about what am I doing wrong? How can I enable reactivityTransform in Nuxt 3?
Apparently in the current version of Nuxt 3 (3.0.0-rc.3), instead of modifing the vite config in the nuxt.config file, we should add an experimental proprety; The following code enabled reactivityTransform in Nuxt 3:
// nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
experimental: {
reactivityTransform: true
},
});
Here is the related link.
I wrote a Rollup plugin to import Pug as an HTML string:
// Rollup plugin imported to Vite config
import { render } from 'pug';
export default function pug() {
return {
name: 'rollup-plugin-pug-html',
transform(src, id) {
if (id.endsWith('.pug')) {
const html = render(src, { filename: id });
const code = `export default ${JSON.stringify(html)};`;
return { code };
}
},
};
}
I'm using it in Vite to create templates for Vue components, as in this reduced example:
// ProofOfConceptSFC.vue
<script>
import { compile } from 'vue/dist/vue.esm-bundler.js';
import template from './template.pug';
export default {
render: compile(template)
};
</script>
The HMR is working great when I edit template.pug. The new template appears and the latest reactive values persist.
My problem is that template.pug may depend on other Pug files with include:
//- template.pug
include ./header.pug
p Hello {{ name }}
include ./footer.pug
The Vite server doesn't know about those files, and nothing happens if I touch them. Ideally I could invalidate template.pug when any Pug file is changed.
I'm guessing I want my plugin to update the ViteDevServer's server.moduleGraph. Is there a supported way to do that?
Huge thanks to the friendly Vite chat on Discord for setting me in the right direction.
The two keys I was missing:
Use Pug compile to create a render method that has render.dependencies, as done by Parcel
Use virtual import statements to attach the dependencies to the transform hook result, as done by vite-plugin-svelte.
Here is the working plugin:
import { compile } from 'pug';
export default function pluginPug() {
return {
name: 'vite-plugin-pug',
transform(src, id) {
if (id.endsWith('.pug')) {
const render = compile(src, { filename: id });
const html = render();
let code = '';
for (let dep of render.dependencies) {
code += `import ${JSON.stringify(dep)};\n`;
}
code += `export default ${JSON.stringify(html)};`;
return { code };
}
},
};
}
With create-react-app one could use process.env.REACT_APP_VERSION for this.
Is there an equivalent in Vite?
For React & TypeScript users:
Add a define to your vite.config.ts:
import react from '#vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [react()],
define: {
APP_VERSION: JSON.stringify(process.env.npm_package_version),
},
});
If you haven't got one already, define a vite-env.d.ts or env.d.ts and add a declare:
declare const APP_VERSION: string;
You'll now be able to use the variable APP_VERSION anywhere in your code & Vite will substitute it at compile time.
Note: You may need to restart your TS server for the declaration to be picked up by intellisense:
VSCode MacOS: ⌘ + ⇧ + P > Restart TS Server
VSCode Windows: ctrl + ⇧ + P > Restart TS Server
EDIT: For TypeScript, see Jamie's answer to set the types.
If you want to use plugin, see Adarsh's answer
But it's very easy to implement it yourself.
You can use define in vite.config.js. Read about it here
vite.config.js
export default {
plugins: [vue()],
define: {
'__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
}
}
component.vue
<template>
<div>{{ version }}</div>
</template>
<script>
export default {
data () {
version: __APP_VERSION__
},
}
</script>
or with <script setup>
<script setup>
const version = __APP_VERSION__
</script>
<template>
<div>{{ version }}</div>
</template>
You should be able to change '__APP_VERSION__' as long as it doesn't conflict with javascript syntax or other variables.
If you don't want to use define, there is a vite plugin for just this.
https://www.npmjs.com/package/vite-plugin-package-version
// vite.config.js
import loadVersion from 'vite-plugin-package-version';
export default {
plugins: [loadVersion()],
};
Will inject import.meta.env.PACKAGE_VERSION with the version specified in your package.json.
Vite 4, React, Typescript setup
This worked for me.
I imported package.json in vite.config.ts and defined a PACKAGE_VERSION environment variable.
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
import packageJson from './package.json';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
define: {
'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJson.version)
}
})
I added "resolveJsonModule": true to the compiler options of tsconfig.node.json.
I added "./package.json" to the include array of tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true
},
"include": ["vite.config.ts", "./package.json"]
}
In order to make intellisense work for PACKAGE_VERSION, I added it to vite-env.d.ts
interface ImportMetaEnv {
readonly PACKAGE_VERSION: string;
// more env variables...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
I could use {import.meta.env.PACKAGE_VERSION} anywhere in my react app to show the package version.
This worked for me:
import { version } from '../../package.json'
In case anyone is interested, this automatically increases the version in package.json and makes it available to the application.
import { defineConfig } from 'vite';
const increasePackageVersion = () => {
try {
const fs = require('fs');
const path = require('path');
const packageFilePath = path.join(__dirname, 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageFilePath, 'utf8'));
packageJson.version = packageJson.version.replace(/(\d+)$/, (match, p1) => {
return parseInt(p1) + 1;
}
);
fs.writeFileSync(packageFilePath, JSON.stringify(packageJson, null, 2));
console.log('New version is', packageJson.version);
} catch (error) {
console.log('Error in increasePackageVersion', error);
}
};
export default defineConfig({
build: {
lib: {
entry: 'src/main.js',
formats: ['es']
}
},
plugins: [
increasePackageVersion()],
define: {
'__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
}
});
console.log(__APP_VERSION__);
Below Answer includes
Secure Way of Importing Vue version.
Incrementing semantic versions using npm commands
Secure and Semantic Way of Versioning using npm and env
I'm building a web platform using Nuxt.Js and Ant as a front-end framework.
I saw that it is possible to change the theme of Ant using Less and Less-loader. So I did it before the build with the following code :
antd-ui.js
import Vue from 'vue'
import Antd from 'ant-design-vue/lib'
Vue.use(Antd)
nuxt.config.js
...
css: [
{
src: 'ant-design-vue/dist/antd.less',
lang: 'less'
}
],
...
build: {
transpile: [/^element-ui/],
loaders: {
less: {
javascriptEnabled: true,
modifyVars: {
// You can here change your Ant vars
}
},
},
...
So it works but now I want to implement a Dark Mode so I need to modify the vars dynamically through the code like this :
component.vue
<script>
import less from 'Less'
export default {
...
methods: {
changeTheme() {
less.modifyVars(
...
)
}
...
}
...
But I have the following message in the console :
Less has finished and no sheets were loaded
And nothing has changed... So if you can help me in any way, thanks in advance !
New-ish to Vue nd extremely new to Vuex. Im trying to import a store to my main page from which all my components branch out, but I keep getting an "unexpected token {" error in the browser console. I read through the documentation, but I cant find anything that would address this issue. I have tried changing every bit of syntax I can, and it doesnt seem to make a difference. The brackets around store in the import appear to be the problem, but when I remove them, i just get a new "unexpected identifier", or an "unexpected string" error. Am I importing it incorrectly? This format works fine on all my components, just not on this new vue instance.
vuex-test.blade.php
#extends('core.core_layouts.core_blank')
#section('browsertitle')
#endsection
#section('top-css')
#endsection
#section('breadcrumb')
#endsection
#section('main')
<component :is="currentView" v-bind="currentProperties"></component>
#endsection
#section('bottom-js')
<script>
import { store } from './../stores/store1.js';
var app = new Vue({
el:"#app",
store,
data: {
currentView: 'org-list',
choseOrg: {{ $org }},
}, // end data
computed: {
currentProperties: function() {
if (this.currentView === 'org-list') { return { } }
if (this.currentView === 'add-org') { return { parentOrg: '' } }
}
},
mounted : function() {
}, // end mounted
methods: {
}, // end methods
components: {
},
});
</script>
#endsection
store1.js
export const store = new Vuex.Store({
state: {
safelyStoredNumber: 'ret',
count: 2,
},
mutations: {
setOrgIdentity(state, orgID) {
state.OrgID = orgID
}
}
});
Per comments:
Yes, I get the error at the browser.
import won't work there. It is meant to run on node.js, during the build phase of a vue-cli-based project.
If you are deploying the code directly to browser, you will need to use code that is supported by the browser. In this case, the solution to import other JavaScript files is standard <script> tags.
So, in your code, change:
import { store } from './../stores/store1.js';
to something like (change the path to what is more appropriate):
<script src="./../stores/store1.js"></script>
And in store1.js (because export is too meant for node.js), replace:
export const store = new Vuex.Store({
With:
window.store = new Vuex.Store({