![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
vue-template-compiler
Advanced tools
Package description
The vue-template-compiler package is used to pre-compile Vue.js templates into render functions to achieve faster render times and smaller bundle sizes. It is typically used in build processes with tools like Webpack or Browserify.
Compile template strings
This feature allows you to compile Vue.js template strings into render functions. The `compile` function returns an object containing the render function as a string, which can be used to render Vue components.
const { compile } = require('vue-template-compiler');
const compiled = compile('<div>{{ message }}</div>');
console.log(compiled.render);
Compile template files
This feature is used to parse `.vue` single-file components and extract their template content. The `parseComponent` function returns an object with the template, script, and style parts of the component.
const { parseComponent } = require('vue-template-compiler');
const fs = require('fs');
const source = fs.readFileSync('MyComponent.vue', 'utf-8');
const parsed = parseComponent(source);
console.log(parsed.template.content);
This package is a Babel plugin that allows you to use JSX with Vue.js components. It provides an alternative to using the Vue template syntax and offers a different developer experience compared to vue-template-compiler.
Vue-loader is a Webpack loader that allows you to write Vue components in a format called Single-File Components (SFCs). It uses vue-template-compiler under the hood to compile templates but provides additional functionalities like hot-reloading and CSS extraction.
Preact is a fast 3kB alternative to React with the same modern API. While not directly similar to vue-template-compiler, it serves a similar purpose for the Preact ecosystem, allowing developers to compile JSX into render functions.
Changelog
2.7.1 (2022-07-04)
In addition, the following APIs are also supported:
defineComponent()
with improved type inference (compared to Vue.extend
)
h()
, useSlot()
, useAttrs()
, useCssModules()
set()
, del()
and nextTick()
are also provided as named exports in ESM builds.
The emits
option is also supported, but only for type-checking purposes (does not affect runtime behavior)
2.7 also supports using ESNext syntax in template expressions. When using a build system, the compiled template render function will go through the same loaders / plugins configured for normal JavaScript. This means if you have configured Babel for .js
files, it will also apply to the expressions in your SFC templates.
In ESM builds, these APIs are provided as named exports (and named exports only):
import Vue, { ref } from 'vue'
Vue.ref // undefined, use named export instead
In UMD and CJS builds, these APIs are exposed as properties on the global Vue
object.
When bundling with CJS builds externalized, bundlers should be able to handle ESM interop when externalizing CJS builds.
The Composition API is backported using Vue 2's getter/setter-based reactivity system to ensure browser compatibility. This means there are some important behavior differences from Vue 3's proxy-based system:
All Vue 2 change detection caveats still apply.
reactive()
, ref()
, and shallowReactive()
will directly convert original objects instead of creating proxies. This means:
// true in 2.7, false in 3.x
reactive(foo) === foo
readonly()
does create a separate object, but it won't track newly added properties and does not work on arrays.
Avoid using arrays as root values in reactive()
because without property access the array's mutation won't be tracked (this will result in a warning).
Reactivity APIs ignore properties with symbol keys.
In addition, the following features are explicitly NOT ported:
createApp()
(Vue 2 doesn't have isolated app scope)await
in <script setup>
(Vue 2 does not support async component initialization)expose
option is not supported for options components (but defineExpose()
is supported in <script setup>
).defineComponent
provides improved type inference similar to that of Vue 3. Note the type of this
inside defineComponent()
is not interoperable with this
from Vue.extend()
.
Similar to Vue 3, TSX support is now built-in. If your project previously had manual JSX type shims, make sure to remove them.
Upgrade local @vue/cli-xxx
dependencies the latest version in your major version range (if applicable):
~4.5.18
for v4~5.0.6
for v5Upgrade vue
to ^2.7.0
. You can also remove vue-template-compiler
from the dependencies - it is no longer needed in 2.7.
Note: if you are using @vue/test-utils
, you may need to keep it in the dependencies for now, but this requirement will also be lifted in a new release of test utils.
Check your package manager lockfile to ensure the following dependencies meet the version requirements. They may be transitive dependencies not listed in package.json
.
vue-loader
: ^15.10.0
vue-demi
: ^0.13.1
If not, you will need to remove node_modules
and the lockfile and perform a fresh install to ensure they are bumped to the latest version.
If you were previously using @vue/composition-api
, update imports from it to vue
instead. Note that some APIs exported by the plugin, e.g. createApp
, are not ported in 2.7.
Update eslint-plugin-vue
to latest version (9+) if you run into unused variable lint errors when using <script setup>
.
The SFC compiler for 2.7 now uses PostCSS 8 (upgraded from 7). PostCSS 8 should be backwards compatible with most plugins, but the upgrade may cause issues if you were previously using a custom PostCSS plugin that can only work with PostCSS 7. In such cases, you will need to upgrade the relevant plugins to their PostCSS 8 compatible versions.
2.7 support for Vite is provided via a new plugin: @vitejs/plugin-vue2. This new plugin requires Vue 2.7 or above and supersedes the existing vite-plugin-vue2.
Note that the new plugin does not handle Vue-specific JSX / TSX transform, which is intentional. Vue 2 JSX / TSX transform should be handled in a separate, dedicated plugin, which will be provided soon.
2.7 ships improved type definitions so it is no longer necessary to install @vue/runtime-dom
just for Volar template type inference support. All you need now is the following config in tsconfig.json
:
{
// ...
"vueCompilerOptions": {
"target": 2.7
}
}
Vue Devtools 6.2.0 has added support for inspecting 2.7 Composition API state, but the extensions may still need a few days to go through review on respective publishing platforms.
Readme
This package is auto-generated. For pull requests please see src/platforms/web/entry-compiler.js.
This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. In most cases you should be using it with vue-loader
, you will only need it separately if you are writing build tools with very specific needs.
npm install vue-template-compiler
const compiler = require('vue-template-compiler')
Compiles a template string and returns compiled JavaScript code. The returned result is an object of the following format:
{
ast: ?ASTElement, // parsed template elements to AST
render: string, // main render function code
staticRenderFns: Array<string>, // render code for static sub trees, if any
errors: Array<string> // template syntax errors, if any
}
Note the returned function code uses with
and thus cannot be used in strict mode code.
outputSourceRange
new in 2.6
boolean
false
Set this to true will cause the errors
returned in the compiled result become objects in the form of { msg, start, end }
. The start
and end
properties are numbers that mark the code range of the error source in the template. This can be passed on to the compiler.generateCodeFrame
API to generate a code frame for the error.
whitespace
string
'preserve' | 'condense'
'preserve'
The default value 'preserve'
handles whitespaces as follows:
If set to 'condense'
:
Using condense mode will result in smaller compiled code size and slightly improved performance. However, it will produce minor visual layout differences compared to plain HTML in certain cases.
This option does not affect the <pre>
tag.
Example:
<!-- source -->
<div>
<span>
foo
</span> <span>bar</span>
</div>
<!-- whitespace: 'preserve' -->
<div> <span>
foo
</span> <span>bar</span> </div>
<!-- whitespace: 'condense' -->
<div><span> foo </span> <span>bar</span></div>
modules
It's possible to hook into the compilation process to support custom template features. However, beware that by injecting custom compile-time modules, your templates will not work with other build tools built on standard built-in modules, e.g vue-loader
and vueify
.
An array of compiler modules. For details on compiler modules, refer to the ModuleOptions
type in flow declarations and the built-in modules.
directives
An object where the key is the directive name and the value is a function that transforms an template AST node. For example:
compiler.compile('<div v-test></div>', {
directives: {
test (node, directiveMeta) {
// transform node based on directiveMeta
}
}
})
By default, a compile-time directive will extract the directive and the directive will not be present at runtime. If you want the directive to also be handled by a runtime definition, return true
in the transform function.
Refer to the implementation of some built-in compile-time directives.
preserveWhitespace
Deprecated since 2.6
boolean
true
By default, the compiled render function preserves all whitespace characters between HTML tags. If set to false
, whitespace between tags will be ignored. This can result in slightly better performance but may affect layout for inline elements.
Similar to compiler.compile
, but directly returns instantiated functions:
{
render: Function,
staticRenderFns: Array<Function>
}
This is only useful at runtime with pre-configured builds, so it doesn't accept any compile-time options. In addition, this method uses new Function()
so it is not CSP-compliant.
2.4.0+
Same as compiler.compile
but generates SSR-specific render function code by optimizing parts of the template into string concatenation in order to improve SSR performance.
This is used by default in vue-loader@>=12
and can be disabled using the optimizeSSR
option.
2.4.0+
Same as compiler.compileToFunction
but generates SSR-specific render function code by optimizing parts of the template into string concatenation in order to improve SSR performance.
Parse a SFC (single-file component, or *.vue
file) into a descriptor (refer to the SFCDescriptor
type in flow declarations). This is used in SFC build tools like vue-loader
and vueify
.
Generate a code frame that highlights the part in template
defined by start
and end
. Useful for error reporting in higher-level tooling.
pad
pad
is useful when you are piping the extracted content into other pre-processors, as you will get correct line numbers or character indices if there are any syntax errors.
{ pad: "line" }
, the extracted content for each block will be prefixed with one newline for each line in the leading content from the original file to ensure that the line numbers align with the original file.{ pad: "space" }
, the extracted content for each block will be prefixed with one space for each character in the leading content from the original file to ensure that the character count remains the same as the original file.FAQs
template compiler for Vue 2.0
The npm package vue-template-compiler receives a total of 2,652,220 weekly downloads. As such, vue-template-compiler popularity was classified as popular.
We found that vue-template-compiler demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.