mirror of
https://github.com/github/codeql.git
synced 2026-04-30 11:15:13 +02:00
JS: introduce base Vue model
This commit is contained in:
@@ -78,6 +78,7 @@ import semmle.javascript.frameworks.Request
|
||||
import semmle.javascript.frameworks.SQL
|
||||
import semmle.javascript.frameworks.StringFormatters
|
||||
import semmle.javascript.frameworks.UriLibraries
|
||||
import semmle.javascript.frameworks.Vue
|
||||
import semmle.javascript.frameworks.XmlParsers
|
||||
import semmle.javascript.frameworks.xUnit
|
||||
import semmle.javascript.linters.ESLint
|
||||
|
||||
373
javascript/ql/src/semmle/javascript/frameworks/Vue.qll
Normal file
373
javascript/ql/src/semmle/javascript/frameworks/Vue.qll
Normal file
@@ -0,0 +1,373 @@
|
||||
/**
|
||||
* Provides classes for working with Vue code.
|
||||
*/
|
||||
|
||||
import javascript
|
||||
import semmle.javascript.security.dataflow.DomBasedXss
|
||||
|
||||
module Vue {
|
||||
/**
|
||||
* Gets a reference to the 'Vue' object.
|
||||
*/
|
||||
DataFlow::SourceNode vue() {
|
||||
result = DataFlow::globalVarRef("Vue")
|
||||
or
|
||||
result = DataFlow::moduleImport("vue")
|
||||
}
|
||||
|
||||
/**
|
||||
* A call to `vue.extend`.
|
||||
*/
|
||||
private class VueExtend extends DataFlow::CallNode {
|
||||
VueExtend() { this = vue().getAMemberCall("extend") }
|
||||
}
|
||||
|
||||
private newtype TInstance =
|
||||
MkVueInstance(DataFlow::NewNode def) { def = vue().getAnInstantiation() } or
|
||||
MkExtendedVue(VueExtend extend) or
|
||||
MkExtendedInstance(VueExtend extend, DataFlow::NewNode sub) {
|
||||
sub = extend.getAnInstantiation()
|
||||
} or
|
||||
MkComponent(DataFlow::CallNode def) { def = vue().getAMemberCall("component") } or
|
||||
MkSingleFileComponent(VueFile file)
|
||||
|
||||
/**
|
||||
* A Vue instance definition.
|
||||
*
|
||||
* This includes both explicit instantiations of Vue objects, and
|
||||
* implicit instantiations in the form of components or Vue
|
||||
* extensions that have not yet been instantiated to a Vue instance.
|
||||
*
|
||||
* The following instances are recognized:
|
||||
* - `new Vue({...})`
|
||||
* - `Vue.extend({...})`
|
||||
* - `new ExtendedVue({...})`
|
||||
* - `Vue.component("my-component", {...})`
|
||||
* - single file components in .vue files
|
||||
*/
|
||||
abstract class Instance extends TInstance {
|
||||
/** Gets a textual representation of this element. */
|
||||
abstract string toString();
|
||||
|
||||
/**
|
||||
* Holds if this element is at the specified location.
|
||||
* The location spans column `startcolumn` of line `startline` to
|
||||
* column `endcolumn` of line `endline` in file `filepath`.
|
||||
* For more information, see
|
||||
* [LGTM locations](https://lgtm.com/help/ql/locations).
|
||||
*/
|
||||
predicate hasLocationInfo(
|
||||
string filepath, int startline, int startcolumn, int endline, int endcolumn
|
||||
) {
|
||||
filepath = "" and
|
||||
startline = 0 and
|
||||
startcolumn = 0 and
|
||||
endline = 0 and
|
||||
endcolumn = 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the node for option `name` for this instance, this does not include
|
||||
* those from extended objects and mixins.
|
||||
*/
|
||||
abstract DataFlow::Node getOwnOption(string name);
|
||||
|
||||
/**
|
||||
* Gets the node for option `name` for this instance, including those from
|
||||
* extended objects and mixins.
|
||||
*/
|
||||
DataFlow::Node getOption(string name) {
|
||||
result = getOwnOption(name)
|
||||
or
|
||||
exists(DataFlow::SourceNode extendsVal | extendsVal.flowsTo(getOwnOption("extends")) |
|
||||
result = extendsVal.(DataFlow::ObjectLiteralNode).getAPropertyWrite(name).getRhs()
|
||||
or
|
||||
exists(ExtendedVue extend |
|
||||
MkExtendedVue(extendsVal) = extend and
|
||||
result = extend.getOption(name)
|
||||
)
|
||||
)
|
||||
or
|
||||
exists(DataFlow::ArrayCreationNode mixins, DataFlow::ObjectLiteralNode mixin |
|
||||
mixins.flowsTo(getOwnOption("mixins")) and
|
||||
mixin.flowsTo(mixins.getAnElement()) and
|
||||
result = mixin.getAPropertyWrite(name).getRhs()
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the node for the `data` option object of this instance.
|
||||
*/
|
||||
DataFlow::Node getData() {
|
||||
exists(DataFlow::Node data | data = getOption("data") |
|
||||
result = data
|
||||
or
|
||||
// a constructor variant is available for all instance definitions
|
||||
exists(DataFlow::FunctionNode f |
|
||||
f.flowsTo(data) and
|
||||
result = f.getAReturn()
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the node for the `template` option of this instance.
|
||||
*/
|
||||
DataFlow::Node getTemplate() { result = getOption("template") }
|
||||
|
||||
/**
|
||||
* Gets the node for the `render` option of this instance.
|
||||
*/
|
||||
DataFlow::Node getRender() { result = getOption("render") }
|
||||
|
||||
/**
|
||||
* Gets the node for the `methods` option of this instance.
|
||||
*/
|
||||
DataFlow::Node getMethods() { result = getOption("methods") }
|
||||
|
||||
/**
|
||||
* Gets the node for the `computed` option of this instance.
|
||||
*/
|
||||
DataFlow::Node getComputed() { result = getOption("computed") }
|
||||
|
||||
/**
|
||||
* Gets a node for a member of the `methods` option of this instance.
|
||||
*/
|
||||
private DataFlow::Node getAMethod() {
|
||||
exists(DataFlow::SourceNode methods |
|
||||
methods.flowsTo(getMethods()) and
|
||||
result = methods.getAPropertyWrite().getRhs()
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a node for a member of the `computed` option of this instance that matches `kind` ("get" or "set").
|
||||
*/
|
||||
private DataFlow::Node getAnAccessor(string kind) {
|
||||
exists(DataFlow::SourceNode computedObj, DataFlow::Node accessorObjOrGetter |
|
||||
computedObj.flowsTo(getComputed()) and
|
||||
computedObj.getAPropertyWrite().getRhs() = accessorObjOrGetter |
|
||||
result = accessorObjOrGetter and kind = "get"
|
||||
or
|
||||
exists (DataFlow::SourceNode accessorObj |
|
||||
accessorObj.flowsTo(accessorObjOrGetter) and
|
||||
result = accessorObj.getAPropertyWrite(kind).getRhs()
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a node for a member `name` of the `computed` option of this instance that matches `kind` ("get" or "set").
|
||||
*/
|
||||
private DataFlow::Node getAccessor(string name, string kind) {
|
||||
exists(DataFlow::SourceNode computedObj, DataFlow::SourceNode accessorObjOrGetter |
|
||||
computedObj.flowsTo(getComputed()) and
|
||||
accessorObjOrGetter.flowsTo(computedObj.getAPropertyWrite(name).getRhs())
|
||||
|
|
||||
result = accessorObjOrGetter and kind = "get" or
|
||||
exists (DataFlow::SourceNode accessorObj |
|
||||
accessorObj.flowsTo(accessorObjOrGetter) and
|
||||
result = accessorObj.getAPropertyWrite(kind).getRhs()
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the node for the life cycle hook of the `hookName` option of this instance.
|
||||
*/
|
||||
private DataFlow::Node getALifecycleHook(string hookName) {
|
||||
(
|
||||
hookName = "beforeCreate" or
|
||||
hookName = "created" or
|
||||
hookName = "beforeMount" or
|
||||
hookName = "mounted" or
|
||||
hookName = "beforeUpdate" or
|
||||
hookName = "updated" or
|
||||
hookName = "activated" or
|
||||
hookName = "deactivated" or
|
||||
hookName = "beforeDestroy" or
|
||||
hookName = "destroyed" or
|
||||
hookName = "errorCaptured"
|
||||
) and
|
||||
result = getOption(hookName)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a node for a function that will be invoked with `this` bound to this instance.
|
||||
*/
|
||||
DataFlow::Node getABoundFunction() {
|
||||
result = getAMethod()
|
||||
or
|
||||
result = getAnAccessor(_)
|
||||
or
|
||||
result = getALifecycleHook(_)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a node for the value for property `name` of this instance.
|
||||
*/
|
||||
DataFlow::Node getAPropertyValue(string name) {
|
||||
exists(DataFlow::SourceNode obj | obj.getAPropertyWrite(name).getRhs() = result |
|
||||
obj.flowsTo(getData())
|
||||
or
|
||||
exists(DataFlow::FunctionNode bound |
|
||||
bound.flowsTo(getABoundFunction()) and
|
||||
not bound.getFunction() instanceof ArrowFunctionExpr and
|
||||
obj = bound.getReceiver()
|
||||
)
|
||||
)
|
||||
or
|
||||
exists(DataFlow::FunctionNode getter |
|
||||
getter.flowsTo(getAccessor(name, "get")) and
|
||||
result = getter.getAReturn()
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A Vue instance from `new Vue({...})`.
|
||||
*/
|
||||
class VueInstance extends Instance, MkVueInstance {
|
||||
DataFlow::NewNode def;
|
||||
|
||||
VueInstance() { this = MkVueInstance(def) }
|
||||
|
||||
override string toString() { result = def.toString() }
|
||||
|
||||
override predicate hasLocationInfo(
|
||||
string filepath, int startline, int startcolumn, int endline, int endcolumn
|
||||
) {
|
||||
def.hasLocationInfo(filepath, startline, startcolumn, endline, endcolumn)
|
||||
}
|
||||
|
||||
override DataFlow::Node getOwnOption(string name) { result = def.getOptionArgument(0, name) }
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An extended Vue from `Vue.extend({...})`.
|
||||
*/
|
||||
class ExtendedVue extends Instance, MkExtendedVue {
|
||||
VueExtend extend;
|
||||
|
||||
ExtendedVue() { this = MkExtendedVue(extend) }
|
||||
|
||||
override string toString() { result = extend.toString() }
|
||||
|
||||
override predicate hasLocationInfo(
|
||||
string filepath, int startline, int startcolumn, int endline, int endcolumn
|
||||
) {
|
||||
extend.hasLocationInfo(filepath, startline, startcolumn, endline, endcolumn)
|
||||
}
|
||||
|
||||
override DataFlow::Node getOwnOption(string name) { result = extend.getOptionArgument(0, name) }
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An instance of an extended Vue, for example `instance` of `var Ext = Vue.extend({...}); var instance = new Ext({...})`.
|
||||
*/
|
||||
class ExtendedInstance extends Instance, MkExtendedInstance {
|
||||
VueExtend extend;
|
||||
|
||||
DataFlow::NewNode sub;
|
||||
|
||||
ExtendedInstance() { this = MkExtendedInstance(extend, sub) }
|
||||
|
||||
override string toString() { result = sub.toString() }
|
||||
|
||||
override predicate hasLocationInfo(
|
||||
string filepath, int startline, int startcolumn, int endline, int endcolumn
|
||||
) {
|
||||
sub.hasLocationInfo(filepath, startline, startcolumn, endline, endcolumn)
|
||||
}
|
||||
|
||||
override DataFlow::Node getOwnOption(string name) { result = sub.getOptionArgument(0, name) }
|
||||
|
||||
override DataFlow::Node getOption(string name) {
|
||||
result = Instance.super.getOption(name)
|
||||
or
|
||||
result = MkExtendedVue(extend).(ExtendedVue).getOption(name)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* A Vue component from `Vue.component("my-component", { ... })`.
|
||||
*/
|
||||
class Component extends Instance, MkComponent {
|
||||
DataFlow::CallNode def;
|
||||
|
||||
Component() { this = MkComponent(def) }
|
||||
|
||||
override string toString() { result = def.toString() }
|
||||
|
||||
override predicate hasLocationInfo(
|
||||
string filepath, int startline, int startcolumn, int endline, int endcolumn
|
||||
) {
|
||||
def.hasLocationInfo(filepath, startline, startcolumn, endline, endcolumn)
|
||||
}
|
||||
|
||||
override DataFlow::Node getOwnOption(string name) { result = def.getOptionArgument(1, name) }
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* A single file Vue component in a `.vue` file.
|
||||
*/
|
||||
class SingleFileComponent extends Instance, MkSingleFileComponent {
|
||||
VueFile file;
|
||||
|
||||
SingleFileComponent() { this = MkSingleFileComponent(file) }
|
||||
|
||||
override predicate hasLocationInfo(
|
||||
string filepath, int startline, int startcolumn, int endline, int endcolumn
|
||||
) {
|
||||
filepath = file.getAbsolutePath() and
|
||||
startline = 0 and
|
||||
startcolumn = 0 and
|
||||
endline = 0 and
|
||||
endcolumn = 0
|
||||
}
|
||||
|
||||
private Module getModule() {
|
||||
exists(HTML::ScriptElement script | script.getFile() = file |
|
||||
result.getTopLevel() = script.resolveSource()
|
||||
or
|
||||
not exists(script.getSourcePath()) and
|
||||
// XXX is there no way explicit relation between a script tag and its inline script?
|
||||
result.getTopLevel() instanceof InlineScript and
|
||||
result.getFile() = script.getFile()
|
||||
)
|
||||
}
|
||||
|
||||
override DataFlow::Node getOwnOption(string name) {
|
||||
// The options of a single file component are defined by the exported object of the script element.
|
||||
// Our current module model does not support reads on this object very well, so we use custom steps for the common cases for now.
|
||||
exists(Module m, DefiniteAbstractValue abstractOptions |
|
||||
any(AnalyzedPropertyWrite write).writes(abstractOptions, name, result) and
|
||||
m = getModule()
|
||||
|
|
||||
// ES2015 exports
|
||||
exists(ExportDeclaration export, DataFlow::AnalyzedNode exported |
|
||||
export.getEnclosingModule() = m and
|
||||
abstractOptions = exported.getAValue()
|
||||
|
|
||||
exported = export.(BulkReExportDeclaration).getSourceNode("default") or
|
||||
exported.asExpr() = export.(ExportDefaultDeclaration).getOperand()
|
||||
)
|
||||
or
|
||||
// Node.js exports
|
||||
abstractOptions = m.(NodeModule).getAModuleExportsValue()
|
||||
)
|
||||
}
|
||||
|
||||
override string toString() { result = file.toString() }
|
||||
}
|
||||
|
||||
/**
|
||||
* A `.vue` file.
|
||||
*/
|
||||
class VueFile extends File { VueFile() { getExtension() = "vue" } }
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
| single-component-file-1.vue:0:0:0:0 | single-component-file-1.vue |
|
||||
| single-file-component-2.vue:0:0:0:0 | single-file-component-2.vue |
|
||||
| single-file-component-3.vue:0:0:0:0 | single-file-component-3.vue |
|
||||
| tst.js:3:1:10:2 | new Vue ... 2\\n\\t}\\n}) |
|
||||
| tst.js:12:1:16:2 | new Vue ... \\t}),\\n}) |
|
||||
| tst.js:18:1:27:2 | Vue.com ... }\\n\\t}\\n}) |
|
||||
| tst.js:29:1:35:2 | new Vue ... }\\n\\t}\\n}) |
|
||||
| tst.js:37:1:39:2 | new Vue ... nger\\n}) |
|
||||
| tst.js:41:17:47:2 | Vue.ext ... \\n }\\n}) |
|
||||
| tst.js:48:1:50:2 | new Ext ... 42 }\\n}) |
|
||||
| tst.js:51:17:57:2 | Vue.ext ... \\n }\\n}) |
|
||||
| tst.js:58:1:61:2 | new Vue ... 42 }\\n}) |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) |
|
||||
| tst.js:72:1:75:2 | new Vue ... 42 }\\n}) |
|
||||
| tst.js:77:20:83:2 | Vue.ext ... \\n }\\n}) |
|
||||
| tst.js:85:1:87:2 | new Vue ... e; }\\n}) |
|
||||
| tst.js:94:2:96:3 | new Vue ... f,\\n\\t}) |
|
||||
@@ -0,0 +1,3 @@
|
||||
import javascript
|
||||
|
||||
select any(Vue::Instance i)
|
||||
@@ -0,0 +1,22 @@
|
||||
| single-component-file-1.vue:0:0:0:0 | single-component-file-1.vue | dataA | single-component-file-1.vue:6:40:6:41 | 42 |
|
||||
| single-file-component-3.vue:0:0:0:0 | single-file-component-3.vue | dataA | single-file-component-3-script.js:4:37:4:38 | 42 |
|
||||
| tst.js:3:1:10:2 | new Vue ... 2\\n\\t}\\n}) | dataA | tst.js:8:10:8:11 | 42 |
|
||||
| tst.js:12:1:16:2 | new Vue ... \\t}),\\n}) | dataA | tst.js:14:10:14:11 | 42 |
|
||||
| tst.js:18:1:27:2 | Vue.com ... }\\n\\t}\\n}) | dataA | tst.js:20:10:20:11 | 42 |
|
||||
| tst.js:18:1:27:2 | Vue.com ... }\\n\\t}\\n}) | dataB | tst.js:24:17:24:20 | true |
|
||||
| tst.js:29:1:35:2 | new Vue ... }\\n\\t}\\n}) | x | tst.js:31:12:31:13 | 42 |
|
||||
| tst.js:29:1:35:2 | new Vue ... }\\n\\t}\\n}) | y | tst.js:32:19:32:20 | 42 |
|
||||
| tst.js:29:1:35:2 | new Vue ... }\\n\\t}\\n}) | z2 | tst.js:33:36:33:37 | 42 |
|
||||
| tst.js:41:17:47:2 | Vue.ext ... \\n }\\n}) | fromSuper | tst.js:44:18:44:19 | 42 |
|
||||
| tst.js:48:1:50:2 | new Ext ... 42 }\\n}) | fromSub | tst.js:49:19:49:20 | 42 |
|
||||
| tst.js:48:1:50:2 | new Ext ... 42 }\\n}) | fromSuper | tst.js:44:18:44:19 | 42 |
|
||||
| tst.js:51:17:57:2 | Vue.ext ... \\n }\\n}) | fromSuper | tst.js:54:18:54:19 | 42 |
|
||||
| tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | fromSub | tst.js:60:19:60:20 | 42 |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | fromMixin1 | tst.js:64:32:64:33 | 42 |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | fromMixin2 | tst.js:64:61:64:62 | 42 |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | fromSub | tst.js:65:19:65:20 | 42 |
|
||||
| tst.js:72:1:75:2 | new Vue ... 42 }\\n}) | fromMixinValue | tst.js:69:28:69:29 | 42 |
|
||||
| tst.js:72:1:75:2 | new Vue ... 42 }\\n}) | fromSub | tst.js:74:19:74:20 | 42 |
|
||||
| tst.js:77:20:83:2 | Vue.ext ... \\n }\\n}) | deadExtended | tst.js:80:21:80:22 | 42 |
|
||||
| tst.js:85:1:87:2 | new Vue ... e; }\\n}) | created | tst.js:86:38:86:41 | true |
|
||||
| tst.js:94:2:96:3 | new Vue ... f,\\n\\t}) | dataA | tst.js:89:22:89:23 | 42 |
|
||||
@@ -0,0 +1,4 @@
|
||||
import javascript
|
||||
|
||||
from Vue::Instance i, string name
|
||||
select i, name, i.getAPropertyValue(name)
|
||||
@@ -0,0 +1,25 @@
|
||||
| single-component-file-1.vue:0:0:0:0 | single-component-file-1.vue | data | single-component-file-1.vue:6:11:6:45 | functio ... 42 } } |
|
||||
| single-file-component-3.vue:0:0:0:0 | single-file-component-3.vue | data | single-file-component-3-script.js:4:8:4:42 | functio ... 42 } } |
|
||||
| tst.js:3:1:10:2 | new Vue ... 2\\n\\t}\\n}) | data | tst.js:7:8:9:2 | {\\n\\t\\tdataA: 42\\n\\t} |
|
||||
| tst.js:3:1:10:2 | new Vue ... 2\\n\\t}\\n}) | render | tst.js:4:10:6:2 | functio ... c);\\n\\t} |
|
||||
| tst.js:12:1:16:2 | new Vue ... \\t}),\\n}) | data | tst.js:13:8:15:3 | () => ( ... 42\\n\\t}) |
|
||||
| tst.js:18:1:27:2 | Vue.com ... }\\n\\t}\\n}) | data | tst.js:19:8:21:3 | () => ( ... 42\\n\\t}) |
|
||||
| tst.js:18:1:27:2 | Vue.com ... }\\n\\t}\\n}) | methods | tst.js:22:11:26:2 | {\\n\\t\\tmet ... \\n\\t\\t}\\n\\t} |
|
||||
| tst.js:29:1:35:2 | new Vue ... }\\n\\t}\\n}) | computed | tst.js:30:12:34:2 | {\\n\\t\\tx: ... } }\\n\\t} |
|
||||
| tst.js:37:1:39:2 | new Vue ... nger\\n}) | template | tst.js:38:12:38:17 | danger |
|
||||
| tst.js:41:17:47:2 | Vue.ext ... \\n }\\n}) | data | tst.js:42:9:46:3 | functio ... };\\n } |
|
||||
| tst.js:48:1:50:2 | new Ext ... 42 }\\n}) | data | tst.js:42:9:46:3 | functio ... };\\n } |
|
||||
| tst.js:48:1:50:2 | new Ext ... 42 }\\n}) | data | tst.js:49:8:49:22 | { fromSub: 42 } |
|
||||
| tst.js:51:17:57:2 | Vue.ext ... \\n }\\n}) | data | tst.js:52:9:56:3 | functio ... };\\n } |
|
||||
| tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | data | tst.js:60:8:60:22 | { fromSub: 42 } |
|
||||
| tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | mixins | tst.js:59:10:59:18 | Extended2 |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | data | tst.js:64:18:64:35 | { fromMixin1: 42 } |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | data | tst.js:64:47:64:64 | { fromMixin2: 42 } |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | data | tst.js:65:8:65:22 | { fromSub: 42 } |
|
||||
| tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | mixins | tst.js:64:10:64:67 | [{data: ... 42 } }] |
|
||||
| tst.js:72:1:75:2 | new Vue ... 42 }\\n}) | data | tst.js:70:20:70:28 | mixinData |
|
||||
| tst.js:72:1:75:2 | new Vue ... 42 }\\n}) | data | tst.js:74:8:74:22 | { fromSub: 42 } |
|
||||
| tst.js:72:1:75:2 | new Vue ... 42 }\\n}) | mixins | tst.js:73:10:73:15 | mixins |
|
||||
| tst.js:77:20:83:2 | Vue.ext ... \\n }\\n}) | data | tst.js:78:9:82:3 | functio ... };\\n } |
|
||||
| tst.js:85:1:87:2 | new Vue ... e; }\\n}) | created | tst.js:86:11:86:44 | functio ... true; } |
|
||||
| tst.js:94:2:96:3 | new Vue ... f,\\n\\t}) | data | tst.js:95:9:95:9 | f |
|
||||
@@ -0,0 +1,4 @@
|
||||
import javascript
|
||||
|
||||
from Vue::Instance i, string name
|
||||
select i, name, i.getOption(name)
|
||||
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<p v-html="dataA"/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: function() { return { dataA: 42 } }
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<p v-html="dataA"/>
|
||||
</template>
|
||||
<script>
|
||||
var x = require('x');
|
||||
module.exports = { // not properly detected by the module system yet
|
||||
data: function() { return { dataA: 42 } }
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
var x = require('x');
|
||||
|
||||
module.exports = {
|
||||
data: function() { return { dataA: 42 } }
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<p v-html="dataA"/>
|
||||
</template>
|
||||
<script src="./single-file-component-3-script.js">
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
97
javascript/ql/test/library-tests/frameworks/Vue/tst.js
Normal file
97
javascript/ql/test/library-tests/frameworks/Vue/tst.js
Normal file
@@ -0,0 +1,97 @@
|
||||
var Vue = require('vue');
|
||||
|
||||
new Vue({
|
||||
render: function(ce) {
|
||||
return ce(a, b, c);
|
||||
},
|
||||
data: {
|
||||
dataA: 42
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({
|
||||
data: () => ({
|
||||
dataA: 42
|
||||
}),
|
||||
});
|
||||
|
||||
Vue.component("my-component", {
|
||||
data: () => ({
|
||||
dataA: 42
|
||||
}),
|
||||
methods: {
|
||||
method: function() {
|
||||
this.dataB = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({
|
||||
computed: {
|
||||
x: () => 42,
|
||||
y: { get: () => 42 },
|
||||
z1: { set: function(){ this.z2 = 42; } }
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({
|
||||
template: danger
|
||||
});
|
||||
|
||||
var Extended1 = Vue.extend({
|
||||
data: function () {
|
||||
return {
|
||||
fromSuper: 42
|
||||
};
|
||||
}
|
||||
});
|
||||
new Extended1({
|
||||
data: { fromSub: 42 }
|
||||
});
|
||||
var Extended2 = Vue.extend({
|
||||
data: function () {
|
||||
return {
|
||||
fromSuper: 42
|
||||
};
|
||||
}
|
||||
});
|
||||
new Vue({
|
||||
mixins: Extended2,
|
||||
data: { fromSub: 42 }
|
||||
});
|
||||
|
||||
new Vue({
|
||||
mixins: [{data: { fromMixin1: 42 } }, {data: { fromMixin2: 42 } }],
|
||||
data: { fromSub: 42 }
|
||||
});
|
||||
|
||||
var mixinData = { };
|
||||
mixinData.fromMixinValue = 42;
|
||||
var mixin = {data: mixinData };
|
||||
var mixins = [mixin];
|
||||
new Vue({
|
||||
mixins: mixins,
|
||||
data: { fromSub: 42 }
|
||||
});
|
||||
|
||||
var DeadExtended = Vue.extend({
|
||||
data: function () {
|
||||
return {
|
||||
deadExtended: 42
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({
|
||||
created: function(){ this.created = true; }
|
||||
});
|
||||
(function() {
|
||||
var data = { dataA: 42 };
|
||||
function f() {
|
||||
return data;
|
||||
}
|
||||
|
||||
new Vue({
|
||||
data: f,
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user