first commit

This commit is contained in:
2026-09-08 20:28:54 +08:00
commit 2ada8d3d5a
37380 changed files with 4886169 additions and 0 deletions
@@ -0,0 +1,4 @@
// TODO(Babel 8): Remove this file.
var runtime = require('@babel/runtime/helpers/regeneratorRuntime')()
module.exports = runtime
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2017 INTERVOLGA.RU
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@@ -0,0 +1,40 @@
# optimize-cssnano-plugin [![Build Status](https://travis-ci.org/intervolga/optimize-cssnano-plugin.svg?branch=master)](https://travis-ci.org/intervolga/optimize-cssnano-plugin)
It will search for CSS assets during the Webpack build and minimize it with [cssnano](http://github.com/ben-eb/cssnano).
Solves [extract-text-webpack-plugin](http://github.com/webpack/extract-text-webpack-plugin) CSS duplication problem.
Just like [optimize-css-assets-webpack-plugin](http://github.com/NMFR/optimize-css-assets-webpack-plugin) but more accurate with source maps.
## Installation:
Using npm:
```shell
$ npm install --save-dev @intervolga/optimize-cssnano-plugin
```
## Configuration:
``` javascript
const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
new OptimizeCssnanoPlugin({
sourceMap: nextSourceMap,
cssnanoOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
}],
},
}),
]
}
```
@@ -0,0 +1,121 @@
const cssnano = require('cssnano');
const postcss = require('postcss');
/**
* Optimize cssnano plugin
*
* @param {Object} options
*/
function OptimizeCssnanoPlugin(options) {
this.options = Object.assign({
sourceMap: false,
filter(assetName){// fixed by xxxxxx custom filter
return /\.css$/i.test(assetName);
},
cssnanoOptions: {
preset: 'default',
},
}, options);
if (this.options.sourceMap) {
this.options.sourceMap = Object.assign(
{inline: false},
this.options.sourceMap || {});
}
}
OptimizeCssnanoPlugin.prototype.apply = function(compiler) {
const self = this;
compiler.hooks.emit.tapAsync('OptimizeCssnanoPlugin',
function(compilation, callback) {
// Search for CSS assets
const assetsNames = Object.keys(compilation.assets)
.filter(self.options.filter);// fixed by xxxxxx custom filter
let hasErrors = false;
const promises = [];
// Generate promises for each minification
assetsNames.forEach((assetName) => {
// Original CSS
const asset = compilation.assets[assetName];
const originalCss = asset.source();
// Options for particalar cssnano call
const postCssOptions = {
from: assetName,
to: assetName,
map: false,
};
const cssnanoOptions = self.options.cssnanoOptions;
// Extract or remove previous map
const mapName = assetName + '.map';
if (self.options.sourceMap) {
// Use previous map if exist...
if (compilation.assets[mapName]) {
const mapObject = JSON.parse(compilation.assets[mapName].source());
// ... and not empty
if (mapObject.sources.length > 0 || mapObject.mappings.length > 0) {
postCssOptions.map = Object.assign({
prev: compilation.assets[mapName].source(),
}, self.options.sourceMap);
} else {
postCssOptions.map = Object.assign({}, self.options.sourceMap);
}
}
} else {
delete compilation.assets[mapName];
}
// Run minification
const promise = postcss([cssnano(cssnanoOptions)])
.process(originalCss, postCssOptions)
.then((result) => {
if (hasErrors) {
return;
}
// Extract CSS back to assets
const processedCss = result.css;
compilation.assets[assetName] = {
source: function() {
return processedCss;
},
size: function() {
return processedCss.length;
},
};
// Extract map back to assets
if (result.map) {
const processedMap = result.map.toString();
compilation.assets[mapName] = {
source: function() {
return processedMap;
},
size: function() {
return processedMap.length;
},
};
}
}
).catch(function(err) {
hasErrors = true;
throw new Error('CSS minification error: ' + err.message +
'. File: ' + assetName);
}
);
promises.push(promise);
});
Promise.all(promises)
.then(function() {
callback();
})
.catch(callback);
});
};
module.exports = OptimizeCssnanoPlugin;
@@ -0,0 +1,58 @@
{
"name": "@intervolga/optimize-cssnano-plugin",
"version": "1.0.6",
"description": "WebPack 2+ plugin for CSS minification after ExtractTextPluging",
"main": "index.js",
"scripts": {
"mocha": "mocha --ui tdd test/",
"lint": "eslint index.js lib test/index.js test/helpers",
"test": "npm run lint && npm run mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/intervolga/optimize-cssnano-plugin"
},
"keywords": [
"html",
"index",
"webpack",
"loader"
],
"author": "Shkarupa Alex",
"license": "MIT",
"bugs": {
"url": "https://github.com/intervolga/optimize-cssnano-plugin/issues"
},
"homepage": "https://github.com/intervolga/optimize-cssnano-plugin#readme",
"peerDependencies": {
"webpack": "^4.0.0"
},
"dependencies": {
"cssnano": "^4.0.0",
"cssnano-preset-default": "^4.0.0",
"postcss": "^7.0.0"
},
"devDependencies": {
"autoprefixer": "^8.6.5",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-google": "^0.8.0",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"expect.js": "^0.3.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"fs-extra": "^5.0.0",
"mocha": "^5.2.0",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.16.1"
},
"files": [
"lib",
"index.js",
"README",
"LICENSE"
]
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,10 @@
const _ = require('../build')
const template = `
<div></div>
`
const res = _.compile(template)
console.log(_)
@@ -0,0 +1,17 @@
// try {
// var vueVersion = require('megalo/package.json').version
// } catch (e) {}
// var packageName = require('./package.json').name
// var packageVersion = require('./package.json').version
// if (vueVersion && vueVersion !== packageVersion) {
// throw new Error(
// '\n\nVue packages version mismatch:\n\n' +
// '- vue@' + vueVersion + '\n' +
// '- ' + packageName + '@' + packageVersion + '\n\n' +
// 'This may cause things to work incorrectly. Make sure to use the same version for both.\n' +
// 'If you are using megalo-loader, re-installing them should bump ' + packageName + ' to the latest.\n'
// )
// }
module.exports = require('./build')
@@ -0,0 +1,55 @@
{
"_from": "@megalo/template-compiler@^0.5.4",
"_id": "@megalo/template-compiler@0.5.4",
"_inBundle": false,
"_integrity": "sha512-kwZfT+A/OaNdBlKay0QI8XoLk11J0xdOTYppRrVR+rGZ2tboYN8DPF604iU0zLbL/YdwJde49mO5w+FbceZpcg==",
"_location": "/@megalo/template-compiler",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "@megalo/template-compiler@^0.5.4",
"name": "@megalo/template-compiler",
"escapedName": "@megalo%2ftemplate-compiler",
"scope": "@megalo",
"rawSpec": "^0.5.4",
"saveSpec": null,
"fetchSpec": "^0.5.4"
},
"_requiredBy": [
"/@dcloudio/webpack-uni-mp-loader"
],
"_resolved": "https://registry.npmjs.org/@megalo/template-compiler/-/template-compiler-0.5.4.tgz",
"_shasum": "4ae94608f64c2441adc9553fe092338e5c3bd927",
"_spec": "@megalo/template-compiler@^0.5.4",
"_where": "/Users/fxy/Documents/demo/my-project/node_modules/@dcloudio/webpack-uni-mp-loader",
"author": {
"name": "kaola-fed"
},
"bugs": {
"url": "https://github.com/kaola-fed/megalo/issues"
},
"bundleDependencies": false,
"dependencies": {
"de-indent": "^1.0.2",
"he": "^1.1.0"
},
"deprecated": false,
"description": "megalo template compiler for Vue",
"homepage": "https://github.com/kaola-fed/megalo/",
"keywords": [
"vue",
"compiler",
"mp",
"mp",
"antmp"
],
"license": "MIT",
"main": "index.js",
"name": "@megalo/template-compiler",
"repository": {
"type": "git",
"url": "git+https://github.com/kaola-fed/megalo.git"
},
"version": "0.5.4"
}
@@ -0,0 +1,259 @@
# [3.1.0](https://github.com/vuejs/component-compiler-utils/compare/v3.0.2...v3.1.0) (2019-12-08)
### Features
* include filename in `finalCompilerOptions` ([#74](https://github.com/vuejs/component-compiler-utils/issues/74)) ([3dda72d](https://github.com/vuejs/component-compiler-utils/commit/3dda72d))
* support AST for template compile ([#68](https://github.com/vuejs/component-compiler-utils/issues/68)) ([ed44d6f](https://github.com/vuejs/component-compiler-utils/commit/ed44d6f))
* support audio src in `transformAssetUrls` option by default ([#72](https://github.com/vuejs/component-compiler-utils/issues/72)) ([47f1341](https://github.com/vuejs/component-compiler-utils/commit/47f1341))
## [3.0.2](https://github.com/vuejs/component-compiler-utils/compare/v3.0.1...v3.0.2) (2019-11-06)
### Bug Fixes
* also include "lib" folder for type definitions ([dd42df1](https://github.com/vuejs/component-compiler-utils/commit/dd42df1)), closes [#73](https://github.com/vuejs/component-compiler-utils/issues/73)
## [3.0.1](https://github.com/vuejs/component-compiler-utils/compare/v3.0.0...v3.0.1) (2019-11-04)
### Bug Fixes
* should not crash when prettier failed ([89e7900](https://github.com/vuejs/component-compiler-utils/commit/89e7900))
* unpin prettier version ([59a01bb](https://github.com/vuejs/component-compiler-utils/commit/59a01bb))
# [3.0.0](https://github.com/vuejs/component-compiler-utils/compare/v2.6.0...v3.0.0) (2019-04-11)
### Features
* Replace node-sass to sass ([#56](https://github.com/vuejs/component-compiler-utils/issues/56)) ([3e4e3fc](https://github.com/vuejs/component-compiler-utils/commit/3e4e3fc)), closes [#50](https://github.com/vuejs/component-compiler-utils/issues/50)
### BREAKING CHANGES
* Using `sass` instead of `node-sass` package.
# [2.6.0](https://github.com/vuejs/component-compiler-utils/compare/v2.5.2...v2.6.0) (2019-02-21)
### Features
* implement ::v-deep as a shadow piercing combinator ([#54](https://github.com/vuejs/component-compiler-utils/issues/54)) ([8b2c646](https://github.com/vuejs/component-compiler-utils/commit/8b2c646))
# [2.6.0](https://github.com/vuejs/component-compiler-utils/compare/v2.5.2...v2.6.0) (2019-02-21)
### Features
* implement ::v-deep as a shadow piercing combinator ([#54](https://github.com/vuejs/component-compiler-utils/issues/54)) ([8b2c646](https://github.com/vuejs/component-compiler-utils/commit/8b2c646))
## [2.5.2](https://github.com/vuejs/component-compiler-utils/compare/v2.5.0...v2.5.2) (2019-01-31)
### Bug Fixes
* fix sourceMap path separator on Windows, default sourceRoot to "" ([#51](https://github.com/vuejs/component-compiler-utils/issues/51)) ([df32cd9](https://github.com/vuejs/component-compiler-utils/commit/df32cd9)), closes [#47](https://github.com/vuejs/component-compiler-utils/issues/47)
* generate correct source-map when content is not padded ([#52](https://github.com/vuejs/component-compiler-utils/issues/52)) ([81be0ca](https://github.com/vuejs/component-compiler-utils/commit/81be0ca))
## [2.5.1](https://github.com/vuejs/component-compiler-utils/compare/v2.5.0...v2.5.1) (2019-01-25)
### Bug Fixes
* fix sourceMap path separator on Windows, default sourceRoot to "" ([#51](https://github.com/vuejs/component-compiler-utils/issues/51)) ([df32cd9](https://github.com/vuejs/component-compiler-utils/commit/df32cd9)), closes [#47](https://github.com/vuejs/component-compiler-utils/issues/47)
# [2.5.0](https://github.com/vuejs/component-compiler-utils/compare/v2.4.0...v2.5.0) (2019-01-08)
### Features
* add 'use' tag of SVG to 'transformAssetUrls' option as default ([#45](https://github.com/vuejs/component-compiler-utils/issues/45)) ([f4e3336](https://github.com/vuejs/component-compiler-utils/commit/f4e3336))
# [2.4.0](https://github.com/vuejs/component-compiler-utils/compare/v2.0.0...v2.4.0) (2019-01-02)
### Bug Fixes
* do not insert newline if style is already minified ([2603ee2](https://github.com/vuejs/component-compiler-utils/commit/2603ee2))
* Forward preprocessor options to less ([#25](https://github.com/vuejs/component-compiler-utils/issues/25)) ([3b19c1e](https://github.com/vuejs/component-compiler-utils/commit/3b19c1e)), closes [#24](https://github.com/vuejs/component-compiler-utils/issues/24)
* Move trim and scoped postcss plugins at the start of plugin list ([#36](https://github.com/vuejs/component-compiler-utils/issues/36)) ([0d52d86](https://github.com/vuejs/component-compiler-utils/commit/0d52d86))
* pin prettier version ([5f138a6](https://github.com/vuejs/component-compiler-utils/commit/5f138a6))
* remove space after selector when inserting scoped attribute ([5b299ed](https://github.com/vuejs/component-compiler-utils/commit/5b299ed)), closes [vue-loader/#1370](https://github.com/vuejs/component-compiler-utils/issues/1370)
* should work with variable named render (close [#23](https://github.com/vuejs/component-compiler-utils/issues/23)) ([273827b](https://github.com/vuejs/component-compiler-utils/commit/273827b))
* support standalone pseudo element selectors ([#33](https://github.com/vuejs/component-compiler-utils/issues/33)) ([d6cfbbf](https://github.com/vuejs/component-compiler-utils/commit/d6cfbbf))
* Typings for SFCDescriptor and SFCCustomBlock ([#29](https://github.com/vuejs/component-compiler-utils/issues/29)) ([bb09115](https://github.com/vuejs/component-compiler-utils/commit/bb09115))
### Features
* **scoped-css:** support leading >>> or /deep/ in selectors ([1a3b5bb](https://github.com/vuejs/component-compiler-utils/commit/1a3b5bb))
* add `prettify ` option ([#42](https://github.com/vuejs/component-compiler-utils/issues/42)) ([db3655b](https://github.com/vuejs/component-compiler-utils/commit/db3655b))
* Support `stylus` as `<style>` lang ([#18](https://github.com/vuejs/component-compiler-utils/issues/18)) ([986084e](https://github.com/vuejs/component-compiler-utils/commit/986084e))
<a name="2.3.1"></a>
## [2.3.1](https://github.com/vuejs/component-compiler-utils/compare/v2.3.0...v2.3.1) (2018-12-11)
### Bug Fixes
* do not insert newline if style is already minified ([2603ee2](https://github.com/vuejs/component-compiler-utils/commit/2603ee2))
* Move trim and scoped postcss plugins at the start of plugin list ([#36](https://github.com/vuejs/component-compiler-utils/issues/36)) ([0d52d86](https://github.com/vuejs/component-compiler-utils/commit/0d52d86))
<a name="2.3.0"></a>
# [2.3.0](https://github.com/vuejs/component-compiler-utils/compare/v2.2.0...v2.3.0) (2018-10-22)
### Bug Fixes
* support standalone pseudo element selectors ([#33](https://github.com/vuejs/component-compiler-utils/issues/33)) ([d6cfbbf](https://github.com/vuejs/component-compiler-utils/commit/d6cfbbf))
* Typings for SFCDescriptor and SFCCustomBlock ([#29](https://github.com/vuejs/component-compiler-utils/issues/29)) ([bb09115](https://github.com/vuejs/component-compiler-utils/commit/bb09115))
<a name="2.2.0"></a>
# [2.2.0](https://github.com/vuejs/component-compiler-utils/compare/v2.1.2...v2.2.0) (2018-08-16)
### Features
* **scoped-css:** support leading >>> or /deep/ in selectors ([1a3b5bb](https://github.com/vuejs/component-compiler-utils/commit/1a3b5bb))
<a name="2.1.2"></a>
## [2.1.2](https://github.com/vuejs/component-compiler-utils/compare/v2.1.1...v2.1.2) (2018-08-09)
### Bug Fixes
* pin prettier version ([5f138a6](https://github.com/vuejs/component-compiler-utils/commit/5f138a6))
<a name="2.1.1"></a>
## [2.1.1](https://github.com/vuejs/component-compiler-utils/compare/v2.1.0...v2.1.1) (2018-08-07)
### Bug Fixes
* remove space after selector when inserting scoped attribute ([5b299ed](https://github.com/vuejs/component-compiler-utils/commit/5b299ed)), closes [vue-loader/#1370](https://github.com/vuejs/component-compiler-utils/issues/1370)
<a name="2.1.0"></a>
# [2.1.0](https://github.com/vuejs/component-compiler-utils/compare/v2.0.0...v2.1.0) (2018-07-03)
### Bug Fixes
* Forward preprocessor options to less ([#25](https://github.com/vuejs/component-compiler-utils/issues/25)) ([3b19c1e](https://github.com/vuejs/component-compiler-utils/commit/3b19c1e)), closes [#24](https://github.com/vuejs/component-compiler-utils/issues/24)
* should work with variable named render (close [#23](https://github.com/vuejs/component-compiler-utils/issues/23)) ([273827b](https://github.com/vuejs/component-compiler-utils/commit/273827b))
### Features
* Support `stylus` as `<style>` lang ([#18](https://github.com/vuejs/component-compiler-utils/issues/18)) ([986084e](https://github.com/vuejs/component-compiler-utils/commit/986084e))
<a name="2.0.0"></a>
# [2.0.0](https://github.com/vuejs/component-compiler-utils/compare/v1.3.1...v2.0.0) (2018-06-03)
### Features
* Add async style compilation support ([#13](https://github.com/vuejs/component-compiler-utils/issues/13)) ([54464d6](https://github.com/vuejs/component-compiler-utils/commit/54464d6))
* allow/require compiler to be passed in for `parse` ([caa1538](https://github.com/vuejs/component-compiler-utils/commit/caa1538))
### BREAKING CHANGES
* vue template compiler must now be passed to `parse`
via options.
<a name="1.3.1"></a>
## [1.3.1](https://github.com/vuejs/component-compiler-utils/compare/v1.3.0...v1.3.1) (2018-05-28)
### Bug Fixes
* default parser was removed from prettier ([#15](https://github.com/vuejs/component-compiler-utils/issues/15)) ([598224d](https://github.com/vuejs/component-compiler-utils/commit/598224d))
<a name="1.3.0"></a>
# [1.3.0](https://github.com/vuejs/component-compiler-utils/compare/v1.2.1...v1.3.0) (2018-05-22)
### Features
* include href for <image> in transformAssetUrls (close [#12](https://github.com/vuejs/component-compiler-utils/issues/12)) ([86fddc2](https://github.com/vuejs/component-compiler-utils/commit/86fddc2))
* Provide installation instructions on missing language preprocessors ([#10](https://github.com/vuejs/component-compiler-utils/issues/10)) ([97e772c](https://github.com/vuejs/component-compiler-utils/commit/97e772c))
<a name="1.2.1"></a>
## [1.2.1](https://github.com/vuejs/component-compiler-utils/compare/v1.2.0...v1.2.1) (2018-04-26)
### Bug Fixes
* postcss import ([c845a80](https://github.com/vuejs/component-compiler-utils/commit/c845a80))
<a name="1.2.0"></a>
# [1.2.0](https://github.com/vuejs/component-compiler-utils/compare/v1.1.0...v1.2.0) (2018-04-26)
### Bug Fixes
* compile only lib directory ([#6](https://github.com/vuejs/component-compiler-utils/issues/6)) ([4f787b3](https://github.com/vuejs/component-compiler-utils/commit/4f787b3))
### Features
* accept postcss options and plugins ([#7](https://github.com/vuejs/component-compiler-utils/issues/7)) ([1456e3d](https://github.com/vuejs/component-compiler-utils/commit/1456e3d))
<a name="1.1.0"></a>
# [1.1.0](https://github.com/vuejs/component-compiler-utils/compare/9204f16...v1.1.0) (2018-04-24)
### Bug Fixes
* use more strict regex for matching css animation rules ([4644727](https://github.com/vuejs/component-compiler-utils/commit/4644727))
### Features
* adds stylus & less preprocessor ([#5](https://github.com/vuejs/component-compiler-utils/issues/5)) ([f2fd8b9](https://github.com/vuejs/component-compiler-utils/commit/f2fd8b9))
* preprocess scss/sass styles with node-sass ([#4](https://github.com/vuejs/component-compiler-utils/issues/4)) ([9204f16](https://github.com/vuejs/component-compiler-utils/commit/9204f16))
@@ -0,0 +1,5 @@
dist/compileTemplate
dist/parse
dist/parseCustomBlocks
dist/stylePlugins/scoped.js
dist/stylePlugins/remove-scoped.js
@@ -0,0 +1,153 @@
# @vue/component-compiler-utils [![Build Status](https://circleci.com/gh/vuejs/component-compiler-utils/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/component-compiler-utils/)
> Lower level utilities for compiling Vue single file components
This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue single file components into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader) version 15 and above.
The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.
## Why isn't `vue-template-compiler` a peerDependency?
Since this package is more often used as a low-level utility, it is usually a transitive dependency in an actual Vue project. It is therefore the responsibility of the higher-level package (e.g. `vue-loader`) to inject `vue-template-compiler` via options when calling the `parse` and `compileTemplate` methods.
Not listing it as a peer depedency also allows tooling authors to use a non-default template compiler instead of `vue-template-compiler` without having to include it just to fullfil the peer dep requirement.
## API
### parse(ParseOptions): SFCDescriptor
Parse raw single file component source into a descriptor with source maps. The actual compiler (`vue-template-compiler`) must be passed in via the `compiler` option so that the specific version used can be determined by the end user.
``` ts
interface ParseOptions {
source: string
filename?: string
compiler: VueTemplateCompiler
// https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilerparsecomponentfile-options
// default: { pad: 'line' }
compilerParseOptions?: VueTemplateCompilerParseOptions
sourceRoot?: string
needMap?: boolean
}
interface SFCDescriptor {
template: SFCBlock | null
script: SFCBlock | null
styles: SFCBlock[]
customBlocks: SFCCustomBlock[]
}
interface SFCCustomBlock {
type: string
content: string
attrs: { [key: string]: string | true }
start: number
end: number
map?: RawSourceMap
}
interface SFCBlock extends SFCCustomBlock {
lang?: string
src?: string
scoped?: boolean
module?: string | boolean
}
```
### compileTemplate(TemplateCompileOptions): TemplateCompileResults
Takes raw template source and compile it into JavaScript code. The actual compiler (`vue-template-compiler`) must be passed in via the `compiler` option so that the specific version used can be determined by the end user.
It can also optionally perform pre-processing for any templating engine supported by [consolidate](https://github.com/tj/consolidate.js/).
``` ts
interface TemplateCompileOptions {
source: string
filename: string
compiler: VueTemplateCompiler
// https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletemplate-options
// default: {}
compilerOptions?: VueTemplateCompilerOptions
// Template preprocessor
preprocessLang?: string
preprocessOptions?: any
// Transform asset urls found in the template into `require()` calls
// This is off by default. If set to true, the default value is
// {
// audio: 'src',
// video: ['src', 'poster'],
// source: 'src',
// img: 'src',
// image: ['xlink:href', 'href'],
// use: ['xlink:href', 'href']
// }
transformAssetUrls?: AssetURLOptions | boolean
// For vue-template-es2015-compiler, which is a fork of Buble
transpileOptions?: any
isProduction?: boolean // default: false
isFunctional?: boolean // default: false
optimizeSSR?: boolean // default: false
// Whether prettify compiled render function or not (development only)
// default: true
prettify?: boolean
}
interface TemplateCompileResult {
ast: Object | undefined
code: string
source: string
tips: string[]
errors: string[]
}
interface AssetURLOptions {
[name: string]: string | string[]
}
```
#### Handling the Output
The resulting JavaScript code will look like this:
``` js
var render = function (h) { /* ... */}
var staticRenderFns = [function (h) { /* ... */}, function (h) { /* ... */}]
```
It **does NOT** assume any module system. It is your responsibility to handle the exports, if needed.
### compileStyle(StyleCompileOptions)
Take input raw CSS and applies scoped CSS transform. It does NOT handle pre-processors. If the component doesn't use scoped CSS then this step can be skipped.
``` ts
interface StyleCompileOptions {
source: string
filename: string
id: string
map?: any
scoped?: boolean
trim?: boolean
preprocessLang?: string
preprocessOptions?: any
postcssOptions?: any
postcssPlugins?: any[]
}
interface StyleCompileResults {
code: string
map: any | void
rawResult: LazyResult | void // raw lazy result from PostCSS
errors: string[]
}
```
### compileStyleAsync(StyleCompileOptions)
Same as `compileStyle(StyleCompileOptions)` but it returns a Promise resolving to `StyleCompileResults`. It can be used with async postcss plugins.
@@ -0,0 +1,25 @@
import { LazyResult } from 'postcss';
export interface StyleCompileOptions {
source: string;
filename: string;
id: string;
map?: any;
scoped?: boolean;
trim?: boolean;
preprocessLang?: string;
preprocessOptions?: any;
postcssOptions?: any;
postcssPlugins?: any[];
}
export interface AsyncStyleCompileOptions extends StyleCompileOptions {
isAsync?: boolean;
}
export interface StyleCompileResults {
code: string;
map: any | void;
rawResult: LazyResult | void;
errors: string[];
}
export declare function compileStyle(options: StyleCompileOptions): StyleCompileResults;
export declare function compileStyleAsync(options: StyleCompileOptions): Promise<StyleCompileResults>;
export declare function doCompileStyle(options: AsyncStyleCompileOptions): StyleCompileResults;
@@ -0,0 +1,95 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const postcss = require('postcss');
const trim_1 = __importDefault(require("./stylePlugins/trim"));
const scoped_1 = __importDefault(require("./stylePlugins/scoped"));
const styleProcessors_1 = require("./styleProcessors");
const removeScoped_1 = __importDefault(require("./stylePlugins/remove-scoped"));
let comments;
try{
comments = require('postcss-discard-comments')
}catch(e){}
function compileStyle(options) {
return doCompileStyle(Object.assign({}, options, { isAsync: false }));
}
exports.compileStyle = compileStyle;
function compileStyleAsync(options) {
return Promise.resolve(doCompileStyle(Object.assign({}, options, { isAsync: true })));
}
exports.compileStyleAsync = compileStyleAsync;
function doCompileStyle(options) {
const { filename, id, scoped = true, trim = true, preprocessLang, postcssOptions, postcssPlugins } = options;
const preprocessor = preprocessLang && styleProcessors_1.processors[preprocessLang];
const preProcessedSource = preprocessor && preprocess(options, preprocessor);
const map = preProcessedSource ? preProcessedSource.map : options.map;
const source = preProcessedSource ? preProcessedSource.code : options.source;
const plugins = (postcssPlugins || []).slice();
if (trim) {
plugins.push(trim_1.default());
}
if (scoped) {
plugins.push(scoped_1.default(id));
} else { // fixed by xxxxxx
plugins.push(removeScoped_1.default(id));
}
// fixed by xxxxxx
if (process.env.UNI_PLATFORM === 'app-plus' && process.env.NODE_ENV === 'production') {
if (comments) {
plugins.push(comments);
}
}
const postCSSOptions = Object.assign({}, postcssOptions, { to: filename, from: filename });
if (map) {
postCSSOptions.map = {
inline: false,
annotation: false,
prev: map
};
}
let result, code, outMap;
const errors = [];
if (preProcessedSource && preProcessedSource.errors.length) {
errors.push(...preProcessedSource.errors);
}
try {
result = postcss(plugins).process(source, postCSSOptions);
// In async mode, return a promise.
if (options.isAsync) {
return result
.then((result) => ({
code: result.css || '',
map: result.map && result.map.toJSON(),
errors,
rawResult: result
}))
.catch((error) => ({
code: '',
map: undefined,
errors: [...errors, error.message],
rawResult: undefined
}));
}
// force synchronous transform (we know we only have sync plugins)
code = result.css;
outMap = result.map;
}
catch (e) {
errors.push(e);
}
return {
code: code || ``,
map: outMap && outMap.toJSON(),
errors,
rawResult: result
};
}
exports.doCompileStyle = doCompileStyle;
function preprocess(options, preprocessor) {
return preprocessor.render(options.source, options.map, Object.assign({
filename: options.filename
}, options.preprocessOptions));
}
@@ -0,0 +1,24 @@
import { VueTemplateCompiler, VueTemplateCompilerOptions, ErrorWithRange } from './types';
import { AssetURLOptions } from './templateCompilerModules/assetUrl';
export interface TemplateCompileOptions {
source: string;
filename: string;
compiler: VueTemplateCompiler;
compilerOptions?: VueTemplateCompilerOptions;
transformAssetUrls?: AssetURLOptions | boolean;
preprocessLang?: string;
preprocessOptions?: any;
transpileOptions?: any;
isProduction?: boolean;
isFunctional?: boolean;
optimizeSSR?: boolean;
prettify?: boolean;
}
export interface TemplateCompileResult {
ast: Object | undefined;
code: string;
source: string;
tips: (string | ErrorWithRange)[];
errors: (string | ErrorWithRange)[];
}
export declare function compileTemplate(options: TemplateCompileOptions): TemplateCompileResult;
@@ -0,0 +1,117 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const assetUrl_1 = __importDefault(require("./templateCompilerModules/assetUrl"));
const srcset_1 = __importDefault(require("./templateCompilerModules/srcset"));
const consolidate = require('consolidate');
const transpile = require('vue-template-es2015-compiler');
function compileTemplate(options) {
const { preprocessLang } = options;
const preprocessor = preprocessLang && consolidate[preprocessLang];
if (preprocessor) {
return actuallyCompile(Object.assign({}, options, {
source: preprocess(options, preprocessor)
}));
}
else if (preprocessLang) {
return { // fixed by xxxxxx recyclableRender,components
code: `var render = function () {}\n` + `var staticRenderFns = []\n` + `var recyclableRender\n` + `var components\n`,
source: options.source,
tips: [
`Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`
],
errors: [
`Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`
]
};
}
else {
return actuallyCompile(options);
}
}
exports.compileTemplate = compileTemplate;
function preprocess(options, preprocessor) {
const { source, filename, preprocessOptions } = options;
const finalPreprocessOptions = Object.assign({
filename
}, preprocessOptions);
// Consolidate exposes a callback based API, but the callback is in fact
// called synchronously for most templating engines. In our case, we have to
// expose a synchronous API so that it is usable in Jest transforms (which
// have to be sync because they are applied via Node.js require hooks)
let res, err;
preprocessor.render(source, finalPreprocessOptions, (_err, _res) => {
if (_err)
err = _err;
res = _res;
});
if (err)
throw err;
return res;
}
function actuallyCompile(options) {
const { source, compiler, compilerOptions = {}, transpileOptions = {}, transformAssetUrls, isProduction = process.env.NODE_ENV === 'production', isFunctional = false, optimizeSSR = false, prettify = true } = options;
const compile = optimizeSSR && compiler.ssrCompile ? compiler.ssrCompile : compiler.compile;
let finalCompilerOptions = compilerOptions;
if (transformAssetUrls) {
const builtInModules = [
transformAssetUrls === true
? assetUrl_1.default()
: assetUrl_1.default(transformAssetUrls),
srcset_1.default()
];
finalCompilerOptions = Object.assign({}, compilerOptions, {
modules: [...builtInModules, ...(compilerOptions.modules || [])]
});
}
// fixed by xxxxxx
const { render, staticRenderFns, tips, errors, '@render': recyclableRender, components } = compile(source, finalCompilerOptions);
if (errors && errors.length) {
return { // fixed by xxxxxx recyclableRender,components
code: `var render = function () {}\n` + `var staticRenderFns = []\n` + `var recyclableRender\n` + `var components\n`,
source,
tips,
errors
};
}
else {
const finalTranspileOptions = Object.assign({}, transpileOptions, {
transforms: Object.assign({}, transpileOptions.transforms, {
stripWithFunctional: isFunctional
})
});
const toFunction = (code) => {
return `function (${isFunctional ? `_h,_vm` : ``}) {${code}}`;
};
// fixed by xxxxxx
// transpile code with vue-template-es2015-compiler, which is a forked
// version of Buble that applies ES2015 transforms + stripping `with` usage
let code = transpile(`var __render__ = ${toFunction(render)}\n` +
`var __recyclableRender__ = ${recyclableRender ? toFunction(recyclableRender) : 'false'}\n` +
`var __staticRenderFns__ = [${staticRenderFns.map(toFunction)}]`, finalTranspileOptions) + `\n`;
// #23 we use __render__ to avoid `render` not being prefixed by the
// transpiler when stripping with, but revert it back to `render` to
// maintain backwards compat
code = code.replace(/\s__(render|recyclableRender|staticRenderFns)__\s/g, ' $1 ');
code = (components || '') + '\n' + code // fixed by xxxxxx
if (!isProduction) {
// mark with stripped (this enables Vue to use correct runtime proxy
// detection)
code += `render._withStripped = true`;
if (prettify) {
code = require('prettier').format(code, {
semi: false,
parser: 'babel'
});
}
}
return {
code,
source,
tips,
errors
};
}
}
@@ -0,0 +1,5 @@
import { parse, SFCBlock, SFCCustomBlock, SFCDescriptor } from './parse';
import { compileTemplate, TemplateCompileOptions, TemplateCompileResult } from './compileTemplate';
import { compileStyle, compileStyleAsync, StyleCompileOptions, StyleCompileResults } from './compileStyle';
export { parse, compileTemplate, compileStyle, compileStyleAsync };
export { SFCBlock, SFCCustomBlock, SFCDescriptor, TemplateCompileOptions, TemplateCompileResult, StyleCompileOptions, StyleCompileResults };
@@ -0,0 +1,9 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const parse_1 = require("./parse");
exports.parse = parse_1.parse;
const compileTemplate_1 = require("./compileTemplate");
exports.compileTemplate = compileTemplate_1.compileTemplate;
const compileStyle_1 = require("./compileStyle");
exports.compileStyle = compileStyle_1.compileStyle;
exports.compileStyleAsync = compileStyle_1.compileStyleAsync;
@@ -0,0 +1,32 @@
import { RawSourceMap, VueTemplateCompiler, VueTemplateCompilerParseOptions } from './types';
export interface ParseOptions {
source: string;
filename?: string;
compiler: VueTemplateCompiler;
compilerParseOptions?: VueTemplateCompilerParseOptions;
sourceRoot?: string;
needMap?: boolean;
}
export interface SFCCustomBlock {
type: string;
content: string;
attrs: {
[key: string]: string | true;
};
start: number;
end: number;
map?: RawSourceMap;
}
export interface SFCBlock extends SFCCustomBlock {
lang?: string;
src?: string;
scoped?: boolean;
module?: string | boolean;
}
export interface SFCDescriptor {
template: SFCBlock | null;
script: SFCBlock | null;
styles: SFCBlock[];
customBlocks: SFCCustomBlock[];
}
export declare function parse(options: ParseOptions): SFCDescriptor;
@@ -0,0 +1,63 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const source_map_1 = require("source-map");
const hash = require('hash-sum');
const cache = require('lru-cache')(100);
const splitRE = /\r?\n/g;
const emptyRE = /^(?:\/\/)?\s*$/;
function parse(options) {
const { source, filename = '', compiler, compilerParseOptions = { pad: 'line' }, sourceRoot = '', needMap = true } = options;
// fixed by xxxxxx (添加isAppNVue标记,防止nvue与vue引用相同组件时,走了相同的cache)
const cacheKey = hash(String(options.isAppNVue) + filename + source);
let output = cache.get(cacheKey);
if (output)
return output;
// fixed by xxxxxx
output = require('./parseCustomBlocks')(compiler.parseComponent(source, compilerParseOptions), options);
if (needMap) {
if (output.script && !output.script.src) {
output.script.map = generateSourceMap(filename, source, output.script.content, sourceRoot, compilerParseOptions.pad);
}
if (output.styles) {
output.styles.forEach(style => {
if (!style.src) {
style.map = generateSourceMap(filename, source, style.content, sourceRoot, compilerParseOptions.pad);
}
});
}
}
cache.set(cacheKey, output);
return output;
}
exports.parse = parse;
function generateSourceMap(filename, source, generated, sourceRoot, pad) {
const map = new source_map_1.SourceMapGenerator({
file: filename.replace(/\\/g, '/'),
sourceRoot: sourceRoot.replace(/\\/g, '/')
});
let offset = 0;
if (!pad) {
offset =
source
.split(generated)
.shift()
.split(splitRE).length - 1;
}
map.setSourceContent(filename, source);
generated.split(splitRE).forEach((line, index) => {
if (!emptyRE.test(line)) {
map.addMapping({
source: filename,
original: {
line: index + 1 + offset,
column: 0
},
generated: {
line: index + 1,
column: 0
}
});
}
});
return JSON.parse(map.toString());
}
@@ -0,0 +1,82 @@
const {
getPlatformFilterTag,
normalizeNodeModules,
jsPreprocessOptions
} = require('@dcloudio/uni-cli-shared/lib/platform')
const preprocessor = require('@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/preprocess')
const FILTER_TAG = getPlatformFilterTag()
function preprocessBlock(block) {
if (block.content) {
block.content = preprocessor.preprocess(block.content, jsPreprocessOptions.context, {
type: jsPreprocessOptions.type
}).trim()
}
return block
}
module.exports = function parseCustomBlocks(descriptor, options) {
if (
process.env.UNI_PLATFORM &&
process.env.UNI_PLATFORM.indexOf('mp-') === 0 &&
!descriptor.script
) { // 临时方案:小程序平台,无script节点时,自动补充(激活componentSet,否则没法正常追加入口js,后续优化)
descriptor.script = {
type: 'script',
content: 'export default {}',
start: 100,
attrs: {},
end: 125
}
}
if (!descriptor.template || !FILTER_TAG || options.isAppNVue) {
// delete customBlocks
descriptor.customBlocks.length = 0
return descriptor
}
const modules = Object.create(null)
descriptor.customBlocks = descriptor.customBlocks.filter(block => {
if (
block.attrs.module &&
(
block.type === FILTER_TAG ||
block.attrs.lang === FILTER_TAG
)
) {
modules[block.attrs.module] = preprocessBlock(block)
return true
}
if ( // renderjs
block.attrs.module &&
(
block.type === 'renderjs' ||
block.attrs.lang === 'renderjs'
)
) {
block.type = 'renderjs'
block.attrs.lang = 'js'
descriptor.renderjs = preprocessBlock(block)
modules[block.attrs.module] = Object.assign({}, block, {
content: ''
})
}
})
if (Object.keys(modules).length) {
const filterModules = JSON.parse(JSON.stringify(modules))
Object.keys(filterModules).forEach(name => {
const filterModule = filterModules[name]
if (filterModule.attrs.src) {
filterModule.attrs.src = normalizeNodeModules(filterModule.attrs.src)
}
})
descriptor.template.attrs['filter-modules'] = Buffer.from(JSON.stringify(filterModules)).toString('base64')
}
return descriptor
}
@@ -0,0 +1,79 @@
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", {
value: true
});
const postcss = __importStar(require("postcss"));
// postcss-selector-parser does have typings but it's problematic to work with.
const selectorParser = require('postcss-selector-parser');
const once = (root) => {
root.each(function rewriteSelector (node) {
if (!node.selector) {
// handle media queries
if (node.type === 'atrule') {
if (node.name === 'media' || node.name === 'supports') {
node.each(rewriteSelector);
}
}
return;
}
node.selector = selectorParser((selectors) => {
selectors.each((selector) => {
let node = null;
// find the last child node to insert attribute selector
selector.each((n) => {
// ">>>" combinator
// and /deep/ alias for >>>, since >>> doesn't work in SASS
if (n.type === 'combinator' &&
(n.value === '>>>' || n.value === '/deep/')) {
n.value = ' ';
n.spaces.before = n.spaces.after = '';
return false;
}
// in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
if (n.type === 'pseudo' && n.value === '::v-deep') {
n.value = n.spaces.before = n.spaces.after = '';
return false;
}
if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n;
}
});
if (node) {
node.spaces.after = '';
} else {
// For deep selectors & standalone pseudo selectors,
// the attribute selectors are prepended rather than appended.
// So all leading spaces must be eliminated to avoid problems.
selector.first.spaces.before = '';
}
});
}).processSync(node.selector);
});
};
const version = Number(require('postcss/package.json').version.split('.')[0])
if (version < 8) {
const postcss = require('postcss')
module.exports = postcss.plugin('remove-scoped', function (opts) {
return once
})
} else {
module.exports = function (opts) {
return {
postcssPlugin: 'remove-scoped',
Once: once
}
}
module.exports.postcss = true
}
@@ -0,0 +1,3 @@
import * as postcss from 'postcss';
declare const _default: postcss.Plugin<any>;
export default _default;
@@ -0,0 +1,130 @@
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const postcss = __importStar(require("postcss"));
// postcss-selector-parser does have typings but it's problematic to work with.
const selectorParser = require('postcss-selector-parser');
const once = (options) => (root) => {
const id = options;
const keyframes = Object.create(null);
root.each(function rewriteSelector (node) {
if (!node.selector) {
// handle media queries
if (node.type === 'atrule') {
if (node.name === 'media' || node.name === 'supports') {
node.each(rewriteSelector);
}
else if (/-?keyframes$/.test(node.name)) {
// register keyframes
keyframes[node.params] = node.params = node.params + '-' + id;
}
}
return;
}
node.selector = selectorParser((selectors) => {
selectors.each((selector) => {
let node = null;
// find the last child node to insert attribute selector
selector.each((n) => {
// ">>>" combinator
// and /deep/ alias for >>>, since >>> doesn't work in SASS
if (n.type === 'combinator' &&
(n.value === '>>>' || n.value === '/deep/')) {
n.value = ' ';
n.spaces.before = n.spaces.after = '';
return false;
}
// in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
if (n.type === 'pseudo' && n.value === '::v-deep') {
n.value = n.spaces.before = n.spaces.after = '';
return false;
}
if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n;
}
});
if (node) {
node.spaces.after = '';
}
else {
// For deep selectors & standalone pseudo selectors,
// the attribute selectors are prepended rather than appended.
// So all leading spaces must be eliminated to avoid problems.
selector.first.spaces.before = '';
}
// fixed by xxxxxx (h5,app-plus v3 平台继续使用 attribute,其他平台使用 className)
if (
process.env.UNI_PLATFORM === 'h5' ||
(
process.env.UNI_PLATFORM === 'app-plus' &&
process.env.UNI_USING_V3
)
) {
selector.insertAfter(node, selectorParser.attribute({
attribute: id
}));
} else {
selector.insertAfter(node, selectorParser.className({
value: id
}));
}
});
}).processSync(node.selector);
});
// If keyframes are found in this <style>, find and rewrite animation names
// in declarations.
// Caveat: this only works for keyframes and animation rules in the same
// <style> element.
if (Object.keys(keyframes).length) {
root.walkDecls(decl => {
// individual animation-name declaration
if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map(v => keyframes[v.trim()] || v.trim())
.join(',');
}
// shorthand
if (/^(-\w+-)?animation$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map(v => {
const vals = v.trim().split(/\s+/);
const i = vals.findIndex(val => keyframes[val]);
if (i !== -1) {
vals.splice(i, 1, keyframes[vals[i]]);
return vals.join(' ');
}
else {
return v;
}
})
.join(',');
}
});
}
};
const version = Number(require('postcss/package.json').version.split('.')[0])
if (version < 8) {
const postcss = require('postcss')
module.exports = postcss.plugin('add-id', function (opts) {
return once(opts)
})
} else {
module.exports = function (opts) {
return {
postcssPlugin: 'add-id',
Once: once(opts)
}
}
module.exports.postcss = true
}
@@ -0,0 +1,3 @@
import * as postcss from 'postcss';
declare const _default: postcss.Plugin<unknown>;
export default _default;
@@ -0,0 +1,38 @@
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const postcss = __importStar(require("postcss"));
const once = (css) => {
css.walk(({ type, raws }) => {
if (type === 'rule' || type === 'atrule') {
if (raws.before)
raws.before = '\n';
if (raws.after)
raws.after = '\n';
}
});
};
const version = Number(require('postcss/package.json').version.split('.')[0])
if (version < 8) {
const postcss = require('postcss')
module.exports = postcss.plugin('trim', function (opts) {
return once
})
} else {
module.exports = function (opts) {
return {
postcssPlugin: 'trim',
Once: once
}
}
module.exports.postcss = true
}
@@ -0,0 +1,11 @@
export interface StylePreprocessor {
render(source: string, map: any | null, options: any): StylePreprocessorResults;
}
export interface StylePreprocessorResults {
code: string;
map?: any;
errors: Array<Error>;
}
export declare const processors: {
[key: string]: StylePreprocessor;
};
@@ -0,0 +1,87 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const merge = require('merge-source-map');
// .scss/.sass processor
const scss = {
render(source, map, options) {
const nodeSass = require('sass');
const finalOptions = Object.assign({}, options, {
data: source,
file: options.filename,
outFile: options.filename,
sourceMap: !!map
});
try {
const result = nodeSass.renderSync(finalOptions);
if (map) {
return {
code: result.css.toString(),
map: merge(map, JSON.parse(result.map.toString())),
errors: []
};
}
return { code: result.css.toString(), errors: [] };
}
catch (e) {
return { code: '', errors: [e] };
}
}
};
const sass = {
render(source, map, options) {
return scss.render(source, map, Object.assign({}, options, { indentedSyntax: true }));
}
};
// .less
const less = {
render(source, map, options) {
const nodeLess = require('less');
let result;
let error = null;
nodeLess.render(source, Object.assign({}, options, { syncImport: true }), (err, output) => {
error = err;
result = output;
});
if (error)
return { code: '', errors: [error] };
if (map) {
return {
code: result.css.toString(),
map: merge(map, result.map),
errors: []
};
}
return { code: result.css.toString(), errors: [] };
}
};
// .styl
const styl = {
render(source, map, options) {
const nodeStylus = require('stylus');
try {
const ref = nodeStylus(source);
Object.keys(options).forEach(key => ref.set(key, options[key]));
if (map)
ref.set('sourcemap', { inline: false, comment: false });
const result = ref.render();
if (map) {
return {
code: result,
map: merge(map, ref.sourcemap),
errors: []
};
}
return { code: result, errors: [] };
}
catch (e) {
return { code: '', errors: [e] };
}
}
};
exports.processors = {
less,
sass,
scss,
styl,
stylus: styl
};
@@ -0,0 +1,8 @@
import { ASTNode } from './utils';
export interface AssetURLOptions {
[name: string]: string | string[];
}
declare const _default: (userOptions?: AssetURLOptions | undefined) => {
postTransformNode: (node: ASTNode) => void;
};
export default _default;
@@ -0,0 +1,46 @@
"use strict";
// vue compiler module for transforming `<tag>:<attribute>` to `require`
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("./utils");
const defaultOptions = {
audio: 'src',
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
};
exports.default = (userOptions) => {
const options = userOptions
? Object.assign({}, defaultOptions, userOptions)
: defaultOptions;
return {
postTransformNode: (node) => {
transform(node, options);
}
};
};
function transform(node, options) {
for (const tag in options) {
if ((tag === '*' || node.tag === tag) && node.attrs) {
const attributes = options[tag];
if (typeof attributes === 'string') {
node.attrs.some(attr => rewrite(attr, attributes));
}
else if (Array.isArray(attributes)) {
attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item)));
}
}
}
}
function rewrite(attr, name) {
if (attr.name === name) {
const value = attr.value;
// only transform static URLs
if (value.charAt(0) === '"' && value.charAt(value.length - 1) === '"') {
attr.value = utils_1.urlToRequire(value.slice(1, -1));
return true;
}
}
return false;
}
@@ -0,0 +1,5 @@
import { ASTNode } from './utils';
declare const _default: () => {
postTransformNode: (node: ASTNode) => void;
};
export default _default;
@@ -0,0 +1,51 @@
"use strict";
// vue compiler module for transforming `img:srcset` to a number of `require`s
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("./utils");
exports.default = () => ({
postTransformNode: (node) => {
transform(node);
}
});
// http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g;
function transform(node) {
const tags = ['img', 'source'];
if (tags.indexOf(node.tag) !== -1 && node.attrs) {
node.attrs.forEach(attr => {
if (attr.name === 'srcset') {
// same logic as in transform-require.js
const value = attr.value;
const isStatic = value.charAt(0) === '"' && value.charAt(value.length - 1) === '"';
if (!isStatic) {
return;
}
const imageCandidates = value
.substr(1, value.length - 2)
.split(',')
.map(s => {
// The attribute value arrives here with all whitespace, except
// normal spaces, represented by escape sequences
const [url, descriptor] = s
.replace(escapedSpaceCharacters, ' ')
.trim()
.split(' ', 2);
return { require: utils_1.urlToRequire(url), descriptor };
});
// "require(url1)"
// "require(url1) 1x"
// "require(url1), require(url2)"
// "require(url1), require(url2) 2x"
// "require(url1) 1x, require(url2)"
// "require(url1) 1x, require(url2) 2x"
const code = imageCandidates
.map(({ require, descriptor }) => `${require} + "${descriptor ? ' ' + descriptor : ''}, " + `)
.join('')
.slice(0, -6)
.concat('"')
.replace(/ \+ ""$/, '');
attr.value = code;
}
});
}
}
@@ -0,0 +1,9 @@
export interface Attr {
name: string;
value: string;
}
export interface ASTNode {
tag: string;
attrs: Attr[];
}
export declare function urlToRequire(url: string): string;
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const url_1 = require("url");
function urlToRequire(url) {
const returnValue = `"${url}"`;
// same logic as in transform-require.js
const firstChar = url.charAt(0);
if (firstChar === '.' || firstChar === '~' || firstChar === '@') {
if (firstChar === '~') {
const secondChar = url.charAt(1);
url = url.slice(secondChar === '/' ? 2 : 1);
}
const uriParts = parseUriParts(url);
if (!uriParts.hash) {
return `require("${url}")`;
}
else {
// support uri fragment case by excluding it from
// the require and instead appending it as string;
// assuming that the path part is sufficient according to
// the above caseing(t.i. no protocol-auth-host parts expected)
return `require("${uriParts.path}") + "${uriParts.hash}"`;
}
}
return returnValue;
}
exports.urlToRequire = urlToRequire;
/**
* vuejs/component-compiler-utils#22 Support uri fragment in transformed require
* @param urlString an url as a string
*/
function parseUriParts(urlString) {
// initialize return value
const returnValue = url_1.parse('');
if (urlString) {
// A TypeError is thrown if urlString is not a string
// @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
if ('string' === typeof urlString) {
// check is an uri
return url_1.parse(urlString); // take apart the uri
}
}
return returnValue;
}
@@ -0,0 +1,40 @@
import { SFCDescriptor } from './parse';
export interface StartOfSourceMap {
file?: string;
sourceRoot?: string;
}
export interface RawSourceMap extends StartOfSourceMap {
version: string;
sources: string[];
names: string[];
sourcesContent?: string[];
mappings: string;
}
export interface VueTemplateCompiler {
parseComponent(source: string, options?: any): SFCDescriptor;
compile(template: string, options: VueTemplateCompilerOptions): VueTemplateCompilerResults;
ssrCompile(template: string, options: VueTemplateCompilerOptions): VueTemplateCompilerResults;
}
export interface VueTemplateCompilerOptions {
modules?: Object[];
outputSourceRange?: boolean;
whitespace?: 'preserve' | 'condense';
directives?: {
[key: string]: Function;
};
}
export interface VueTemplateCompilerParseOptions {
pad?: 'line' | 'space';
}
export interface ErrorWithRange {
msg: string;
start: number;
end: number;
}
export interface VueTemplateCompilerResults {
ast: Object | undefined;
render: string;
staticRenderFns: string[];
errors: (string | ErrorWithRange)[];
tips: (string | ErrorWithRange)[];
}
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,143 @@
const postcss = require('postcss')
import { ProcessOptions, LazyResult } from 'postcss'
import trimPlugin from './stylePlugins/trim'
import scopedPlugin from './stylePlugins/scoped'
import {
processors,
StylePreprocessor,
StylePreprocessorResults
} from './styleProcessors'
export interface StyleCompileOptions {
source: string
filename: string
id: string
map?: any
scoped?: boolean
trim?: boolean
preprocessLang?: string
preprocessOptions?: any
postcssOptions?: any
postcssPlugins?: any[]
}
export interface AsyncStyleCompileOptions extends StyleCompileOptions {
isAsync?: boolean
}
export interface StyleCompileResults {
code: string
map: any | void
rawResult: LazyResult | void
errors: string[]
}
export function compileStyle(
options: StyleCompileOptions
): StyleCompileResults {
return doCompileStyle({ ...options, isAsync: false })
}
export function compileStyleAsync(
options: StyleCompileOptions
): Promise<StyleCompileResults> {
return Promise.resolve(doCompileStyle({ ...options, isAsync: true }))
}
export function doCompileStyle(
options: AsyncStyleCompileOptions
): StyleCompileResults {
const {
filename,
id,
scoped = true,
trim = true,
preprocessLang,
postcssOptions,
postcssPlugins
} = options
const preprocessor = preprocessLang && processors[preprocessLang]
const preProcessedSource = preprocessor && preprocess(options, preprocessor)
const map = preProcessedSource ? preProcessedSource.map : options.map
const source = preProcessedSource ? preProcessedSource.code : options.source
const plugins = (postcssPlugins || []).slice()
if (trim) {
plugins.push(trimPlugin())
}
if (scoped) {
plugins.push(scopedPlugin(id))
}
const postCSSOptions: ProcessOptions = {
...postcssOptions,
to: filename,
from: filename
}
if (map) {
postCSSOptions.map = {
inline: false,
annotation: false,
prev: map
}
}
let result, code, outMap
const errors: any[] = []
if (preProcessedSource && preProcessedSource.errors.length) {
errors.push(...preProcessedSource.errors)
}
try {
result = postcss(plugins).process(source, postCSSOptions)
// In async mode, return a promise.
if (options.isAsync) {
return result
.then(
(result: LazyResult): StyleCompileResults => ({
code: result.css || '',
map: result.map && result.map.toJSON(),
errors,
rawResult: result
})
)
.catch(
(error: Error): StyleCompileResults => ({
code: '',
map: undefined,
errors: [...errors, error.message],
rawResult: undefined
})
)
}
// force synchronous transform (we know we only have sync plugins)
code = result.css
outMap = result.map
} catch (e) {
errors.push(e)
}
return {
code: code || ``,
map: outMap && outMap.toJSON(),
errors,
rawResult: result
}
}
function preprocess(
options: StyleCompileOptions,
preprocessor: StylePreprocessor
): StylePreprocessorResults {
return preprocessor.render(
options.source,
options.map,
Object.assign(
{
filename: options.filename
},
options.preprocessOptions
)
)
}
@@ -0,0 +1,194 @@
import {
VueTemplateCompiler,
VueTemplateCompilerOptions,
ErrorWithRange
} from './types'
import assetUrlsModule, {
AssetURLOptions
} from './templateCompilerModules/assetUrl'
import srcsetModule from './templateCompilerModules/srcset'
const consolidate = require('consolidate')
const transpile = require('vue-template-es2015-compiler')
export interface TemplateCompileOptions {
source: string
filename: string
compiler: VueTemplateCompiler
compilerOptions?: VueTemplateCompilerOptions
transformAssetUrls?: AssetURLOptions | boolean
preprocessLang?: string
preprocessOptions?: any
transpileOptions?: any
isProduction?: boolean
isFunctional?: boolean
optimizeSSR?: boolean
prettify?: boolean
}
export interface TemplateCompileResult {
ast: Object | undefined
code: string
source: string
tips: (string | ErrorWithRange)[]
errors: (string | ErrorWithRange)[]
}
export function compileTemplate(
options: TemplateCompileOptions
): TemplateCompileResult {
const { preprocessLang } = options
const preprocessor = preprocessLang && consolidate[preprocessLang]
if (preprocessor) {
return actuallyCompile(
Object.assign({}, options, {
source: preprocess(options, preprocessor)
})
)
} else if (preprocessLang) {
return {
ast: {},
code: `var render = function () {}\n` + `var staticRenderFns = []\n`,
source: options.source,
tips: [
`Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`
],
errors: [
`Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`
]
}
} else {
return actuallyCompile(options)
}
}
function preprocess(
options: TemplateCompileOptions,
preprocessor: any
): string {
const { source, filename, preprocessOptions } = options
const finalPreprocessOptions = Object.assign(
{
filename
},
preprocessOptions
)
// Consolidate exposes a callback based API, but the callback is in fact
// called synchronously for most templating engines. In our case, we have to
// expose a synchronous API so that it is usable in Jest transforms (which
// have to be sync because they are applied via Node.js require hooks)
let res: any, err
preprocessor.render(
source,
finalPreprocessOptions,
(_err: Error | null, _res: string) => {
if (_err) err = _err
res = _res
}
)
if (err) throw err
return res
}
function actuallyCompile(
options: TemplateCompileOptions
): TemplateCompileResult {
const {
source,
compiler,
compilerOptions = {},
transpileOptions = {},
transformAssetUrls,
isProduction = process.env.NODE_ENV === 'production',
isFunctional = false,
optimizeSSR = false,
prettify = true
} = options
const compile =
optimizeSSR && compiler.ssrCompile ? compiler.ssrCompile : compiler.compile
let finalCompilerOptions = compilerOptions
if (transformAssetUrls) {
const builtInModules = [
transformAssetUrls === true
? assetUrlsModule()
: assetUrlsModule(transformAssetUrls),
srcsetModule()
]
finalCompilerOptions = Object.assign({}, compilerOptions, {
modules: [...builtInModules, ...(compilerOptions.modules || [])],
filename: options.filename
})
}
const { ast, render, staticRenderFns, tips, errors } = compile(
source,
finalCompilerOptions
)
if (errors && errors.length) {
return {
ast,
code: `var render = function () {}\n` + `var staticRenderFns = []\n`,
source,
tips,
errors
}
} else {
const finalTranspileOptions = Object.assign({}, transpileOptions, {
transforms: Object.assign({}, transpileOptions.transforms, {
stripWithFunctional: isFunctional
})
})
const toFunction = (code: string): string => {
return `function (${isFunctional ? `_h,_vm` : ``}) {${code}}`
}
// transpile code with vue-template-es2015-compiler, which is a forked
// version of Buble that applies ES2015 transforms + stripping `with` usage
let code =
transpile(
`var __render__ = ${toFunction(render)}\n` +
`var __staticRenderFns__ = [${staticRenderFns.map(toFunction)}]`,
finalTranspileOptions
) + `\n`
// #23 we use __render__ to avoid `render` not being prefixed by the
// transpiler when stripping with, but revert it back to `render` to
// maintain backwards compat
code = code.replace(/\s__(render|staticRenderFns)__\s/g, ' $1 ')
if (!isProduction) {
// mark with stripped (this enables Vue to use correct runtime proxy
// detection)
code += `render._withStripped = true`
if (prettify) {
try {
code = require('prettier').format(code, {
semi: false,
parser: 'babel'
})
} catch (e) {
tips.push(
`Failed to prettify component ${options.filename} template source after compilation.`
)
}
}
}
return {
ast,
code,
source,
tips,
errors
}
}
}
@@ -0,0 +1,28 @@
import { parse, SFCBlock, SFCCustomBlock, SFCDescriptor } from './parse'
import {
compileTemplate,
TemplateCompileOptions,
TemplateCompileResult
} from './compileTemplate'
import {
compileStyle,
compileStyleAsync,
StyleCompileOptions,
StyleCompileResults
} from './compileStyle'
// API
export { parse, compileTemplate, compileStyle, compileStyleAsync }
// types
export {
SFCBlock,
SFCCustomBlock,
SFCDescriptor,
TemplateCompileOptions,
TemplateCompileResult,
StyleCompileOptions,
StyleCompileResults
}
@@ -0,0 +1,123 @@
import { SourceMapGenerator } from 'source-map'
import {
RawSourceMap,
VueTemplateCompiler,
VueTemplateCompilerParseOptions
} from './types'
const hash = require('hash-sum')
const cache = require('lru-cache')(100)
const splitRE = /\r?\n/g
const emptyRE = /^(?:\/\/)?\s*$/
export interface ParseOptions {
source: string
filename?: string
compiler: VueTemplateCompiler
compilerParseOptions?: VueTemplateCompilerParseOptions
sourceRoot?: string
needMap?: boolean
}
export interface SFCCustomBlock {
type: string
content: string
attrs: { [key: string]: string | true }
start: number
end: number
map?: RawSourceMap
}
export interface SFCBlock extends SFCCustomBlock {
lang?: string
src?: string
scoped?: boolean
module?: string | boolean
}
export interface SFCDescriptor {
template: SFCBlock | null
script: SFCBlock | null
styles: SFCBlock[]
customBlocks: SFCCustomBlock[]
}
export function parse(options: ParseOptions): SFCDescriptor {
const {
source,
filename = '',
compiler,
compilerParseOptions = { pad: 'line' } as VueTemplateCompilerParseOptions,
sourceRoot = '',
needMap = true
} = options
const cacheKey = hash(filename + source)
let output: SFCDescriptor = cache.get(cacheKey)
if (output) return output
output = compiler.parseComponent(source, compilerParseOptions)
if (needMap) {
if (output.script && !output.script.src) {
output.script.map = generateSourceMap(
filename,
source,
output.script.content,
sourceRoot,
compilerParseOptions.pad
)
}
if (output.styles) {
output.styles.forEach(style => {
if (!style.src) {
style.map = generateSourceMap(
filename,
source,
style.content,
sourceRoot,
compilerParseOptions.pad
)
}
})
}
}
cache.set(cacheKey, output)
return output
}
function generateSourceMap(
filename: string,
source: string,
generated: string,
sourceRoot: string,
pad?: 'line' | 'space'
): RawSourceMap {
const map = new SourceMapGenerator({
file: filename.replace(/\\/g, '/'),
sourceRoot: sourceRoot.replace(/\\/g, '/')
})
let offset = 0
if (!pad) {
offset =
source
.split(generated)
.shift()!
.split(splitRE).length - 1
}
map.setSourceContent(filename, source)
generated.split(splitRE).forEach((line, index) => {
if (!emptyRE.test(line)) {
map.addMapping({
source: filename,
original: {
line: index + 1 + offset,
column: 0
},
generated: {
line: index + 1,
column: 0
}
})
}
})
return JSON.parse(map.toString())
}
@@ -0,0 +1,101 @@
import { Root } from 'postcss'
import * as postcss from 'postcss'
// postcss-selector-parser does have typings but it's problematic to work with.
const selectorParser = require('postcss-selector-parser')
export default postcss.plugin('add-id', (options: any) => (root: Root) => {
const id: string = options
const keyframes = Object.create(null)
root.each(function rewriteSelector(node: any) {
if (!node.selector) {
// handle media queries
if (node.type === 'atrule') {
if (node.name === 'media' || node.name === 'supports') {
node.each(rewriteSelector)
} else if (/-?keyframes$/.test(node.name)) {
// register keyframes
keyframes[node.params] = node.params = node.params + '-' + id
}
}
return
}
node.selector = selectorParser((selectors: any) => {
selectors.each((selector: any) => {
let node: any = null
// find the last child node to insert attribute selector
selector.each((n: any) => {
// ">>>" combinator
// and /deep/ alias for >>>, since >>> doesn't work in SASS
if (
n.type === 'combinator' &&
(n.value === '>>>' || n.value === '/deep/')
) {
n.value = ' '
n.spaces.before = n.spaces.after = ''
return false
}
// in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
if (n.type === 'pseudo' && n.value === '::v-deep') {
n.value = n.spaces.before = n.spaces.after = ''
return false
}
if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n
}
})
if (node) {
node.spaces.after = ''
} else {
// For deep selectors & standalone pseudo selectors,
// the attribute selectors are prepended rather than appended.
// So all leading spaces must be eliminated to avoid problems.
selector.first.spaces.before = ''
}
selector.insertAfter(
node,
selectorParser.attribute({
attribute: id
})
)
})
}).processSync(node.selector)
})
// If keyframes are found in this <style>, find and rewrite animation names
// in declarations.
// Caveat: this only works for keyframes and animation rules in the same
// <style> element.
if (Object.keys(keyframes).length) {
root.walkDecls(decl => {
// individual animation-name declaration
if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map(v => keyframes[v.trim()] || v.trim())
.join(',')
}
// shorthand
if (/^(-\w+-)?animation$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map(v => {
const vals = v.trim().split(/\s+/)
const i = vals.findIndex(val => keyframes[val])
if (i !== -1) {
vals.splice(i, 1, keyframes[vals[i]])
return vals.join(' ')
} else {
return v
}
})
.join(',')
}
})
}
})
@@ -0,0 +1,11 @@
import { Root } from 'postcss'
import * as postcss from 'postcss'
export default postcss.plugin('trim', () => (css: Root) => {
css.walk(({ type, raws }) => {
if (type === 'rule' || type === 'atrule') {
if (raws.before) raws.before = '\n'
if (raws.after) raws.after = '\n'
}
})
})
@@ -0,0 +1,133 @@
const merge = require('merge-source-map')
export interface StylePreprocessor {
render(
source: string,
map: any | null,
options: any
): StylePreprocessorResults
}
export interface StylePreprocessorResults {
code: string
map?: any
errors: Array<Error>
}
// .scss/.sass processor
const scss: StylePreprocessor = {
render(
source: string,
map: any | null,
options: any
): StylePreprocessorResults {
const nodeSass = require('sass')
const finalOptions = Object.assign({}, options, {
data: source,
file: options.filename,
outFile: options.filename,
sourceMap: !!map
})
try {
const result = nodeSass.renderSync(finalOptions)
if (map) {
return {
code: result.css.toString(),
map: merge(map, JSON.parse(result.map.toString())),
errors: []
}
}
return { code: result.css.toString(), errors: [] }
} catch (e) {
return { code: '', errors: [e] }
}
}
}
const sass = {
render(
source: string,
map: any | null,
options: any
): StylePreprocessorResults {
return scss.render(
source,
map,
Object.assign({}, options, { indentedSyntax: true })
)
}
}
// .less
const less = {
render(
source: string,
map: any | null,
options: any
): StylePreprocessorResults {
const nodeLess = require('less')
let result: any
let error: Error | null = null
nodeLess.render(
source,
Object.assign({}, options, { syncImport: true }),
(err: Error | null, output: any) => {
error = err
result = output
}
)
if (error) return { code: '', errors: [error] }
if (map) {
return {
code: result.css.toString(),
map: merge(map, result.map),
errors: []
}
}
return { code: result.css.toString(), errors: [] }
}
}
// .styl
const styl = {
render(
source: string,
map: any | null,
options: any
): StylePreprocessorResults {
const nodeStylus = require('stylus')
try {
const ref = nodeStylus(source)
Object.keys(options).forEach(key => ref.set(key, options[key]))
if (map) ref.set('sourcemap', { inline: false, comment: false })
const result = ref.render()
if (map) {
return {
code: result,
map: merge(map, ref.sourcemap),
errors: []
}
}
return { code: result, errors: [] }
} catch (e) {
return { code: '', errors: [e] }
}
}
}
export const processors: { [key: string]: StylePreprocessor } = {
less,
sass,
scss,
styl,
stylus: styl
}
@@ -0,0 +1,53 @@
// vue compiler module for transforming `<tag>:<attribute>` to `require`
import { urlToRequire, ASTNode, Attr } from './utils'
export interface AssetURLOptions {
[name: string]: string | string[]
}
const defaultOptions: AssetURLOptions = {
audio: 'src',
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}
export default (userOptions?: AssetURLOptions) => {
const options = userOptions
? Object.assign({}, defaultOptions, userOptions)
: defaultOptions
return {
postTransformNode: (node: ASTNode) => {
transform(node, options)
}
}
}
function transform(node: ASTNode, options: AssetURLOptions) {
for (const tag in options) {
if ((tag === '*' || node.tag === tag) && node.attrs) {
const attributes = options[tag]
if (typeof attributes === 'string') {
node.attrs.some(attr => rewrite(attr, attributes))
} else if (Array.isArray(attributes)) {
attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item)))
}
}
}
}
function rewrite(attr: Attr, name: string) {
if (attr.name === name) {
const value = attr.value
// only transform static URLs
if (value.charAt(0) === '"' && value.charAt(value.length - 1) === '"') {
attr.value = urlToRequire(value.slice(1, -1))
return true
}
}
return false
}
@@ -0,0 +1,66 @@
// vue compiler module for transforming `img:srcset` to a number of `require`s
import { urlToRequire, ASTNode } from './utils'
interface ImageCandidate {
require: string
descriptor: string
}
export default () => ({
postTransformNode: (node: ASTNode) => {
transform(node)
}
})
// http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
function transform(node: ASTNode) {
const tags = ['img', 'source']
if (tags.indexOf(node.tag) !== -1 && node.attrs) {
node.attrs.forEach(attr => {
if (attr.name === 'srcset') {
// same logic as in transform-require.js
const value = attr.value
const isStatic =
value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
if (!isStatic) {
return
}
const imageCandidates: ImageCandidate[] = value
.substr(1, value.length - 2)
.split(',')
.map(s => {
// The attribute value arrives here with all whitespace, except
// normal spaces, represented by escape sequences
const [url, descriptor] = s
.replace(escapedSpaceCharacters, ' ')
.trim()
.split(' ', 2)
return { require: urlToRequire(url), descriptor }
})
// "require(url1)"
// "require(url1) 1x"
// "require(url1), require(url2)"
// "require(url1), require(url2) 2x"
// "require(url1) 1x, require(url2)"
// "require(url1) 1x, require(url2) 2x"
const code = imageCandidates
.map(
({ require, descriptor }) =>
`${require} + "${descriptor ? ' ' + descriptor : ''}, " + `
)
.join('')
.slice(0, -6)
.concat('"')
.replace(/ \+ ""$/, '')
attr.value = code
}
})
}
}
@@ -0,0 +1,54 @@
export interface Attr {
name: string
value: string
}
export interface ASTNode {
tag: string
attrs: Attr[]
}
import { UrlWithStringQuery, parse as uriParse } from 'url'
export function urlToRequire(url: string): string {
const returnValue = `"${url}"`
// same logic as in transform-require.js
const firstChar = url.charAt(0)
if (firstChar === '.' || firstChar === '~' || firstChar === '@') {
if (firstChar === '~') {
const secondChar = url.charAt(1)
url = url.slice(secondChar === '/' ? 2 : 1)
}
const uriParts = parseUriParts(url)
if (!uriParts.hash) {
return `require("${url}")`
} else {
// support uri fragment case by excluding it from
// the require and instead appending it as string;
// assuming that the path part is sufficient according to
// the above caseing(t.i. no protocol-auth-host parts expected)
return `require("${uriParts.path}") + "${uriParts.hash}"`
}
}
return returnValue
}
/**
* vuejs/component-compiler-utils#22 Support uri fragment in transformed require
* @param urlString an url as a string
*/
function parseUriParts(urlString: string): UrlWithStringQuery {
// initialize return value
const returnValue: UrlWithStringQuery = uriParse('')
if (urlString) {
// A TypeError is thrown if urlString is not a string
// @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
if ('string' === typeof urlString) {
// check is an uri
return uriParse(urlString) // take apart the uri
}
}
return returnValue
}
@@ -0,0 +1,56 @@
import { SFCDescriptor } from './parse'
export interface StartOfSourceMap {
file?: string
sourceRoot?: string
}
export interface RawSourceMap extends StartOfSourceMap {
version: string
sources: string[]
names: string[]
sourcesContent?: string[]
mappings: string
}
export interface VueTemplateCompiler {
parseComponent(source: string, options?: any): SFCDescriptor
compile(
template: string,
options: VueTemplateCompilerOptions
): VueTemplateCompilerResults
ssrCompile(
template: string,
options: VueTemplateCompilerOptions
): VueTemplateCompilerResults
}
// we'll just shim this much for now - in the future these types
// should come from vue-template-compiler directly, or this package should be
// part of the vue monorepo.
export interface VueTemplateCompilerOptions {
modules?: Object[]
outputSourceRange?: boolean
whitespace?: 'preserve' | 'condense'
directives?: { [key: string]: Function }
}
export interface VueTemplateCompilerParseOptions {
pad?: 'line' | 'space'
}
export interface ErrorWithRange {
msg: string
start: number
end: number
}
export interface VueTemplateCompilerResults {
ast: Object | undefined
render: string
staticRenderFns: string[]
errors: (string | ErrorWithRange)[]
tips: (string | ErrorWithRange)[]
}
@@ -0,0 +1,873 @@
# API Documentation
*Please use only this documented API when working with the parser. Methods
not documented here are subject to change at any point.*
## `parser` function
This is the module's main entry point.
```js
const parser = require('postcss-selector-parser');
```
### `parser([transform], [options])`
Creates a new `processor` instance
```js
const processor = parser();
```
Or, with optional transform function
```js
const transform = selectors => {
selectors.walkUniversals(selector => {
selector.remove();
});
};
const processor = parser(transform)
// Example
const result = processor.processSync('*.class');
// => .class
```
[See processor documentation](#processor)
Arguments:
* `transform (function)`: Provide a function to work with the parsed AST.
* `options (object)`: Provide default options for all calls on the returned `Processor`.
### `parser.attribute([props])`
Creates a new attribute selector.
```js
parser.attribute({attribute: 'href'});
// => [href]
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.className([props])`
Creates a new class selector.
```js
parser.className({value: 'button'});
// => .button
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.combinator([props])`
Creates a new selector combinator.
```js
parser.combinator({value: '+'});
// => +
```
Arguments:
* `props (object)`: The new node's properties.
Notes:
* **Descendant Combinators** The value of descendant combinators created by the
parser always just a single space (`" "`). For descendant selectors with no
comments, additional space is now stored in `node.spaces.before`. Depending
on the location of comments, additional spaces may be stored in
`node.raws.spaces.before`, `node.raws.spaces.after`, or `node.raws.value`.
* **Named Combinators** Although, nonstandard and unlikely to ever become a standard,
named combinators like `/deep/` and `/for/` are parsed as combinators. The
`node.value` is name after being unescaped and normalized as lowercase. The
original value for the combinator name is stored in `node.raws.value`.
### `parser.comment([props])`
Creates a new comment.
```js
parser.comment({value: '/* Affirmative, Dave. I read you. */'});
// => /* Affirmative, Dave. I read you. */
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.id([props])`
Creates a new id selector.
```js
parser.id({value: 'search'});
// => #search
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.nesting([props])`
Creates a new nesting selector.
```js
parser.nesting();
// => &
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.pseudo([props])`
Creates a new pseudo selector.
```js
parser.pseudo({value: '::before'});
// => ::before
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.root([props])`
Creates a new root node.
```js
parser.root();
// => (empty)
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.selector([props])`
Creates a new selector node.
```js
parser.selector();
// => (empty)
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.string([props])`
Creates a new string node.
```js
parser.string();
// => (empty)
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.tag([props])`
Creates a new tag selector.
```js
parser.tag({value: 'button'});
// => button
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.universal([props])`
Creates a new universal selector.
```js
parser.universal();
// => *
```
Arguments:
* `props (object)`: The new node's properties.
## Node types
### `node.type`
A string representation of the selector type. It can be one of the following;
`attribute`, `class`, `combinator`, `comment`, `id`, `nesting`, `pseudo`,
`root`, `selector`, `string`, `tag`, or `universal`. Note that for convenience,
these constants are exposed on the main `parser` as uppercased keys. So for
example you can get `id` by querying `parser.ID`.
```js
parser.attribute({attribute: 'href'}).type;
// => 'attribute'
```
### `node.parent`
Returns the parent node.
```js
root.nodes[0].parent === root;
```
### `node.toString()`, `String(node)`, or `'' + node`
Returns a string representation of the node.
```js
const id = parser.id({value: 'search'});
console.log(String(id));
// => #search
```
### `node.next()` & `node.prev()`
Returns the next/previous child of the parent node.
```js
const next = id.next();
if (next && next.type !== 'combinator') {
throw new Error('Qualified IDs are not allowed!');
}
```
### `node.replaceWith(node)`
Replace a node with another.
```js
const attr = selectors.first.first;
const className = parser.className({value: 'test'});
attr.replaceWith(className);
```
Arguments:
* `node`: The node to substitute the original with.
### `node.remove()`
Removes the node from its parent node.
```js
if (node.type === 'id') {
node.remove();
}
```
### `node.clone()`
Returns a copy of a node, detached from any parent containers that the
original might have had.
```js
const cloned = parser.id({value: 'search'});
String(cloned);
// => #search
```
### `node.isAtPosition(line, column)`
Return a `boolean` indicating whether this node includes the character at the
position of the given line and column. Returns `undefined` if the nodes lack
sufficient source metadata to determine the position.
Arguments:
* `line`: 1-index based line number relative to the start of the selector.
* `column`: 1-index based column number relative to the start of the selector.
### `node.spaces`
Extra whitespaces around the node will be moved into `node.spaces.before` and
`node.spaces.after`. So for example, these spaces will be moved as they have
no semantic meaning:
```css
h1 , h2 {}
```
For descendent selectors, the value is always a single space.
```css
h1 h2 {}
```
Additional whitespace is found in either the `node.spaces.before` and `node.spaces.after` depending on the presence of comments or other whitespace characters. If the actual whitespace does not start or end with a single space, the node's raw value is set to the actual space(s) found in the source.
### `node.source`
An object describing the node's start/end, line/column source position.
Within the following CSS, the `.bar` class node ...
```css
.foo,
.bar {}
```
... will contain the following `source` object.
```js
source: {
start: {
line: 2,
column: 3
},
end: {
line: 2,
column: 6
}
}
```
### `node.sourceIndex`
The zero-based index of the node within the original source string.
Within the following CSS, the `.baz` class node will have a `sourceIndex` of `12`.
```css
.foo, .bar, .baz {}
```
## Container types
The `root`, `selector`, and `pseudo` nodes have some helper methods for working
with their children.
### `container.nodes`
An array of the container's children.
```js
// Input: h1 h2
selectors.at(0).nodes.length // => 3
selectors.at(0).nodes[0].value // => 'h1'
selectors.at(0).nodes[1].value // => ' '
```
### `container.first` & `container.last`
The first/last child of the container.
```js
selector.first === selector.nodes[0];
selector.last === selector.nodes[selector.nodes.length - 1];
```
### `container.at(index)`
Returns the node at position `index`.
```js
selector.at(0) === selector.first;
selector.at(0) === selector.nodes[0];
```
Arguments:
* `index`: The index of the node to return.
### `container.atPosition(line, column)`
Returns the node at the source position `index`.
```js
selector.at(0) === selector.first;
selector.at(0) === selector.nodes[0];
```
Arguments:
* `index`: The index of the node to return.
### `container.index(node)`
Return the index of the node within its container.
```js
selector.index(selector.nodes[2]) // => 2
```
Arguments:
* `node`: A node within the current container.
### `container.length`
Proxy to the length of the container's nodes.
```js
container.length === container.nodes.length
```
### `container` Array iterators
The container class provides proxies to certain Array methods; these are:
* `container.map === container.nodes.map`
* `container.reduce === container.nodes.reduce`
* `container.every === container.nodes.every`
* `container.some === container.nodes.some`
* `container.filter === container.nodes.filter`
* `container.sort === container.nodes.sort`
Note that these methods only work on a container's immediate children; recursive
iteration is provided by `container.walk`.
### `container.each(callback)`
Iterate the container's immediate children, calling `callback` for each child.
You may return `false` within the callback to break the iteration.
```js
let className;
selectors.each((selector, index) => {
if (selector.type === 'class') {
className = selector.value;
return false;
}
});
```
Note that unlike `Array#forEach()`, this iterator is safe to use whilst adding
or removing nodes from the container.
Arguments:
* `callback (function)`: A function to call for each node, which receives `node`
and `index` arguments.
### `container.walk(callback)`
Like `container#each`, but will also iterate child nodes as long as they are
`container` types.
```js
selectors.walk((selector, index) => {
// all nodes
});
```
Arguments:
* `callback (function)`: A function to call for each node, which receives `node`
and `index` arguments.
This iterator is safe to use whilst mutating `container.nodes`,
like `container#each`.
### `container.walk` proxies
The container class provides proxy methods for iterating over types of nodes,
so that it is easier to write modules that target specific selectors. Those
methods are:
* `container.walkAttributes`
* `container.walkClasses`
* `container.walkCombinators`
* `container.walkComments`
* `container.walkIds`
* `container.walkNesting`
* `container.walkPseudos`
* `container.walkTags`
* `container.walkUniversals`
### `container.split(callback)`
This method allows you to split a group of nodes by returning `true` from
a callback. It returns an array of arrays, where each inner array corresponds
to the groups that you created via the callback.
```js
// (input) => h1 h2>>h3
const list = selectors.first.split(selector => {
return selector.type === 'combinator';
});
// (node values) => [['h1', ' '], ['h2', '>>'], ['h3']]
```
Arguments:
* `callback (function)`: A function to call for each node, which receives `node`
as an argument.
### `container.prepend(node)` & `container.append(node)`
Add a node to the start/end of the container. Note that doing so will set
the parent property of the node to this container.
```js
const id = parser.id({value: 'search'});
selector.append(id);
```
Arguments:
* `node`: The node to add.
### `container.insertBefore(old, new)` & `container.insertAfter(old, new)`
Add a node before or after an existing node in a container:
```js
selectors.walk(selector => {
if (selector.type !== 'class') {
const className = parser.className({value: 'theme-name'});
selector.parent.insertAfter(selector, className);
}
});
```
Arguments:
* `old`: The existing node in the container.
* `new`: The new node to add before/after the existing node.
### `container.removeChild(node)`
Remove the node from the container. Note that you can also use
`node.remove()` if you would like to remove just a single node.
```js
selector.length // => 2
selector.remove(id)
selector.length // => 1;
id.parent // undefined
```
Arguments:
* `node`: The node to remove.
### `container.removeAll()` or `container.empty()`
Remove all children from the container.
```js
selector.removeAll();
selector.length // => 0
```
## Root nodes
A root node represents a comma separated list of selectors. Indeed, all
a root's `toString()` method does is join its selector children with a ','.
Other than this, it has no special functionality and acts like a container.
### `root.trailingComma`
This will be set to `true` if the input has a trailing comma, in order to
support parsing of legacy CSS hacks.
## Selector nodes
A selector node represents a single complex selector. For example, this
selector string `h1 h2 h3, [href] > p`, is represented as two selector nodes.
It has no special functionality of its own.
## Pseudo nodes
A pseudo selector extends a container node; if it has any parameters of its
own (such as `h1:not(h2, h3)`), they will be its children. Note that the pseudo
`value` will always contain the colons preceding the pseudo identifier. This
is so that both `:before` and `::before` are properly represented in the AST.
## Attribute nodes
### `attribute.quoted`
Returns `true` if the attribute's value is wrapped in quotation marks, false if it is not.
Remains `undefined` if there is no attribute value.
```css
[href=foo] /* false */
[href='foo'] /* true */
[href="foo"] /* true */
[href] /* undefined */
```
### `attribute.qualifiedAttribute`
Returns the attribute name qualified with the namespace if one is given.
### `attribute.offsetOf(part)`
Returns the offset of the attribute part specified relative to the
start of the node of the output string. This is useful in raising
error messages about a specific part of the attribute, especially
in combination with `attribute.sourceIndex`.
Returns `-1` if the name is invalid or the value doesn't exist in this
attribute.
The legal values for `part` are:
* `"ns"` - alias for "namespace"
* `"namespace"` - the namespace if it exists.
* `"attribute"` - the attribute name
* `"attributeNS"` - the start of the attribute or its namespace
* `"operator"` - the match operator of the attribute
* `"value"` - The value (string or identifier)
* `"insensitive"` - the case insensitivity flag
### `attribute.raws.unquoted`
Returns the unquoted content of the attribute's value.
Remains `undefined` if there is no attribute value.
```css
[href=foo] /* foo */
[href='foo'] /* foo */
[href="foo"] /* foo */
[href] /* undefined */
```
### `attribute.spaces`
Like `node.spaces` with the `before` and `after` values containing the spaces
around the element, the parts of the attribute can also have spaces before
and after them. The for each of `attribute`, `operator`, `value` and
`insensitive` there is corresponding property of the same nam in
`node.spaces` that has an optional `before` or `after` string containing only
whitespace.
Note that corresponding values in `attributes.raws.spaces` contain values
including any comments. If set, these values will override the
`attribute.spaces` value. Take care to remove them if changing
`attribute.spaces`.
### `attribute.raws`
The raws object stores comments and other information necessary to re-render
the node exactly as it was in the source.
If a comment is embedded within the identifiers for the `namespace`, `attribute`
or `value` then a property is placed in the raws for that value containing the full source of the propery including comments.
If a comment is embedded within the space between parts of the attribute
then the raw for that space is set accordingly.
Setting an attribute's property `raws` value to be deleted.
For now, changing the spaces required also updating or removing any of the
raws values that override them.
Example: `[ /*before*/ href /* after-attr */ = /* after-operator */ te/*inside-value*/st/* wow */ /*omg*/i/*bbq*/ /*whodoesthis*/]` would parse as:
```js
{
attribute: "href",
operatator: "=",
value: "test",
spaces: {
before: '',
after: '',
attribute: { before: ' ', after: ' ' },
operator: { after: ' ' },
value: { after: ' ' },
insensitive: { after: ' ' }
},
raws: {
spaces: {
attribute: { before: ' /*before*/ ', after: ' /* after-attr */ ' },
operator: { after: ' /* after-operator */ ' },
value: { after: '/* wow */ /*omg*/' },
insensitive: { after: '/*bbq*/ /*whodoesthis*/' }
},
unquoted: 'test',
value: 'te/*inside-value*/st'
}
}
```
## `Processor`
### `ProcessorOptions`
* `lossless` - When `true`, whitespace is preserved. Defaults to `true`.
* `updateSelector` - When `true`, if any processor methods are passed a postcss
`Rule` node instead of a string, then that Rule's selector is updated
with the results of the processing. Defaults to `true`.
### `process|processSync(selectors, [options])`
Processes the `selectors`, returning a string from the result of processing.
Note: when the `updateSelector` option is set, the rule's selector
will be updated with the resulting string.
**Example:**
```js
const parser = require("postcss-selector-parser");
const processor = parser();
let result = processor.processSync(' .class');
console.log(result);
// => .class
// Asynchronous operation
let promise = processor.process(' .class').then(result => {
console.log(result)
// => .class
});
// To have the parser normalize whitespace values, utilize the options
result = processor.processSync(' .class ', {lossless: false});
console.log(result);
// => .class
// For better syntax errors, pass a PostCSS Rule node.
const postcss = require('postcss');
rule = postcss.rule({selector: ' #foo > a, .class '});
processor.process(rule, {lossless: false, updateSelector: true}).then(result => {
console.log(result);
// => #foo>a,.class
console.log("rule:", rule.selector);
// => rule: #foo>a,.class
})
```
Arguments:
* `selectors (string|postcss.Rule)`: Either a selector string or a PostCSS Rule
node.
* `[options] (object)`: Process options
### `ast|astSync(selectors, [options])`
Like `process()` and `processSync()` but after
processing the `selectors` these methods return the `Root` node of the result
instead of a string.
Note: when the `updateSelector` option is set, the rule's selector
will be updated with the resulting string.
### `transform|transformSync(selectors, [options])`
Like `process()` and `processSync()` but after
processing the `selectors` these methods return the value returned by the
processor callback.
Note: when the `updateSelector` option is set, the rule's selector
will be updated with the resulting string.
### Error Handling Within Selector Processors
The root node passed to the selector processor callback
has a method `error(message, options)` that returns an
error object. This method should always be used to raise
errors relating to the syntax of selectors. The options
to this method are passed to postcss's error constructor
([documentation](http://api.postcss.org/Container.html#error)).
#### Async Error Example
```js
let processor = (root) => {
return new Promise((resolve, reject) => {
root.walkClasses((classNode) => {
if (/^(.*)[-_]/.test(classNode.value)) {
let msg = "classes may not have underscores or dashes in them";
reject(root.error(msg, {
index: classNode.sourceIndex + RegExp.$1.length + 1,
word: classNode.value
}));
}
});
resolve();
});
};
const postcss = require("postcss");
const parser = require("postcss-selector-parser");
const selectorProcessor = parser(processor);
const plugin = postcss.plugin('classValidator', (options) => {
return (root) => {
let promises = [];
root.walkRules(rule => {
promises.push(selectorProcessor.process(rule));
});
return Promise.all(promises);
};
});
postcss(plugin()).process(`
.foo-bar {
color: red;
}
`.trim(), {from: 'test.css'}).catch((e) => console.error(e.toString()));
// CssSyntaxError: classValidator: ./test.css:1:5: classes may not have underscores or dashes in them
//
// > 1 | .foo-bar {
// | ^
// 2 | color: red;
// 3 | }
```
#### Synchronous Error Example
```js
let processor = (root) => {
root.walkClasses((classNode) => {
if (/.*[-_]/.test(classNode.value)) {
let msg = "classes may not have underscores or dashes in them";
throw root.error(msg, {
index: classNode.sourceIndex,
word: classNode.value
});
}
});
};
const postcss = require("postcss");
const parser = require("postcss-selector-parser");
const selectorProcessor = parser(processor);
const plugin = postcss.plugin('classValidator', (options) => {
return (root) => {
root.walkRules(rule => {
selectorProcessor.processSync(rule);
});
};
});
postcss(plugin()).process(`
.foo-bar {
color: red;
}
`.trim(), {from: 'test.css'}).catch((e) => console.error(e.toString()));
// CssSyntaxError: classValidator: ./test.css:1:5: classes may not have underscores or dashes in them
//
// > 1 | .foo-bar {
// | ^
// 2 | color: red;
// 3 | }
```
@@ -0,0 +1,466 @@
# 5.0.0
- Allow escaped dot within class name.
- Update PostCSS to 7.0.7 (patch)
# 5.0.0-rc.4
- Fixed and issue where comments immediately after an insensitive
(in attribute) were not parsed correctly.
- Updated `cssesc` to 2.0.0 (major).
- Removed outdated integration tests.
- Added tests for custom selectors, tags with attributes, the universal
selector with pseudos, and tokens after combinators.
# 5.0.0-rc.1
To ease adoption of the v5.0 release, we have relaxed the node version
check performed by npm at installation time to allow for node 4, which
remains officially unsupported, but likely to continue working for the
time being.
# 5.0.0-rc.0
This release has **BREAKING CHANGES** that were required to fix regressions
in 4.0.0 and to make the Combinator Node API consistent for all combinator
types. Please read carefully.
## Summary of Changes
* The way a descendent combinator that isn't a single space character (E.g. `.a .b`) is stored in the AST has changed.
* Named Combinators (E.g. `.a /for/ .b`) are now properly parsed as a combinator.
* It is now possible to look up a node based on the source location of a character in that node and to query nodes if they contain some character.
* Several bug fixes that caused the parser to hang and run out of memory when a `/` was encountered have been fixed.
* The minimum supported version of Node is now `v6.0.0`.
### Changes to the Descendent Combinator
In prior releases, the value of a descendant combinator with multiple spaces included all the spaces.
* `.a .b`: Extra spaces are now stored as space before.
- Old & Busted:
- `combinator.value === " "`
- New hotness:
- `combinator.value === " " && combinator.spaces.before === " "`
* `.a /*comment*/.b`: A comment at the end of the combinator causes extra space to become after space.
- Old & Busted:
- `combinator.value === " "`
- `combinator.raws.value === " /*comment/"`
- New hotness:
- `combinator.value === " "`
- `combinator.spaces.after === " "`
- `combinator.raws.spaces.after === " /*comment*/"`
* `.a<newline>.b`: whitespace that doesn't start or end with a single space character is stored as a raw value.
- Old & Busted:
- `combinator.value === "\n"`
- `combinator.raws.value === undefined`
- New hotness:
- `combinator.value === " "`
- `combinator.raws.value === "\n"`
### Support for "Named Combinators"
Although, nonstandard and unlikely to ever become a standard, combinators like `/deep/` and `/for/` are now properly supported.
Because they've been taken off the standardization track, there is no spec-official name for combinators of the form `/<ident>/`. However, I talked to [Tab Atkins](https://twitter.com/tabatkins) and we agreed to call them "named combinators" so now they are called that.
Before this release such named combinators were parsed without intention and generated three nodes of type `"tag"` where the first and last nodes had a value of `"/"`.
* `.a /for/ .b` is parsed as a combinator.
- Old & Busted:
- `root.nodes[0].nodes[1].type === "tag"`
- `root.nodes[0].nodes[1].value === "/"`
- New hotness:
- `root.nodes[0].nodes[1].type === "combinator"`
- `root.nodes[0].nodes[1].value === "/for/"`
* `.a /F\6fR/ .b` escapes are handled and uppercase is normalized.
- Old & Busted:
- `root.nodes[0].nodes[2].type === "tag"`
- `root.nodes[0].nodes[2].value === "F\\6fR"`
- New hotness:
- `root.nodes[0].nodes[1].type === "combinator"`
- `root.nodes[0].nodes[1].value === "/for/"`
- `root.nodes[0].nodes[1].raws.value === "/F\\6fR/"`
### Source position checks and lookups
A new API was added to look up a node based on the source location.
```js
const selectorParser = require("postcss-selector-parser");
// You can find the most specific node for any given character
let combinator = selectorParser.astSync(".a > .b").atPosition(1,4);
combinator.toString() === " > ";
// You can check if a node includes a specific character
// Whitespace surrounding the node that is owned by that node
// is included in the check.
[2,3,4,5,6].map(column => combinator.isAtPosition(1, column));
// => [false, true, true, true, false]
```
# 4.0.0
This release has **BREAKING CHANGES** that were required to fix bugs regarding values with escape sequences. Please read carefully.
* **Identifiers with escapes** - CSS escape sequences are now hidden from the public API by default.
The normal value of a node like a class name or ID, or an aspect of a node such as attribute
selector's value, is unescaped. Escapes representing Non-ascii characters are unescaped into
unicode characters. For example: `bu\tton, .\31 00, #i\2764\FE0Fu, [attr="value is \"quoted\""]`
will parse respectively to the values `button`, `100`, `i❤️u`, `value is "quoted"`.
The original escape sequences for these values can be found in the corresponding property name
in `node.raws`. Where possible, deprecation warnings were added, but the nature
of escape handling makes it impossible to detect what is escaped or not. Our expectation is
that most users are neither expecting nor handling escape sequences in their use of this library,
and so for them, this is a bug fix. Users who are taking care to handle escapes correctly can
now update their code to remove the escape handling and let us do it for them.
* **Mutating values with escapes** - When you make an update to a node property that has escape handling
The value is assumed to be unescaped, and any special characters are escaped automatically and
the corresponding `raws` value is immediately updated. This can result in changes to the original
escape format. Where the exact value of the escape sequence is important there are methods that
allow both values to be set in conjunction. There are a number of new convenience methods for
manipulating values that involve escapes, especially for attributes values where the quote mark
is involved. See https://github.com/postcss/postcss-selector-parser/pull/133 for an extensive
write-up on these changes.
**Upgrade/API Example**
In `3.x` there was no unescape handling and internal consistency of several properties was the caller's job to maintain. It was very easy for the developer
to create a CSS file that did not parse correctly when some types of values
were in use.
```js
const selectorParser = require("postcss-selector-parser");
let attr = selectorParser.attribute({attribute: "id", operator: "=", value: "a-value"});
attr.value; // => "a-value"
attr.toString(); // => [id=a-value]
// Add quotes to an attribute's value.
// All these values have to be set by the caller to be consistent:
// no internal consistency is maintained.
attr.raws.unquoted = attr.value
attr.value = "'" + attr.value + "'";
attr.value; // => "'a-value'"
attr.quoted = true;
attr.toString(); // => "[id='a-value']"
```
In `4.0` there is a convenient API for setting and mutating values
that may need escaping. Especially for attributes.
```js
const selectorParser = require("postcss-selector-parser");
// The constructor requires you specify the exact escape sequence
let className = selectorParser.className({value: "illegal class name", raws: {value: "illegal\\ class\\ name"}});
className.toString(); // => '.illegal\\ class\\ name'
// So it's better to set the value as a property
className = selectorParser.className();
// Most properties that deal with identifiers work like this
className.value = "escape for me";
className.value; // => 'escape for me'
className.toString(); // => '.escape\\ for\\ me'
// emoji and all non-ascii are escaped to ensure it works in every css file.
className.value = "😱🦄😍";
className.value; // => '😱🦄😍'
className.toString(); // => '.\\1F631\\1F984\\1F60D'
// you can control the escape sequence if you want, or do bad bad things
className.setPropertyAndEscape('value', 'xxxx', 'yyyy');
className.value; // => "xxxx"
className.toString(); // => ".yyyy"
// Pass a value directly through to the css output without escaping it.
className.setPropertyWithoutEscape('value', '$REPLACE_ME$');
className.value; // => "$REPLACE_ME$"
className.toString(); // => ".$REPLACE_ME$"
// The biggest changes are to the Attribute class
// passing quoteMark explicitly is required to avoid a deprecation warning.
let attr = selectorParser.attribute({attribute: "id", operator: "=", value: "a-value", quoteMark: null});
attr.toString(); // => "[id=a-value]"
// Get the value with quotes on it and any necessary escapes.
// This is the same as reading attr.value in 3.x.
attr.getQuotedValue(); // => "a-value";
attr.quoteMark; // => null
// Add quotes to an attribute's value.
attr.quoteMark = "'"; // This is all that's required.
attr.toString(); // => "[id='a-value']"
attr.quoted; // => true
// The value is still the same, only the quotes have changed.
attr.value; // => a-value
attr.getQuotedValue(); // => "'a-value'";
// deprecated assignment, no warning because there's no escapes
attr.value = "new-value";
// no quote mark is needed so it is removed
attr.getQuotedValue(); // => "new-value";
// deprecated assignment,
attr.value = "\"a 'single quoted' value\"";
// > (node:27859) DeprecationWarning: Assigning an attribute a value containing characters that might need to be escaped is deprecated. Call attribute.setValue() instead.
attr.getQuotedValue(); // => '"a \'single quoted\' value"';
// quote mark inferred from first and last characters.
attr.quoteMark; // => '"'
// setValue takes options to make manipulating the value simple.
attr.setValue('foo', {smart: true});
// foo doesn't require any escapes or quotes.
attr.toString(); // => '[id=foo]'
attr.quoteMark; // => null
// An explicit quote mark can be specified
attr.setValue('foo', {quoteMark: '"'});
attr.toString(); // => '[id="foo"]'
// preserves quote mark by default
attr.setValue('bar');
attr.toString(); // => '[id="bar"]'
attr.quoteMark = null;
attr.toString(); // => '[id=bar]'
// with no arguments, it preserves quote mark even when it's not a great idea
attr.setValue('a value \n that should be quoted');
attr.toString(); // => '[id=a\\ value\\ \\A\\ that\\ should\\ be\\ quoted]'
// smart preservation with a specified default
attr.setValue('a value \n that should be quoted', {smart: true, preferCurrentQuoteMark: true, quoteMark: "'"});
// => "[id='a value \\A that should be quoted']"
attr.quoteMark = '"';
// => '[id="a value \\A that should be quoted"]'
// this keeps double quotes because it wants to quote the value and the existing value has double quotes.
attr.setValue('this should be quoted', {smart: true, preferCurrentQuoteMark: true, quoteMark: "'"});
// => '[id="this should be quoted"]'
// picks single quotes because the value has double quotes
attr.setValue('a "double quoted" value', {smart: true, preferCurrentQuoteMark: true, quoteMark: "'"});
// => "[id='a "double quoted" value']"
// setPropertyAndEscape lets you do anything you want. Even things that are a bad idea and illegal.
attr.setPropertyAndEscape('value', 'xxxx', 'the password is 42');
attr.value; // => "xxxx"
attr.toString(); // => "[id=the password is 42]"
// Pass a value directly through to the css output without escaping it.
attr.setPropertyWithoutEscape('value', '$REPLACEMENT$');
attr.value; // => "$REPLACEMENT$"
attr.toString(); // => "[id=$REPLACEMENT$]"
```
# 3.1.2
* Fix: Removed dot-prop dependency since it's no longer written in es5.
# 3.1.1
* Fix: typescript definitions weren't in the published package.
# 3.1.0
* Fixed numerous bugs in attribute nodes relating to the handling of comments
and whitespace. There's significant changes to `attrNode.spaces` and `attrNode.raws` since the `3.0.0` release.
* Added `Attribute#offsetOf(part)` to get the offset location of
attribute parts like `"operator"` and `"value"`. This is most
often added to `Attribute#sourceIndex` for error reporting.
# 3.0.0
## Breaking changes
* Some tweaks to the tokenizer/attribute selector parsing mean that whitespace
locations might be slightly different to the 2.x code.
* Better attribute selector parsing with more validation; postcss-selector-parser
no longer uses regular expressions to parse attribute selectors.
* Added an async API (thanks to @jacobp100); the default `process` API is now
async, and the sync API is now accessed through `processSync` instead.
* `process()` and `processSync()` now return a string instead of the Processor
instance.
* Tweaks handling of Less interpolation (thanks to @jwilsson).
* Removes support for Node 0.12.
## Other changes
* `ast()` and `astSync()` methods have been added to the `Processor`. These
return the `Root` node of the selectors after processing them.
* `transform()` and `transformSync()` methods have been added to the
`Processor`. These return the value returned by the processor callback
after processing the selectors.
* Set the parent when inserting a node (thanks to @chriseppstein).
* Correctly adjust indices when using insertBefore/insertAfter (thanks to @tivac).
* Fixes handling of namespaces with qualified tag selectors.
* `process`, `ast` and `transform` (and their sync variants) now accept a
`postcss` rule node. When provided, better errors are generated and selector
processing is automatically set back to the rule selector (unless the `updateSelector` option is set to `false`.)
* Now more memory efficient when tokenizing selectors.
### Upgrade hints
The pattern of:
`rule.selector = processor.process(rule.selector).result.toString();`
is now:
`processor.processSync(rule)`
# 2.2.3
* Resolves an issue where the parser would not reduce multiple spaces between an
ampersand and another simple selector in lossy mode (thanks to @adam-26).
# 2.2.2
* No longer hangs on an unescaped semicolon; instead the parser will throw
an exception for these cases.
# 2.2.1
* Allows a consumer to specify whitespace tokens when creating a new Node
(thanks to @Semigradsky).
# 2.2.0
* Added a new option to normalize whitespace when parsing the selector string
(thanks to @adam-26).
# 2.1.1
* Better unquoted value handling within attribute selectors
(thanks to @evilebottnawi).
# 2.1.0
* Added: Use string constants for all node types & expose them on the main
parser instance (thanks to @Aweary).
# 2.0.0
This release contains the following breaking changes:
* Renamed all `eachInside` iterators to `walk`. For example, `eachTag` is now
`walkTags`, and `eachInside` is now `walk`.
* Renamed `Node#removeSelf()` to `Node#remove()`.
* Renamed `Container#remove()` to `Container#removeChild()`.
* Renamed `Node#raw` to `Node#raws` (thanks to @davidtheclark).
* Now parses `&` as the *nesting* selector, rather than a *tag* selector.
* Fixes misinterpretation of Sass interpolation (e.g. `#{foo}`) as an
id selector (thanks to @davidtheclark).
and;
* Fixes parsing of attribute selectors with equals signs in them
(e.g. `[data-attr="foo=bar"]`) (thanks to @montmanu).
* Adds `quoted` and `raw.unquoted` properties to attribute nodes
(thanks to @davidtheclark).
# 1.3.3
* Fixes an infinite loop on `)` and `]` tokens when they had no opening pairs.
Now postcss-selector-parser will throw when it encounters these lone tokens.
# 1.3.2
* Now uses plain integers rather than `str.charCodeAt(0)` for compiled builds.
# 1.3.1
* Update flatten to v1.x (thanks to @shinnn).
# 1.3.0
* Adds a new node type, `String`, to fix a crash on selectors such as
`foo:bar("test")`.
# 1.2.1
* Fixes a crash when the parser encountered a trailing combinator.
# 1.2.0
* A more descriptive error is thrown when the parser expects to find a
pseudo-class/pseudo-element (thanks to @ashelley).
* Adds support for line/column locations for selector nodes, as well as a
`Node#sourceIndex` method (thanks to @davidtheclark).
# 1.1.4
* Fixes a crash when a selector started with a `>` combinator. The module will
now no longer throw if a selector has a leading/trailing combinator node.
# 1.1.3
* Fixes a crash on `@` tokens.
# 1.1.2
* Fixes an infinite loop caused by using parentheses in a non-pseudo element
context.
# 1.1.1
* Fixes a crash when a backslash ended a selector string.
# 1.1.0
* Adds support for replacing multiple nodes at once with `replaceWith`
(thanks to @jonathantneal).
* Parser no longer throws on sequential IDs and trailing commas, to support
parsing of selector hacks.
# 1.0.1
* Fixes using `insertAfter` and `insertBefore` during iteration.
# 1.0.0
* Adds `clone` and `replaceWith` methods to nodes.
* Adds `insertBefore` and `insertAfter` to containers.
* Stabilises API.
# 0.0.5
* Fixes crash on extra whitespace inside a pseudo selector's parentheses.
* Adds sort function to the container class.
* Enables the parser to pass its input through without transforming.
* Iteration-safe `each` and `eachInside`.
# 0.0.4
* Tidy up redundant duplication.
* Fixes a bug where the parser would loop infinitely on universal selectors
inside pseudo selectors.
* Adds `length` getter and `eachInside`, `map`, `reduce` to the container class.
* When a selector has been removed from the tree, the root node will no longer
cast it to a string.
* Adds node type iterators to the container class (e.g. `eachComment`).
* Adds filter function to the container class.
* Adds split function to the container class.
* Create new node types by doing `parser.id(opts)` etc.
* Adds support for pseudo classes anywhere in the selector.
# 0.0.3
* Adds `next` and `prev` to the node class.
* Adds `first` and `last` getters to the container class.
* Adds `every` and `some` iterators to the container class.
* Add `empty` alias for `removeAll`.
* Combinators are now types of node.
* Fixes the at method so that it is not an alias for `index`.
* Tidy up creation of new nodes in the parser.
* Refactors how namespaces are handled for consistency & less redundant code.
* Refactors AST to use `nodes` exclusively, and eliminates excessive nesting.
* Fixes nested pseudo parsing.
* Fixes whitespace parsing.
# 0.0.2
* Adds support for namespace selectors.
* Adds support for selectors joined by escaped spaces - such as `.\31\ 0`.
# 0.0.1
* Initial release.
@@ -0,0 +1,22 @@
Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,49 @@
# postcss-selector-parser [![Build Status](https://travis-ci.org/postcss/postcss-selector-parser.svg?branch=master)](https://travis-ci.org/postcss/postcss-selector-parser)
> Selector parser with built in methods for working with selector strings.
## Install
With [npm](https://npmjs.com/package/postcss-selector-parser) do:
```
npm install postcss-selector-parser
```
## Quick Start
```js
const parser = require('postcss-selector-parser');
const transform = selectors => {
selectors.walk(selector => {
// do something with the selector
console.log(String(selector))
});
};
const transformed = parser(transform).processSync('h1, h2, h3');
```
To normalize selector whitespace:
```js
const parser = require('postcss-selector-parser');
const normalized = parser().processSync('h1, h2, h3', {lossless: false});
// -> h1,h2,h3
```
Async support is provided through `parser.process` and will resolve a Promise
with the resulting selector string.
## API
Please see [API.md](API.md).
## Credits
* Huge thanks to Andrey Sitnik (@ai) for work on PostCSS which helped
accelerate this module's development.
## License
MIT
@@ -0,0 +1,26 @@
'use strict';
exports.__esModule = true;
var _processor = require('./processor');
var _processor2 = _interopRequireDefault(_processor);
var _selectors = require('./selectors');
var selectors = _interopRequireWildcard(_selectors);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var parser = function parser(processor) {
return new _processor2.default(processor);
};
Object.assign(parser, selectors);
delete parser.__esModule;
exports.default = parser;
module.exports = exports['default'];
@@ -0,0 +1,185 @@
"use strict";
exports.__esModule = true;
var _parser = require("./parser");
var _parser2 = _interopRequireDefault(_parser);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Processor = function () {
function Processor(func, options) {
_classCallCheck(this, Processor);
this.func = func || function noop() {};
this.funcRes = null;
this.options = options;
}
Processor.prototype._shouldUpdateSelector = function _shouldUpdateSelector(rule) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var merged = Object.assign({}, this.options, options);
if (merged.updateSelector === false) {
return false;
} else {
return typeof rule !== "string";
}
};
Processor.prototype._isLossy = function _isLossy() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var merged = Object.assign({}, this.options, options);
if (merged.lossless === false) {
return true;
} else {
return false;
}
};
Processor.prototype._root = function _root(rule) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var parser = new _parser2.default(rule, this._parseOptions(options));
return parser.root;
};
Processor.prototype._parseOptions = function _parseOptions(options) {
return {
lossy: this._isLossy(options)
};
};
Processor.prototype._run = function _run(rule) {
var _this = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return new Promise(function (resolve, reject) {
try {
var root = _this._root(rule, options);
Promise.resolve(_this.func(root)).then(function (transform) {
var string = undefined;
if (_this._shouldUpdateSelector(rule, options)) {
string = root.toString();
rule.selector = string;
}
return { transform: transform, root: root, string: string };
}).then(resolve, reject);
} catch (e) {
reject(e);
return;
}
});
};
Processor.prototype._runSync = function _runSync(rule) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var root = this._root(rule, options);
var transform = this.func(root);
if (transform && typeof transform.then === "function") {
throw new Error("Selector processor returned a promise to a synchronous call.");
}
var string = undefined;
if (options.updateSelector && typeof rule !== "string") {
string = root.toString();
rule.selector = string;
}
return { transform: transform, root: root, string: string };
};
/**
* Process rule into a selector AST.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {Promise<parser.Root>} The AST of the selector after processing it.
*/
Processor.prototype.ast = function ast(rule, options) {
return this._run(rule, options).then(function (result) {
return result.root;
});
};
/**
* Process rule into a selector AST synchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {parser.Root} The AST of the selector after processing it.
*/
Processor.prototype.astSync = function astSync(rule, options) {
return this._runSync(rule, options).root;
};
/**
* Process a selector into a transformed value asynchronously
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {Promise<any>} The value returned by the processor.
*/
Processor.prototype.transform = function transform(rule, options) {
return this._run(rule, options).then(function (result) {
return result.transform;
});
};
/**
* Process a selector into a transformed value synchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {any} The value returned by the processor.
*/
Processor.prototype.transformSync = function transformSync(rule, options) {
return this._runSync(rule, options).transform;
};
/**
* Process a selector into a new selector string asynchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {string} the selector after processing.
*/
Processor.prototype.process = function process(rule, options) {
return this._run(rule, options).then(function (result) {
return result.string || result.root.toString();
});
};
/**
* Process a selector into a new selector string synchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {string} the selector after processing.
*/
Processor.prototype.processSync = function processSync(rule, options) {
var result = this._runSync(rule, options);
return result.string || result.root.toString();
};
return Processor;
}();
exports.default = Processor;
module.exports = exports["default"];
@@ -0,0 +1,468 @@
"use strict";
exports.__esModule = true;
var _CSSESC_QUOTE_OPTIONS;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
exports.unescapeValue = unescapeValue;
var _cssesc = require("cssesc");
var _cssesc2 = _interopRequireDefault(_cssesc);
var _unesc = require("../util/unesc");
var _unesc2 = _interopRequireDefault(_unesc);
var _namespace = require("./namespace");
var _namespace2 = _interopRequireDefault(_namespace);
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _require = require("util"),
deprecate = _require.deprecate;
var WRAPPED_IN_QUOTES = /^('|")(.*)\1$/;
var warnOfDeprecatedValueAssignment = deprecate(function () {}, "Assigning an attribute a value containing characters that might need to be escaped is deprecated. " + "Call attribute.setValue() instead.");
var warnOfDeprecatedQuotedAssignment = deprecate(function () {}, "Assigning attr.quoted is deprecated and has no effect. Assign to attr.quoteMark instead.");
var warnOfDeprecatedConstructor = deprecate(function () {}, "Constructing an Attribute selector with a value without specifying quoteMark is deprecated. Note: The value should be unescaped now.");
function unescapeValue(value) {
var deprecatedUsage = false;
var quoteMark = null;
var unescaped = value;
var m = unescaped.match(WRAPPED_IN_QUOTES);
if (m) {
quoteMark = m[1];
unescaped = m[2];
}
unescaped = (0, _unesc2.default)(unescaped);
if (unescaped !== value) {
deprecatedUsage = true;
}
return {
deprecatedUsage: deprecatedUsage,
unescaped: unescaped,
quoteMark: quoteMark
};
}
function handleDeprecatedContructorOpts(opts) {
if (opts.quoteMark !== undefined) {
return opts;
}
if (opts.value === undefined) {
return opts;
}
warnOfDeprecatedConstructor();
var _unescapeValue = unescapeValue(opts.value),
quoteMark = _unescapeValue.quoteMark,
unescaped = _unescapeValue.unescaped;
if (!opts.raws) {
opts.raws = {};
}
if (opts.raws.value === undefined) {
opts.raws.value = opts.value;
}
opts.value = unescaped;
opts.quoteMark = quoteMark;
return opts;
}
var Attribute = function (_Namespace) {
_inherits(Attribute, _Namespace);
function Attribute() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Attribute);
var _this = _possibleConstructorReturn(this, _Namespace.call(this, handleDeprecatedContructorOpts(opts)));
_this.type = _types.ATTRIBUTE;
_this.raws = _this.raws || {};
Object.defineProperty(_this.raws, 'unquoted', {
get: deprecate(function () {
return _this.value;
}, "attr.raws.unquoted is deprecated. Call attr.value instead."),
set: deprecate(function () {
return _this.value;
}, "Setting attr.raws.unquoted is deprecated and has no effect. attr.value is unescaped by default now.")
});
_this._constructed = true;
return _this;
}
/**
* Returns the Attribute's value quoted such that it would be legal to use
* in the value of a css file. The original value's quotation setting
* used for stringification is left unchanged. See `setValue(value, options)`
* if you want to control the quote settings of a new value for the attribute.
*
* You can also change the quotation used for the current value by setting quoteMark.
*
* Options:
* * quoteMark {'"' | "'" | null} - Use this value to quote the value. If this
* option is not set, the original value for quoteMark will be used. If
* indeterminate, a double quote is used. The legal values are:
* * `null` - the value will be unquoted and characters will be escaped as necessary.
* * `'` - the value will be quoted with a single quote and single quotes are escaped.
* * `"` - the value will be quoted with a double quote and double quotes are escaped.
* * preferCurrentQuoteMark {boolean} - if true, prefer the source quote mark
* over the quoteMark option value.
* * smart {boolean} - if true, will select a quote mark based on the value
* and the other options specified here. See the `smartQuoteMark()`
* method.
**/
Attribute.prototype.getQuotedValue = function getQuotedValue() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var quoteMark = this._determineQuoteMark(options);
var cssescopts = CSSESC_QUOTE_OPTIONS[quoteMark];
var escaped = (0, _cssesc2.default)(this._value, cssescopts);
return escaped;
};
Attribute.prototype._determineQuoteMark = function _determineQuoteMark(options) {
return options.smart ? this.smartQuoteMark(options) : this.preferredQuoteMark(options);
};
/**
* Set the unescaped value with the specified quotation options. The value
* provided must not include any wrapping quote marks -- those quotes will
* be interpreted as part of the value and escaped accordingly.
*/
Attribute.prototype.setValue = function setValue(value) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
this._value = value;
this._quoteMark = this._determineQuoteMark(options);
this._syncRawValue();
};
/**
* Intelligently select a quoteMark value based on the value's contents. If
* the value is a legal CSS ident, it will not be quoted. Otherwise a quote
* mark will be picked that minimizes the number of escapes.
*
* If there's no clear winner, the quote mark from these options is used,
* then the source quote mark (this is inverted if `preferCurrentQuoteMark` is
* true). If the quoteMark is unspecified, a double quote is used.
*
* @param options This takes the quoteMark and preferCurrentQuoteMark options
* from the quoteValue method.
*/
Attribute.prototype.smartQuoteMark = function smartQuoteMark(options) {
var v = this.value;
var numSingleQuotes = v.replace(/[^']/g, '').length;
var numDoubleQuotes = v.replace(/[^"]/g, '').length;
if (numSingleQuotes + numDoubleQuotes === 0) {
var escaped = (0, _cssesc2.default)(v, { isIdentifier: true });
if (escaped === v) {
return Attribute.NO_QUOTE;
} else {
var pref = this.preferredQuoteMark(options);
if (pref === Attribute.NO_QUOTE) {
// pick a quote mark that isn't none and see if it's smaller
var quote = this.quoteMark || options.quoteMark || Attribute.DOUBLE_QUOTE;
var opts = CSSESC_QUOTE_OPTIONS[quote];
var quoteValue = (0, _cssesc2.default)(v, opts);
if (quoteValue.length < escaped.length) {
return quote;
}
}
return pref;
}
} else if (numDoubleQuotes === numSingleQuotes) {
return this.preferredQuoteMark(options);
} else if (numDoubleQuotes < numSingleQuotes) {
return Attribute.DOUBLE_QUOTE;
} else {
return Attribute.SINGLE_QUOTE;
}
};
/**
* Selects the preferred quote mark based on the options and the current quote mark value.
* If you want the quote mark to depend on the attribute value, call `smartQuoteMark(opts)`
* instead.
*/
Attribute.prototype.preferredQuoteMark = function preferredQuoteMark(options) {
var quoteMark = options.preferCurrentQuoteMark ? this.quoteMark : options.quoteMark;
if (quoteMark === undefined) {
quoteMark = options.preferCurrentQuoteMark ? options.quoteMark : this.quoteMark;
}
if (quoteMark === undefined) {
quoteMark = Attribute.DOUBLE_QUOTE;
}
return quoteMark;
};
Attribute.prototype._syncRawValue = function _syncRawValue() {
var rawValue = (0, _cssesc2.default)(this._value, CSSESC_QUOTE_OPTIONS[this.quoteMark]);
if (rawValue === this._value) {
if (this.raws) {
delete this.raws.value;
}
} else {
this.raws.value = rawValue;
}
};
Attribute.prototype._handleEscapes = function _handleEscapes(prop, value) {
if (this._constructed) {
var escaped = (0, _cssesc2.default)(value, { isIdentifier: true });
if (escaped !== value) {
this.raws[prop] = escaped;
} else {
delete this.raws[prop];
}
}
};
Attribute.prototype._spacesFor = function _spacesFor(name) {
var attrSpaces = { before: '', after: '' };
var spaces = this.spaces[name] || {};
var rawSpaces = this.raws.spaces && this.raws.spaces[name] || {};
return Object.assign(attrSpaces, spaces, rawSpaces);
};
Attribute.prototype._stringFor = function _stringFor(name) {
var spaceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : name;
var concat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultAttrConcat;
var attrSpaces = this._spacesFor(spaceName);
return concat(this.stringifyProperty(name), attrSpaces);
};
/**
* returns the offset of the attribute part specified relative to the
* start of the node of the output string.
*
* * "ns" - alias for "namespace"
* * "namespace" - the namespace if it exists.
* * "attribute" - the attribute name
* * "attributeNS" - the start of the attribute or its namespace
* * "operator" - the match operator of the attribute
* * "value" - The value (string or identifier)
* * "insensitive" - the case insensitivity flag;
* @param part One of the possible values inside an attribute.
* @returns -1 if the name is invalid or the value doesn't exist in this attribute.
*/
Attribute.prototype.offsetOf = function offsetOf(name) {
var count = 1;
var attributeSpaces = this._spacesFor("attribute");
count += attributeSpaces.before.length;
if (name === "namespace" || name === "ns") {
return this.namespace ? count : -1;
}
if (name === "attributeNS") {
return count;
}
count += this.namespaceString.length;
if (this.namespace) {
count += 1;
}
if (name === "attribute") {
return count;
}
count += this.stringifyProperty("attribute").length;
count += attributeSpaces.after.length;
var operatorSpaces = this._spacesFor("operator");
count += operatorSpaces.before.length;
var operator = this.stringifyProperty("operator");
if (name === "operator") {
return operator ? count : -1;
}
count += operator.length;
count += operatorSpaces.after.length;
var valueSpaces = this._spacesFor("value");
count += valueSpaces.before.length;
var value = this.stringifyProperty("value");
if (name === "value") {
return value ? count : -1;
}
count += value.length;
count += valueSpaces.after.length;
var insensitiveSpaces = this._spacesFor("insensitive");
count += insensitiveSpaces.before.length;
if (name === "insensitive") {
return this.insensitive ? count : -1;
}
return -1;
};
Attribute.prototype.toString = function toString() {
var _this2 = this;
var selector = [this.rawSpaceBefore, '['];
selector.push(this._stringFor('qualifiedAttribute', 'attribute'));
if (this.operator && this.value) {
selector.push(this._stringFor('operator'));
selector.push(this._stringFor('value'));
selector.push(this._stringFor('insensitiveFlag', 'insensitive', function (attrValue, attrSpaces) {
if (attrValue.length > 0 && !_this2.quoted && attrSpaces.before.length === 0 && !(_this2.spaces.value && _this2.spaces.value.after)) {
attrSpaces.before = " ";
}
return defaultAttrConcat(attrValue, attrSpaces);
}));
}
selector.push(']');
selector.push(this.rawSpaceAfter);
return selector.join('');
};
_createClass(Attribute, [{
key: "quoted",
get: function get() {
var qm = this.quoteMark;
return qm === "'" || qm === '"';
},
set: function set(value) {
warnOfDeprecatedQuotedAssignment();
}
/**
* returns a single (`'`) or double (`"`) quote character if the value is quoted.
* returns `null` if the value is not quoted.
* returns `undefined` if the quotation state is unknown (this can happen when
* the attribute is constructed without specifying a quote mark.)
*/
}, {
key: "quoteMark",
get: function get() {
return this._quoteMark;
}
/**
* Set the quote mark to be used by this attribute's value.
* If the quote mark changes, the raw (escaped) value at `attr.raws.value` of the attribute
* value is updated accordingly.
*
* @param {"'" | '"' | null} quoteMark The quote mark or `null` if the value should be unquoted.
*/
,
set: function set(quoteMark) {
if (!this._constructed) {
this._quoteMark = quoteMark;
return;
}
if (this._quoteMark !== quoteMark) {
this._quoteMark = quoteMark;
this._syncRawValue();
}
}
}, {
key: "qualifiedAttribute",
get: function get() {
return this.qualifiedName(this.raws.attribute || this.attribute);
}
}, {
key: "insensitiveFlag",
get: function get() {
return this.insensitive ? 'i' : '';
}
}, {
key: "value",
get: function get() {
return this._value;
}
/**
* Before 3.0, the value had to be set to an escaped value including any wrapped
* quote marks. In 3.0, the semantics of `Attribute.value` changed so that the value
* is unescaped during parsing and any quote marks are removed.
*
* Because the ambiguity of this semantic change, if you set `attr.value = newValue`,
* a deprecation warning is raised when the new value contains any characters that would
* require escaping (including if it contains wrapped quotes).
*
* Instead, you should call `attr.setValue(newValue, opts)` and pass options that describe
* how the new value is quoted.
*/
,
set: function set(v) {
if (this._constructed) {
var _unescapeValue2 = unescapeValue(v),
deprecatedUsage = _unescapeValue2.deprecatedUsage,
unescaped = _unescapeValue2.unescaped,
quoteMark = _unescapeValue2.quoteMark;
if (deprecatedUsage) {
warnOfDeprecatedValueAssignment();
}
if (unescaped === this._value && quoteMark === this._quoteMark) {
return;
}
this._value = unescaped;
this._quoteMark = quoteMark;
this._syncRawValue();
} else {
this._value = v;
}
}
}, {
key: "attribute",
get: function get() {
return this._attribute;
},
set: function set(name) {
this._handleEscapes("attribute", name);
this._attribute = name;
}
}]);
return Attribute;
}(_namespace2.default);
Attribute.NO_QUOTE = null;
Attribute.SINGLE_QUOTE = "'";
Attribute.DOUBLE_QUOTE = '"';
exports.default = Attribute;
var CSSESC_QUOTE_OPTIONS = (_CSSESC_QUOTE_OPTIONS = {
"'": { quotes: 'single', wrap: true },
'"': { quotes: 'double', wrap: true }
}, _CSSESC_QUOTE_OPTIONS[null] = { isIdentifier: true }, _CSSESC_QUOTE_OPTIONS);
function defaultAttrConcat(attrValue, attrSpaces) {
return "" + attrSpaces.before + attrValue + attrSpaces.after;
}
@@ -0,0 +1,67 @@
'use strict';
exports.__esModule = true;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _cssesc = require('cssesc');
var _cssesc2 = _interopRequireDefault(_cssesc);
var _util = require('../util');
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ClassName = function (_Node) {
_inherits(ClassName, _Node);
function ClassName(opts) {
_classCallCheck(this, ClassName);
var _this = _possibleConstructorReturn(this, _Node.call(this, opts));
_this.type = _types.CLASS;
_this._constructed = true;
return _this;
}
ClassName.prototype.toString = function toString() {
return [this.rawSpaceBefore, String('.' + this.stringifyProperty("value")), this.rawSpaceAfter].join('');
};
_createClass(ClassName, [{
key: 'value',
set: function set(v) {
if (this._constructed) {
var escaped = (0, _cssesc2.default)(v, { isIdentifier: true });
if (escaped !== v) {
(0, _util.ensureObject)(this, "raws");
this.raws.value = escaped;
} else if (this.raws) {
delete this.raws.value;
}
}
this._value = v;
},
get: function get() {
return this._value;
}
}]);
return ClassName;
}(_node2.default);
exports.default = ClassName;
module.exports = exports['default'];
@@ -0,0 +1,35 @@
'use strict';
exports.__esModule = true;
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Combinator = function (_Node) {
_inherits(Combinator, _Node);
function Combinator(opts) {
_classCallCheck(this, Combinator);
var _this = _possibleConstructorReturn(this, _Node.call(this, opts));
_this.type = _types.COMBINATOR;
return _this;
}
return Combinator;
}(_node2.default);
exports.default = Combinator;
module.exports = exports['default'];
@@ -0,0 +1,35 @@
'use strict';
exports.__esModule = true;
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Comment = function (_Node) {
_inherits(Comment, _Node);
function Comment(opts) {
_classCallCheck(this, Comment);
var _this = _possibleConstructorReturn(this, _Node.call(this, opts));
_this.type = _types.COMMENT;
return _this;
}
return Comment;
}(_node2.default);
exports.default = Comment;
module.exports = exports['default'];
@@ -0,0 +1,91 @@
'use strict';
exports.__esModule = true;
exports.universal = exports.tag = exports.string = exports.selector = exports.root = exports.pseudo = exports.nesting = exports.id = exports.comment = exports.combinator = exports.className = exports.attribute = undefined;
var _attribute = require('./attribute');
var _attribute2 = _interopRequireDefault(_attribute);
var _className = require('./className');
var _className2 = _interopRequireDefault(_className);
var _combinator = require('./combinator');
var _combinator2 = _interopRequireDefault(_combinator);
var _comment = require('./comment');
var _comment2 = _interopRequireDefault(_comment);
var _id = require('./id');
var _id2 = _interopRequireDefault(_id);
var _nesting = require('./nesting');
var _nesting2 = _interopRequireDefault(_nesting);
var _pseudo = require('./pseudo');
var _pseudo2 = _interopRequireDefault(_pseudo);
var _root = require('./root');
var _root2 = _interopRequireDefault(_root);
var _selector = require('./selector');
var _selector2 = _interopRequireDefault(_selector);
var _string = require('./string');
var _string2 = _interopRequireDefault(_string);
var _tag = require('./tag');
var _tag2 = _interopRequireDefault(_tag);
var _universal = require('./universal');
var _universal2 = _interopRequireDefault(_universal);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var attribute = exports.attribute = function attribute(opts) {
return new _attribute2.default(opts);
};
var className = exports.className = function className(opts) {
return new _className2.default(opts);
};
var combinator = exports.combinator = function combinator(opts) {
return new _combinator2.default(opts);
};
var comment = exports.comment = function comment(opts) {
return new _comment2.default(opts);
};
var id = exports.id = function id(opts) {
return new _id2.default(opts);
};
var nesting = exports.nesting = function nesting(opts) {
return new _nesting2.default(opts);
};
var pseudo = exports.pseudo = function pseudo(opts) {
return new _pseudo2.default(opts);
};
var root = exports.root = function root(opts) {
return new _root2.default(opts);
};
var selector = exports.selector = function selector(opts) {
return new _selector2.default(opts);
};
var string = exports.string = function string(opts) {
return new _string2.default(opts);
};
var tag = exports.tag = function tag(opts) {
return new _tag2.default(opts);
};
var universal = exports.universal = function universal(opts) {
return new _universal2.default(opts);
};
@@ -0,0 +1,392 @@
'use strict';
exports.__esModule = true;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
var _types = require('./types');
var types = _interopRequireWildcard(_types);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Container = function (_Node) {
_inherits(Container, _Node);
function Container(opts) {
_classCallCheck(this, Container);
var _this = _possibleConstructorReturn(this, _Node.call(this, opts));
if (!_this.nodes) {
_this.nodes = [];
}
return _this;
}
Container.prototype.append = function append(selector) {
selector.parent = this;
this.nodes.push(selector);
return this;
};
Container.prototype.prepend = function prepend(selector) {
selector.parent = this;
this.nodes.unshift(selector);
return this;
};
Container.prototype.at = function at(index) {
return this.nodes[index];
};
Container.prototype.index = function index(child) {
if (typeof child === 'number') {
return child;
}
return this.nodes.indexOf(child);
};
Container.prototype.removeChild = function removeChild(child) {
child = this.index(child);
this.at(child).parent = undefined;
this.nodes.splice(child, 1);
var index = void 0;
for (var id in this.indexes) {
index = this.indexes[id];
if (index >= child) {
this.indexes[id] = index - 1;
}
}
return this;
};
Container.prototype.removeAll = function removeAll() {
for (var _iterator = this.nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var node = _ref;
node.parent = undefined;
}
this.nodes = [];
return this;
};
Container.prototype.empty = function empty() {
return this.removeAll();
};
Container.prototype.insertAfter = function insertAfter(oldNode, newNode) {
newNode.parent = this;
var oldIndex = this.index(oldNode);
this.nodes.splice(oldIndex + 1, 0, newNode);
newNode.parent = this;
var index = void 0;
for (var id in this.indexes) {
index = this.indexes[id];
if (oldIndex <= index) {
this.indexes[id] = index + 1;
}
}
return this;
};
Container.prototype.insertBefore = function insertBefore(oldNode, newNode) {
newNode.parent = this;
var oldIndex = this.index(oldNode);
this.nodes.splice(oldIndex, 0, newNode);
newNode.parent = this;
var index = void 0;
for (var id in this.indexes) {
index = this.indexes[id];
if (index <= oldIndex) {
this.indexes[id] = index + 1;
}
}
return this;
};
Container.prototype._findChildAtPosition = function _findChildAtPosition(line, col) {
var found = undefined;
this.each(function (node) {
if (node.atPosition) {
var foundChild = node.atPosition(line, col);
if (foundChild) {
found = foundChild;
return false;
}
} else if (node.isAtPosition(line, col)) {
found = node;
return false;
}
});
return found;
};
/**
* Return the most specific node at the line and column number given.
* The source location is based on the original parsed location, locations aren't
* updated as selector nodes are mutated.
*
* Note that this location is relative to the location of the first character
* of the selector, and not the location of the selector in the overall document
* when used in conjunction with postcss.
*
* If not found, returns undefined.
* @param {number} line The line number of the node to find. (1-based index)
* @param {number} col The column number of the node to find. (1-based index)
*/
Container.prototype.atPosition = function atPosition(line, col) {
if (this.isAtPosition(line, col)) {
return this._findChildAtPosition(line, col) || this;
} else {
return undefined;
}
};
Container.prototype._inferEndPosition = function _inferEndPosition() {
if (this.last && this.last.source && this.last.source.end) {
this.source = this.source || {};
this.source.end = this.source.end || {};
Object.assign(this.source.end, this.last.source.end);
}
};
Container.prototype.each = function each(callback) {
if (!this.lastEach) {
this.lastEach = 0;
}
if (!this.indexes) {
this.indexes = {};
}
this.lastEach++;
var id = this.lastEach;
this.indexes[id] = 0;
if (!this.length) {
return undefined;
}
var index = void 0,
result = void 0;
while (this.indexes[id] < this.length) {
index = this.indexes[id];
result = callback(this.at(index), index);
if (result === false) {
break;
}
this.indexes[id] += 1;
}
delete this.indexes[id];
if (result === false) {
return false;
}
};
Container.prototype.walk = function walk(callback) {
return this.each(function (node, i) {
var result = callback(node, i);
if (result !== false && node.length) {
result = node.walk(callback);
}
if (result === false) {
return false;
}
});
};
Container.prototype.walkAttributes = function walkAttributes(callback) {
var _this2 = this;
return this.walk(function (selector) {
if (selector.type === types.ATTRIBUTE) {
return callback.call(_this2, selector);
}
});
};
Container.prototype.walkClasses = function walkClasses(callback) {
var _this3 = this;
return this.walk(function (selector) {
if (selector.type === types.CLASS) {
return callback.call(_this3, selector);
}
});
};
Container.prototype.walkCombinators = function walkCombinators(callback) {
var _this4 = this;
return this.walk(function (selector) {
if (selector.type === types.COMBINATOR) {
return callback.call(_this4, selector);
}
});
};
Container.prototype.walkComments = function walkComments(callback) {
var _this5 = this;
return this.walk(function (selector) {
if (selector.type === types.COMMENT) {
return callback.call(_this5, selector);
}
});
};
Container.prototype.walkIds = function walkIds(callback) {
var _this6 = this;
return this.walk(function (selector) {
if (selector.type === types.ID) {
return callback.call(_this6, selector);
}
});
};
Container.prototype.walkNesting = function walkNesting(callback) {
var _this7 = this;
return this.walk(function (selector) {
if (selector.type === types.NESTING) {
return callback.call(_this7, selector);
}
});
};
Container.prototype.walkPseudos = function walkPseudos(callback) {
var _this8 = this;
return this.walk(function (selector) {
if (selector.type === types.PSEUDO) {
return callback.call(_this8, selector);
}
});
};
Container.prototype.walkTags = function walkTags(callback) {
var _this9 = this;
return this.walk(function (selector) {
if (selector.type === types.TAG) {
return callback.call(_this9, selector);
}
});
};
Container.prototype.walkUniversals = function walkUniversals(callback) {
var _this10 = this;
return this.walk(function (selector) {
if (selector.type === types.UNIVERSAL) {
return callback.call(_this10, selector);
}
});
};
Container.prototype.split = function split(callback) {
var _this11 = this;
var current = [];
return this.reduce(function (memo, node, index) {
var split = callback.call(_this11, node);
current.push(node);
if (split) {
memo.push(current);
current = [];
} else if (index === _this11.length - 1) {
memo.push(current);
}
return memo;
}, []);
};
Container.prototype.map = function map(callback) {
return this.nodes.map(callback);
};
Container.prototype.reduce = function reduce(callback, memo) {
return this.nodes.reduce(callback, memo);
};
Container.prototype.every = function every(callback) {
return this.nodes.every(callback);
};
Container.prototype.some = function some(callback) {
return this.nodes.some(callback);
};
Container.prototype.filter = function filter(callback) {
return this.nodes.filter(callback);
};
Container.prototype.sort = function sort(callback) {
return this.nodes.sort(callback);
};
Container.prototype.toString = function toString() {
return this.map(String).join('');
};
_createClass(Container, [{
key: 'first',
get: function get() {
return this.at(0);
}
}, {
key: 'last',
get: function get() {
return this.at(this.length - 1);
}
}, {
key: 'length',
get: function get() {
return this.nodes.length;
}
}]);
return Container;
}(_node2.default);
exports.default = Container;
module.exports = exports['default'];
@@ -0,0 +1,54 @@
"use strict";
exports.__esModule = true;
exports.isUniversal = exports.isTag = exports.isString = exports.isSelector = exports.isRoot = exports.isPseudo = exports.isNesting = exports.isIdentifier = exports.isComment = exports.isCombinator = exports.isClassName = exports.isAttribute = undefined;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _IS_TYPE;
exports.isNode = isNode;
exports.isPseudoElement = isPseudoElement;
exports.isPseudoClass = isPseudoClass;
exports.isContainer = isContainer;
exports.isNamespace = isNamespace;
var _types = require("./types");
var IS_TYPE = (_IS_TYPE = {}, _IS_TYPE[_types.ATTRIBUTE] = true, _IS_TYPE[_types.CLASS] = true, _IS_TYPE[_types.COMBINATOR] = true, _IS_TYPE[_types.COMMENT] = true, _IS_TYPE[_types.ID] = true, _IS_TYPE[_types.NESTING] = true, _IS_TYPE[_types.PSEUDO] = true, _IS_TYPE[_types.ROOT] = true, _IS_TYPE[_types.SELECTOR] = true, _IS_TYPE[_types.STRING] = true, _IS_TYPE[_types.TAG] = true, _IS_TYPE[_types.UNIVERSAL] = true, _IS_TYPE);
function isNode(node) {
return (typeof node === "undefined" ? "undefined" : _typeof(node)) === "object" && IS_TYPE[node.type];
}
function isNodeType(type, node) {
return isNode(node) && node.type === type;
}
var isAttribute = exports.isAttribute = isNodeType.bind(null, _types.ATTRIBUTE);
var isClassName = exports.isClassName = isNodeType.bind(null, _types.CLASS);
var isCombinator = exports.isCombinator = isNodeType.bind(null, _types.COMBINATOR);
var isComment = exports.isComment = isNodeType.bind(null, _types.COMMENT);
var isIdentifier = exports.isIdentifier = isNodeType.bind(null, _types.ID);
var isNesting = exports.isNesting = isNodeType.bind(null, _types.NESTING);
var isPseudo = exports.isPseudo = isNodeType.bind(null, _types.PSEUDO);
var isRoot = exports.isRoot = isNodeType.bind(null, _types.ROOT);
var isSelector = exports.isSelector = isNodeType.bind(null, _types.SELECTOR);
var isString = exports.isString = isNodeType.bind(null, _types.STRING);
var isTag = exports.isTag = isNodeType.bind(null, _types.TAG);
var isUniversal = exports.isUniversal = isNodeType.bind(null, _types.UNIVERSAL);
function isPseudoElement(node) {
return isPseudo(node) && node.value && (node.value.startsWith("::") || node.value === ":before" || node.value === ":after");
}
function isPseudoClass(node) {
return isPseudo(node) && !isPseudoElement(node);
}
function isContainer(node) {
return !!(isNode(node) && node.walk);
}
function isNamespace(node) {
return isAttribute(node) || isTag(node);
}
@@ -0,0 +1,39 @@
'use strict';
exports.__esModule = true;
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ID = function (_Node) {
_inherits(ID, _Node);
function ID(opts) {
_classCallCheck(this, ID);
var _this = _possibleConstructorReturn(this, _Node.call(this, opts));
_this.type = _types.ID;
return _this;
}
ID.prototype.toString = function toString() {
return [this.rawSpaceBefore, String('#' + this.stringifyProperty("value")), this.rawSpaceAfter].join('');
};
return ID;
}(_node2.default);
exports.default = ID;
module.exports = exports['default'];
@@ -0,0 +1,39 @@
"use strict";
exports.__esModule = true;
var _types = require("./types");
Object.keys(_types).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _types[key];
}
});
});
var _constructors = require("./constructors");
Object.keys(_constructors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _constructors[key];
}
});
});
var _guards = require("./guards");
Object.keys(_guards).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _guards[key];
}
});
});
@@ -0,0 +1,98 @@
'use strict';
exports.__esModule = true;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _cssesc = require('cssesc');
var _cssesc2 = _interopRequireDefault(_cssesc);
var _util = require('../util');
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Namespace = function (_Node) {
_inherits(Namespace, _Node);
function Namespace() {
_classCallCheck(this, Namespace);
return _possibleConstructorReturn(this, _Node.apply(this, arguments));
}
Namespace.prototype.qualifiedName = function qualifiedName(value) {
if (this.namespace) {
return this.namespaceString + '|' + value;
} else {
return value;
}
};
Namespace.prototype.toString = function toString() {
return [this.rawSpaceBefore, this.qualifiedName(this.stringifyProperty("value")), this.rawSpaceAfter].join('');
};
_createClass(Namespace, [{
key: 'namespace',
get: function get() {
return this._namespace;
},
set: function set(namespace) {
if (namespace === true || namespace === "*" || namespace === "&") {
this._namespace = namespace;
if (this.raws) {
delete this.raws.namespace;
}
return;
}
var escaped = (0, _cssesc2.default)(namespace, { isIdentifier: true });
this._namespace = namespace;
if (escaped !== namespace) {
(0, _util.ensureObject)(this, "raws");
this.raws.namespace = escaped;
} else if (this.raws) {
delete this.raws.namespace;
}
}
}, {
key: 'ns',
get: function get() {
return this._namespace;
},
set: function set(namespace) {
this.namespace = namespace;
}
}, {
key: 'namespaceString',
get: function get() {
if (this.namespace) {
var ns = this.stringifyProperty("namespace");
if (ns === true) {
return '';
} else {
return ns;
}
} else {
return '';
}
}
}]);
return Namespace;
}(_node2.default);
exports.default = Namespace;
;
module.exports = exports['default'];
@@ -0,0 +1,36 @@
'use strict';
exports.__esModule = true;
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Nesting = function (_Node) {
_inherits(Nesting, _Node);
function Nesting(opts) {
_classCallCheck(this, Nesting);
var _this = _possibleConstructorReturn(this, _Node.call(this, opts));
_this.type = _types.NESTING;
_this.value = '&';
return _this;
}
return Nesting;
}(_node2.default);
exports.default = Nesting;
module.exports = exports['default'];
@@ -0,0 +1,216 @@
'use strict';
exports.__esModule = true;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _util = require('../util');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var cloneNode = function cloneNode(obj, parent) {
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || obj === null) {
return obj;
}
var cloned = new obj.constructor();
for (var i in obj) {
if (!obj.hasOwnProperty(i)) {
continue;
}
var value = obj[i];
var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
if (i === 'parent' && type === 'object') {
if (parent) {
cloned[i] = parent;
}
} else if (value instanceof Array) {
cloned[i] = value.map(function (j) {
return cloneNode(j, cloned);
});
} else {
cloned[i] = cloneNode(value, cloned);
}
}
return cloned;
};
var Node = function () {
function Node() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Node);
Object.assign(this, opts);
this.spaces = this.spaces || {};
this.spaces.before = this.spaces.before || '';
this.spaces.after = this.spaces.after || '';
}
Node.prototype.remove = function remove() {
if (this.parent) {
this.parent.removeChild(this);
}
this.parent = undefined;
return this;
};
Node.prototype.replaceWith = function replaceWith() {
if (this.parent) {
for (var index in arguments) {
this.parent.insertBefore(this, arguments[index]);
}
this.remove();
}
return this;
};
Node.prototype.next = function next() {
return this.parent.at(this.parent.index(this) + 1);
};
Node.prototype.prev = function prev() {
return this.parent.at(this.parent.index(this) - 1);
};
Node.prototype.clone = function clone() {
var overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var cloned = cloneNode(this);
for (var name in overrides) {
cloned[name] = overrides[name];
}
return cloned;
};
/**
* Some non-standard syntax doesn't follow normal escaping rules for css.
* This allows non standard syntax to be appended to an existing property
* by specifying the escaped value. By specifying the escaped value,
* illegal characters are allowed to be directly inserted into css output.
* @param {string} name the property to set
* @param {any} value the unescaped value of the property
* @param {string} valueEscaped optional. the escaped value of the property.
*/
Node.prototype.appendToPropertyAndEscape = function appendToPropertyAndEscape(name, value, valueEscaped) {
if (!this.raws) {
this.raws = {};
}
var originalValue = this[name];
var originalEscaped = this.raws[name];
this[name] = originalValue + value; // this may trigger a setter that updates raws, so it has to be set first.
if (originalEscaped || valueEscaped !== value) {
this.raws[name] = (originalEscaped || originalValue) + valueEscaped;
} else {
delete this.raws[name]; // delete any escaped value that was created by the setter.
}
};
/**
* Some non-standard syntax doesn't follow normal escaping rules for css.
* This allows the escaped value to be specified directly, allowing illegal
* characters to be directly inserted into css output.
* @param {string} name the property to set
* @param {any} value the unescaped value of the property
* @param {string} valueEscaped the escaped value of the property.
*/
Node.prototype.setPropertyAndEscape = function setPropertyAndEscape(name, value, valueEscaped) {
if (!this.raws) {
this.raws = {};
}
this[name] = value; // this may trigger a setter that updates raws, so it has to be set first.
this.raws[name] = valueEscaped;
};
/**
* When you want a value to passed through to CSS directly. This method
* deletes the corresponding raw value causing the stringifier to fallback
* to the unescaped value.
* @param {string} name the property to set.
* @param {any} value The value that is both escaped and unescaped.
*/
Node.prototype.setPropertyWithoutEscape = function setPropertyWithoutEscape(name, value) {
this[name] = value; // this may trigger a setter that updates raws, so it has to be set first.
if (this.raws) {
delete this.raws[name];
}
};
/**
*
* @param {number} line The number (starting with 1)
* @param {number} column The column number (starting with 1)
*/
Node.prototype.isAtPosition = function isAtPosition(line, column) {
if (this.source && this.source.start && this.source.end) {
if (this.source.start.line > line) {
return false;
}
if (this.source.end.line < line) {
return false;
}
if (this.source.start.line === line && this.source.start.column > column) {
return false;
}
if (this.source.end.line === line && this.source.end.column < column) {
return false;
}
return true;
}
return undefined;
};
Node.prototype.stringifyProperty = function stringifyProperty(name) {
return this.raws && this.raws[name] || this[name];
};
Node.prototype.toString = function toString() {
return [this.rawSpaceBefore, String(this.stringifyProperty("value")), this.rawSpaceAfter].join('');
};
_createClass(Node, [{
key: 'rawSpaceBefore',
get: function get() {
var rawSpace = this.raws && this.raws.spaces && this.raws.spaces.before;
if (rawSpace === undefined) {
rawSpace = this.spaces && this.spaces.before;
}
return rawSpace || "";
},
set: function set(raw) {
(0, _util.ensureObject)(this, "raws", "spaces");
this.raws.spaces.before = raw;
}
}, {
key: 'rawSpaceAfter',
get: function get() {
var rawSpace = this.raws && this.raws.spaces && this.raws.spaces.after;
if (rawSpace === undefined) {
rawSpace = this.spaces.after;
}
return rawSpace || "";
},
set: function set(raw) {
(0, _util.ensureObject)(this, "raws", "spaces");
this.raws.spaces.after = raw;
}
}]);
return Node;
}();
exports.default = Node;
module.exports = exports['default'];
@@ -0,0 +1,40 @@
'use strict';
exports.__esModule = true;
var _container = require('./container');
var _container2 = _interopRequireDefault(_container);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Pseudo = function (_Container) {
_inherits(Pseudo, _Container);
function Pseudo(opts) {
_classCallCheck(this, Pseudo);
var _this = _possibleConstructorReturn(this, _Container.call(this, opts));
_this.type = _types.PSEUDO;
return _this;
}
Pseudo.prototype.toString = function toString() {
var params = this.length ? '(' + this.map(String).join(',') + ')' : '';
return [this.rawSpaceBefore, this.stringifyProperty("value"), params, this.rawSpaceAfter].join('');
};
return Pseudo;
}(_container2.default);
exports.default = Pseudo;
module.exports = exports['default'];
@@ -0,0 +1,60 @@
'use strict';
exports.__esModule = true;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _container = require('./container');
var _container2 = _interopRequireDefault(_container);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Root = function (_Container) {
_inherits(Root, _Container);
function Root(opts) {
_classCallCheck(this, Root);
var _this = _possibleConstructorReturn(this, _Container.call(this, opts));
_this.type = _types.ROOT;
return _this;
}
Root.prototype.toString = function toString() {
var str = this.reduce(function (memo, selector) {
memo.push(String(selector));
return memo;
}, []).join(',');
return this.trailingComma ? str + ',' : str;
};
Root.prototype.error = function error(message, options) {
if (this._error) {
return this._error(message, options);
} else {
return new Error(message);
}
};
_createClass(Root, [{
key: 'errorGenerator',
set: function set(handler) {
this._error = handler;
}
}]);
return Root;
}(_container2.default);
exports.default = Root;
module.exports = exports['default'];
@@ -0,0 +1,35 @@
'use strict';
exports.__esModule = true;
var _container = require('./container');
var _container2 = _interopRequireDefault(_container);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Selector = function (_Container) {
_inherits(Selector, _Container);
function Selector(opts) {
_classCallCheck(this, Selector);
var _this = _possibleConstructorReturn(this, _Container.call(this, opts));
_this.type = _types.SELECTOR;
return _this;
}
return Selector;
}(_container2.default);
exports.default = Selector;
module.exports = exports['default'];
@@ -0,0 +1,35 @@
'use strict';
exports.__esModule = true;
var _node = require('./node');
var _node2 = _interopRequireDefault(_node);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var String = function (_Node) {
_inherits(String, _Node);
function String(opts) {
_classCallCheck(this, String);
var _this = _possibleConstructorReturn(this, _Node.call(this, opts));
_this.type = _types.STRING;
return _this;
}
return String;
}(_node2.default);
exports.default = String;
module.exports = exports['default'];
@@ -0,0 +1,35 @@
'use strict';
exports.__esModule = true;
var _namespace = require('./namespace');
var _namespace2 = _interopRequireDefault(_namespace);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Tag = function (_Namespace) {
_inherits(Tag, _Namespace);
function Tag(opts) {
_classCallCheck(this, Tag);
var _this = _possibleConstructorReturn(this, _Namespace.call(this, opts));
_this.type = _types.TAG;
return _this;
}
return Tag;
}(_namespace2.default);
exports.default = Tag;
module.exports = exports['default'];
@@ -0,0 +1,15 @@
'use strict';
exports.__esModule = true;
var TAG = exports.TAG = 'tag';
var STRING = exports.STRING = 'string';
var SELECTOR = exports.SELECTOR = 'selector';
var ROOT = exports.ROOT = 'root';
var PSEUDO = exports.PSEUDO = 'pseudo';
var NESTING = exports.NESTING = 'nesting';
var ID = exports.ID = 'id';
var COMMENT = exports.COMMENT = 'comment';
var COMBINATOR = exports.COMBINATOR = 'combinator';
var CLASS = exports.CLASS = 'class';
var ATTRIBUTE = exports.ATTRIBUTE = 'attribute';
var UNIVERSAL = exports.UNIVERSAL = 'universal';
@@ -0,0 +1,36 @@
'use strict';
exports.__esModule = true;
var _namespace = require('./namespace');
var _namespace2 = _interopRequireDefault(_namespace);
var _types = require('./types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Universal = function (_Namespace) {
_inherits(Universal, _Namespace);
function Universal(opts) {
_classCallCheck(this, Universal);
var _this = _possibleConstructorReturn(this, _Namespace.call(this, opts));
_this.type = _types.UNIVERSAL;
_this.value = '*';
return _this;
}
return Universal;
}(_namespace2.default);
exports.default = Universal;
module.exports = exports['default'];
@@ -0,0 +1,10 @@
"use strict";
exports.__esModule = true;
exports.default = sortAscending;
function sortAscending(list) {
return list.sort(function (a, b) {
return a - b;
});
};
module.exports = exports["default"];
@@ -0,0 +1,39 @@
'use strict';
exports.__esModule = true;
var ampersand = exports.ampersand = 38;
var asterisk = exports.asterisk = 42;
var at = exports.at = 64;
var comma = exports.comma = 44;
var colon = exports.colon = 58;
var semicolon = exports.semicolon = 59;
var openParenthesis = exports.openParenthesis = 40;
var closeParenthesis = exports.closeParenthesis = 41;
var openSquare = exports.openSquare = 91;
var closeSquare = exports.closeSquare = 93;
var dollar = exports.dollar = 36;
var tilde = exports.tilde = 126;
var caret = exports.caret = 94;
var plus = exports.plus = 43;
var equals = exports.equals = 61;
var pipe = exports.pipe = 124;
var greaterThan = exports.greaterThan = 62;
var space = exports.space = 32;
var singleQuote = exports.singleQuote = 39;
var doubleQuote = exports.doubleQuote = 34;
var slash = exports.slash = 47;
var bang = exports.bang = 33;
var backslash = exports.backslash = 92;
var cr = exports.cr = 13;
var feed = exports.feed = 12;
var newline = exports.newline = 10;
var tab = exports.tab = 9;
// Expose aliases primarily for readability.
var str = exports.str = singleQuote;
// No good single character representation!
var comment = exports.comment = -1;
var word = exports.word = -2;
var combinator = exports.combinator = -3;
@@ -0,0 +1,271 @@
'use strict';
exports.__esModule = true;
exports.FIELDS = undefined;
var _unescapable, _wordDelimiters;
exports.default = tokenize;
var _tokenTypes = require('./tokenTypes');
var t = _interopRequireWildcard(_tokenTypes);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
var unescapable = (_unescapable = {}, _unescapable[t.tab] = true, _unescapable[t.newline] = true, _unescapable[t.cr] = true, _unescapable[t.feed] = true, _unescapable);
var wordDelimiters = (_wordDelimiters = {}, _wordDelimiters[t.space] = true, _wordDelimiters[t.tab] = true, _wordDelimiters[t.newline] = true, _wordDelimiters[t.cr] = true, _wordDelimiters[t.feed] = true, _wordDelimiters[t.ampersand] = true, _wordDelimiters[t.asterisk] = true, _wordDelimiters[t.bang] = true, _wordDelimiters[t.comma] = true, _wordDelimiters[t.colon] = true, _wordDelimiters[t.semicolon] = true, _wordDelimiters[t.openParenthesis] = true, _wordDelimiters[t.closeParenthesis] = true, _wordDelimiters[t.openSquare] = true, _wordDelimiters[t.closeSquare] = true, _wordDelimiters[t.singleQuote] = true, _wordDelimiters[t.doubleQuote] = true, _wordDelimiters[t.plus] = true, _wordDelimiters[t.pipe] = true, _wordDelimiters[t.tilde] = true, _wordDelimiters[t.greaterThan] = true, _wordDelimiters[t.equals] = true, _wordDelimiters[t.dollar] = true, _wordDelimiters[t.caret] = true, _wordDelimiters[t.slash] = true, _wordDelimiters);
var hex = {};
var hexChars = "0123456789abcdefABCDEF";
for (var i = 0; i < hexChars.length; i++) {
hex[hexChars.charCodeAt(i)] = true;
}
/**
* Returns the last index of the bar css word
* @param {string} css The string in which the word begins
* @param {number} start The index into the string where word's first letter occurs
*/
function consumeWord(css, start) {
var next = start;
var code = void 0;
do {
code = css.charCodeAt(next);
if (wordDelimiters[code]) {
return next - 1;
} else if (code === t.backslash) {
next = consumeEscape(css, next) + 1;
} else {
// All other characters are part of the word
next++;
}
} while (next < css.length);
return next - 1;
}
/**
* Returns the last index of the escape sequence
* @param {string} css The string in which the sequence begins
* @param {number} start The index into the string where escape character (`\`) occurs.
*/
function consumeEscape(css, start) {
var next = start;
var code = css.charCodeAt(next + 1);
if (unescapable[code]) {
// just consume the escape char
} else if (hex[code]) {
var hexDigits = 0;
// consume up to 6 hex chars
do {
next++;
hexDigits++;
code = css.charCodeAt(next + 1);
} while (hex[code] && hexDigits < 6);
// if fewer than 6 hex chars, a trailing space ends the escape
if (hexDigits < 6 && code === t.space) {
next++;
}
} else {
// the next char is part of the current word
next++;
}
return next;
}
var FIELDS = exports.FIELDS = {
TYPE: 0,
START_LINE: 1,
START_COL: 2,
END_LINE: 3,
END_COL: 4,
START_POS: 5,
END_POS: 6
};
function tokenize(input) {
var tokens = [];
var css = input.css.valueOf();
var _css = css,
length = _css.length;
var offset = -1;
var line = 1;
var start = 0;
var end = 0;
var code = void 0,
content = void 0,
endColumn = void 0,
endLine = void 0,
escaped = void 0,
escapePos = void 0,
last = void 0,
lines = void 0,
next = void 0,
nextLine = void 0,
nextOffset = void 0,
quote = void 0,
tokenType = void 0;
function unclosed(what, fix) {
if (input.safe) {
// fyi: this is never set to true.
css += fix;
next = css.length - 1;
} else {
throw input.error('Unclosed ' + what, line, start - offset, start);
}
}
while (start < length) {
code = css.charCodeAt(start);
if (code === t.newline) {
offset = start;
line += 1;
}
switch (code) {
case t.space:
case t.tab:
case t.newline:
case t.cr:
case t.feed:
next = start;
do {
next += 1;
code = css.charCodeAt(next);
if (code === t.newline) {
offset = next;
line += 1;
}
} while (code === t.space || code === t.newline || code === t.tab || code === t.cr || code === t.feed);
tokenType = t.space;
endLine = line;
endColumn = next - offset - 1;
end = next;
break;
case t.plus:
case t.greaterThan:
case t.tilde:
case t.pipe:
next = start;
do {
next += 1;
code = css.charCodeAt(next);
} while (code === t.plus || code === t.greaterThan || code === t.tilde || code === t.pipe);
tokenType = t.combinator;
endLine = line;
endColumn = start - offset;
end = next;
break;
// Consume these characters as single tokens.
case t.asterisk:
case t.ampersand:
case t.bang:
case t.comma:
case t.equals:
case t.dollar:
case t.caret:
case t.openSquare:
case t.closeSquare:
case t.colon:
case t.semicolon:
case t.openParenthesis:
case t.closeParenthesis:
next = start;
tokenType = code;
endLine = line;
endColumn = start - offset;
end = next + 1;
break;
case t.singleQuote:
case t.doubleQuote:
quote = code === t.singleQuote ? "'" : '"';
next = start;
do {
escaped = false;
next = css.indexOf(quote, next + 1);
if (next === -1) {
unclosed('quote', quote);
}
escapePos = next;
while (css.charCodeAt(escapePos - 1) === t.backslash) {
escapePos -= 1;
escaped = !escaped;
}
} while (escaped);
tokenType = t.str;
endLine = line;
endColumn = start - offset;
end = next + 1;
break;
default:
if (code === t.slash && css.charCodeAt(start + 1) === t.asterisk) {
next = css.indexOf('*/', start + 2) + 1;
if (next === 0) {
unclosed('comment', '*/');
}
content = css.slice(start, next + 1);
lines = content.split('\n');
last = lines.length - 1;
if (last > 0) {
nextLine = line + last;
nextOffset = next - lines[last].length;
} else {
nextLine = line;
nextOffset = offset;
}
tokenType = t.comment;
line = nextLine;
endLine = nextLine;
endColumn = next - nextOffset;
} else if (code === t.slash) {
next = start;
tokenType = code;
endLine = line;
endColumn = start - offset;
end = next + 1;
} else {
next = consumeWord(css, start);
tokenType = t.word;
endLine = line;
endColumn = next - offset;
}
end = next + 1;
break;
}
// Ensure that the token structure remains consistent
tokens.push([tokenType, // [0] Token type
line, // [1] Starting line
start - offset, // [2] Starting column
endLine, // [3] Ending line
endColumn, // [4] Ending column
start, // [5] Start position / Source index
end] // [6] End position
);
// Reset offset for the next token
if (nextOffset) {
offset = nextOffset;
nextOffset = null;
}
start = end;
}
return tokens;
}
@@ -0,0 +1,20 @@
"use strict";
exports.__esModule = true;
exports.default = ensureObject;
function ensureObject(obj) {
for (var _len = arguments.length, props = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
props[_key - 1] = arguments[_key];
}
while (props.length > 0) {
var prop = props.shift();
if (!obj[prop]) {
obj[prop] = {};
}
obj = obj[prop];
}
}
module.exports = exports["default"];
@@ -0,0 +1,22 @@
"use strict";
exports.__esModule = true;
exports.default = getProp;
function getProp(obj) {
for (var _len = arguments.length, props = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
props[_key - 1] = arguments[_key];
}
while (props.length > 0) {
var prop = props.shift();
if (!obj[prop]) {
return undefined;
}
obj = obj[prop];
}
return obj;
}
module.exports = exports["default"];
@@ -0,0 +1,41 @@
'use strict';
exports.__esModule = true;
var _unesc = require('./unesc');
Object.defineProperty(exports, 'unesc', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_unesc).default;
}
});
var _getProp = require('./getProp');
Object.defineProperty(exports, 'getProp', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_getProp).default;
}
});
var _ensureObject = require('./ensureObject');
Object.defineProperty(exports, 'ensureObject', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_ensureObject).default;
}
});
var _stripComments = require('./stripComments');
Object.defineProperty(exports, 'stripComments', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_stripComments).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,21 @@
"use strict";
exports.__esModule = true;
exports.default = stripComments;
function stripComments(str) {
var s = "";
var commentStart = str.indexOf("/*");
var lastEnd = 0;
while (commentStart >= 0) {
s = s + str.slice(lastEnd, commentStart);
var commentEnd = str.indexOf("*/", commentStart + 2);
if (commentEnd < 0) {
return s;
}
lastEnd = commentEnd + 2;
commentStart = str.indexOf("/*", lastEnd);
}
s = s + str.slice(lastEnd);
return s;
}
module.exports = exports["default"];
@@ -0,0 +1,18 @@
"use strict";
exports.__esModule = true;
exports.default = unesc;
var HEX_ESC = /\\(?:([0-9a-fA-F]{6})|([0-9a-fA-F]{1,5})(?: |(?![0-9a-fA-F])))/g;
var OTHER_ESC = /\\(.)/g;
function unesc(str) {
str = str.replace(HEX_ESC, function (_, hex1, hex2) {
var hex = hex1 || hex2;
var code = parseInt(hex, 16);
return String.fromCharCode(code);
});
str = str.replace(OTHER_ESC, function (_, char) {
return char;
});
return str;
}
module.exports = exports["default"];
@@ -0,0 +1,76 @@
{
"name": "postcss-selector-parser",
"version": "5.0.0",
"devDependencies": {
"ava": "^0.25.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-plugin-add-module-exports": "^0.2.0",
"babel-plugin-precompile-charcodes": "^1.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"coveralls": "^3.0.2",
"del-cli": "^1.1.0",
"eslint": "^4.19.1",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-import": "^2.14.0",
"glob": "^7.1.3",
"minimist": "^1.2.0",
"nyc": "^11.7.3",
"postcss": "^7.0.7",
"semver": "^5.6.0"
},
"main": "dist/index.js",
"types": "postcss-selector-parser.d.ts",
"files": [
"API.md",
"CHANGELOG.md",
"LICENSE-MIT",
"dist",
"postcss-selector-parser.d.ts"
],
"scripts": {
"pretest": "eslint src",
"prepare": "del-cli dist && BABEL_ENV=publish babel src --out-dir dist --ignore /__tests__/",
"lintfix": "eslint --fix src",
"report": "nyc report --reporter=html",
"test": "nyc ava src/__tests__/*.js",
"testone": "ava"
},
"dependencies": {
"cssesc": "^2.0.0",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
},
"license": "MIT",
"engines": {
"node": ">=4"
},
"homepage": "https://github.com/postcss/postcss-selector-parser",
"contributors": [
{
"name": "Ben Briggs",
"email": "beneb.info@gmail.com",
"url": "http://beneb.info"
},
{
"name": "Chris Eppstein",
"email": "chris@eppsteins.net",
"url": "http://twitter.com/chriseppstein"
}
],
"repository": "postcss/postcss-selector-parser",
"ava": {
"require": "babel-register",
"concurrency": 5
},
"nyc": {
"exclude": [
"node_modules",
"**/__tests__"
]
}
}
@@ -0,0 +1,499 @@
// Type definitions for postcss-selector-parser 2.2.3
// Definitions by: Chris Eppstein <chris@eppsteins.net>
/*~ Note that ES6 modules cannot directly export callable functions.
*~ This file should be imported using the CommonJS-style:
*~ import x = require('someLibrary');
*~
*~ Refer to the documentation to understand common
*~ workarounds for this limitation of ES6 modules.
*/
/*~ This declaration specifies that the function
*~ is the exported object from the file
*/
export = parser;
// TODO: Conditional types in TS 1.8 will really clean this up.
declare function parser(): parser.Processor<never>;
declare function parser<Transform>(processor: parser.AsyncProcessor<Transform>): parser.Processor<Transform, never>;
declare function parser(processor: parser.AsyncProcessor<void>): parser.Processor<never, never>;
declare function parser<Transform>(processor: parser.SyncProcessor<Transform>): parser.Processor<Transform>;
declare function parser(processor: parser.SyncProcessor<void>): parser.Processor<never>;
declare function parser<Transform>(processor?: parser.SyncProcessor<Transform> | parser.AsyncProcessor<Transform>): parser.Processor<Transform>;
/*~ If you want to expose types from your module as well, you can
*~ place them in this block. Often you will want to describe the
*~ shape of the return type of the function; that type should
*~ be declared in here, as this example shows.
*/
declare namespace parser {
/* copied from postcss -- so we don't need to add a dependency */
type ErrorOptions = {
plugin?: string;
word?: string;
index?: number
};
/* the bits we use of postcss.Rule, copied from postcss -- so we don't need to add a dependency */
type PostCSSRuleNode = {
selector: string
/**
* @returns postcss.CssSyntaxError but it's a complex object, caller
* should cast to it if they have a dependency on postcss.
*/
error(message: string, options?: ErrorOptions): Error;
};
/** Accepts a string */
type Selectors = string | PostCSSRuleNode
type ProcessorFn<ReturnType = void> = (root: parser.Root) => ReturnType;
type SyncProcessor<Transform = void> = ProcessorFn<Transform>;
type AsyncProcessor<Transform = void> = ProcessorFn<PromiseLike<Transform>>;
const TAG: "tag";
const STRING: "string";
const SELECTOR: "selector";
const ROOT: "root";
const PSEUDO: "pseudo";
const NESTING: "nesting";
const ID: "id";
const COMMENT: "comment";
const COMBINATOR: "combinator";
const CLASS: "class";
const ATTRIBUTE: "attribute";
const UNIVERSAL: "universal";
interface NodeTypes {
tag: Tag,
string: String,
selector: Selector,
root: Root,
pseudo: Pseudo,
nesting: Nesting,
id: Identifier,
comment: Comment,
combinator: Combinator,
class: ClassName,
attribute: Attribute,
universal: Universal
}
type Node = NodeTypes[keyof NodeTypes];
function isNode(node: any): node is Node;
interface Options {
/**
* Preserve whitespace when true. Default: false;
*/
lossless: boolean;
/**
* When true and a postcss.Rule is passed, set the result of
* processing back onto the rule when done. Default: false.
*/
updateSelector: boolean;
}
class Processor<
TransformType = never,
SyncSelectorsType extends Selectors | never = Selectors
> {
res: Root;
readonly result: String;
ast(selectors: Selectors, options?: Partial<Options>): Promise<Root>;
astSync(selectors: SyncSelectorsType, options?: Partial<Options>): Root;
transform(selectors: Selectors, options?: Partial<Options>): Promise<TransformType>;
transformSync(selectors: SyncSelectorsType, options?: Partial<Options>): TransformType;
process(selectors: Selectors, options?: Partial<Options>): Promise<string>;
processSync(selectors: SyncSelectorsType, options?: Partial<Options>): string;
}
interface ParserOptions {
css: string;
error: (message: string, options: ErrorOptions) => Error;
options: Options;
}
class Parser {
input: ParserOptions;
lossy: boolean;
position: number;
root: Root;
selectors: string;
current: Selector;
constructor(input: ParserOptions);
/**
* Raises an error, if the processor is invoked on
* a postcss Rule node, a better error message is raised.
*/
error(message: string, options?: ErrorOptions): void;
}
interface NodeSource {
start?: {
line: number,
column: number
},
end?: {
line: number,
column: number
}
}
interface SpaceAround {
before: string;
after: string;
}
interface Spaces extends SpaceAround {
[spaceType: string]: string | Partial<SpaceAround> | undefined;
}
interface NodeOptions<Value = string> {
value: Value;
spaces?: Partial<Spaces>;
source?: NodeSource;
sourceIndex?: number;
}
interface Base<
Value extends string | undefined = string,
ParentType extends Container | undefined = Container | undefined
> {
type: keyof NodeTypes;
parent: ParentType;
value: Value;
spaces: Spaces;
source?: NodeSource;
sourceIndex: number;
rawSpaceBefore: string;
rawSpaceAfter: string;
remove(): Node;
replaceWith(...nodes: Node[]): Node;
next(): Node;
prev(): Node;
clone(opts: {[override: string]:any}): Node;
/**
* Return whether this node includes the character at the position of the given line and column.
* Returns undefined if the nodes lack sufficient source metadata to determine the position.
* @param line 1-index based line number relative to the start of the selector.
* @param column 1-index based column number relative to the start of the selector.
*/
isAtPosition(line: number, column: number): boolean | undefined;
/**
* Some non-standard syntax doesn't follow normal escaping rules for css,
* this allows the escaped value to be specified directly, allowing illegal characters to be
* directly inserted into css output.
* @param name the property to set
* @param value the unescaped value of the property
* @param valueEscaped optional. the escaped value of the property.
*/
setPropertyAndEscape(name: string, value: any, valueEscaped: string): void;
/**
* When you want a value to passed through to CSS directly. This method
* deletes the corresponding raw value causing the stringifier to fallback
* to the unescaped value.
* @param name the property to set.
* @param value The value that is both escaped and unescaped.
*/
setPropertyWithoutEscape(name: string, value: any): void;
/**
* Some non-standard syntax doesn't follow normal escaping rules for css.
* This allows non standard syntax to be appended to an existing property
* by specifying the escaped value. By specifying the escaped value,
* illegal characters are allowed to be directly inserted into css output.
* @param {string} name the property to set
* @param {any} value the unescaped value of the property
* @param {string} valueEscaped optional. the escaped value of the property.
*/
appendToPropertyAndEscape(name: string, value: any, valueEscaped: string): void;
toString(): string;
}
interface ContainerOptions extends NodeOptions {
nodes?: Array<Node>;
}
interface Container<Value extends string | undefined = string> extends Base<Value> {
nodes: Array<Node>;
append(selector: Selector): Container;
prepend(selector: Selector): Container;
at(index: number): Node;
/**
* Return the most specific node at the line and column number given.
* The source location is based on the original parsed location, locations aren't
* updated as selector nodes are mutated.
*
* Note that this location is relative to the location of the first character
* of the selector, and not the location of the selector in the overall document
* when used in conjunction with postcss.
*
* If not found, returns undefined.
* @param line The line number of the node to find. (1-based index)
* @param col The column number of the node to find. (1-based index)
*/
atPosition(line: number, column: number): Node;
index(child: Node): number;
readonly first: Node;
readonly last: Node;
readonly length: number;
removeChild(child: Node): Container;
removeAll(): Container;
empty(): Container;
insertAfter(oldNode: Node, newNode: Node): Container;
insertBefore(oldNode: Node, newNode: Node): Container;
each(callback: (node: Node) => boolean | void): boolean | undefined;
walk(callback: (node: Node) => boolean | void): boolean | undefined;
walkAttributes(callback: (node: Node) => boolean | void): boolean | undefined;
walkClasses(callback: (node: Node) => boolean | void): boolean | undefined;
walkCombinators(callback: (node: Node) => boolean | void): boolean | undefined;
walkComments(callback: (node: Node) => boolean | void): boolean | undefined;
walkIds(callback: (node: Node) => boolean | void): boolean | undefined;
walkNesting(callback: (node: Node) => boolean | void): boolean | undefined;
walkPseudos(callback: (node: Node) => boolean | void): boolean | undefined;
walkTags(callback: (node: Node) => boolean | void): boolean | undefined;
split(callback: (node: Node) => boolean): [Node[], Node[]];
map(callback: (node: Node) => Node): Node[];
reduce<T>(callback: (node: Node) => Node, memo: T): T;
every(callback: (node: Node) => boolean): boolean;
some(callback: (node: Node) => boolean): boolean;
filter(callback: (node: Node) => boolean): Node[];
sort(callback: (nodeA: Node, nodeB: Node) => number): Node[];
toString(): string;
}
function isContainer(node: any): node is Root | Selector | Pseudo;
interface NamespaceOptions<Value extends string | undefined = string> extends NodeOptions<Value> {
namespace?: string | true;
}
interface Namespace<Value extends string | undefined = string> extends Base<Value> {
/** alias for namespace */
ns: string | true;
/**
* namespace prefix.
*/
namespace: string | true;
/**
* If a namespace exists, prefix the value provided with it, separated by |.
*/
qualifiedName(value: string): string;
/**
* A string representing the namespace suitable for output.
*/
readonly namespaceString: string;
}
function isNamespace(node: any): node is Attribute | Tag;
interface Root extends Container<undefined> {
type: "root";
/**
* Raises an error, if the processor is invoked on
* a postcss Rule node, a better error message is raised.
*/
error(message: string, options?: ErrorOptions): Error;
nodeAt(line: number, column: number): Node
}
function root(opts: ContainerOptions): Root;
function isRoot(node: any): node is Root;
interface Selector extends Container {
type: "selector";
}
function selector(opts: ContainerOptions): Selector;
function isSelector(node: any): node is Selector;
interface Combinator extends Base {
type: "combinator"
}
function combinator(opts: NodeOptions): Combinator;
function isCombinator(node: any): node is Combinator;
interface ClassName extends Base {
type: "class";
}
function className(opts: NamespaceOptions): ClassName;
function isClassName(node: any): node is ClassName;
type AttributeOperator = "=" | "~=" | "|=" | "^=" | "$=" | "*=";
type QuoteMark = '"' | "'" | null;
interface PreferredQuoteMarkOptions {
quoteMark?: QuoteMark;
preferCurrentQuoteMark?: boolean;
}
interface SmartQuoteMarkOptions extends PreferredQuoteMarkOptions {
smart?: boolean;
}
interface AttributeOptions extends NamespaceOptions<string | undefined> {
attribute: string;
operator?: AttributeOperator;
insensitive?: boolean;
quoteMark?: QuoteMark;
/** @deprecated Use quoteMark instead. */
quoted?: boolean;
spaces?: {
before?: string;
after?: string;
attribute?: Partial<SpaceAround>;
operator?: Partial<SpaceAround>;
value?: Partial<SpaceAround>;
insensitive?: Partial<SpaceAround>;
}
raws: {
unquoted?: string;
attribute?: string;
operator?: string;
value?: string;
insensitive?: string;
spaces?: {
attribute?: Partial<Spaces>;
operator?: Partial<Spaces>;
value?: Partial<Spaces>;
insensitive?: Partial<Spaces>;
}
};
}
interface Attribute extends Namespace<string | undefined> {
type: "attribute";
attribute: string;
operator?: AttributeOperator;
insensitive?: boolean;
quoteMark: QuoteMark;
quoted?: boolean;
spaces: {
before: string;
after: string;
attribute?: Partial<Spaces>;
operator?: Partial<Spaces>;
value?: Partial<Spaces>;
insensitive?: Partial<Spaces>;
}
raws: {
/** @deprecated The attribute value is unquoted, use that instead.. */
unquoted?: string;
attribute?: string;
operator?: string;
/** The value of the attribute with quotes and escapes. */
value?: string;
insensitive?: string;
spaces?: {
attribute?: Partial<Spaces>;
operator?: Partial<Spaces>;
value?: Partial<Spaces>;
insensitive?: Partial<Spaces>;
}
};
/**
* The attribute name after having been qualified with a namespace.
*/
readonly qualifiedAttribute: string;
/**
* The case insensitivity flag or an empty string depending on whether this
* attribute is case insensitive.
*/
readonly insensitiveFlag : 'i' | '';
/**
* Returns the attribute's value quoted such that it would be legal to use
* in the value of a css file. The original value's quotation setting
* used for stringification is left unchanged. See `setValue(value, options)`
* if you want to control the quote settings of a new value for the attribute or
* `set quoteMark(mark)` if you want to change the quote settings of the current
* value.
*
* You can also change the quotation used for the current value by setting quoteMark.
**/
getQuotedValue(options?: SmartQuoteMarkOptions): string;
/**
* Set the unescaped value with the specified quotation options. The value
* provided must not include any wrapping quote marks -- those quotes will
* be interpreted as part of the value and escaped accordingly.
* @param value
*/
setValue(value: string, options?: SmartQuoteMarkOptions): void;
/**
* Intelligently select a quoteMark value based on the value's contents. If
* the value is a legal CSS ident, it will not be quoted. Otherwise a quote
* mark will be picked that minimizes the number of escapes.
*
* If there's no clear winner, the quote mark from these options is used,
* then the source quote mark (this is inverted if `preferCurrentQuoteMark` is
* true). If the quoteMark is unspecified, a double quote is used.
**/
smartQuoteMark(options: PreferredQuoteMarkOptions): QuoteMark;
/**
* Selects the preferred quote mark based on the options and the current quote mark value.
* If you want the quote mark to depend on the attribute value, call `smartQuoteMark(opts)`
* instead.
*/
preferredQuoteMark(options: PreferredQuoteMarkOptions): QuoteMark
/**
* returns the offset of the attribute part specified relative to the
* start of the node of the output string.
*
* * "ns" - alias for "namespace"
* * "namespace" - the namespace if it exists.
* * "attribute" - the attribute name
* * "attributeNS" - the start of the attribute or its namespace
* * "operator" - the match operator of the attribute
* * "value" - The value (string or identifier)
* * "insensitive" - the case insensitivity flag;
* @param part One of the possible values inside an attribute.
* @returns -1 if the name is invalid or the value doesn't exist in this attribute.
*/
offsetOf(part: "ns" | "namespace" | "attribute" | "attributeNS" | "operator" | "value" | "insensitive"): number;
}
function attribute(opts: AttributeOptions): Attribute;
function isAttribute(node: any): node is Attribute;
interface Pseudo extends Container {
type: "pseudo";
}
function pseudo(opts: ContainerOptions): Pseudo;
/**
* Checks wether the node is the Psuedo subtype of node.
*/
function isPseudo(node: any): node is Pseudo;
/**
* Checks wether the node is, specifically, a pseudo element instead of
* pseudo class.
*/
function isPseudoElement(node: any): node is Pseudo;
/**
* Checks wether the node is, specifically, a pseudo class instead of
* pseudo element.
*/
function isPseudoClass(node: any): node is Pseudo;
interface Tag extends Namespace {
type: "tag";
}
function tag(opts: NamespaceOptions): Tag;
function isTag(node: any): node is Tag;
interface Comment extends Base {
type: "comment";
}
function comment(opts: NodeOptions): Comment;
function isComment(node: any): node is Comment;
interface Identifier extends Base {
type: "id";
}
function id(opts: any): any;
function isIdentifier(node: any): node is Identifier;
interface Nesting extends Base {
type: "nesting";
}
function nesting(opts: any): any;
function isNesting(node: any): node is Nesting;
interface String extends Base {
type: "string";
}
function string(opts: NodeOptions): String;
function isString(node: any): node is String;
interface Universal extends Base {
type: "universal";
}
function universal(opts?: NamespaceOptions): any;
function isUniversal(node: any): node is Universal;
}
@@ -0,0 +1,69 @@
{
"name": "@vue/component-compiler-utils",
"version": "3.1.0",
"description": "Lower level utilities for compiling Vue single file components",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"files": [
"dist",
"lib"
],
"scripts": {
"lint": "prettier --write \"{lib,test}/**/*.ts\"",
"test": "prettier --list-different \"{lib,test}/**/*.ts\" && jest --coverage",
"build": "rm -rf dist && tsc",
"prepublishOnly": "yarn build && conventional-changelog -p angular -r 2 -i CHANGELOG.md -s"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{ts,js}": [
"prettier --write",
"git add"
]
},
"repository": {
"type": "git",
"url": "git+https://github.com/vuejs/component-compiler-utils.git"
},
"keywords": [
"vue",
"sfc",
"component",
"compiler"
],
"author": "Evan You",
"license": "MIT",
"bugs": {
"url": "https://github.com/vuejs/component-compiler-utils/issues"
},
"homepage": "https://github.com/vuejs/component-compiler-utils#readme",
"devDependencies": {
"@types/jest": "^22.2.3",
"@types/node": "^10.12.20",
"conventional-changelog-cli": "^2.0.11",
"jest": "^24.0.0",
"less": "^3.9.0",
"lint-staged": "^8.1.1",
"pug": "^2.0.3",
"sass": "^1.17.3",
"stylus": "^0.54.5",
"ts-jest": "^24.0.0",
"typescript": "^3.3.0",
"vue": "^2.6.6",
"vue-template-compiler": "^2.6.6",
"yorkie": "^2.0.0"
},
"dependencies": {
"consolidate": "^0.15.1",
"hash-sum": "^1.0.2",
"lru-cache": "^4.1.2",
"merge-source-map": "^1.1.0",
"postcss": "^7.0.14",
"postcss-selector-parser": "^5.0.0",
"prettier": "^1.18.2",
"source-map": "~0.6.1",
"vue-template-es2015-compiler": "^1.9.0"
}
}
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019-present, liximomo(X.L)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@@ -0,0 +1,558 @@
# @vue/composition-api
Vue 2 plugin for **Composition API**
[![npm](https://img.shields.io/npm/v/@vue/composition-api)](https://www.npmjs.com/package/@vue/composition-api)
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vuejs/composition-api/Build%20&%20Test)](https://github.com/vuejs/composition-api/actions?query=workflow%3A%22Build+%26+Test%22)
[![Minzipped size](https://badgen.net/bundlephobia/minzip/@vue/composition-api)](https://bundlephobia.com/result?p=@vue/composition-api)
English | [中文](./README.zh-CN.md) ・ [**Composition API Docs**](https://v3.vuejs.org/guide/composition-api-introduction.html)
> ⚠️ With the release of [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html), which has Composition API built-in, **you no longer need this plugin**. Thereby this plugin has entered maintenance mode and will only support Vue 2.6 or earlier. This project will reach End of Life by the end of 2022.
## Installation
### NPM
```bash
npm install @vue/composition-api
# or
yarn add @vue/composition-api
```
You must install `@vue/composition-api` as a plugin via `Vue.use()` before you can use the [Composition API](https://composition-api.vuejs.org/) to compose your component.
```js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
```js
// use the APIs
import { ref, reactive } from '@vue/composition-api'
```
> :bulb: When you migrate to Vue 3, just replacing `@vue/composition-api` to `vue` and your code should just work.
### CDN
Include `@vue/composition-api` after Vue and it will install itself automatically.
<!--cdn-links-start-->
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.0"></script>
```
<!--cdn-links-end-->
`@vue/composition-api` will be exposed to global variable `window.VueCompositionAPI`.
```ts
const { ref, reactive } = VueCompositionAPI
```
## TypeScript Support
> TypeScript version **>4.2** is required
To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent`
```ts
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
// type inference enabled
})
```
### JSX/TSX
JSX is now officially supported on [vuejs/jsx](https://github.com/vuejs/jsx). You can enable it by following [this document](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx#usage). A community maintained version can be found at [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan).
To support TSX, create a declaration file with the following content in your project.
```ts
// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends ComponentRenderProxy {}
interface ElementAttributesProperty {
$props: any; // specify the property name to use
}
interface IntrinsicElements {
[elem: string]: any;
}
}
}
```
## SSR
Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the `onServerPrefetch` lifecycle hook that allows you to use the `serverPrefetch` hook found in the classic API.
```js
import { onServerPrefetch } from '@vue/composition-api'
export default {
setup(props, { ssrContext }) {
const result = ref()
onServerPrefetch(async () => {
result.value = await callApi(ssrContext.someId)
})
return {
result,
}
}
}
```
## Browser Compatibility
`@vue/composition-api` supports all modern browsers and IE11+. For lower versions IE you should install `WeakMap` polyfill (for example from `core-js` package).
## Limitations
> :white_check_mark: Support &nbsp;&nbsp;&nbsp;&nbsp;:x: Not Supported
### `Ref` Unwrap
<details>
<summary>
❌ <b>Should NOT</b> use <code>ref</code> in a plain object when working with <code>Array</code>
</summary>
```js
const a = {
count: ref(0),
}
const b = reactive({
list: [a], // `a.count` will not unwrap!!
})
// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0 // true
```
```js
const b = reactive({
list: [
{
count: ref(0), // no unwrap!!
},
],
})
// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0 // true
```
</details>
<details>
<summary>
✅ <b>Should</b> always use <code>ref</code> in a <code>reactive</code> when working with <code>Array</code>
</summary>
```js
const a = reactive({
list: [
reactive({
count: ref(0),
}),
]
})
// unwrapped
a.list[0].count === 0 // true
a.list.push(
reactive({
count: ref(1),
})
)
// unwrapped
a.list[1].count === 1 // true
```
</details>
### Template Refs
<details>
<summary>
✅ String ref && return it from <code>setup()</code>
</summary>
```html
<template>
<div ref="root"></div>
</template>
<script>
export default {
setup() {
const root = ref(null)
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(root.value) // <div/>
})
return {
root,
}
},
}
</script>
```
</details>
<details>
<summary>
✅ String ref && return it from <code>setup()</code> && Render Function / JSX
</summary>
```jsx
export default {
setup() {
const root = ref(null)
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(root.value) // <div/>
})
return {
root,
}
},
render() {
// with JSX
return () => <div ref="root" />
},
}
```
</details>
<details>
<summary>
❌ Function ref
</summary>
```html
<template>
<div :ref="el => root = el"></div>
</template>
<script>
export default {
setup() {
const root = ref(null)
return {
root,
}
},
}
</script>
```
</details>
<details>
<summary>
❌ Render Function / JSX in <code>setup()</code>
</summary>
```jsx
export default {
setup() {
const root = ref(null)
return () =>
h('div', {
ref: root,
})
// with JSX
return () => <div ref={root} />
},
}
```
</details>
<details>
<summary>
⚠️ <code>$refs</code> accessing workaround
</summary>
<br>
> :warning: **Warning**: The `SetupContext.refs` won't exist in `Vue 3.0`. `@vue/composition-api` provide it as a workaround here.
If you really want to use template refs in this case, you can access `vm.$refs` via `SetupContext.refs`
```jsx
export default {
setup(initProps, setupContext) {
const refs = setupContext.refs
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(refs.root) // <div/>
})
return () =>
h('div', {
ref: 'root',
})
// with JSX
return () => <div ref="root" />
},
}
```
</details>
### Reactive
<details>
<summary>
⚠️ <code>reactive()</code> <b>mutates</b> the original object
</summary>
`reactive` uses `Vue.observable` underneath which will ***mutate*** the original object.
> :bulb: In Vue 3, it will return an new proxy object.
</details>
<details>
<summary>
⚠️ <code>set</code> and <code>del</code> workaround for adding and deleting reactive properties
</summary>
> ⚠️ Warning: `set` and `del` do NOT exist in Vue 3. We provide them as a workaround here, due to the limitation of [Vue 2.x reactivity system](https://vuejs.org/v2/guide/reactivity.html#For-Objects).
>
> In Vue 2, you will need to call `set` to track new keys on an `object`(similar to `Vue.set` but for `reactive objects` created by the Composition API). In Vue 3, you can just assign them like normal objects.
>
> Similarly, in Vue 2 you will need to call `del` to [ensure a key deletion triggers view updates](https://vuejs.org/v2/api/#Vue-delete) in reactive objects (similar to `Vue.delete` but for `reactive objects` created by the Composition API). In Vue 3 you can just delete them by calling `delete foo.bar`.
```ts
import { reactive, set, del } from '@vue/composition-api'
const a = reactive({
foo: 1
})
// add new reactive key
set(a, 'bar', 1)
// remove a key and trigger reactivity
del(a, 'bar')
```
</details>
### Watch
<details>
<summary>
❌ <code>onTrack</code> and <code>onTrigger</code> are not available in <code>WatchOptions</code>
</summary>
```js
watch(() => {
/* ... */
}, {
immediate: true,
onTrack() {}, // not available
onTrigger() {}, // not available
})
```
</details>
### `createApp`
<details>
<summary>
⚠️ <code>createApp()</code> is global
</summary>
In Vue 3, `createApp()` is introduced to provide context(plugin, components, etc.) isolation between app instances. Due the the design of Vue 2, in this plugin, we provide `createApp()` as a forward compatible API which is just an alias of the global.
```ts
const app1 = createApp(RootComponent1)
app1.component('Foo', Foo) // equivalent to Vue.component('Foo', Foo)
app1.use(VueRouter) // equivalent to Vue.use(VueRouter)
const app2 = createApp(RootComponent2)
app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)
```
</details>
### `createElement` / `h`
<details>
<summary>
⚠️ <code>createElement</code> / <code>h</code> workaround
</summary>
<br>
`createElement` / `h` in Vue 2 is only accessable in `render()` function. To use it outside of `render()`, you can explicitly bind a component instance to it.
> :warning: **Warning**: This ability is provided as a workaround Vue 2, it's not part of the Vue 3 API.
```jsx
import { h as _h } from '@vue/composition-api'
export default {
setup() {
const vm = getCurrentInstance()
const h = _h.bind(vm)
return () =>
h('div', {
ref: 'root',
})
},
}
```
</details>
### `shallowReadonly`
<details>
<summary>
⚠️ <code>shallowReadonly()</code> will create a new object and with the same root properties, new properties added will <b>not</b> be readonly or reactive.
</summary>
> :bulb: In Vue 3, it will return an new proxy object.
</details>
### `readonly`
<details>
<summary>
⚠️ <code>readonly()</code> provides <b>only type-level</b> readonly check.
</summary>
`readonly()` is provided as API alignment with Vue 3 on type-level only. Use <code>isReadonly()</code> on it or it's properties can not be guaranteed.
</details>
### `props`
<details>
<summary>
⚠️ <code>toRefs(props.foo)</code> will incorrectly warn when accessing nested levels of props. <br>
&nbsp;&nbsp;&nbsp;&nbsp;⚠️ <code>isReactive(props.foo)</code> will return false.
</summary>
```ts
defineComponent({
setup(props) {
const { bar } = toRefs(props.foo) // it will `warn`
// use this instead
const { foo } = toRefs(props)
const a = foo.value.bar
}
})
```
</details>
### `computed().effect`
<details>
<summary>
⚠️ <code>computed()</code> has a property <code>effect</code> set to <code>true</code> instead of a <code>ReactiveEffect<T></code>.
</summary>
Due to the difference in implementation, there is no such concept as a `ReactiveEffect` in `@vue/composition-api`. Therefore, `effect` is merely `true` to enable differentiating computed from refs:
```ts
function isComputed<T>(o: ComputedRef<T> | unknown): o is ComputedRef<T>
function isComputed(o: any): o is ComputedRef {
return !!(isRef(o) && o.effect)
}
```
</details>
### Missing APIs
The following APIs introduced in Vue 3 are not available in this plugin.
- `onRenderTracked`
- `onRenderTriggered`
- `isProxy`
### Reactive APIs in `data()`
<details>
<summary>
❌ Passing <code>ref</code>, <code>reactive</code> or other reactive apis to <code>data()</code> would not work.
</summary>
```jsx
export default {
data() {
return {
// will result { a: { value: 1 } } in template
a: ref(1),
}
},
}
```
</details>
### `emits` Options
<details>
<summary>
❌ <code>emits</code> option is provided in type-level only, in order to align with Vue 3's type interface. Does NOT have actual effects on the code.
</summary>
```ts
defineComponent({
emits: {
// has no effects
submit: (eventOption) => {
if (...) {
return true
} else {
console.warn('Invalid submit event payload!')
return false
}
}
}
})
```
</details>
### Performance Impact
Due the the limitation of Vue2's public API. `@vue/composition-api` inevitably introduces some performance overhead. Note that in most scenarios, this shouldn't be the source of performance issues.
You can check the [benchmark results](https://antfu.github.io/vue-composition-api-benchmark-results/) for more details.
@@ -0,0 +1,568 @@
# @vue/composition-api
用于提供 **组合式 API** 的 Vue 2 插件.
[![npm](https://img.shields.io/npm/v/@vue/composition-api)](https://www.npmjs.com/package/@vue/composition-api)
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vuejs/composition-api/Build%20&%20Test)](https://github.com/vuejs/composition-api/actions?query=workflow%3A%22Build+%26+Test%22)
[English](./README.md) | 中文 ・ [**组合式 API 文档**](https://v3.cn.vuejs.org/guide/composition-api-introduction.html)
> ⚠️ 随着 [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html)的发布,它内置了Composition API,**你不再需要这个插件了**。因此,这个插件已经进入维护模式,将只支持Vue 2.6 或更早的版本。本项目将在 2022 年底达到生命终点(EOL)。
## 安装
### NPM
```bash
npm install @vue/composition-api
# or
yarn add @vue/composition-api
```
在使用 `@vue/composition-api` 前,必须先通过 `Vue.use()` 进行安装。之后才可使用新的 [**组合式 API**](https://composition-api.vuejs.org/zh) 进行组件开发。
```js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
```js
// 使用 API
import { ref, reactive } from '@vue/composition-api'
```
> :bulb: 当迁移到 Vue 3 时,只需简单的将 `@vue/composition-api` 替换成 `vue` 即可。你现有的代码几乎无需进行额外的改动。
### CDN
在 Vue 之后引入 `@vue/composition-api` ,插件将会自动完成安装。
<!--cdn-links-start-->
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.0"></script>
```
<!--cdn-links-end-->
`@vue/composition-api` 将会暴露在全局变量 `window.VueCompositionAPI` 中。
```ts
const { ref, reactive } = VueCompositionAPI
```
## TypeScript 支持
> 本插件要求使用 TypeScript **4.2** 或以上版本
为了让 TypeScript 在 Vue 组件选项中正确地进行类型推导,我们必须使用 `defineComponent` 来定义组件:
```ts
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
// 类型推断启用
})
```
### JSX/TSX
JSX 现已在 [vuejs/jsx](https://github.com/vuejs/jsx) 中官方支持。你可以根据[这篇文档](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx#usage)开启支持。你也可以使用由 [@luwanquan](https://github.com/luwanquan) 维护的社区版本 [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx)。
对于 TSX 支持,请在你的项目中创建如下声明文件:
```ts
// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends ComponentRenderProxy {}
interface ElementAttributesProperty {
$props: any; // specify the property name to use
}
interface IntrinsicElements {
[elem: string]: any;
}
}
}
```
## SSR
尽管 Vue 3 暂时没有给出确定的 SSR 的 API,这个插件实现了 `onServerPrefetch` 生命周期钩子函数。这个钩子允许你使用传统 API 中的 `serverPrefetch` 函数。
```js
import { onServerPrefetch } from '@vue/composition-api'
export default {
setup(props, { ssrContext }) {
const result = ref()
onServerPrefetch(async () => {
result.value = await callApi(ssrContext.someId)
})
return {
result,
}
},
}
```
## 浏览器兼容性
`@vue/composition-api` 支持所有现代浏览器以及IE11+。对于更低版本的IE浏览器你需要安装`WeakMap` polyfill (例如使用 `core-js`库)。
## 限制
> :white_check_mark: 支持 &nbsp;&nbsp;&nbsp;&nbsp;:x: 不支持
### `Ref` 自动展开 (unwrap)
<details>
<summary>
❌ <b>不要</b> 在数组中使用含有 <code>ref</code> 的普通对象
</summary>
```js
const a = {
count: ref(0),
}
const b = reactive({
list: [a], // `a.count` 不会自动展开!!
})
// `count` 不会自动展开, 须使用 `.value`
b.list[0].count.value === 0 // true
```
```js
const b = reactive({
list: [
{
count: ref(0), // 不会自动展开!!
},
],
})
// `count` 不会自动展开, 须使用 `.value`
b.list[0].count.value === 0 // true
```
</details>
<details>
<summary>
✅ 在数组中,<b>应该</b> 总是将 <code>ref</code> 存放到 <code>reactive</code> 对象中
</summary>
```js
const a = reactive({
count: ref(0),
})
const b = reactive({
list: [a],
})
// 自动展开
b.list[0].count === 0 // true
b.list.push(
reactive({
count: ref(1),
})
)
// 自动展开
b.list[1].count === 1 // true
```
</details>
### 模板 Refs
<details>
<summary>
✅ 字符串 ref && 从 <code>setup()</code> 返回 ref
</summary>
```html
<template>
<div ref="root"></div>
</template>
<script>
export default {
setup() {
const root = ref(null)
onMounted(() => {
// 在初次渲染后 DOM 元素会被赋值给 ref
console.log(root.value) // <div/>
})
return {
root,
}
},
}
</script>
```
</details>
<details>
<summary>
✅ 字符串 ref && 从 <code>setup()</code> 返回 ref && 渲染函数 / JSX
</summary>
```jsx
export default {
setup() {
const root = ref(null)
onMounted(() => {
// 在初次渲染后 DOM 元素会被赋值给 ref
console.log(root.value) // <div/>
})
return {
root,
}
},
render() {
// 使用 JSX
return () => <div ref="root" />
},
}
```
</details>
<details>
<summary>
❌ 函数 ref
</summary>
```html
<template>
<div :ref="el => root = el"></div>
</template>
<script>
export default {
setup() {
const root = ref(null)
return {
root,
}
},
}
</script>
```
</details>
<details>
<summary>
❌ 在 <code>setup()</code> 中的渲染函数 / JSX
</summary>
```jsx
export default {
setup() {
const root = ref(null)
return () =>
h('div', {
ref: root,
})
// 使用 JSX
return () => <div ref={root} />
},
}
```
</details>
<details>
<summary>
⚠️ <code>$refs</code> 访问的变通方案
</summary>
> :warning: **警告**: `SetupContext.refs` 并非 `Vue 3.0` 的一部分, `@vue/composition-api` 将其暴露在 `SetupContext` 中只是临时提供一种变通方案。
如果你依然选择在 `setup()` 中写 `render` 函数,那么你可以使用 `SetupContext.refs` 来访问模板引用,它等价于 Vue 2.x 中的 `this.$refs`:
```js
export default {
setup(initProps, setupContext) {
const refs = setupContext.refs
onMounted(() => {
// 在初次渲染后 DOM 元素会被赋值给 ref
console.log(refs.root) // <div/>
})
return () =>
h('div', {
ref: 'root',
})
// 使用 JSX
return () => <div ref="root" />
},
}
```
如果项目使用了 TypeScript,你还需要扩展 `SetupContext` 类型:
```ts
import Vue from 'vue'
declare module '@vue/composition-api' {
interface SetupContext {
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] }
}
}
```
</details>
### Reactive
<details>
<summary>
⚠️ <code>reactive()</code> 会返回一个<b>修改过的</b>原始的对象
</summary>
此行为与 Vue 2 中的 `Vue.observable` 一致
> :bulb: 在 Vue 3 中,`reactive()` 会返回一个新的的代理对象
</details>
<details>
<summary>
⚠️ <code>set</code> 和 <code>del</code> 添加与刪除响应式属性变通方案
</summary>
> ⚠️ 警告: `set` 和 `del` 并非 Vue 3 的一部分。由于 [Vue 2.x 响应式系统的限制](https://vuejs.org/v2/guide/reactivity.html#For-Objects), 我们在这里提供它们作为一种变通方案。
> 在 Vue 2中,你将需要调用`set` 去追踪`object`上新的属性 (与`Vue.set`类似,但用于由 Composition API 创建的`reactive objects`)。在 Vue 3 中,你只需要像对待普通对象一样直接为属性赋值即可。
>
> 同样地, 在 Vue 2 中你将需要调用`del`去 [确保响应式对象中属性的删除将触发视图更新](https://vuejs.org/v2/api/#Vue-delete) (与`Vue.delete`类似,但用于由 Composition API 创建的`reactive objects`)。在Vue3中,你只需要通过调用 `delete foo.bar` 来删除它们。
```ts
import { reactive, set, del } from '@vue/composition-api'
const a = reactive({
foo: 1
})
// 添加新的响应式属性
set(a, 'bar', 1)
// 刪除属性并触发响应式更新
del(a, 'bar')
```
</details>
### Watch
<details>
<summary>
❌ 不支持 <code>onTrack</code> 和 <code>onTrigger</code> 选项
</summary>
```js
watch(
() => {
/* ... */
},
{
immediate: true,
onTrack() {}, // 不可用
onTrigger() {}, // 不可用
}
)
```
</details>
### `createApp`
<details>
<summary>
⚠️ <code>createApp()</code> 是全局的
</summary>
在 Vue3 中,引入了 `createApp()` 来隔离不同应用实例的上下文(plugin, components 等)。 由于 Vue2 的设计,在这个插件中,我们提供 `createApp()` 作为一个向前兼容的 API ,它只是全局的一个别名。
```ts
const app1 = createApp(RootComponent1)
app1.component('Foo', Foo) // 相当于 Vue.component('Foo', Foo)
app1.use(VueRouter) // 相当于 Vue.use(VueRouter)
const app2 = createApp(RootComponent2)
app2.component('Bar', Bar) // 相当于 Vue.use('Bar', Bar)
```
</details>
### `createElement` / `h`
<details>
<summary>
⚠️ <code>createElement</code> / <code>h</code> 变通方案
</summary>
<br>
在 Vue2中 `createElement` / `h` 只能通过 `render()` 函数访问。要在 `render()`之外使用它, 你可以显式地给它绑定一个组件实例。
> :warning: **警告**: 此功能是作为 Vue 2 的变通方法提供的,它不是 Vue 3 API 的一部分。
```jsx
import { h as _h } from '@vue/composition-api'
export default {
setup() {
const vm = getCurrentInstance()
const h = _h.bind(vm)
return () =>
h('div', {
ref: 'root',
})
},
}
```
</details>
### `shallowReadonly`
<details>
<summary>
⚠️ <code>shallowReadonly()</code> 会返回一个新的浅拷贝对象,在此之后新加的字段<b>将不会</b>获得只读或响应式状态。
</summary>
> :bulb: 在 Vue 3 中,`shallowReadonly()` 会返回一个新的的代理对象
</details>
### `readonly`
<details>
<summary>
⚠️ <code>readonly()</code> <b>只提供类型层面</b>的只读。
</summary>
`readonly()` 只在类型层面提供和 Vue 3 的对齐。在其返回值或其属性上使用 <code>isReadonly()</code> 检查的结果将无法保证。
</details>
### `props`
<details>
<summary>
⚠️ 当使用 <code>toRefs</code> 访问深层属性对象 (如 <code>toRefs(props.foo)</code> 时将会得到不正确的警告。<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;⚠️ <code>isReactive(props.foo)</code> 将会返回 false。
</summary>
```ts
defineComponent({
setup(props) {
const { bar } = toRefs(props.foo) // it will `warn`
// use this instead
const { foo } = toRefs(props)
const a = foo.value.bar
}
})
```
</details>
### `computed().effect`
<details>
<summary>
⚠️ <code>computed()</code> 拥有一个被设置为 <code>true</code> 的 <code>effect</code> 属性,用来代替 <code>ReactiveEffect<T></code>。
</summary>
由于实现上的不同, 在 `@vue/composition-api` 中没有 `ReactiveEffect` 这种概念。 因此, `effect``true` 只是为了能够区分 computed 和 refs:
```ts
function isComputed<T>(o: ComputedRef<T> | unknown): o is ComputedRef<T>
function isComputed(o: any): o is ComputedRef {
return !!(isRef(o) && o.effect)
}
```
</details>
### 缺失的 API
以下在 Vue 3 新引入的 API ,在本插件中暂不适用:
- `onRenderTracked`
- `onRenderTriggered`
- `isProxy`
### 在 `data()` 中使用组合式 API
<details>
<summary>
❌ 在 <code>data()</code> 中使用 <code>ref</code>, <code>reactive</code> 或其他组合式 API 将不会生效
</summary>
```jsx
export default {
data() {
return {
// 在模版中会成为 { a: { value: 1 } }
a: ref(1),
}
},
}
```
</details>
### `emit` 选项
<details>
<summary>
❌ <code>emit</code> 仅因在类型定义中对齐 Vue3 的选项而提供,<b>不会</b>有任何效果。
</summary>
```ts
defineComponent({
emit: {
// 无效
submit: (eventOption) => {
if (...) {
return true
} else {
console.warn('Invalid submit event payload!')
return false
}
}
}
})
```
</details>
### 性能影响
由于 Vue 2 的公共 API 的限制,`@vue/composition-api` 不可避免地引入了额外的性能开销。除非在极端情况下,否则这并不会对你造成影响。
你可以查看这个 [跑分结果](https://antfu.github.io/vue-composition-api-benchmark-results/) 了解更多信息。
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,518 @@
import Vue$1, { VNode, VueConstructor, ComponentOptions, AsyncComponent, VNodeDirective, CreateElement } from 'vue';
import { Component as Component$1, AsyncComponent as AsyncComponent$1 } from 'vue/types/options';
import { VNodeChildren, VNode as VNode$1, VNodeData } from 'vue/types/vnode';
declare type Data = {
[key: string]: unknown;
};
declare type ComponentPropsOptions<P = Data> = ComponentObjectPropsOptions<P> | string[];
declare type ComponentObjectPropsOptions<P = Data> = {
[K in keyof P]: Prop<P[K]> | null;
};
declare type Prop<T, D = T> = PropOptions<T, D> | PropType<T>;
declare type DefaultFactory<T> = () => T | null | undefined;
interface PropOptions<T = any, D = T> {
type?: PropType<T> | true | null;
required?: boolean;
default?: D | DefaultFactory<D> | null | undefined | object;
validator?(value: unknown): boolean;
}
declare type PropType<T> = PropConstructor<T> | PropConstructor<T>[];
declare type PropConstructor<T> = {
new (...args: any[]): T & object;
} | {
(): T;
} | {
new (...args: string[]): Function;
};
declare type RequiredKeys<T> = {
[K in keyof T]: T[K] extends {
required: true;
} | {
default: any;
} | BooleanConstructor | {
type: BooleanConstructor;
} ? K : never;
}[keyof T];
declare type OptionalKeys<T> = Exclude<keyof T, RequiredKeys<T>>;
declare type ExtractFunctionPropType<T extends Function, TArgs extends Array<any> = any[], TResult = any> = T extends (...args: TArgs) => TResult ? T : never;
declare type ExtractCorrectPropType<T> = T extends Function ? ExtractFunctionPropType<T> : Exclude<T, Function>;
declare type InferPropType<T> = T extends null ? any : T extends {
type: null | true;
} ? any : T extends ObjectConstructor | {
type: ObjectConstructor;
} ? Record<string, any> : T extends BooleanConstructor | {
type: BooleanConstructor;
} ? boolean : T extends DateConstructor | {
type: DateConstructor;
} ? Date : T extends FunctionConstructor ? Function : T extends Prop<infer V, infer D> ? unknown extends V ? D extends null | undefined ? V : D : ExtractCorrectPropType<V> : T;
declare type ExtractPropTypes<O> = {
[K in keyof Pick<O, RequiredKeys<O>>]: InferPropType<O[K]>;
} & {
[K in keyof Pick<O, OptionalKeys<O>>]?: InferPropType<O[K]>;
};
declare type DefaultKeys<T> = {
[K in keyof T]: T[K] extends {
default: any;
} | BooleanConstructor | {
type: BooleanConstructor;
} ? T[K] extends {
type: BooleanConstructor;
required: true;
} ? never : K : never;
}[keyof T];
declare type ExtractDefaultPropTypes<O> = O extends object ? {
[K in keyof Pick<O, DefaultKeys<O>>]: InferPropType<O[K]>;
} : {};
declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
declare type Slot = (...args: any[]) => VNode[];
declare type InternalSlots = {
[name: string]: Slot | undefined;
};
declare type ObjectEmitsOptions = Record<string, ((...args: any[]) => any) | null>;
declare type EmitsOptions = ObjectEmitsOptions | string[];
declare type EmitFn<Options = ObjectEmitsOptions, Event extends keyof Options = keyof Options, ReturnType extends void | Vue$1 = void> = Options extends Array<infer V> ? (event: V, ...args: any[]) => ReturnType : {} extends Options ? (event: string, ...args: any[]) => ReturnType : UnionToIntersection<{
[key in Event]: Options[key] extends (...args: infer Args) => any ? (event: key, ...args: Args) => ReturnType : (event: key, ...args: any[]) => ReturnType;
}[Event]>;
declare type ComponentRenderEmitFn<Options = ObjectEmitsOptions, Event extends keyof Options = keyof Options, T extends Vue$1 | void = void> = EmitFn<Options, Event, T>;
declare type Slots = Readonly<InternalSlots>;
interface SetupContext<E extends EmitsOptions = {}> {
attrs: Data;
slots: Slots;
emit: EmitFn<E>;
/**
* @deprecated not available in Vue 2
*/
expose: (exposed?: Record<string, any>) => void;
/**
* @deprecated not available in Vue 3
*/
readonly parent: ComponentInstance | null;
/**
* @deprecated not available in Vue 3
*/
readonly root: ComponentInstance;
/**
* @deprecated not available in Vue 3
*/
readonly listeners: {
[key in string]?: Function;
};
/**
* @deprecated not available in Vue 3
*/
readonly refs: {
[key: string]: Vue | Element | Vue[] | Element[];
};
}
/**
* We expose a subset of properties on the internal instance as they are
* useful for advanced external libraries and tools.
*/
declare interface ComponentInternalInstance {
uid: number;
type: Record<string, unknown>;
parent: ComponentInternalInstance | null;
root: ComponentInternalInstance;
/**
* Vnode representing this component in its parent's vdom tree
*/
vnode: VNode;
/**
* Root vnode of this component's own vdom tree
*/
/**
* The reactive effect for rendering and patching the component. Callable.
*/
update: Function;
data: Data;
props: Data;
attrs: Data;
refs: Data;
emit: EmitFn;
slots: InternalSlots;
emitted: Record<string, boolean> | null;
proxy: ComponentInstance;
isMounted: boolean;
isUnmounted: boolean;
isDeactivated: boolean;
}
declare function getCurrentInstance(): ComponentInternalInstance | null;
declare type EmitsToProps<T extends EmitsOptions> = T extends string[] ? {
[K in string & `on${Capitalize<T[number]>}`]?: (...args: any[]) => any;
} : T extends ObjectEmitsOptions ? {
[K in string & `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}` ? T[Uncapitalize<C>] extends null ? (...args: any[]) => any : (...args: T[Uncapitalize<C>] extends (...args: infer P) => any ? P : never) => any : never;
} : {};
declare type ComponentInstance = InstanceType<VueConstructor>;
declare type ComponentRenderProxy<P = {}, // props type extracted from props option
B = {}, // raw bindings returned from setup()
D = {}, // return from data()
C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}, PublicProps = P, Defaults = {}, MakeDefaultsOptional extends boolean = false> = {
$data: D;
$props: Readonly<MakeDefaultsOptional extends true ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> : P & PublicProps>;
$attrs: Record<string, string>;
$emit: ComponentRenderEmitFn<Emits, keyof Emits, ComponentRenderProxy<P, B, D, C, M, Mixin, Extends, Emits, PublicProps, Defaults, MakeDefaultsOptional>>;
} & Readonly<P> & ShallowUnwrapRef<B> & D & M & ExtractComputedReturns<C> & Omit<Vue$1, '$data' | '$props' | '$attrs' | '$emit'>;
declare type VueConstructorProxy<PropsOptions, RawBindings, Data, Computed extends ComputedOptions, Methods extends MethodOptions, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}, Props = ExtractPropTypes<PropsOptions> & ({} extends Emits ? {} : EmitsToProps<Emits>)> = Omit<VueConstructor, never> & {
new (...args: any[]): ComponentRenderProxy<Props, ShallowUnwrapRef<RawBindings>, Data, Computed, Methods, Mixin, Extends, Emits, Props, ExtractDefaultPropTypes<PropsOptions>, true>;
};
declare type DefaultData<V> = object | ((this: V) => object);
declare type DefaultMethods<V> = {
[key: string]: (this: V, ...args: any[]) => any;
};
declare type DefaultComputed = {
[key: string]: any;
};
declare type VueProxy<PropsOptions, RawBindings, Data = DefaultData<Vue$1>, Computed extends ComputedOptions = DefaultComputed, Methods extends MethodOptions = DefaultMethods<Vue$1>, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}> = ComponentOptions<Vue$1, ShallowUnwrapRef<RawBindings> & Data, Methods, Computed, PropsOptions, ExtractPropTypes<PropsOptions>> & VueConstructorProxy<PropsOptions, RawBindings, Data, Computed, Methods, Mixin, Extends, Emits>;
declare type ComponentPublicInstance<P = {}, // props type extracted from props option
B = {}, // raw bindings returned from setup()
D = {}, // return from data()
C extends ComputedOptions = {}, M extends MethodOptions = {}, E extends EmitsOptions = {}, PublicProps = P, Defaults = {}, MakeDefaultsOptional extends boolean = false> = {
$: ComponentInternalInstance;
$data: D;
$props: MakeDefaultsOptional extends true ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> : P & PublicProps;
$attrs: Data;
$refs: Data;
$slots: Slots;
$root: ComponentPublicInstance | null;
$parent: ComponentPublicInstance | null;
$emit: EmitFn<E>;
$el: any;
$forceUpdate: () => void;
$nextTick: typeof nextTick;
$watch(source: string | Function, cb: Function, options?: WatchOptions): WatchStopHandle;
} & P & ShallowUnwrapRef<B> & UnwrapNestedRefs<D> & ExtractComputedReturns<C> & M;
declare type ComputedGetter$1<T> = (ctx?: any) => T;
declare type ComputedSetter$1<T> = (v: T) => void;
interface WritableComputedOptions$1<T> {
get: ComputedGetter$1<T>;
set: ComputedSetter$1<T>;
}
declare type ComputedOptions = Record<string, ComputedGetter$1<any> | WritableComputedOptions$1<any>>;
interface MethodOptions {
[key: string]: Function;
}
declare type SetupFunction<Props, RawBindings = {}, Emits extends EmitsOptions = {}> = (this: void, props: Readonly<Props>, ctx: SetupContext<Emits>) => RawBindings | (() => VNode | null) | void;
interface ComponentOptionsBase<Props, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}> extends Omit<ComponentOptions<Vue$1, D, M, C, Props>, 'data' | 'computed' | 'method' | 'setup' | 'props'> {
[key: string]: any;
data?: (this: Props & Vue$1, vm: Props) => D;
computed?: C;
methods?: M;
}
declare type ExtractComputedReturns<T extends any> = {
[key in keyof T]: T[key] extends {
get: (...args: any[]) => infer TReturn;
} ? TReturn : T[key] extends (...args: any[]) => infer TReturn ? TReturn : never;
};
declare type ComponentOptionsWithProps<PropsOptions = ComponentPropsOptions, RawBindings = Data, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}, Props = ExtractPropTypes<PropsOptions>> = ComponentOptionsBase<Props, D, C, M> & {
props?: PropsOptions;
emits?: Emits & ThisType<void>;
setup?: SetupFunction<Props, RawBindings, Emits>;
} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M, Mixin, Extends, Emits>>;
declare type ComponentOptionsWithArrayProps<PropNames extends string = string, RawBindings = Data, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}, Props = Readonly<{
[key in PropNames]?: any;
}>> = ComponentOptionsBase<Props, D, C, M> & {
props?: PropNames[];
emits?: Emits & ThisType<void>;
setup?: SetupFunction<Props, RawBindings, Emits>;
} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M, Mixin, Extends, Emits>>;
declare type ComponentOptionsWithoutProps<Props = {}, RawBindings = Data, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}> = ComponentOptionsBase<Props, D, C, M> & {
props?: undefined;
emits?: Emits & ThisType<void>;
setup?: SetupFunction<Props, RawBindings, Emits>;
} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M, Mixin, Extends, Emits>>;
declare type AnyObject = Record<string | number | symbol, any>;
declare type Equal<Left, Right> = (<U>() => U extends Left ? 1 : 0) extends (<U>() => U extends Right ? 1 : 0) ? true : false;
declare type HasDefined<T> = Equal<T, unknown> extends true ? false : true;
/**
* overload 1: object format with no props
*/
declare function defineComponent<RawBindings, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}>(options: ComponentOptionsWithoutProps<{}, RawBindings, D, C, M, Mixin, Extends, Emits>): VueProxy<{}, RawBindings, D, C, M, Mixin, Extends, Emits>;
/**
* overload 2: object format with array props declaration
* props inferred as `{ [key in PropNames]?: any }`
*
* return type is for Vetur and TSX support
*/
declare function defineComponent<PropNames extends string, RawBindings = Data, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}, PropsOptions extends ComponentPropsOptions = ComponentPropsOptions>(options: ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, Mixin, Extends, Emits>): VueProxy<Readonly<{
[key in PropNames]?: any;
}>, RawBindings, D, C, M, Mixin, Extends, Emits>;
/**
* overload 3: object format with object props declaration
*
* see `ExtractPropTypes` in './componentProps.ts'
*/
declare function defineComponent<Props, RawBindings = Data, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}, PropsOptions extends ComponentPropsOptions = ComponentPropsOptions>(options: HasDefined<Props> extends true ? ComponentOptionsWithProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, Emits, Props> : ComponentOptionsWithProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, Emits>): VueProxy<PropsOptions, RawBindings, D, C, M, Mixin, Extends, Emits>;
declare type Component = VueProxy<any, any, any, any, any>;
declare type ComponentOrComponentOptions = Component | ComponentOptionsWithoutProps | ComponentOptionsWithArrayProps | ComponentOptionsWithProps;
declare type AsyncComponentResolveResult<T = ComponentOrComponentOptions> = T | {
default: T;
};
declare type AsyncComponentLoader = () => Promise<AsyncComponentResolveResult>;
interface AsyncComponentOptions {
loader: AsyncComponentLoader;
loadingComponent?: ComponentOrComponentOptions;
errorComponent?: ComponentOrComponentOptions;
delay?: number;
timeout?: number;
suspensible?: boolean;
onError?: (error: Error, retry: () => void, fail: () => void, attempts: number) => any;
}
declare function defineAsyncComponent(source: AsyncComponentLoader | AsyncComponentOptions): AsyncComponent;
declare type DirectiveModifiers = Record<string, boolean>;
interface DirectiveBinding<V> extends Readonly<VNodeDirective> {
readonly modifiers: DirectiveModifiers;
readonly value: V;
readonly oldValue: V | null;
}
declare type DirectiveHook<T = any, Prev = VNode | null, V = any> = (el: T, binding: DirectiveBinding<V>, vnode: VNode, prevVNode: Prev) => void;
interface ObjectDirective<T = any, V = any> {
bind?: DirectiveHook<T, any, V>;
inserted?: DirectiveHook<T, any, V>;
update?: DirectiveHook<T, any, V>;
componentUpdated?: DirectiveHook<T, any, V>;
unbind?: DirectiveHook<T, any, V>;
}
declare type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>;
declare type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>;
declare const Plugin: {
install: (Vue: VueConstructor) => void;
};
declare const _refBrand: unique symbol;
interface Ref<T = any> {
readonly [_refBrand]: true;
value: T;
}
interface WritableComputedRef<T> extends Ref<T> {
/**
* `effect` is added to be able to differentiate refs from computed properties.
* **Differently from Vue 3, it's just `true`**. This is because there is no equivalent
* of `ReactiveEffect<T>` in `@vue/composition-api`.
*/
effect: true;
}
interface ComputedRef<T = any> extends WritableComputedRef<T> {
readonly value: T;
}
declare type ToRefs<T = any> = {
[K in keyof T]: Ref<T[K]>;
};
declare type CollectionTypes = IterableCollections | WeakCollections;
declare type IterableCollections = Map<any, any> | Set<any>;
declare type WeakCollections = WeakMap<any, any> | WeakSet<any>;
declare type BaseTypes = string | number | boolean | Node | Window;
declare type ShallowUnwrapRef<T> = {
[K in keyof T]: T[K] extends Ref<infer V> ? V : T[K];
};
declare type UnwrapRef<T> = T extends Ref<infer V> ? UnwrapRefSimple<V> : UnwrapRefSimple<T>;
declare type UnwrapRefSimple<T> = T extends Function | CollectionTypes | BaseTypes | Ref ? T : T extends Array<any> ? {
[K in keyof T]: UnwrapRefSimple<T[K]>;
} : T extends object ? {
[P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>;
} : T;
interface RefOption<T> {
get(): T;
set?(x: T): void;
}
declare class RefImpl<T> implements Ref<T> {
readonly [_refBrand]: true;
value: T;
constructor({ get, set }: RefOption<T>);
}
declare function createRef<T>(options: RefOption<T>, isReadonly?: boolean, isComputed?: boolean): RefImpl<T>;
declare function ref<T extends object>(raw: T): T extends Ref ? T : Ref<UnwrapRef<T>>;
declare function ref<T>(raw: T): Ref<UnwrapRef<T>>;
declare function ref<T = any>(): Ref<T | undefined>;
declare function isRef<T>(value: any): value is Ref<T>;
declare function unref<T>(ref: T | Ref<T>): T;
declare function toRefs<T extends object>(obj: T): ToRefs<T>;
declare type CustomRefFactory<T> = (track: () => void, trigger: () => void) => {
get: () => T;
set: (value: T) => void;
};
declare function customRef<T>(factory: CustomRefFactory<T>): Ref<T>;
declare function toRef<T extends object, K extends keyof T>(object: T, key: K): Ref<T[K]>;
declare function shallowRef<T extends object>(value: T): T extends Ref ? T : Ref<T>;
declare function shallowRef<T>(value: T): Ref<T>;
declare function shallowRef<T = any>(): Ref<T | undefined>;
declare function triggerRef(value: any): void;
declare function proxyRefs<T extends object>(objectWithRefs: T): ShallowUnwrapRef<T>;
declare function isRaw(obj: any): boolean;
declare function isReactive(obj: any): boolean;
declare function shallowReactive<T extends object = any>(obj: T): T;
/**
* Make obj reactivity
*/
declare function reactive<T extends object>(obj: T): UnwrapRef<T>;
/**
* Make sure obj can't be a reactive
*/
declare function markRaw<T extends object>(obj: T): T;
declare function toRaw<T>(observed: T): T;
declare function isReadonly(obj: any): boolean;
declare type Primitive = string | number | boolean | bigint | symbol | undefined | null;
declare type Builtin = Primitive | Function | Date | Error | RegExp;
declare type DeepReadonly<T> = T extends Builtin ? T : T extends Map<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends ReadonlyMap<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends WeakMap<infer K, infer V> ? WeakMap<DeepReadonly<K>, DeepReadonly<V>> : T extends Set<infer U> ? ReadonlySet<DeepReadonly<U>> : T extends ReadonlySet<infer U> ? ReadonlySet<DeepReadonly<U>> : T extends WeakSet<infer U> ? WeakSet<DeepReadonly<U>> : T extends Promise<infer U> ? Promise<DeepReadonly<U>> : T extends {} ? {
readonly [K in keyof T]: DeepReadonly<T[K]>;
} : Readonly<T>;
declare type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;
/**
* **In @vue/composition-api, `reactive` only provides type-level readonly check**
*
* Creates a readonly copy of the original object. Note the returned copy is not
* made reactive, but `readonly` can be called on an already reactive object.
*/
declare function readonly<T extends object>(target: T): DeepReadonly<UnwrapNestedRefs<T>>;
declare function shallowReadonly<T extends object>(obj: T): Readonly<T>;
/**
* Set a property on an object. Adds the new property, triggers change
* notification and intercept it's subsequent access if the property doesn't
* already exist.
*/
declare function set<T>(target: AnyObject, key: any, val: T): T;
/**
* Delete a property and trigger change if necessary.
*/
declare function del(target: AnyObject, key: any): void;
declare function createLifeCycle(lifeCyclehook: string): (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onBeforeMount: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onMounted: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onBeforeUpdate: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onUpdated: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onBeforeUnmount: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onUnmounted: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onErrorCaptured: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onActivated: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onDeactivated: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare const onServerPrefetch: (callback: Function, target?: ComponentInternalInstance | null | undefined) => Function | null;
declare type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void;
declare type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);
declare type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV, onInvalidate: InvalidateCbRegistrator) => any;
declare type MapSources<T, Immediate> = {
[K in keyof T]: T[K] extends WatchSource<infer V> ? Immediate extends true ? V | undefined : V : never;
};
declare type MultiWatchSources = (WatchSource<unknown> | object)[];
interface WatchOptionsBase {
flush?: FlushMode;
}
declare type InvalidateCbRegistrator = (cb: () => void) => void;
declare type FlushMode = 'pre' | 'post' | 'sync';
interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
immediate?: Immediate;
deep?: boolean;
}
interface VueWatcher {
lazy: boolean;
get(): any;
teardown(): void;
run(): void;
value: any;
}
declare type WatchStopHandle = () => void;
declare function watchEffect(effect: WatchEffect, options?: WatchOptionsBase): WatchStopHandle;
declare function watchPostEffect(effect: WatchEffect): WatchStopHandle;
declare function watchSyncEffect(effect: WatchEffect): WatchStopHandle;
declare function watch<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;
declare function watch<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(sources: T, cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;
declare function watch<T extends MultiWatchSources, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;
declare function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;
declare function watch<T extends object, Immediate extends Readonly<boolean> = false>(source: T, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;
declare type ComputedGetter<T> = (ctx?: any) => T;
declare type ComputedSetter<T> = (v: T) => void;
interface WritableComputedOptions<T> {
get: ComputedGetter<T>;
set: ComputedSetter<T>;
}
declare function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>;
declare function computed<T>(options: WritableComputedOptions<T>): WritableComputedRef<T>;
interface InjectionKey<T> extends Symbol {
}
declare function provide<T>(key: InjectionKey<T> | string, value: T): void;
declare function inject<T>(key: InjectionKey<T> | string): T | undefined;
declare function inject<T>(key: InjectionKey<T> | string, defaultValue: T, treatDefaultAsFactory?: false): T;
declare function inject<T>(key: InjectionKey<T> | string, defaultValue: T | (() => T), treatDefaultAsFactory?: true): T;
declare const useCssModule: (name?: string) => Record<string, string>;
/**
* @deprecated use `useCssModule` instead.
*/
declare const useCSSModule: (name?: string) => Record<string, string>;
interface App<T = any> {
config: VueConstructor['config'];
use: VueConstructor['use'];
mixin: VueConstructor['mixin'];
component: VueConstructor['component'];
directive(name: string): Directive | undefined;
directive(name: string, directive: Directive): this;
provide<T>(key: InjectionKey<T> | symbol | string, value: T): this;
mount: Vue$1['$mount'];
unmount: Vue$1['$destroy'];
}
declare function createApp(rootComponent: any, rootProps?: any): App;
declare type NextTick = Vue$1['$nextTick'];
declare const nextTick: NextTick;
interface H extends CreateElement {
(this: ComponentInternalInstance | null | undefined, tag?: string | Component$1<any, any, any, any> | AsyncComponent$1<any, any, any, any> | (() => Component$1), children?: VNodeChildren): VNode$1;
(this: ComponentInternalInstance | null | undefined, tag?: string | Component$1<any, any, any, any> | AsyncComponent$1<any, any, any, any> | (() => Component$1), data?: VNodeData, children?: VNodeChildren): VNode$1;
}
declare const createElement: H;
/**
* Displays a warning message (using console.error) with a stack trace if the
* function is called inside of active component.
*
* @param message warning message to be displayed
*/
declare function warn(message: string): void;
declare class EffectScopeImpl {
active: boolean;
effects: EffectScope[];
cleanups: (() => void)[];
constructor(vm: Vue);
run<T>(fn: () => T): T | undefined;
on(): void;
off(): void;
stop(): void;
}
declare class EffectScope extends EffectScopeImpl {
constructor(detached?: boolean);
}
declare function effectScope(detached?: boolean): EffectScope;
declare function getCurrentScope(): EffectScope | undefined;
declare function onScopeDispose(fn: () => void): void;
declare function useSlots(): SetupContext['slots'];
declare function useAttrs(): SetupContext['attrs'];
declare const version: string;
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue$1> {
setup?: SetupFunction<Data, Data>;
}
}
export { App, ComponentInstance, ComponentInternalInstance, ComponentPropsOptions, ComponentPublicInstance, ComponentRenderProxy, ComputedGetter, ComputedOptions, ComputedRef, ComputedSetter, Data, DeepReadonly, Directive, DirectiveBinding, DirectiveHook, DirectiveModifiers, EffectScope, ExtractDefaultPropTypes, ExtractPropTypes, FlushMode, FunctionDirective, InjectionKey, MethodOptions, ObjectDirective, PropOptions, PropType, Ref, SetupContext, SetupFunction, ShallowUnwrapRef, ToRefs, UnwrapNestedRefs, UnwrapRef, UnwrapRefSimple, VueWatcher, WatchCallback, WatchEffect, WatchOptions, WatchOptionsBase, WatchSource, WatchStopHandle, WritableComputedOptions, WritableComputedRef, computed, createApp, createLifeCycle, createRef, customRef, Plugin as default, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, createElement as h, inject, isRaw, isReactive, isReadonly, isRef, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCSSModule, useCssModule, useSlots, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect };
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
'use strict'
if (process.env.NODE_ENV === 'production') {
module.exports = require('./dist/vue-composition-api.common.prod.js')
} else {
module.exports = require('./dist/vue-composition-api.common.js')
}
@@ -0,0 +1,119 @@
{
"name": "@vue/composition-api",
"version": "1.7.0",
"packageManager": "pnpm@7.0.0",
"description": "Provide logic composition capabilities for Vue.",
"keywords": [
"vue",
"composition-api"
],
"repository": {
"type": "git",
"url": "git+https://github.com/vuejs/composition-api.git"
},
"main": "./index.js",
"module": "./dist/vue-composition-api.mjs",
"unpkg": "./dist/vue-composition-api.prod.js",
"jsdelivr": "./dist/vue-composition-api.prod.js",
"types": "./dist/vue-composition-api.d.ts",
"exports": {
".": {
"import": "./dist/vue-composition-api.mjs",
"require": "./index.js"
},
"./*": "./*"
},
"author": {
"name": "liximomo",
"email": "liximomo@gmail.com"
},
"license": "MIT",
"sideEffects": false,
"files": [
"dist",
"index.js"
],
"scripts": {
"start": "rollup -c -w",
"build": "rimraf dist && rollup -c",
"lint": "prettier --write --parser typescript \"{src,test,test-dts}/**/*.ts?(x)\" && prettier --write \"{src,test}/**/*.js\"",
"test": "cross-env NODE_ENV=test jest",
"test:all": "pnpm run test && pnpm run test:dts",
"test:dts": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.vue3.json && pnpm run build && tsc -p ./test-dts/tsconfig.build.json",
"update-readme": "node ./scripts/update-readme.js",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && pnpm run update-readme && git add CHANGELOG.md README.*",
"release": "bumpp -x \"npm run changelog\" --all --tag --commit --push && npm publish",
"release-gh": "conventional-github-releaser -p angular",
"prepublishOnly": "npm run build"
},
"bugs": {
"url": "https://github.com/vuejs/composition-api/issues"
},
"homepage": "https://github.com/vuejs/composition-api#readme",
"peerDependencies": {
"vue": ">= 2.5 < 2.7"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^4.0.0",
"@types/jest": "^26.0.24",
"@types/node": "^17.0.31",
"bumpp": "^7.1.1",
"conventional-changelog-cli": "^2.2.2",
"conventional-github-releaser": "^3.1.5",
"cross-env": "^7.0.3",
"jest": "^26.6.3",
"lint-staged": "^12.4.1",
"prettier": "^2.6.2",
"rimraf": "^3.0.2",
"rollup": "^2.72.0",
"rollup-plugin-dts": "^4.2.1",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2",
"simple-git-hooks": "^2.7.0",
"ts-jest": "^26.5.6",
"tslib": "^2.4.0",
"typescript": "^4.6.4",
"vue": "^2.6.14",
"vue-router": "^3.5.3",
"vue-server-renderer": "^2.6.14",
"vue3": "npm:vue@3.2.21"
},
"simple-git-hooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"prettier --write"
],
"*.ts?(x)": [
"prettier --parser=typescript --write"
]
},
"jest": {
"verbose": true,
"globals": {
"__DEV__": true,
"__VERSION__": "0.0.0"
},
"setupFiles": [
"<rootDir>/test/setupTest.js"
],
"setupFilesAfterEnv": [
"<rootDir>/test/helpers/wait-for-update.js"
],
"moduleFileExtensions": [
"ts",
"js"
],
"testMatch": [
"<rootDir>/test/**/*.spec.{js,ts}"
],
"preset": "ts-jest"
},
"prettier": {
"semi": false,
"singleQuote": true,
"printWidth": 80
}
}
@@ -0,0 +1,90 @@
import { ComponentBounds, Hookable } from './hooks';
import { Context } from './context';
import { ComponentInstance, ComponentState, StateBase } from './component';
import { App } from './app';
import { ID } from './util';
export interface DevtoolsPluginApi {
on: Hookable<Context>;
notifyComponentUpdate(instance?: ComponentInstance): any;
addTimelineLayer(options: TimelineLayerOptions): any;
addTimelineEvent(options: TimelineEventOptions): any;
addInspector(options: CustomInspectorOptions): any;
sendInspectorTree(inspectorId: string): any;
sendInspectorState(inspectorId: string): any;
selectInspectorNode(inspectorId: string, nodeId: string): any;
getComponentBounds(instance: ComponentInstance): Promise<ComponentBounds>;
getComponentName(instance: ComponentInstance): Promise<string>;
getComponentInstances(app: App): Promise<ComponentInstance[]>;
highlightElement(instance: ComponentInstance): any;
unhighlightElement(): any;
}
export interface AppRecord {
id: number;
name: string;
instanceMap: Map<string, ComponentInstance>;
rootInstance: ComponentInstance;
}
export interface TimelineLayerOptions<TData = any, TMeta = any> {
id: string;
label: string;
color: number;
skipScreenshots?: boolean;
groupsOnly?: boolean;
ignoreNoDurationGroups?: boolean;
screenshotOverlayRender?: (event: TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise<ScreenshotOverlayRenderResult>;
}
export interface ScreenshotOverlayEvent {
layerId: string;
renderMeta: any;
}
export interface ScreenshotOverlayRenderContext<TData = any, TMeta = any> {
screenshot: ScreenshotData;
events: (TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent)[];
index: number;
}
export declare type ScreenshotOverlayRenderResult = HTMLElement | string | false;
export interface ScreenshotData {
time: number;
}
export interface TimelineEventOptions {
layerId: string;
event: TimelineEvent;
all?: boolean;
}
export interface TimelineEvent<TData = any, TMeta = any> {
time: number;
data: TData;
logType?: 'default' | 'warning' | 'error';
meta?: TMeta;
groupId?: ID;
title?: string;
subtitle?: string;
}
export interface CustomInspectorOptions {
id: string;
label: string;
icon?: string;
treeFilterPlaceholder?: string;
stateFilterPlaceholder?: string;
noSelectionText?: string;
actions?: {
icon: string;
tooltip?: string;
action: () => void | Promise<void>;
}[];
}
export interface CustomInspectorNode {
id: string;
label: string;
children?: CustomInspectorNode[];
tags?: InspectorNodeTag[];
}
export interface InspectorNodeTag {
label: string;
textColor: number;
backgroundColor: number;
tooltip?: string;
}
export interface CustomInspectorState {
[key: string]: (StateBase | Omit<ComponentState, 'type'>)[];
}
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1 @@
export declare type App = any;
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

Some files were not shown because too many files have changed in this diff Show More