mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Géry Debongnie
|
6c6d024be9 |
+2
-1
@@ -22,10 +22,11 @@ node_modules
|
||||
|
||||
# Extras temp file
|
||||
/tools/owl.js
|
||||
/tools/devtools/build
|
||||
|
||||
release-notes.md
|
||||
|
||||
.rpt2_cache
|
||||
|
||||
# useful in some cases
|
||||
/temp
|
||||
/temp
|
||||
@@ -113,7 +113,6 @@ Are you new to Owl? This is the place to start!
|
||||
- [Why did Odoo build Owl?](doc/miscellaneous/why_owl.md)
|
||||
- [Changelog (from owl 1.x to 2.x)](CHANGELOG.md)
|
||||
- [Notes on compiled templates](doc/miscellaneous/compiled_template.md)
|
||||
- [Owl devtools extension](doc/tools/devtools.md)
|
||||
|
||||
## Installing Owl
|
||||
|
||||
@@ -122,28 +121,8 @@ Owl is available on `npm` and can be installed with the following command:
|
||||
```
|
||||
npm install @odoo/owl
|
||||
```
|
||||
|
||||
If you want to use a simple `<script>` tag, the last release can be downloaded here:
|
||||
|
||||
- [owl](https://github.com/odoo/owl/releases/latest)
|
||||
|
||||
## Installing Owl devtools
|
||||
|
||||
The Owl devtools browser extension is also available in the [release](https://github.com/odoo/owl/releases/latest):
|
||||
Unzip the owl-devtools.zip file and follow the instructions depending on your browser:
|
||||
|
||||
### Chrome
|
||||
|
||||
Go to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.
|
||||
Select the devtools-chrome folder and that's it, your extension is active!
|
||||
There is a convenient refresh button on the extension card (still on the same admin page) to update your code.
|
||||
Do note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.
|
||||
|
||||
### Firefox
|
||||
Go to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.
|
||||
Select any file in the devtools-firefox folder and that's it, your extension is active!
|
||||
Here, you can use the reload button to refresh the extension.
|
||||
|
||||
Note that you may have to open another window or reload your tab to see the extension working.
|
||||
Also note that the extension will only be active on pages that have a sufficient version of owl.
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Definition](#definition)
|
||||
- [Props comparison](#props-comparison)
|
||||
- [Binding function props](#binding-function-props)
|
||||
- [Dynamic Props](#dynamic-props)
|
||||
- [Default Props](#default-props)
|
||||
@@ -57,47 +56,6 @@ the `props` object contains the following keys:
|
||||
- for `ComponentA`: `a` and `b`,
|
||||
- for `ComponentB`: `model`,
|
||||
|
||||
## Props comparison
|
||||
|
||||
Whenever Owl encounters a subcomponent in a template, it performs a shallow
|
||||
comparison of all props. If they are all referentially equal, then the subcomponent
|
||||
will not even be updated. Otherwise, if at least one props has changed, then
|
||||
Owl will update it.
|
||||
|
||||
However, in some cases, we know that two values are different, but they have the
|
||||
same effect, and should not be considered different by Owl. For example, anonymous
|
||||
functions in a template are always different, but most of them should not be
|
||||
considered different:
|
||||
|
||||
```xml
|
||||
<t t-foreach="todos" t-as="todo" t-key="todo.id">
|
||||
<Todo todo="todo" onDelete="() => deleteTodo(todo.id)" />
|
||||
</t>
|
||||
```
|
||||
|
||||
In that case, one can use the `.alike` suffix:
|
||||
|
||||
```xml
|
||||
<t t-foreach="todos" t-as="todo" t-key="todo.id">
|
||||
<Todo todo="todo" onDelete.alike="() => deleteTodo(todo.id)" />
|
||||
</t>
|
||||
```
|
||||
|
||||
This tells Owl that this specific prop should always be considered equivalent
|
||||
(or, in other words, should be removed from the list of comparable props).
|
||||
|
||||
Note that even if most anonymous functions should probably be considered `alike`,
|
||||
it is not necessarily true in all cases. It depends on what values are captured
|
||||
by the anonymous function. The following example shows a case where it is probably
|
||||
wrong to use `.alike`.
|
||||
|
||||
```xml
|
||||
<t t-foreach="todos" t-as="todo" t-key="todo.id">
|
||||
<!-- Probably wrong! todo.isCompleted may change -->
|
||||
<Todo todo="todo" toggle.alike="() => toggleTodo(todo.isCompleted)" />
|
||||
</t>
|
||||
```
|
||||
|
||||
## Binding function props
|
||||
|
||||
It is common to have the need to pass a callback as a prop. Since Owl components
|
||||
@@ -137,9 +95,6 @@ class SomeComponent extends Component {
|
||||
}
|
||||
```
|
||||
|
||||
The `.bind` suffix also implies `.alike`, so these props will not cause additional
|
||||
renderings.
|
||||
|
||||
## Dynamic Props
|
||||
|
||||
The `t-props` directive can be used to specify totally dynamic props:
|
||||
|
||||
@@ -477,7 +477,7 @@ not work with other iterables, such as `Set`. However, it is only a matter of
|
||||
using the `...` javascript operator. For example:
|
||||
|
||||
```xml
|
||||
<t t-foreach="[...items]" t-as="item">...</t>
|
||||
<t t-foreach="...items" t-as="item">...</t>
|
||||
```
|
||||
|
||||
The `...` operator will convert the `Set` (or any other iterables) into a list,
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
# Owl Devtools Browser extension
|
||||
|
||||
The owl devtools browser extension is an extension available on chrome or firefox which adds an owl tab
|
||||
to the browser devtools in order to inspect all owl apps that are present on any web page, their components
|
||||
and allows to interract with their data to a certain extend. There is also a profiler available to visualize
|
||||
the components' lifecycle and be able to trace their origin.
|
||||
|
||||
## Install the extension
|
||||
|
||||
In the owl root folder:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
For chrome:
|
||||
|
||||
```bash
|
||||
npm run build:devtools-chrome
|
||||
```
|
||||
|
||||
For firefox:
|
||||
|
||||
```bash
|
||||
npm run build:devtools-firefox
|
||||
```
|
||||
|
||||
You can also run:
|
||||
|
||||
```bash
|
||||
npm run dev:devtools-chrome
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
npm run dev:devtools-firefox
|
||||
```
|
||||
|
||||
to avoid recompiling owl and gain time if it has already been done.
|
||||
|
||||
To run the extension:
|
||||
|
||||
In google chrome: go to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.
|
||||
Select the output folder (dist/devtools) and that's it, your extension is active!
|
||||
There is a convenient refresh button on the extension card (still on the same admin page) to update your code.
|
||||
Do note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.
|
||||
|
||||
In firefox: go to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.
|
||||
Select any file of the output folder (dist/devtools) and that's it, your extension is active!
|
||||
Here, you can use the reload button to refresh the extension.
|
||||
|
||||
Note that you may have to open another window or reload your tab to see the extension working.
|
||||
Also note that the extension will only be active on pages that have a sufficient version of owl.
|
||||
Generated
+216
-490
File diff suppressed because it is too large
Load Diff
+3
-12
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@odoo/owl",
|
||||
"version": "2.1.0",
|
||||
"version": "2.0.7",
|
||||
"description": "Odoo Web Library (OWL)",
|
||||
"main": "dist/owl.cjs.js",
|
||||
"module": "dist/owl.es.js",
|
||||
@@ -16,11 +16,6 @@
|
||||
"build:runtime": "rollup -c --failAfterWarnings runtime",
|
||||
"build:compiler": "rollup -c --failAfterWarnings compiler",
|
||||
"build": "npm run build:bundle",
|
||||
"build:devtools": "rollup -c ./tools/devtools/rollup.config.js",
|
||||
"dev:devtools-chrome": "npm run build:devtools -- --config-browser=chrome",
|
||||
"dev:devtools-firefox": "npm run build:devtools -- --config-browser=firefox",
|
||||
"build:devtools-chrome": "NODE_ENV=production npm run dev:devtools-chrome",
|
||||
"build:devtools-firefox": "NODE_ENV=production npm run dev:devtools-firefox",
|
||||
"test": "jest",
|
||||
"test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
|
||||
"test:watch": "jest --watch",
|
||||
@@ -28,8 +23,8 @@
|
||||
"playground": "npm run build && npm run playground:serve",
|
||||
"preplayground:watch": "npm run build",
|
||||
"playground:watch": "npm-run-all --parallel playground:serve \"build:* -- --watch\"",
|
||||
"prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --write",
|
||||
"check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --check",
|
||||
"prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --write",
|
||||
"check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --check",
|
||||
"lint": "eslint src/**/*.ts tests/**/*.ts",
|
||||
"publish": "npm run build && npm publish",
|
||||
"release": "node tools/release.js",
|
||||
@@ -61,11 +56,7 @@
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "2.4.1",
|
||||
"rollup": "^2.56.3",
|
||||
"rollup-plugin-copy": "^3.3.0",
|
||||
"rollup-plugin-delete": "^2.0.0",
|
||||
"rollup-plugin-dts": "^4.2.2",
|
||||
"rollup-plugin-execute": "^1.1.1",
|
||||
"rollup-plugin-string": "^3.0.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"rollup-plugin-typescript2": "^0.31.1",
|
||||
"source-map-support": "^0.5.10",
|
||||
|
||||
@@ -15,6 +15,7 @@ if (pkg.module !== ES_FILENAME || pkg.main !== CJS_FILENAME) {
|
||||
}
|
||||
|
||||
const outro = `
|
||||
__info__.version = '${pkg.version}';
|
||||
__info__.date = '${new Date().toISOString()}';
|
||||
__info__.hash = '${git.short()}';
|
||||
__info__.url = 'https://github.com/odoo/owl';
|
||||
|
||||
@@ -32,7 +32,6 @@ import {
|
||||
import { OwlError } from "../runtime/error_handling";
|
||||
|
||||
type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
|
||||
const whitespaceRE = /\s+/g;
|
||||
|
||||
export interface Config {
|
||||
translateFn?: (s: string) => string;
|
||||
@@ -167,7 +166,6 @@ interface Context {
|
||||
nameSpace?: string;
|
||||
tModelSelectedExpr?: string;
|
||||
ctxVar?: string;
|
||||
inPreTag?: boolean;
|
||||
}
|
||||
|
||||
function createContext(parentCtx: Context, params?: Partial<Context>): Context {
|
||||
@@ -192,9 +190,11 @@ class CodeTarget {
|
||||
code: string[] = [];
|
||||
hasRoot = false;
|
||||
hasCache = false;
|
||||
hasRef: boolean = false;
|
||||
// maps ref name to [id, expr]
|
||||
refInfo: { [name: string]: [string, string] } = {};
|
||||
shouldProtectScope: boolean = false;
|
||||
on: EventHandlers | null;
|
||||
hasRefWrapper: boolean = false;
|
||||
|
||||
constructor(name: string, on?: EventHandlers | null) {
|
||||
this.name = name;
|
||||
@@ -213,13 +213,17 @@ class CodeTarget {
|
||||
generateCode(): string {
|
||||
let result: string[] = [];
|
||||
result.push(`function ${this.name}(ctx, node, key = "") {`);
|
||||
if (this.hasRef) {
|
||||
result.push(` const refs = this.__owl__.refs;`);
|
||||
for (let name in this.refInfo) {
|
||||
const [id, expr] = this.refInfo[name];
|
||||
result.push(` const ${id} = ${expr};`);
|
||||
}
|
||||
}
|
||||
if (this.shouldProtectScope) {
|
||||
result.push(` ctx = Object.create(ctx);`);
|
||||
result.push(` ctx[isBoundary] = 1`);
|
||||
}
|
||||
if (this.hasRefWrapper) {
|
||||
result.push(` let refWrapper = makeRefWrapper(this.__owl__);`);
|
||||
}
|
||||
if (this.hasCache) {
|
||||
result.push(` let cache = ctx.cache || {};`);
|
||||
result.push(` let nextCache = ctx.cache = {};`);
|
||||
@@ -530,9 +534,6 @@ export class CodeGenerator {
|
||||
const match = translationRE.exec(value) as any;
|
||||
value = match[1] + this.translateFn(match[2]) + match[3];
|
||||
}
|
||||
if (!ctx.inPreTag) {
|
||||
value = value.replace(whitespaceRE, " ");
|
||||
}
|
||||
|
||||
if (!block || forceNewBlock) {
|
||||
block = this.createBlock(block, "text", ctx);
|
||||
@@ -698,21 +699,30 @@ export class CodeGenerator {
|
||||
|
||||
// t-ref
|
||||
if (ast.ref) {
|
||||
if (this.dev) {
|
||||
this.helpers.add("makeRefWrapper");
|
||||
this.target.hasRefWrapper = true;
|
||||
}
|
||||
this.target.hasRef = true;
|
||||
const isDynamic = INTERP_REGEXP.test(ast.ref);
|
||||
let name = `\`${ast.ref}\``;
|
||||
if (isDynamic) {
|
||||
name = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
|
||||
this.helpers.add("singleRefSetter");
|
||||
const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
|
||||
const idx = block!.insertData(`singleRefSetter(refs, ${str})`, "ref");
|
||||
attrs["block-ref"] = String(idx);
|
||||
} else {
|
||||
let name = ast.ref;
|
||||
if (name in this.target.refInfo) {
|
||||
// ref has already been defined
|
||||
this.helpers.add("multiRefSetter");
|
||||
const info = this.target.refInfo[name];
|
||||
const index = block!.data.push(info[0]) - 1;
|
||||
attrs["block-ref"] = String(index);
|
||||
info[1] = `multiRefSetter(refs, \`${name}\`)`;
|
||||
} else {
|
||||
let id = generateId("ref");
|
||||
this.helpers.add("singleRefSetter");
|
||||
this.target.refInfo[name] = [id, `singleRefSetter(refs, \`${name}\`)`];
|
||||
const index = block!.data.push(id) - 1;
|
||||
attrs["block-ref"] = String(index);
|
||||
}
|
||||
}
|
||||
let setRefStr = `(el) => this.__owl__.setRef((${name}), el)`;
|
||||
if (this.dev) {
|
||||
setRefStr = `refWrapper(${name}, ${setRefStr})`;
|
||||
}
|
||||
const idx = block!.insertData(setRefStr, "ref");
|
||||
attrs["block-ref"] = String(idx);
|
||||
}
|
||||
|
||||
const dom = xmlDoc.createElement(ast.tag);
|
||||
@@ -736,7 +746,6 @@ export class CodeGenerator {
|
||||
tKeyExpr: ctx.tKeyExpr,
|
||||
nameSpace,
|
||||
tModelSelectedExpr,
|
||||
inPreTag: ctx.inPreTag || ast.tag === "pre",
|
||||
});
|
||||
this.compileAST(child, subCtx);
|
||||
}
|
||||
@@ -1132,15 +1141,12 @@ export class CodeGenerator {
|
||||
value = this.captureExpression(value);
|
||||
if (name.includes(".")) {
|
||||
let [_name, suffix] = name.split(".");
|
||||
name = _name;
|
||||
switch (suffix) {
|
||||
case "bind":
|
||||
value = `(${value}).bind(this)`;
|
||||
break;
|
||||
case "alike":
|
||||
break;
|
||||
default:
|
||||
throw new OwlError("Invalid prop suffix");
|
||||
if (suffix === "bind") {
|
||||
this.helpers.add("bind");
|
||||
name = _name;
|
||||
value = `bind(this, ${value || undefined})`;
|
||||
} else {
|
||||
throw new OwlError("Invalid prop suffix");
|
||||
}
|
||||
}
|
||||
name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
|
||||
@@ -1240,18 +1246,13 @@ export class CodeGenerator {
|
||||
keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
|
||||
}
|
||||
let id = generateId("comp");
|
||||
const propList: string[] = [];
|
||||
for (let p in ast.props || {}) {
|
||||
let [name, suffix] = p.split(".");
|
||||
if (!suffix) {
|
||||
propList.push(`"${name}"`);
|
||||
}
|
||||
}
|
||||
this.staticDefs.push({
|
||||
id,
|
||||
expr: `app.createComponent(${
|
||||
ast.isDynamic ? null : expr
|
||||
}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, [${propList}])`,
|
||||
}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${
|
||||
!ast.props && !ast.dynamicProps
|
||||
})`,
|
||||
});
|
||||
|
||||
if (ast.isDynamic) {
|
||||
|
||||
@@ -261,12 +261,16 @@ function parseTNode(node: Element, ctx: ParsingContext): AST | null {
|
||||
// Text and Comment Nodes
|
||||
// -----------------------------------------------------------------------------
|
||||
const lineBreakRE = /[\r\n]/;
|
||||
const whitespaceRE = /\s+/g;
|
||||
|
||||
function parseTextCommentNode(node: Node, ctx: ParsingContext): AST | null {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
let value = node.textContent || "";
|
||||
if (!ctx.inPreTag && lineBreakRE.test(value) && !value.trim()) {
|
||||
return null;
|
||||
if (!ctx.inPreTag) {
|
||||
if (lineBreakRE.test(value) && !value.trim()) {
|
||||
return null;
|
||||
}
|
||||
value = value.replace(whitespaceRE, " ");
|
||||
}
|
||||
|
||||
return { type: ASTType.Text, value };
|
||||
|
||||
+12
-30
@@ -1,4 +1,3 @@
|
||||
import { version } from "../version";
|
||||
import { Component, ComponentConstructor, Props } from "./component";
|
||||
import { ComponentNode } from "./component_node";
|
||||
import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
|
||||
@@ -15,7 +14,6 @@ export interface Env {
|
||||
}
|
||||
|
||||
export interface AppConfig<P, E> extends TemplateSetConfig {
|
||||
name?: string;
|
||||
props?: P;
|
||||
env?: E;
|
||||
test?: boolean;
|
||||
@@ -55,9 +53,7 @@ export class App<
|
||||
E = any
|
||||
> extends TemplateSet {
|
||||
static validateTarget = validateTarget;
|
||||
static version = version;
|
||||
|
||||
name: string;
|
||||
Root: ComponentConstructor<P, E>;
|
||||
props: P;
|
||||
env: E;
|
||||
@@ -67,7 +63,6 @@ export class App<
|
||||
|
||||
constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
|
||||
super(config);
|
||||
this.name = config.name || "";
|
||||
this.Root = Root;
|
||||
window.__OWL_DEVTOOLS__.apps.add(this);
|
||||
if (config.test) {
|
||||
@@ -139,35 +134,22 @@ export class App<
|
||||
isStatic: boolean,
|
||||
hasSlotsProp: boolean,
|
||||
hasDynamicPropList: boolean,
|
||||
propList: string[]
|
||||
hasNoProp: boolean
|
||||
) {
|
||||
const isDynamic = !isStatic;
|
||||
let arePropsDifferent: (p1: Object, p2: Object) => boolean;
|
||||
const hasNoProp = propList.length === 0;
|
||||
if (hasSlotsProp) {
|
||||
arePropsDifferent = (_1, _2) => true;
|
||||
} else if (hasDynamicPropList) {
|
||||
arePropsDifferent = function (props1: Props, props2: Props) {
|
||||
for (let k in props1) {
|
||||
if (props1[k] !== props2[k]) {
|
||||
return true;
|
||||
}
|
||||
function _arePropsDifferent(props1: Props, props2: Props): boolean {
|
||||
for (let k in props1) {
|
||||
if (props1[k] !== props2[k]) {
|
||||
return true;
|
||||
}
|
||||
return Object.keys(props1).length !== Object.keys(props2).length;
|
||||
};
|
||||
} else if (hasNoProp) {
|
||||
arePropsDifferent = (_1: any, _2: any) => false;
|
||||
} else {
|
||||
arePropsDifferent = function (props1: Props, props2: Props) {
|
||||
for (let p of propList) {
|
||||
if (props1[p] !== props2[p]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}
|
||||
return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
|
||||
}
|
||||
|
||||
const arePropsDifferent = hasSlotsProp
|
||||
? (_1: any, _2: any) => true
|
||||
: hasNoProp
|
||||
? (_1: any, _2: any) => false
|
||||
: _arePropsDifferent;
|
||||
const updateAndRender = ComponentNode.prototype.updateAndRender;
|
||||
const initiateRender = ComponentNode.prototype.initiateRender;
|
||||
|
||||
|
||||
@@ -281,19 +281,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a ref to a given HTMLElement.
|
||||
*
|
||||
* @param name the name of the ref to set
|
||||
* @param el the HTMLElement to set the ref to. The ref is not set if the el
|
||||
* is null, but useRef will not return elements that are not in the DOM
|
||||
*/
|
||||
setRef(name: string, el: HTMLElement | null) {
|
||||
if (el) {
|
||||
this.refs[name] = el;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Block DOM methods
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@@ -15,8 +15,7 @@ export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el:
|
||||
const refs = node.refs;
|
||||
return {
|
||||
get el(): T | null {
|
||||
const el = refs[name];
|
||||
return el?.ownerDocument.contains(el) ? el : null;
|
||||
return refs[name] || null;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { App } from "./app";
|
||||
import {
|
||||
config,
|
||||
createBlock,
|
||||
@@ -57,6 +56,4 @@ export {
|
||||
export { validate } from "./validation";
|
||||
export { OwlError } from "./error_handling";
|
||||
|
||||
export const __info__ = {
|
||||
version: App.version,
|
||||
};
|
||||
export const __info__ = {};
|
||||
|
||||
@@ -63,7 +63,7 @@ export function onMounted(fn: () => void | any) {
|
||||
node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
|
||||
}
|
||||
|
||||
export function onWillPatch(fn: () => any | void) {
|
||||
export function onWillPatch(fn: () => Promise<void> | any | void) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
|
||||
@@ -75,13 +75,13 @@ export function onPatched(fn: () => void | any) {
|
||||
node.patched.push(decorate(fn.bind(node.component), "onPatched"));
|
||||
}
|
||||
|
||||
export function onWillUnmount(fn: () => void | any) {
|
||||
export function onWillUnmount(fn: () => Promise<void> | void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
|
||||
}
|
||||
|
||||
export function onWillDestroy(fn: () => void | any) {
|
||||
export function onWillDestroy(fn: () => Promise<void> | void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
|
||||
|
||||
@@ -5,7 +5,6 @@ import { isOptional, validateSchema } from "./validation";
|
||||
import type { ComponentConstructor } from "./component";
|
||||
import { markRaw } from "./reactivity";
|
||||
import { OwlError } from "./error_handling";
|
||||
import type { ComponentNode } from "./component_node";
|
||||
|
||||
const ObjectCreate = Object.create;
|
||||
/**
|
||||
@@ -167,6 +166,52 @@ export function safeOutput(value: any, defaultValue?: any): ReturnType<typeof to
|
||||
return toggler(safeKey, block);
|
||||
}
|
||||
|
||||
let boundFunctions = new WeakMap();
|
||||
const WeakMapGet = WeakMap.prototype.get;
|
||||
const WeakMapSet = WeakMap.prototype.set;
|
||||
|
||||
function bind(component: any, fn: Function): Function {
|
||||
let boundFnMap = WeakMapGet.call(boundFunctions, component);
|
||||
if (!boundFnMap) {
|
||||
boundFnMap = new WeakMap();
|
||||
WeakMapSet.call(boundFunctions, component, boundFnMap);
|
||||
}
|
||||
let boundFn = WeakMapGet.call(boundFnMap, fn);
|
||||
if (!boundFn) {
|
||||
boundFn = fn.bind(component);
|
||||
WeakMapSet.call(boundFnMap, fn, boundFn);
|
||||
}
|
||||
return boundFn;
|
||||
}
|
||||
|
||||
type RefMap = { [key: string]: HTMLElement | null };
|
||||
type RefSetter = (el: HTMLElement | null) => void;
|
||||
|
||||
function multiRefSetter(refs: RefMap, name: string): RefSetter {
|
||||
let count = 0;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
count++;
|
||||
if (count > 1) {
|
||||
throw new OwlError("Cannot have 2 elements with same ref name at the same time");
|
||||
}
|
||||
}
|
||||
if (count === 0 || el) {
|
||||
refs[name] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function singleRefSetter(refs: RefMap, name: string): RefSetter {
|
||||
let _el: HTMLElement | null = null;
|
||||
return (el) => {
|
||||
if (el || refs[name] === _el) {
|
||||
refs[name] = el;
|
||||
_el = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the component props (or next props) against the (static) props
|
||||
* description. This is potentially an expensive operation: it may needs to
|
||||
@@ -215,19 +260,6 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
|
||||
}
|
||||
}
|
||||
|
||||
function makeRefWrapper(node: ComponentNode) {
|
||||
let refNames: Set<String> = new Set();
|
||||
return (name: string, fn: Function) => {
|
||||
if (refNames.has(name)) {
|
||||
throw new OwlError(
|
||||
`Cannot set the same ref more than once in the same component, ref "${name}" was set multiple times in ${node.name}`
|
||||
);
|
||||
}
|
||||
refNames.add(name);
|
||||
return fn;
|
||||
};
|
||||
}
|
||||
|
||||
export const helpers = {
|
||||
withDefault,
|
||||
zero: Symbol("zero"),
|
||||
@@ -237,13 +269,15 @@ export const helpers = {
|
||||
withKey,
|
||||
prepareList,
|
||||
setContextValue,
|
||||
multiRefSetter,
|
||||
singleRefSetter,
|
||||
shallowEqual,
|
||||
toNumber,
|
||||
validateProps,
|
||||
LazyValue,
|
||||
safeOutput,
|
||||
bind,
|
||||
createCatcher,
|
||||
markRaw,
|
||||
OwlError,
|
||||
makeRefWrapper,
|
||||
};
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
// do not modify manually. This value is updated by the release script.
|
||||
export const version = "2.1.0";
|
||||
@@ -50,7 +50,7 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -82,7 +82,7 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -129,7 +129,7 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
|
||||
|
||||
@@ -222,8 +222,8 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -253,8 +253,8 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -284,8 +284,8 @@ exports[`Reactivity: useState two independent components on different levels are
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Parent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Parent\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -315,7 +315,7 @@ exports[`Reactivity: useState two independent components on different levels are
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -345,7 +345,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Quantity\`, true, false, false, [\\"id\\"]);
|
||||
const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
|
||||
|
||||
|
||||
@@ -69,7 +69,7 @@ describe("app", () => {
|
||||
static template = xml`<div t-esc="message"/>`;
|
||||
}
|
||||
|
||||
await mount(Root, fixture, { test: true, props: { messge: "hey" }, warnIfNoStaticProps: true });
|
||||
await mount(Root, fixture, { dev: true, props: { messge: "hey" }, warnIfNoStaticProps: true });
|
||||
|
||||
console.warn = originalconsoleWarn;
|
||||
expect(mockConsoleWarn).toBeCalledWith(
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`misc complex template 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`SlotButton\`, true, false, false, [\\"class\\",\\"slot\\"]);
|
||||
const comp1 = app.createComponent(\`SlotButton\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><div block-attribute-1=\\"class\\"><div class=\\"batch_header\\"><a block-attribute-2=\\"href\\" block-attribute-3=\\"class\\" title=\\"View Batch\\"><block-text-4/><block-child-0/><i class=\\"arrow fa fa-window-maximize\\"/></a></div><block-child-1/><div class=\\"batch_slots\\"><block-child-2/><block-child-3/></div><div class=\\"batch_commits\\"><block-child-4/></div></div></div>\`);
|
||||
let block2 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
|
||||
@@ -182,10 +182,10 @@ exports[`misc other complex template 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
let { prepareList, withKey, singleRefSetter } = helpers;
|
||||
const callTemplate_1 = app.getTemplate(\`LOAD_INFOS_TEMPLATE\`);
|
||||
const comp1 = app.createComponent(\`BundlesList\`, true, false, false, [\\"bundles\\",\\"category_custom_views\\",\\"search\\"]);
|
||||
const comp2 = app.createComponent(\`BundlesList\`, true, false, false, [\\"bundles\\",\\"search\\"]);
|
||||
const comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`BundlesList\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-property-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
|
||||
<h5>Search options</h5>
|
||||
@@ -217,6 +217,9 @@ exports[`misc other complex template 1`] = `
|
||||
let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`search_input\`);
|
||||
const ref2 = singleRefSetter(refs, \`settings_menu\`);
|
||||
let b2,b4,b14,b17,b22,b23,b24,b25;
|
||||
let attr1 = \`/runbot/\${ctx['project'].slug}\`;
|
||||
let txt1 = ctx['project'].name;
|
||||
@@ -277,9 +280,7 @@ exports[`misc other complex template 1`] = `
|
||||
let prop2 = new String((ctx['search'].value) === 0 ? 0 : ((ctx['search'].value) || \\"\\"));
|
||||
let hdlr4 = [ctx['updateFilter'], ctx];
|
||||
let hdlr5 = [ctx['updateFilter'], ctx];
|
||||
let ref1 = (el) => this.__owl__.setRef((\`search_input\`), el);
|
||||
let hdlr6 = [ctx['clearSearch'], ctx];
|
||||
let ref2 = (el) => this.__owl__.setRef((\`settings_menu\`), el);
|
||||
if (ctx['triggers']) {
|
||||
ctx = Object.create(ctx);
|
||||
const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
|
||||
|
||||
@@ -4,12 +4,14 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const v1 = ctx['id'];
|
||||
let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
|
||||
let ref1 = singleRefSetter(refs, \`myspan\${v1}\`);
|
||||
return block1([ref1]);
|
||||
}
|
||||
}"
|
||||
@@ -19,12 +21,14 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const v1 = ctx['id'];
|
||||
let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
|
||||
let ref1 = singleRefSetter(refs, \`myspan\${v1}\`);
|
||||
return block1([ref1]);
|
||||
}
|
||||
}"
|
||||
@@ -34,11 +38,13 @@ exports[`t-ref can get a ref on a node 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`myspan\`), el);
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`myspan\`);
|
||||
return block1([ref1]);
|
||||
}
|
||||
}"
|
||||
@@ -63,11 +69,13 @@ exports[`t-ref ref in a t-call 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`name\`);
|
||||
return block1([ref1]);
|
||||
}
|
||||
}"
|
||||
@@ -77,14 +85,16 @@ exports[`t-ref ref in a t-if 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`name\`);
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
|
||||
b2 = block2([ref1]);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
@@ -96,12 +106,13 @@ exports[`t-ref refs in a loop 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
let { prepareList, singleRefSetter, withKey } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
ctx = Object.create(ctx);
|
||||
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
|
||||
for (let i1 = 0; i1 < l_block2; i1++) {
|
||||
@@ -109,7 +120,7 @@ exports[`t-ref refs in a loop 1`] = `
|
||||
const key1 = ctx['item'];
|
||||
const tKey_1 = ctx['item'];
|
||||
const v1 = ctx['item'];
|
||||
let ref1 = (el) => this.__owl__.setRef(((v1)), el);
|
||||
let ref1 = singleRefSetter(refs, (v1));
|
||||
let txt1 = ctx['item'];
|
||||
c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
|
||||
}
|
||||
@@ -123,17 +134,19 @@ exports[`t-ref two refs, one in a t-if 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
|
||||
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`name\`);
|
||||
const ref2 = singleRefSetter(refs, \`p\`);
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
|
||||
b2 = block2([ref1]);
|
||||
}
|
||||
let ref2 = (el) => this.__owl__.setRef((\`p\`), el);
|
||||
return block1([ref2], [b2]);
|
||||
}
|
||||
}"
|
||||
|
||||
@@ -64,16 +64,3 @@ exports[`translation support translation is done on the trimmed text, with extra
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`translation support translation works, even if initial string has inner consecutive white space 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div>un mot</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -26,10 +26,10 @@ describe("qweb parser", () => {
|
||||
});
|
||||
});
|
||||
|
||||
test("white spaces are maintained", async () => {
|
||||
test("white spaces are condensed into a single space", async () => {
|
||||
expect(parse(" ")).toEqual({
|
||||
type: ASTType.Text,
|
||||
value: " ",
|
||||
value: " ",
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -2,17 +2,6 @@ import { TemplateSet } from "../../src/runtime/template_set";
|
||||
import { mount } from "../../src/runtime/blockdom";
|
||||
import { renderToBdom, snapshotEverything } from "../helpers";
|
||||
|
||||
function mockNode() {
|
||||
return {
|
||||
refs: {} as { [key: string]: HTMLElement | null },
|
||||
setRef(name: string, value: HTMLElement | null) {
|
||||
if (value) {
|
||||
this.refs[name] = value;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -22,29 +11,29 @@ snapshotEverything();
|
||||
describe("t-ref", () => {
|
||||
test("can get a ref on a node", () => {
|
||||
const template = `<div><span t-ref="myspan"/></div>`;
|
||||
const node = mockNode();
|
||||
const bdom = renderToBdom(template, { __owl__: node });
|
||||
expect(node.refs).toEqual({});
|
||||
const refs: any = {};
|
||||
const bdom = renderToBdom(template, { __owl__: { refs } });
|
||||
expect(refs).toEqual({});
|
||||
mount(bdom, document.createElement("div"));
|
||||
expect(node.refs.myspan!.tagName).toBe("SPAN");
|
||||
expect(refs.myspan.tagName).toBe("SPAN");
|
||||
});
|
||||
|
||||
test("can get a dynamic ref on a node", () => {
|
||||
const template = `<div><span t-ref="myspan{{id}}"/></div>`;
|
||||
const node = mockNode();
|
||||
const bdom = renderToBdom(template, { id: 3, __owl__: node });
|
||||
expect(node.refs).toEqual({});
|
||||
const refs: any = {};
|
||||
const bdom = renderToBdom(template, { id: 3, __owl__: { refs } });
|
||||
expect(refs).toEqual({});
|
||||
mount(bdom, document.createElement("div"));
|
||||
expect(node.refs.myspan3!.tagName).toBe("SPAN");
|
||||
expect(refs.myspan3.tagName).toBe("SPAN");
|
||||
});
|
||||
|
||||
test("can get a dynamic ref on a node, alternate syntax", () => {
|
||||
const template = `<div><span t-ref="myspan#{id}"/></div>`;
|
||||
const node = mockNode();
|
||||
const bdom = renderToBdom(template, { id: 3, __owl__: node });
|
||||
expect(node.refs).toEqual({});
|
||||
const refs: any = {};
|
||||
const bdom = renderToBdom(template, { id: 3, __owl__: { refs } });
|
||||
expect(refs).toEqual({});
|
||||
mount(bdom, document.createElement("div"));
|
||||
expect(node.refs.myspan3!.tagName).toBe("SPAN");
|
||||
expect(refs.myspan3.tagName).toBe("SPAN");
|
||||
});
|
||||
|
||||
test("refs in a loop", () => {
|
||||
@@ -53,11 +42,11 @@ describe("t-ref", () => {
|
||||
<div t-ref="{{item}}" t-key="item"><t t-esc="item"/></div>
|
||||
</t>
|
||||
</div>`;
|
||||
const node = mockNode();
|
||||
const bdom = renderToBdom(template, { items: [1, 2, 3], __owl__: node });
|
||||
expect(node.refs).toEqual({});
|
||||
const refs: any = {};
|
||||
const bdom = renderToBdom(template, { items: [1, 2, 3], __owl__: { refs } });
|
||||
expect(refs).toEqual({});
|
||||
mount(bdom, document.createElement("div"));
|
||||
expect(Object.keys(node.refs)).toEqual(["1", "2", "3"]);
|
||||
expect(Object.keys(refs)).toEqual(["1", "2", "3"]);
|
||||
});
|
||||
|
||||
test("ref in a t-if", () => {
|
||||
@@ -68,23 +57,22 @@ describe("t-ref", () => {
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
const node = mockNode();
|
||||
const refs: any = {};
|
||||
// false
|
||||
const bdom = renderToBdom(template, { condition: false, __owl__: node });
|
||||
expect(node.refs).toEqual({});
|
||||
const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
|
||||
expect(refs).toEqual({});
|
||||
mount(bdom, document.createElement("div"));
|
||||
expect(node.refs).toEqual({});
|
||||
expect(refs).toEqual({});
|
||||
|
||||
// true now
|
||||
const bdom2 = renderToBdom(template, { condition: true, __owl__: node });
|
||||
const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
|
||||
bdom.patch(bdom2, true);
|
||||
expect(node.refs.name!.tagName).toBe("SPAN");
|
||||
expect(refs.name.tagName).toBe("SPAN");
|
||||
|
||||
// false again
|
||||
const bdom3 = renderToBdom(template, { condition: false, __owl__: node });
|
||||
const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
|
||||
bdom.patch(bdom3, true);
|
||||
const span = node.refs.name;
|
||||
expect(span!.ownerDocument.contains(span)).toBe(false);
|
||||
expect(refs).toEqual({ name: null });
|
||||
});
|
||||
|
||||
test("two refs, one in a t-if", () => {
|
||||
@@ -96,41 +84,40 @@ describe("t-ref", () => {
|
||||
<p t-ref="p"/>
|
||||
</div>`;
|
||||
|
||||
const node = mockNode();
|
||||
const refs: any = {};
|
||||
|
||||
// false
|
||||
const bdom = renderToBdom(template, { condition: false, __owl__: node });
|
||||
expect(Object.keys(node.refs)).toEqual([]);
|
||||
const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
|
||||
expect(Object.keys(refs)).toEqual([]);
|
||||
mount(bdom, document.createElement("div"));
|
||||
expect(Object.keys(node.refs)).toEqual(["p"]);
|
||||
expect(Object.keys(refs)).toEqual(["p"]);
|
||||
|
||||
// true now
|
||||
const bdom2 = renderToBdom(template, { condition: true, __owl__: node });
|
||||
const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
|
||||
bdom.patch(bdom2, true);
|
||||
expect(Object.keys(node.refs)).toEqual(["p", "name"]);
|
||||
expect(Object.keys(refs)).toEqual(["p", "name"]);
|
||||
|
||||
// false again
|
||||
const bdom3 = renderToBdom(template, { condition: false, __owl__: node });
|
||||
const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
|
||||
bdom.patch(bdom3, true);
|
||||
expect(Object.keys(node.refs)).toEqual(["p", "name"]);
|
||||
const span = node.refs.name;
|
||||
expect(span!.ownerDocument.contains(span)).toBe(false);
|
||||
expect(Object.keys(refs)).toEqual(["p", "name"]);
|
||||
expect(refs.name).toBeNull();
|
||||
});
|
||||
|
||||
test("ref in a t-call", () => {
|
||||
const main = `<div><t t-call="sub"/></div>`;
|
||||
const sub = `<div>1<span t-ref="name"/>2</div>`;
|
||||
|
||||
const node = mockNode();
|
||||
const refs: any = {};
|
||||
|
||||
const app = new TemplateSet();
|
||||
app.addTemplate("main", main);
|
||||
app.addTemplate("sub", sub);
|
||||
|
||||
const comp = { __owl__: node };
|
||||
const comp = { __owl__: { refs } };
|
||||
const bdom = app.getTemplate("main").call(comp, comp, {});
|
||||
mount(bdom, document.createElement("div"));
|
||||
|
||||
expect(node.refs.name!.tagName).toBe("SPAN");
|
||||
expect(refs.name.tagName).toBe("SPAN");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -88,16 +88,4 @@ describe("translation support", () => {
|
||||
expect(fixture.innerHTML).toBe("<div> mot </div>");
|
||||
expect(translateFn).toHaveBeenCalledWith("word");
|
||||
});
|
||||
|
||||
test("translation works, even if initial string has inner consecutive white space", async () => {
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`<div>some word</div>`;
|
||||
}
|
||||
|
||||
const translateFn = jest.fn((expr: string) => (expr === "some word" ? "un mot" : expr));
|
||||
|
||||
await mount(SomeComponent, fixture, { translateFn });
|
||||
expect(translateFn).toHaveBeenCalledWith("some word");
|
||||
expect(fixture.innerHTML).toBe("<div>un mot</div>");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, [\\"displayGrandChild\\"]);
|
||||
const comp1 = app.createComponent(null, false, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const Comp1 = ctx['myComp'];
|
||||
@@ -17,7 +17,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -63,7 +63,7 @@ exports[`basics a class component inside a class component, no external dom 1`]
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -101,7 +101,7 @@ exports[`basics a component inside a component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
@@ -145,7 +145,7 @@ exports[`basics can handle empty props 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -265,7 +265,7 @@ exports[`basics child can be updated 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].counter}, key + \`__1\`, node, this, null);
|
||||
@@ -302,7 +302,7 @@ exports[`basics class parent, class child component with props 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: 42}, key + \`__1\`, node, this, null);
|
||||
@@ -328,7 +328,7 @@ exports[`basics component children doesn't leak (if case) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -357,7 +357,7 @@ exports[`basics component children doesn't leak (t-key case) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['keyVar'];
|
||||
@@ -424,7 +424,7 @@ exports[`basics higher order components parent and child 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"child\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({child: ctx['state'].child}, key + \`__1\`, node, this, null);
|
||||
@@ -436,8 +436,8 @@ exports[`basics higher order components parent and child 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -482,8 +482,8 @@ exports[`basics list of two sub components inside other nodes 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`SubWidget\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`SubWidget\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`SubWidget\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
@@ -521,7 +521,7 @@ exports[`basics parent, child and grandchild 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -533,7 +533,7 @@ exports[`basics parent, child and grandchild 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -597,8 +597,8 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -628,7 +628,7 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Counter\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Counter\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -656,8 +656,8 @@ exports[`basics same t-keys in two different places 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
|
||||
|
||||
@@ -730,7 +730,7 @@ exports[`basics sub components between t-ifs 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><span><block-child-2/></span><block-child-3/></div>\`);
|
||||
let block2 = createBlock(\`<h1>hey</h1>\`);
|
||||
@@ -770,7 +770,7 @@ exports[`basics t-elif works with t-component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<div>somediv</div>\`);
|
||||
@@ -804,7 +804,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<div>somediv</div>\`);
|
||||
@@ -838,7 +838,7 @@ exports[`basics t-else works with t-component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<div>somediv</div>\`);
|
||||
@@ -872,7 +872,7 @@ exports[`basics t-if works with t-component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -903,8 +903,8 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -937,7 +937,7 @@ exports[`basics text after a conditional component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
|
||||
|
||||
@@ -969,7 +969,7 @@ exports[`basics three level of components with collapsing root nodes 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -981,7 +981,7 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -1006,8 +1006,8 @@ exports[`basics two child components 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -1034,7 +1034,7 @@ exports[`basics update props of component without concrete own node 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1050,7 +1050,7 @@ exports[`basics update props of component without concrete own node 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Custom\`, true, false, false, [\\"key\\",\\"subKey\\"]);
|
||||
const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['props'].subKey;
|
||||
@@ -1097,7 +1097,7 @@ exports[`basics updating widget immediately 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"flag\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
|
||||
@@ -1127,7 +1127,7 @@ exports[`basics widget after a t-foreach 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -1165,7 +1165,7 @@ exports[`basics zero or one child components 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -1246,7 +1246,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`GComp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`Cascading renders after microtaskTick 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -28,7 +28,7 @@ exports[`Cascading renders after microtaskTick 2`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Element\`, true, false, false, [\\"id\\"]);
|
||||
const comp1 = app.createComponent(\`Element\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -58,7 +58,7 @@ exports[`another scenario with delayed rendering 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -75,7 +75,7 @@ exports[`another scenario with delayed rendering 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['props'].value);
|
||||
@@ -117,7 +117,7 @@ exports[`calling render in destroy 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['key'];
|
||||
@@ -130,7 +130,7 @@ exports[`calling render in destroy 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({fromA: ctx['props'].fromA}, key + \`__1\`, node, this, null);
|
||||
@@ -170,7 +170,7 @@ exports[`changing state before first render does not trigger a render (with pare
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`TestW\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`TestW\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -216,7 +216,7 @@ exports[`concurrent renderings scenario 1 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -231,7 +231,7 @@ exports[`concurrent renderings scenario 1 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\",\\"fromB\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -261,7 +261,7 @@ exports[`concurrent renderings scenario 2 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
|
||||
|
||||
@@ -277,7 +277,7 @@ exports[`concurrent renderings scenario 2 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\",\\"fromB\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -307,7 +307,7 @@ exports[`concurrent renderings scenario 2bis 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -322,7 +322,7 @@ exports[`concurrent renderings scenario 2bis 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\",\\"fromB\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -352,7 +352,7 @@ exports[`concurrent renderings scenario 3 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -367,7 +367,7 @@ exports[`concurrent renderings scenario 3 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -382,7 +382,7 @@ exports[`concurrent renderings scenario 3 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentD\`, true, false, false, [\\"fromA\\",\\"fromC\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
@@ -412,7 +412,7 @@ exports[`concurrent renderings scenario 4 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -427,7 +427,7 @@ exports[`concurrent renderings scenario 4 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -442,7 +442,7 @@ exports[`concurrent renderings scenario 4 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentD\`, true, false, false, [\\"fromA\\",\\"fromC\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
@@ -472,7 +472,7 @@ exports[`concurrent renderings scenario 5 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -501,7 +501,7 @@ exports[`concurrent renderings scenario 6 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -530,7 +530,7 @@ exports[`concurrent renderings scenario 7 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -560,7 +560,7 @@ exports[`concurrent renderings scenario 8 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -590,8 +590,8 @@ exports[`concurrent renderings scenario 9 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp2 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`ComponentC\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -622,7 +622,7 @@ exports[`concurrent renderings scenario 9 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentD\`, true, false, false, [\\"fromA\\",\\"fromC\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -652,7 +652,7 @@ exports[`concurrent renderings scenario 10 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -667,7 +667,7 @@ exports[`concurrent renderings scenario 10 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -699,7 +699,7 @@ exports[`concurrent renderings scenario 11 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -729,7 +729,7 @@ exports[`concurrent renderings scenario 12 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -758,8 +758,8 @@ exports[`concurrent renderings scenario 13 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -792,7 +792,7 @@ exports[`concurrent renderings scenario 14 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -807,7 +807,7 @@ exports[`concurrent renderings scenario 14 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromB\\",\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -838,7 +838,7 @@ exports[`concurrent renderings scenario 15 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -853,7 +853,7 @@ exports[`concurrent renderings scenario 15 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromB\\",\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -884,7 +884,7 @@ exports[`concurrent renderings scenario 16 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
|
||||
@@ -896,7 +896,7 @@ exports[`concurrent renderings scenario 16 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromB\\",\\"fromA\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, this, null);
|
||||
@@ -908,7 +908,7 @@ exports[`concurrent renderings scenario 16 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3,b4,b5,b6,b7,b8;
|
||||
@@ -941,8 +941,8 @@ exports[`creating two async components, scenario 1 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -988,8 +988,8 @@ exports[`creating two async components, scenario 2 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -1036,8 +1036,8 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -1084,7 +1084,7 @@ exports[`delay willUpdateProps 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1110,7 +1110,7 @@ exports[`delay willUpdateProps with rendering grandchild 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Parent\`, true, false, false, [\\"state\\"]);
|
||||
const comp1 = app.createComponent(\`Parent\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
|
||||
@@ -1122,8 +1122,8 @@ exports[`delay willUpdateProps with rendering grandchild 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`DelayedChild\`, true, false, false, [\\"value\\"]);
|
||||
const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`DelayedChild\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({value: ctx['props'].state.value}, key + \`__1\`, node, this, null);
|
||||
@@ -1164,7 +1164,7 @@ exports[`delayed fiber does not get rendered if it was cancelled 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`A\`);
|
||||
@@ -1178,7 +1178,7 @@ exports[`delayed fiber does not get rendered if it was cancelled 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`B\`);
|
||||
@@ -1192,7 +1192,7 @@ exports[`delayed fiber does not get rendered if it was cancelled 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`C\`);
|
||||
@@ -1217,7 +1217,7 @@ exports[`delayed render does not go through when t-component value changed 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`A\`);
|
||||
@@ -1256,7 +1256,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1268,7 +1268,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1280,7 +1280,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, true);
|
||||
|
||||
let block3 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
|
||||
@@ -1312,7 +1312,7 @@ exports[`delayed rendering, destruction, stuff happens 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`A\`);
|
||||
@@ -1326,7 +1326,7 @@ exports[`delayed rendering, destruction, stuff happens 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1343,7 +1343,7 @@ exports[`delayed rendering, destruction, stuff happens 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, true);
|
||||
|
||||
let block4 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
|
||||
@@ -1378,7 +1378,7 @@ exports[`delayed rendering, reusing fiber and stuff 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1390,7 +1390,7 @@ exports[`delayed rendering, reusing fiber and stuff 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['props'].value);
|
||||
@@ -1419,7 +1419,7 @@ exports[`delayed rendering, reusing fiber then component is destroyed and stuff
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1436,7 +1436,7 @@ exports[`delayed rendering, reusing fiber then component is destroyed and stuff
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['props'].value);
|
||||
@@ -1465,7 +1465,7 @@ exports[`delayed rendering, then component is destroyed and stuff 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1477,7 +1477,7 @@ exports[`delayed rendering, then component is destroyed and stuff 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1509,8 +1509,8 @@ exports[`destroyed component causes other soon to be destroyed component to rere
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp2 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1551,7 +1551,7 @@ exports[`destroying/recreating a subcomponent, other scenario 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1579,7 +1579,7 @@ exports[`destroying/recreating a subwidget with different props (if start is not
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1611,7 +1611,7 @@ exports[`parent and child rendered at exact same time 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1634,7 +1634,7 @@ exports[`properly behave when destroyed/unmounted while rendering 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1652,7 +1652,7 @@ exports[`properly behave when destroyed/unmounted while rendering 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubChild\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`SubChild\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1680,7 +1680,7 @@ exports[`rendering component again in next microtick 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Click</button><block-child-0/></div>\`);
|
||||
|
||||
@@ -1712,7 +1712,7 @@ exports[`rendering parent twice, with different props on child and stuff 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1735,8 +1735,8 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
|
||||
const comp2 = app.createComponent(\`D\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`D\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`A\`);
|
||||
@@ -1751,7 +1751,7 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1803,7 +1803,7 @@ exports[`t-foreach with dynamic async component 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(null, false, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(null, false, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -1842,7 +1842,7 @@ exports[`t-key on dom node having a component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(null, false, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1870,7 +1870,7 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(null, false, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['key'];
|
||||
@@ -1898,7 +1898,7 @@ exports[`two renderings initiated between willPatch and patched 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Panel\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Panel\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
|
||||
|
||||
@@ -1932,7 +1932,7 @@ exports[`two sequential renderings before an animation frame 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -1955,7 +1955,7 @@ exports[`update a sub-component twice in the same frame 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1984,7 +1984,7 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`basics display a nice error if a component is not a component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -16,7 +16,7 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const props1 = {};
|
||||
@@ -30,7 +30,7 @@ exports[`basics display a nice error if it cannot find component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -42,7 +42,7 @@ exports[`basics display a nice error if the components key is missing with subco
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`MissingChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`MissingChild\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -57,7 +57,7 @@ exports[`basics no component catching error lead to full app destruction 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, [\\"flag\\"]);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -86,7 +86,7 @@ exports[`basics simple catchError 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -186,7 +186,7 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -216,7 +216,7 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -258,8 +258,8 @@ exports[`can catch errors can catch an error in a component render function 1`]
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, [\\"flag\\"]);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -313,8 +313,8 @@ exports[`can catch errors can catch an error in the constructor call of a compon
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -354,9 +354,9 @@ exports[`can catch errors can catch an error in the constructor call of a compon
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -437,8 +437,8 @@ exports[`can catch errors can catch an error in the initial call of a component
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -492,8 +492,8 @@ exports[`can catch errors can catch an error in the initial call of a component
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -549,7 +549,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -561,7 +561,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -576,7 +576,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -609,7 +609,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -643,8 +643,8 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -697,8 +697,8 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, [\\"message\\"]);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
|
||||
|
||||
@@ -753,8 +753,8 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -807,9 +807,9 @@ exports[`can catch errors can catch an error origination from a child's willStar
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -876,7 +876,7 @@ exports[`can catch errors catchError in catchError 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -896,7 +896,7 @@ exports[`can catch errors catchError in catchError 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -926,8 +926,8 @@ exports[`can catch errors catching error, rethrow, render parent -- a main comp
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, capture, markRaw, withKey } = helpers;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false, [\\"onError\\"]);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false, false);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const Comp1 = ctx['cp'].Comp;
|
||||
@@ -966,7 +966,7 @@ exports[`can catch errors catching error, rethrow, render parent -- a main comp
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -1005,8 +1005,8 @@ exports[`can catch errors catching in child makes parent render 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, capture, markRaw, withKey } = helpers;
|
||||
const comp1 = app.createComponent(null, false, false, false, [\\"id\\"]);
|
||||
const comp2 = app.createComponent(\`Catch\`, true, true, false, [\\"onError\\"]);
|
||||
const comp1 = app.createComponent(null, false, false, false, false);
|
||||
const comp2 = app.createComponent(\`Catch\`, true, true, false, false);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const Comp1 = ctx['elem'][1];
|
||||
@@ -1073,9 +1073,9 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`OK\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
|
||||
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`OK\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
|
||||
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -1139,7 +1139,7 @@ exports[`can catch errors onError in class inheritance is called if rethrown 1`]
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Concrete\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -1170,7 +1170,7 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Concrete\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -1201,7 +1201,7 @@ exports[`errors and promises a rendering error in a sub component will reject th
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1244,7 +1244,7 @@ exports[`errors and promises a rendering error will reject the render promise (w
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ exports[`event handling handler receive the event as argument 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
|
||||
|
||||
@@ -76,7 +76,7 @@ exports[`event handling input blur event is not called if component is destroyed
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`basics basic use 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({p: 1}, key + \`__1\`, node, this, null);
|
||||
@@ -30,8 +30,8 @@ exports[`basics can select a sub widget 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -76,8 +76,8 @@ exports[`basics can select a sub widget, part 2 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -122,7 +122,7 @@ exports[`basics sub widget is interactive 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({p: 1}, key + \`__1\`, node, this, null);
|
||||
@@ -149,7 +149,7 @@ exports[`basics top level sub widget with a parent 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -164,7 +164,7 @@ exports[`basics top level sub widget with a parent 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`ComponentC\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
|
||||
@@ -4,15 +4,17 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<input block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`input1\`);
|
||||
const ref2 = singleRefSetter(refs, \`input2\`);
|
||||
let b2;
|
||||
let ref1 = (el) => this.__owl__.setRef((\`input1\`), el);
|
||||
if (ctx['state'].flag) {
|
||||
let ref2 = (el) => this.__owl__.setRef((\`input2\`), el);
|
||||
b2 = block2([ref2]);
|
||||
}
|
||||
return block1([ref1], [b2]);
|
||||
@@ -24,12 +26,14 @@ exports[`hooks autofocus hook simple input 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`input1\`), el);
|
||||
let ref2 = (el) => this.__owl__.setRef((\`input2\`), el);
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`input1\`);
|
||||
const ref2 = singleRefSetter(refs, \`input2\`);
|
||||
return block1([ref1, ref2]);
|
||||
}
|
||||
}"
|
||||
@@ -39,7 +43,7 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`MyComponent\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`MyComponent\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -106,7 +110,7 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['env'].val);
|
||||
@@ -138,7 +142,7 @@ exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['env'].val);
|
||||
@@ -166,7 +170,7 @@ exports[`hooks parent and child env (with useSubEnv) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['env'].val);
|
||||
@@ -222,7 +226,7 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -262,13 +266,15 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`div\`);
|
||||
let b2;
|
||||
if (ctx['state'].value) {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
|
||||
b2 = block2([ref1]);
|
||||
}
|
||||
return multi([b2]);
|
||||
@@ -320,7 +326,7 @@ exports[`hooks useExternalListener 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`MyComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`MyComponent\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -350,11 +356,13 @@ exports[`hooks useRef hook: basic use 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`button\`), el);
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`button\`);
|
||||
let txt1 = ctx['value'];
|
||||
return block1([ref1, txt1]);
|
||||
}
|
||||
@@ -379,7 +387,7 @@ exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
|
||||
@@ -17,8 +17,8 @@ exports[`lifecycle hooks component semantics 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -47,9 +47,9 @@ exports[`lifecycle hooks component semantics 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`E\`, true, false, false, []);
|
||||
const comp3 = app.createComponent(\`F\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`D\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`E\`, true, false, false, true);
|
||||
const comp3 = app.createComponent(\`F\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
|
||||
|
||||
@@ -109,7 +109,7 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block2 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -142,7 +142,7 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -171,7 +171,7 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3,b4;
|
||||
@@ -200,7 +200,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -228,7 +228,7 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Test\`, true, false, false, [\\"rev\\"]);
|
||||
const comp1 = app.createComponent(\`Test\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({rev: ctx['rev']}, key + \`__1\`, node, this, null);
|
||||
@@ -251,7 +251,7 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -279,7 +279,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -295,7 +295,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -320,7 +320,7 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -336,7 +336,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -352,7 +352,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -377,7 +377,7 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -406,7 +406,7 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -444,7 +444,7 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -473,7 +473,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -501,7 +501,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -519,7 +519,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -547,7 +547,7 @@ exports[`lifecycle hooks onWillRender 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"someValue\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
|
||||
@@ -574,7 +574,7 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -658,7 +658,7 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -700,7 +700,7 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"prop\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const props1 = {prop: ctx['state'].prop};
|
||||
@@ -725,7 +725,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -740,7 +740,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, [\\"n\\"]);
|
||||
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -769,7 +769,7 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -820,7 +820,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block3 = createBlock(\`<div/>\`);
|
||||
@@ -854,7 +854,7 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
|
||||
|
||||
@@ -1,76 +1,10 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`.alike suffix in a list 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Todo\`, true, false, false, [\\"todo\\"]);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
|
||||
for (let i1 = 0; i1 < l_block1; i1++) {
|
||||
ctx[\`elem\`] = v_block1[i1];
|
||||
const key1 = ctx['elem'].id;
|
||||
const v1 = ctx['this'];
|
||||
const v2 = ctx['elem'];
|
||||
c_block1[i1] = withKey(comp1({todo: ctx['elem'],toggle: ()=>v1.toggle(v2.id)}, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
}
|
||||
return list(c_block1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`.alike suffix in a list 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/><block-child-0/></button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
let hdlr1 = [ctx['props'].toggle, ctx];
|
||||
let txt1 = ctx['props'].todo.id;
|
||||
if (ctx['props'].todo.isChecked) {
|
||||
b2 = text(\`V\`);
|
||||
}
|
||||
return block1([hdlr1, txt1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`.alike suffix in a simple case 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].counter);
|
||||
const b3 = comp1({fn: ()=>1}, key + \`__1\`, node, this, null);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`.alike suffix in a simple case 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(ctx['props'].fn());
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"greetings\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -100,7 +34,7 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"onClick\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -135,7 +69,7 @@ exports[`basics explicit object prop 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -164,7 +98,7 @@ exports[`basics prop names can contain - 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"prop-name\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({'prop-name': 7}, key + \`__1\`, node, this, null);
|
||||
@@ -190,7 +124,7 @@ exports[`basics support prop names that aren't valid bare object property names
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"some-dashed-prop\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, this, null);
|
||||
@@ -217,7 +151,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, LazyValue } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>43</p>\`);
|
||||
@@ -257,7 +191,7 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -290,7 +224,7 @@ exports[`basics t-set works 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -322,7 +256,7 @@ exports[`basics template string in prop 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"propName\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, this, null);
|
||||
@@ -341,44 +275,20 @@ exports[`basics template string in prop 2`] = `
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`bound functions are considered 'alike' 1`] = `
|
||||
exports[`bound functions is referentially equal after update 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
let { bind } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].val);
|
||||
const b3 = comp1({fn: (ctx['someFunction']).bind(this)}, key + \`__1\`, node, this, null);
|
||||
return multi([b2, b3]);
|
||||
return comp1({val: ctx['state'].val,fn: bind(this, ctx['someFunction'])}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`bound functions are considered 'alike' 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`child\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`bound functions is not referentially equal after update 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({val: ctx['state'].val,fn: (ctx['someFunction']).bind(this)}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`bound functions is not referentially equal after update 2`] = `
|
||||
exports[`bound functions is referentially equal after update 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
@@ -393,10 +303,11 @@ exports[`can bind function prop with bind suffix 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
let { bind } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({doSomething: (ctx['doSomething']).bind(this)}, key + \`__1\`, node, this, null);
|
||||
return comp1({doSomething: bind(this, ctx['doSomething'])}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -411,27 +322,3 @@ exports[`can bind function prop with bind suffix 2`] = `
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`do not crash when binding anonymous function prop with bind suffix 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const v1 = ctx['this'];
|
||||
return comp1({doSomething: ((_val)=>v1.doSomething(_val)).bind(this)}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`do not crash when binding anonymous function prop with bind suffix 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`child\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`default props a default prop cannot be defined on a mandatory prop 1`]
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const props1 = {};
|
||||
@@ -18,7 +18,7 @@ exports[`default props can set default boolean values 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -55,7 +55,7 @@ exports[`default props can set default values 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -86,7 +86,7 @@ exports[`default props default values are also set whenever component is updated
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -117,7 +117,7 @@ exports[`props validation can specify that additional props are allowed (array)
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"message\\",\\"otherProp\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const props1 = {message: 'm',otherProp: 'o'};
|
||||
@@ -144,7 +144,7 @@ exports[`props validation can specify that additional props are allowed (object)
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"message\\",\\"otherProp\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const props1 = {message: 'm',otherProp: 'o'};
|
||||
@@ -171,7 +171,7 @@ exports[`props validation can validate a prop with multiple types 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -201,7 +201,7 @@ exports[`props validation can validate a prop with multiple types 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -231,7 +231,7 @@ exports[`props validation can validate a prop with multiple types 5`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -248,7 +248,7 @@ exports[`props validation can validate an array with given primitive type 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -278,7 +278,7 @@ exports[`props validation can validate an array with given primitive type 3`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -308,7 +308,7 @@ exports[`props validation can validate an array with given primitive type 5`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -325,7 +325,7 @@ exports[`props validation can validate an array with given primitive type 6`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -342,7 +342,7 @@ exports[`props validation can validate an array with multiple sub element types
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -372,7 +372,7 @@ exports[`props validation can validate an array with multiple sub element types
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -402,7 +402,7 @@ exports[`props validation can validate an array with multiple sub element types
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -432,7 +432,7 @@ exports[`props validation can validate an array with multiple sub element types
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -449,7 +449,7 @@ exports[`props validation can validate an object with simple shape 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -479,7 +479,7 @@ exports[`props validation can validate an object with simple shape 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -496,7 +496,7 @@ exports[`props validation can validate an object with simple shape 4`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -513,7 +513,7 @@ exports[`props validation can validate an object with simple shape 5`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -530,7 +530,7 @@ exports[`props validation can validate an optional props 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -560,7 +560,7 @@ exports[`props validation can validate an optional props 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -590,7 +590,7 @@ exports[`props validation can validate an optional props 5`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -607,7 +607,7 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -637,7 +637,7 @@ exports[`props validation can validate recursively complicated prop def 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -667,7 +667,7 @@ exports[`props validation can validate recursively complicated prop def 5`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -685,8 +685,8 @@ exports[`props validation can validate through slots 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Wrapper\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Wrapper\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const props1 = {};
|
||||
@@ -718,7 +718,7 @@ exports[`props validation default values are applied before validating props at
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -749,7 +749,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -766,7 +766,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -783,7 +783,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"message\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -814,7 +814,7 @@ exports[`props validation props are validated whenever component is updated 1`]
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -845,7 +845,7 @@ exports[`props validation props validation does not cause additional subscriptio
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"obj\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const props1 = {obj: ctx['obj']};
|
||||
@@ -872,7 +872,7 @@ exports[`props validation props: list of strings 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -889,7 +889,7 @@ exports[`props validation validate simple types 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -906,7 +906,7 @@ exports[`props validation validate simple types 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -936,7 +936,7 @@ exports[`props validation validate simple types 4`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -953,7 +953,7 @@ exports[`props validation validate simple types 5`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -970,7 +970,7 @@ exports[`props validation validate simple types 6`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1000,7 +1000,7 @@ exports[`props validation validate simple types 8`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1017,7 +1017,7 @@ exports[`props validation validate simple types 9`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1034,7 +1034,7 @@ exports[`props validation validate simple types 10`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1064,7 +1064,7 @@ exports[`props validation validate simple types 12`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1081,7 +1081,7 @@ exports[`props validation validate simple types 13`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1098,7 +1098,7 @@ exports[`props validation validate simple types 14`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1128,7 +1128,7 @@ exports[`props validation validate simple types 16`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1145,7 +1145,7 @@ exports[`props validation validate simple types 17`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1162,7 +1162,7 @@ exports[`props validation validate simple types 18`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1192,7 +1192,7 @@ exports[`props validation validate simple types 20`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1209,7 +1209,7 @@ exports[`props validation validate simple types 21`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1226,7 +1226,7 @@ exports[`props validation validate simple types 22`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1256,7 +1256,7 @@ exports[`props validation validate simple types 24`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1273,7 +1273,7 @@ exports[`props validation validate simple types, alternate form 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1290,7 +1290,7 @@ exports[`props validation validate simple types, alternate form 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1320,7 +1320,7 @@ exports[`props validation validate simple types, alternate form 4`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1337,7 +1337,7 @@ exports[`props validation validate simple types, alternate form 5`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1354,7 +1354,7 @@ exports[`props validation validate simple types, alternate form 6`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1384,7 +1384,7 @@ exports[`props validation validate simple types, alternate form 8`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1401,7 +1401,7 @@ exports[`props validation validate simple types, alternate form 9`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1418,7 +1418,7 @@ exports[`props validation validate simple types, alternate form 10`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1448,7 +1448,7 @@ exports[`props validation validate simple types, alternate form 12`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1465,7 +1465,7 @@ exports[`props validation validate simple types, alternate form 13`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1482,7 +1482,7 @@ exports[`props validation validate simple types, alternate form 14`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1512,7 +1512,7 @@ exports[`props validation validate simple types, alternate form 16`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1529,7 +1529,7 @@ exports[`props validation validate simple types, alternate form 17`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1546,7 +1546,7 @@ exports[`props validation validate simple types, alternate form 18`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1576,7 +1576,7 @@ exports[`props validation validate simple types, alternate form 20`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1593,7 +1593,7 @@ exports[`props validation validate simple types, alternate form 21`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1610,7 +1610,7 @@ exports[`props validation validate simple types, alternate form 22`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1640,7 +1640,7 @@ exports[`props validation validate simple types, alternate form 24`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1657,7 +1657,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1674,7 +1674,7 @@ exports[`props validation validation is only done in dev mode 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"state\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -31,7 +31,7 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"obj\\",\\"reactiveObj\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, this, null);
|
||||
@@ -112,7 +112,7 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -156,7 +156,7 @@ exports[`subscriptions subscriptions returns the keys observed by the component
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"state\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].a);
|
||||
|
||||
@@ -4,11 +4,13 @@ exports[`refs basic use 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`div\`);
|
||||
return block1([ref1]);
|
||||
}
|
||||
}"
|
||||
@@ -18,54 +20,38 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter, multiRefSetter } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
|
||||
let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = multiRefSetter(refs, \`coucou\`);
|
||||
let b2,b3;
|
||||
if (ctx['state'].value) {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`coucou\`), el);
|
||||
b2 = block2([ref1]);
|
||||
} else {
|
||||
let ref2 = (el) => this.__owl__.setRef((\`coucou\`), el);
|
||||
b3 = block3([ref2]);
|
||||
b3 = block3([ref1]);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`refs ref is unset when t-if goes to false after unrelated render 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block2 = createBlock(\`<div block-attribute-0=\\"class\\" block-ref=\\"1\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].show) {
|
||||
let attr1 = ctx['state'].class;
|
||||
let ref1 = (el) => this.__owl__.setRef((\`coucou\`), el);
|
||||
b2 = block2([attr1, ref1]);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`refs refs and recursive templates 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Test\`, true, false, false, [\\"tree\\"]);
|
||||
let { singleRefSetter } = helpers;
|
||||
const comp1 = app.createComponent(\`Test\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`root\`);
|
||||
let b2;
|
||||
let ref1 = (el) => this.__owl__.setRef((\`root\`), el);
|
||||
let txt1 = ctx['props'].tree.value;
|
||||
if (ctx['props'].tree.child) {
|
||||
b2 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
|
||||
@@ -79,16 +65,18 @@ exports[`refs refs and t-key 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { singleRefSetter } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
|
||||
let block3 = createBlock(\`<p block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`root\`);
|
||||
const v1 = ctx['state'];
|
||||
let hdlr1 = [()=>v1.renderId++, ctx];
|
||||
const b2 = block2([hdlr1]);
|
||||
const tKey_1 = ctx['state'].renderId;
|
||||
let ref1 = (el) => this.__owl__.setRef((\`root\`), el);
|
||||
const b3 = toggler(tKey_1, block3([ref1]));
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
@@ -99,15 +87,16 @@ exports[`refs refs are properly bound in slots 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
let { capture, singleRefSetter, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`myButton\`);
|
||||
let hdlr1 = [ctx['doSomething'], ctx];
|
||||
let ref1 = (el) => this.__owl__.setRef((\`myButton\`), el);
|
||||
return block2([hdlr1, ref1]);
|
||||
}
|
||||
|
||||
@@ -139,17 +128,16 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { makeRefWrapper } = helpers;
|
||||
let { singleRefSetter, multiRefSetter } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
|
||||
let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let refWrapper = makeRefWrapper(this.__owl__);
|
||||
let ref1 = refWrapper(\`coucou\`, (el) => this.__owl__.setRef((\`coucou\`), el));
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = multiRefSetter(refs, \`coucou\`);
|
||||
const b2 = block2([ref1]);
|
||||
let ref2 = refWrapper(\`coucou\`, (el) => this.__owl__.setRef((\`coucou\`), el));
|
||||
const b3 = block3([ref2]);
|
||||
const b3 = block3([ref1]);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`children, default props and renderings 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].value);
|
||||
@@ -29,7 +29,7 @@ exports[`force render in case of existing render 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
|
||||
@@ -41,7 +41,7 @@ exports[`force render in case of existing render 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -66,7 +66,7 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].value);
|
||||
@@ -91,7 +91,7 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].value);
|
||||
@@ -116,7 +116,7 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
|
||||
@@ -139,7 +139,7 @@ exports[`rendering semantics props are reactive 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
|
||||
@@ -162,7 +162,7 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].value);
|
||||
@@ -187,7 +187,7 @@ exports[`rendering semantics render with deep=true followed by render with deep=
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`parent\`);
|
||||
@@ -215,7 +215,7 @@ exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, [\\"obj\\"]);
|
||||
const comp1 = app.createComponent(\`B\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(ctx['state'].obj.val);
|
||||
@@ -229,7 +229,7 @@ exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"obj\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({obj: ctx['props'].obj}, key + \`__1\`, node, this, null);
|
||||
@@ -252,7 +252,7 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`slots can define a default content 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -39,7 +39,7 @@ exports[`slots can define and call slots 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>header</span>\`);
|
||||
@@ -81,8 +81,8 @@ exports[`slots can define and call slots with bound params 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
let { capture, bind, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`abc\`);
|
||||
@@ -90,7 +90,7 @@ exports[`slots can define and call slots with bound params 1`] = `
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const ctx1 = capture(ctx);
|
||||
return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: (ctx['getValue']).bind(this)}})}, key + \`__1\`, node, this, null);
|
||||
return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: bind(this, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -114,7 +114,7 @@ exports[`slots can define and call slots with params 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>header</span>\`);
|
||||
@@ -158,14 +158,15 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
let { singleRefSetter, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`div\`);
|
||||
const b2 = block2([ref1]);
|
||||
const b3 = comp1({}, key + \`__1\`, node, this, null);
|
||||
return multi([b2, b3]);
|
||||
@@ -205,7 +206,7 @@ exports[`slots can use component in default-content of t-slot 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -218,7 +219,7 @@ exports[`slots can use component in default-content of t-slot 2`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot } = helpers;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
|
||||
function defaultContent1(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -245,7 +246,7 @@ exports[`slots can use t-call in default-content of t-slot 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -286,7 +287,7 @@ exports[`slots content is the default slot (variation) 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<span>sts rocks</span>\`);
|
||||
|
||||
@@ -317,7 +318,7 @@ exports[`slots content is the default slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>sts rocks</span>\`);
|
||||
@@ -353,7 +354,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -393,7 +394,7 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -432,7 +433,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -477,7 +478,7 @@ exports[`slots default slot with params with - in it 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(ctx['slotScope']['some-value']);
|
||||
@@ -506,7 +507,7 @@ exports[`slots default slot with slot scope: shorthand syntax 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -544,7 +545,7 @@ exports[`slots default slot work with text nodes (variation) 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`sts rocks\`);
|
||||
@@ -573,7 +574,7 @@ exports[`slots default slot work with text nodes 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -608,8 +609,8 @@ exports[`slots dynamic slot in multiple locations 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Slotter\`, true, true, false, [\\"location\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`hello \`);
|
||||
@@ -666,7 +667,7 @@ exports[`slots dynamic t-slot call 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Toggler\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Toggler\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<p>slot1</p>\`);
|
||||
@@ -713,7 +714,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Toggler\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Toggler\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<p>slot1</p>\`);
|
||||
@@ -763,7 +764,7 @@ exports[`slots fun: two calls to the same slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`some text\`);
|
||||
@@ -793,7 +794,7 @@ exports[`slots missing slots are ignored 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -824,7 +825,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`P\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`P\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -836,7 +837,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`A\`, true, false, false, [\\"number\\"]);
|
||||
const comp1 = app.createComponent(\`A\`, true, false, false, false);
|
||||
|
||||
let block2 = createBlock(\`<button block-handler-0=\\"click\\">inc</button>\`);
|
||||
|
||||
@@ -855,7 +856,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const callTemplate_1 = app.getTemplate(\`__template__1002\`);
|
||||
const comp1 = app.createComponent(\`B\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`B\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`[A]\`);
|
||||
@@ -909,7 +910,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"slots\\"]);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\`[B]\`);
|
||||
@@ -938,7 +939,7 @@ exports[`slots multiple roots are allowed in a default slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span>sts</span>\`);
|
||||
@@ -977,7 +978,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span>sts</span>\`);
|
||||
@@ -1017,9 +1018,9 @@ exports[`slots multiple slots containing components 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, [\\"val\\"]);
|
||||
const comp2 = app.createComponent(\`C\`, true, false, false, [\\"val\\"]);
|
||||
const comp3 = app.createComponent(\`B\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`C\`, true, false, false, false);
|
||||
const comp3 = app.createComponent(\`B\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return comp1({val: 1}, key + \`__1\`, node, this, null);
|
||||
@@ -1071,8 +1072,8 @@ exports[`slots named slot inside slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
|
||||
@@ -1122,8 +1123,8 @@ exports[`slots named slot inside slot, part 3 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
|
||||
@@ -1172,7 +1173,7 @@ exports[`slots named slots can define a default content 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1207,8 +1208,8 @@ exports[`slots named slots inside slot, again 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
|
||||
@@ -1267,9 +1268,9 @@ exports[`slots nested slots in same template 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child3\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child2\`, true, true, false, []);
|
||||
const comp3 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child3\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child2\`, true, true, false, true);
|
||||
const comp3 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<span id=\\"parent\\"><block-child-0/></span>\`);
|
||||
|
||||
@@ -1336,8 +1337,8 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] =
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Slot\`, true, false, false, [\\"val\\"]);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Slot\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
|
||||
@@ -1354,7 +1355,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return callSlot(ctx, node, key, 'default', false, {});
|
||||
@@ -1399,7 +1400,7 @@ exports[`slots no named slot content => just no children 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -1427,7 +1428,7 @@ exports[`slots simple default slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`some text\`);
|
||||
@@ -1459,7 +1460,7 @@ exports[`slots simple default slot with params 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1497,7 +1498,7 @@ exports[`slots simple default slot with params and bound function 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(ctx['slotScope'].fn());
|
||||
@@ -1513,10 +1514,10 @@ exports[`slots simple default slot with params and bound function 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot } = helpers;
|
||||
let { callSlot, bind } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return callSlot(ctx, node, key, 'default', false, {fn: (ctx['getValue']).bind(this)});
|
||||
return callSlot(ctx, node, key, 'default', false, {fn: bind(this, ctx['getValue'])});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -1526,7 +1527,7 @@ exports[`slots simple default slot, variation 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`some text\`);
|
||||
@@ -1555,7 +1556,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1595,7 +1596,7 @@ exports[`slots simple named and empty slot -- 2 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const ctx1 = capture(ctx);
|
||||
@@ -1628,7 +1629,7 @@ exports[`slots simple named and empty slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`some text\`);
|
||||
@@ -1662,7 +1663,7 @@ exports[`slots simple slot with slot scope 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -1702,7 +1703,7 @@ exports[`slots slot and (inline) t-call 1`] = `
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const callTemplate_1 = app.getTemplate(\`__template__999\`);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1752,7 +1753,7 @@ exports[`slots slot and t-call 1`] = `
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const callTemplate_1 = app.getTemplate(\`__template__999\`);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1801,7 +1802,7 @@ exports[`slots slot and t-esc 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -1836,8 +1837,8 @@ exports[`slots slot are properly rendered if inner props are changed 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, [\\"val\\"]);
|
||||
const comp2 = app.createComponent(\`GenericComponent\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`GenericComponent\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Inc[<block-text-1/>]</button><block-child-0/></div>\`);
|
||||
|
||||
@@ -1888,8 +1889,8 @@ exports[`slots slot content has different key from other content -- dynamic slot
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
|
||||
const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return comp1({parent: 'Parent'}, key + \`__1\`, node, this, null);
|
||||
@@ -1906,7 +1907,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, this, null);
|
||||
@@ -1936,8 +1937,8 @@ exports[`slots slot content has different key from other content -- static slot
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
|
||||
const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return comp1({parent: 'Parent'}, key + \`__1\`, node, this, null);
|
||||
@@ -1954,7 +1955,7 @@ exports[`slots slot content has different key from other content -- static slot
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, this, null);
|
||||
@@ -1983,7 +1984,7 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">some text</button>\`);
|
||||
|
||||
@@ -2023,7 +2024,7 @@ exports[`slots slot content is bound to caller 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">some text</button>\`);
|
||||
|
||||
@@ -2058,8 +2059,8 @@ exports[`slots slot in multiple locations 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Slotter\`, true, true, false, [\\"location\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\` hello \`);
|
||||
@@ -2113,8 +2114,8 @@ exports[`slots slot in t-foreach locations 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Slotter\`, true, true, false, [\\"list\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const b2 = text(\` hello \`);
|
||||
@@ -2170,8 +2171,8 @@ exports[`slots slot preserves properly parented relationship 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2215,7 +2216,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const callTemplate_1 = app.getTemplate(\`sub\`);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2235,7 +2236,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -2271,7 +2272,7 @@ exports[`slots slot with slot scope and t-props 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block2 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
let block3 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
@@ -2308,7 +2309,7 @@ exports[`slots slots and wrapper components 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`hey\`);
|
||||
@@ -2339,7 +2340,7 @@ exports[`slots slots are properly bound to correct component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -2376,7 +2377,7 @@ exports[`slots slots are rendered with proper context 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<button block-handler-0=\\"click\\">do something</button>\`);
|
||||
@@ -2415,7 +2416,7 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, capture, markRaw, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, [\\"to\\"]);
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><u><block-child-0/></u></div>\`);
|
||||
let block3 = createBlock(\`<li><block-child-0/></li>\`);
|
||||
@@ -2463,7 +2464,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, isBoundary, withDefault, setContextValue, capture, markRaw, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, [\\"to\\"]);
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><u><block-child-0/></u></div>\`);
|
||||
let block3 = createBlock(\`<li><block-child-0/></li>\`);
|
||||
@@ -2512,7 +2513,7 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, [\\"to\\"]);
|
||||
const comp1 = app.createComponent(\`Link\`, true, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2552,7 +2553,7 @@ exports[`slots slots in slots, with vars 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`A\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`A\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>hey<block-text-0/></p>\`);
|
||||
@@ -2578,7 +2579,7 @@ exports[`slots slots in slots, with vars 2`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`B\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`B\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2613,7 +2614,7 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, capture, markRaw, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2658,7 +2659,7 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, capture, markRaw, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block4 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
@@ -2717,7 +2718,7 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, isBoundary, withDefault, setContextValue, capture, markRaw, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2765,7 +2766,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2802,7 +2803,7 @@ exports[`slots t-set t-value in a slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -2841,7 +2842,7 @@ exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(\`some other text\`);
|
||||
@@ -2872,7 +2873,7 @@ exports[`slots t-slot in recursive templates 1`] = `
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, prepareList, isBoundary, withDefault, setContextValue, withKey, markRaw } = helpers;
|
||||
const callTemplate_1 = app.getTemplate(\`_test_recursive_template\`);
|
||||
const comp1 = app.createComponent(\`Wrapper\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Wrapper\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -2932,8 +2933,8 @@ exports[`slots t-slot nested within another slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child3\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child3\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<span id=\\"c1\\"><block-child-0/></span>\`);
|
||||
|
||||
@@ -2953,8 +2954,8 @@ exports[`slots t-slot nested within another slot 2`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Portal\`, true, true, false, []);
|
||||
const comp2 = app.createComponent(\`Modal\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Portal\`, true, true, false, true);
|
||||
const comp2 = app.createComponent(\`Modal\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
|
||||
|
||||
@@ -3021,7 +3022,7 @@ exports[`slots t-slot scope context 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<button>The Button</button>\`);
|
||||
|
||||
@@ -3040,7 +3041,7 @@ exports[`slots t-slot scope context 2`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { callSlot, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Wrapper\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Wrapper\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);
|
||||
|
||||
@@ -3074,7 +3075,7 @@ exports[`slots t-slot within dynamic t-call 1`] = `
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const call = app.callTemplate.bind(app);
|
||||
const comp1 = app.createComponent(\`Slotted\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Slotted\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -3110,7 +3111,7 @@ exports[`slots t-slot within dynamic t-call 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"slot\\"><block-child-0/></div>\`);
|
||||
|
||||
@@ -3139,8 +3140,8 @@ exports[`slots template can just return a slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp2 = app.createComponent(\`SlotComponent\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`SlotComponent\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`style and class handling can set class on multi root component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
|
||||
@@ -33,7 +33,7 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'some-class'}, key + \`__1\`, node, this, null);
|
||||
@@ -59,7 +59,7 @@ exports[`style and class handling can set class on sub sub component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
|
||||
@@ -71,7 +71,7 @@ exports[`style and class handling can set class on sub sub component 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, this, null);
|
||||
@@ -97,7 +97,7 @@ exports[`style and class handling can set more than one class on sub component 1
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'a b'}, key + \`__1\`, node, this, null);
|
||||
@@ -150,7 +150,7 @@ exports[`style and class handling class on sub component, which is switched to a
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\",\\"child\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, this, null);
|
||||
@@ -162,8 +162,8 @@ exports[`style and class handling class on sub component, which is switched to a
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"class\\"]);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
@@ -209,7 +209,7 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
@@ -238,7 +238,7 @@ exports[`style and class handling class with extra whitespaces 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'a b c d'}, key + \`__1\`, node, this, null);
|
||||
@@ -264,7 +264,7 @@ exports[`style and class handling component class and parent class combine toget
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'from parent'}, key + \`__1\`, node, this, null);
|
||||
@@ -317,7 +317,7 @@ exports[`style and class handling empty class attribute is not added on widget r
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -346,7 +346,7 @@ exports[`style and class handling error in subcomponent with class 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'a'}, key + \`__1\`, node, this, null);
|
||||
@@ -373,7 +373,7 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: 'hey'}, key + \`__1\`, node, this, null);
|
||||
@@ -398,7 +398,7 @@ exports[`style and class handling no class is set is parent does not give it as
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -424,7 +424,7 @@ exports[`style and class handling style is properly added on widget root el 1`]
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"style\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, this, null);
|
||||
@@ -450,7 +450,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -479,7 +479,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, this, null);
|
||||
|
||||
@@ -46,7 +46,7 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const call = app.callTemplate.bind(app);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
@@ -76,7 +76,7 @@ exports[`t-call dynamic t-call: key is propagated 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -196,7 +196,7 @@ exports[`t-call parent is set within t-call 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -233,7 +233,7 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
@@ -330,7 +330,7 @@ exports[`t-call sub components in two t-calls 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
|
||||
@@ -383,7 +383,7 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
|
||||
@@ -422,8 +422,8 @@ exports[`t-call t-call with t-call-context and subcomponent 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
|
||||
@@ -463,8 +463,8 @@ exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const props1 = {name: ctx['aab']};
|
||||
@@ -534,17 +534,18 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
let { singleRefSetter, bind, capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, false);
|
||||
|
||||
let block2 = createBlock(\`<div block-ref=\\"0\\">outside slot</div>\`);
|
||||
let block4 = createBlock(\`<div block-ref=\\"0\\">I'm the default slot</div>\`);
|
||||
let block5 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
const refs = this.__owl__.refs;
|
||||
const ref2 = singleRefSetter(refs, \`myRef2\`);
|
||||
ctx = Object.create(ctx);
|
||||
ctx[isBoundary] = 1
|
||||
let ref2 = (el) => this.__owl__.setRef((\`myRef2\`), el);
|
||||
const b4 = block4([ref2]);
|
||||
setContextValue(ctx, \\"test\\", 3);
|
||||
let txt1 = ctx['test'];
|
||||
@@ -553,10 +554,11 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let ref1 = (el) => this.__owl__.setRef((\`myRef\`), el);
|
||||
const refs = this.__owl__.refs;
|
||||
const ref1 = singleRefSetter(refs, \`myRef\`);
|
||||
const b2 = block2([ref1]);
|
||||
const ctx1 = capture(ctx);
|
||||
const b6 = comp1({prop: (ctx['method']).bind(this),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
|
||||
const b6 = comp1({prop: bind(this, ctx['method']),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
|
||||
return multi([b2, b6]);
|
||||
}
|
||||
}"
|
||||
@@ -592,7 +594,7 @@ exports[`t-call t-call-context: slots don't make component available again when
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
return text(ctx['someValue']);
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`t-component can switch between dynamic components without the need for
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -46,7 +46,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['state'].child;
|
||||
@@ -86,7 +86,7 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['state'].child;
|
||||
@@ -126,7 +126,7 @@ exports[`t-component modifying a sub widget 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -158,7 +158,7 @@ exports[`t-component switching dynamic component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const Comp1 = ctx['Child'];
|
||||
@@ -195,7 +195,7 @@ exports[`t-component t-component works in simple case 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(null, false, false, false, []);
|
||||
const comp1 = app.createComponent(null, false, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const Comp1 = ctx['Child'];
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`list of components components in a node in a t-foreach 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"item\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
|
||||
let block3 = createBlock(\`<li><block-child-0/></li>\`);
|
||||
@@ -44,7 +44,7 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, OwlError, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -80,7 +80,7 @@ exports[`list of components crash when using object as keys that serialize to th
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, OwlError, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -116,7 +116,7 @@ exports[`list of components list of sub components inside other nodes 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`SubComponent\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
@@ -154,7 +154,7 @@ exports[`list of components order is correct when slots are not of same type 1`]
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block2 = createBlock(\`<div>A</div>\`);
|
||||
|
||||
@@ -206,7 +206,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -253,7 +253,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"row\\",\\"col\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
@@ -302,7 +302,7 @@ exports[`list of components simple list 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -336,7 +336,7 @@ exports[`list of components sub components rendered in a loop 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -373,7 +373,7 @@ exports[`list of components sub components with some state rendered in a loop 1`
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -410,7 +410,7 @@ exports[`list of components switch component position 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
@@ -447,7 +447,7 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
@@ -42,7 +42,7 @@ exports[`t-key t-key on Component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['key'];
|
||||
@@ -69,7 +69,7 @@ exports[`t-key t-key on Component as a function 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
@@ -99,8 +99,8 @@ exports[`t-key t-key on multiple Components 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
|
||||
|
||||
@@ -159,7 +159,7 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['key'];
|
||||
@@ -201,8 +201,8 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const tKey_1 = ctx['key1'];
|
||||
|
||||
@@ -127,7 +127,7 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { createCatcher } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const catcher1 = createCatcher({\\"click\\":0});
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
|
||||
@@ -160,7 +160,7 @@ exports[`t-on t-on on components 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { createCatcher } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const catcher1 = createCatcher({\\"click\\":0});
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
@@ -189,7 +189,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, createCatcher, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const catcher1 = createCatcher({\\"click\\":0});
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
@@ -227,7 +227,7 @@ exports[`t-on t-on on components, variation 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { createCatcher } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const catcher1 = createCatcher({\\"click\\":0});
|
||||
|
||||
let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
|
||||
@@ -259,7 +259,7 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { createCatcher } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const catcher1 = createCatcher({\\"click.prevent\\":0});
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
@@ -288,7 +288,7 @@ exports[`t-on t-on on components, with a handler update 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue, createCatcher } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const catcher1 = createCatcher({\\"click\\":0});
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
@@ -321,7 +321,7 @@ exports[`t-on t-on on destroyed components 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -354,7 +354,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<button>button</button>\`);
|
||||
|
||||
@@ -388,7 +388,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, createCatcher, markRaw } = helpers;
|
||||
const catcher1 = createCatcher({\\"click\\":0});
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block6 = createBlock(\`<p>something</p>\`);
|
||||
let block7 = createBlock(\`<p>paragraph</p>\`);
|
||||
@@ -429,7 +429,7 @@ exports[`t-on t-on on t-slots 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<p>something</p>\`);
|
||||
|
||||
@@ -467,7 +467,7 @@ exports[`t-on t-on when first component child is an empty component 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { createCatcher } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"list\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const catcher1 = createCatcher({\\"click\\":0});
|
||||
|
||||
let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`components in t-out simple list 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, isBoundary, withDefault, LazyValue, safeOutput, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
function value1(ctx, node, key = \\"\\") {
|
||||
return comp1({}, key + \`__1\`, node, this, null);
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`t-props basic use 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -33,7 +33,7 @@ exports[`t-props child receives a copy of the t-props object, not the original 1
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return comp1(Object.assign({}, ctx['childProps']), key + \`__1\`, node, this, null);
|
||||
@@ -58,7 +58,7 @@ exports[`t-props t-props and other props 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Comp\`, true, false, true, [\\"a\\"]);
|
||||
const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
|
||||
|
||||
let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
|
||||
|
||||
@@ -88,7 +88,7 @@ exports[`t-props t-props only 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Comp\`, true, false, true, []);
|
||||
const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
|
||||
|
||||
let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
|
||||
|
||||
@@ -117,7 +117,7 @@ exports[`t-props t-props with props 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, [\\"a\\",\\"b\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Childcomp\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
|
||||
|
||||
@@ -53,8 +53,8 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`C\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -106,8 +106,8 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Blorg\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Blorg\`, true, true, false, true);
|
||||
|
||||
let block4 = createBlock(\`<div>coffee</div>\`);
|
||||
|
||||
@@ -163,8 +163,8 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { capture, isBoundary, withDefault, LazyValue, markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
function slot1(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
@@ -266,7 +266,7 @@ exports[`t-set t-set not altered by child comp 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, setContextValue } = helpers;
|
||||
const comp1 = app.createComponent(\`Childcomp\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
|
||||
|
||||
@@ -332,7 +332,7 @@ exports[`t-set t-set with a component in body 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, mount, onWillUpdateProps, useState, xml } from "../../src";
|
||||
import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
@@ -200,32 +200,7 @@ test("can bind function prop with bind suffix", async () => {
|
||||
expect(fixture.innerHTML).toBe("child");
|
||||
});
|
||||
|
||||
test("do not crash when binding anonymous function prop with bind suffix", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`child`;
|
||||
setup() {
|
||||
this.props.doSomething(123);
|
||||
}
|
||||
}
|
||||
|
||||
let boundedThing: any = null;
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child doSomething.bind="(val) => this.doSomething(val)"/>`;
|
||||
static components = { Child };
|
||||
|
||||
doSomething(val: number) {
|
||||
expect(val).toBe(123);
|
||||
boundedThing = this;
|
||||
}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(boundedThing).toBe(parent);
|
||||
expect(fixture.innerHTML).toBe("child");
|
||||
});
|
||||
|
||||
test("bound functions is not referentially equal after update", async () => {
|
||||
test("bound functions is referentially equal after update", async () => {
|
||||
let isEqual = false;
|
||||
class Child extends Component {
|
||||
static template = xml`<t t-esc="props.val"/>`;
|
||||
@@ -247,52 +222,7 @@ test("bound functions is not referentially equal after update", async () => {
|
||||
parent.state.val = 3;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("3");
|
||||
expect(isEqual).toBe(false);
|
||||
});
|
||||
|
||||
test("bound functions are considered 'alike'", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`child`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<t t-esc="state.val"/>
|
||||
<Child fn.bind="someFunction"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ val: 1 });
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
someFunction() {}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("1child");
|
||||
expect([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
parent.state.val = 3;
|
||||
await nextTick();
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
expect(fixture.innerHTML).toBe("3child");
|
||||
expect(isEqual).toBe(true);
|
||||
});
|
||||
|
||||
test("throw if prop uses an unknown suffix", async () => {
|
||||
@@ -309,115 +239,3 @@ test("throw if prop uses an unknown suffix", async () => {
|
||||
await mount(Parent, fixture);
|
||||
}).rejects.toThrowError("Invalid prop suffix");
|
||||
});
|
||||
|
||||
test(".alike suffix in a simple case", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<t t-esc="props.fn()"/>`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<t t-esc="state.counter"/>
|
||||
<Child fn.alike="() => 1"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ counter: 0 });
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:willRender",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Parent:rendered",
|
||||
"Child:willRender",
|
||||
"Child:rendered",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
|
||||
expect(fixture.innerHTML).toBe("01");
|
||||
parent.state.counter++;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("11");
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
});
|
||||
|
||||
test(".alike suffix in a list", async () => {
|
||||
class Todo extends Component {
|
||||
static template = xml`
|
||||
<button t-on-click="props.toggle">
|
||||
<t t-esc="props.todo.id"/><t t-if="props.todo.isChecked">V</t>
|
||||
</button>`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<t t-foreach="state.elems" t-as="elem" t-key="elem.id">
|
||||
<Todo todo="elem" toggle.alike="() => this.toggle(elem.id)"/>
|
||||
</t>`;
|
||||
static components = { Todo };
|
||||
state = useState({
|
||||
elems: [
|
||||
{ id: 1, isChecked: false },
|
||||
{ id: 2, isChecked: true },
|
||||
],
|
||||
});
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
toggle(id: number) {
|
||||
const todo = this.state.elems.find((el) => el.id === id)!;
|
||||
todo.isChecked = !todo.isChecked;
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:willRender",
|
||||
"Todo:setup",
|
||||
"Todo:willStart",
|
||||
"Todo:setup",
|
||||
"Todo:willStart",
|
||||
"Parent:rendered",
|
||||
"Todo:willRender",
|
||||
"Todo:rendered",
|
||||
"Todo:willRender",
|
||||
"Todo:rendered",
|
||||
"Todo:mounted",
|
||||
"Todo:mounted",
|
||||
"Parent:mounted",
|
||||
]).toBeLogged();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<button>1</button><button>2V</button>");
|
||||
fixture.querySelector("button")?.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<button>1V</button><button>2V</button>");
|
||||
expect([
|
||||
"Parent:willRender",
|
||||
"Parent:rendered",
|
||||
"Todo:willRender",
|
||||
"Todo:rendered",
|
||||
"Todo:willPatch",
|
||||
"Todo:patched",
|
||||
"Parent:willPatch",
|
||||
"Parent:patched",
|
||||
]).toBeLogged();
|
||||
});
|
||||
|
||||
@@ -90,28 +90,6 @@ describe("refs", () => {
|
||||
expect(test.ref.el!.tagName).toBe("DIV");
|
||||
});
|
||||
|
||||
test("ref is unset when t-if goes to false after unrelated render", async () => {
|
||||
class Comp extends Component {
|
||||
static template = xml`<div t-if="state.show" t-att-class="state.class" t-ref="coucou"/>`;
|
||||
state = useState({ show: true, class: "test" });
|
||||
ref = useRef("coucou");
|
||||
}
|
||||
|
||||
const comp = await mount(Comp, fixture);
|
||||
expect(comp.ref.el).not.toBeNull();
|
||||
|
||||
comp.state.class = "test2";
|
||||
await nextTick();
|
||||
|
||||
comp.state.show = false;
|
||||
await nextTick();
|
||||
expect(comp!.ref.el).toBeNull();
|
||||
|
||||
comp.state.show = true;
|
||||
await nextTick();
|
||||
expect(comp!.ref.el).not.toBeNull();
|
||||
});
|
||||
|
||||
test("throws if there are 2 same refs at the same time", async () => {
|
||||
const consoleWarn = console.warn;
|
||||
console.warn = jest.fn();
|
||||
@@ -126,10 +104,10 @@ describe("refs", () => {
|
||||
|
||||
const app = new App(Test, { test: true });
|
||||
const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
|
||||
'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
|
||||
"Cannot have 2 elements with same ref name at the same time"
|
||||
);
|
||||
await expect(nextAppError(app)).resolves.toThrow(
|
||||
'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
|
||||
"Cannot have 2 elements with same ref name at the same time"
|
||||
);
|
||||
await mountProm;
|
||||
expect(console.warn).toBeCalledTimes(1);
|
||||
|
||||
@@ -159,7 +159,7 @@ exports[`Portal Child and Portal 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block3 = createBlock(\`<div class=\\"portal\\"/>\`);
|
||||
|
||||
@@ -198,8 +198,8 @@ exports[`Portal Portal composed with t-slot 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { markRaw } = helpers;
|
||||
const comp1 = app.createComponent(\`Child2\`, true, false, false, [\\"customHandler\\"]);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, []);
|
||||
const comp1 = app.createComponent(\`Child2\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(\`Child\`, true, true, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -335,7 +335,7 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const Portal = app.Portal;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(null, false, true, false, false);
|
||||
|
||||
let block2 = createBlock(\`<span>1</span>\`);
|
||||
@@ -398,7 +398,7 @@ exports[`Portal conditional use of Portal with child and div 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
@@ -444,7 +444,7 @@ exports[`Portal conditional use of Portal with child and div, variation 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block2 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -520,7 +520,7 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const Portal = app.Portal;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(null, false, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
|
||||
@@ -557,7 +557,7 @@ exports[`Portal portal and Child 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
|
||||
let block2 = createBlock(\`<div class=\\"portal\\"/>\`);
|
||||
|
||||
@@ -622,7 +622,7 @@ exports[`Portal portal destroys on crash 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const Portal = app.Portal;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"error\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(null, false, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
@@ -657,7 +657,7 @@ exports[`Portal portal with child and props 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const Portal = app.Portal;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(null, false, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
@@ -810,7 +810,7 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const Portal = app.Portal;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
|
||||
const comp2 = app.createComponent(null, false, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
@@ -843,7 +843,7 @@ exports[`Portal simple catchError with portal 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
|
||||
const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
@@ -970,7 +970,7 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const Portal = app.Portal;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
|
||||
const comp2 = app.createComponent(null, false, true, false, false);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
@@ -85,7 +85,7 @@ async function compileTemplates(files) {
|
||||
const fnName = slugify(name);
|
||||
try {
|
||||
const fn = compile(template).toString().replace('anonymous', fnName);
|
||||
templates.push(`"${name}": ${fn},\n`);
|
||||
templates.push(`owl.App.registerTemplate("${name}", ${fn});\n`);
|
||||
} catch (e) {
|
||||
errors.push({ name, fileName, e });
|
||||
}
|
||||
@@ -99,7 +99,7 @@ async function compileTemplates(files) {
|
||||
}
|
||||
console.log(`${templates.length} templates compiled`);
|
||||
|
||||
return `export const templates = {\n ${templates.join("\n")} \n}`;
|
||||
return templates.join("\n");
|
||||
}
|
||||
|
||||
const templatesPath = process.argv[2];
|
||||
|
||||
Binary file not shown.
-7
File diff suppressed because one or more lines are too long
-4
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
@@ -1,32 +0,0 @@
|
||||
{
|
||||
"name": "Owl devtools",
|
||||
"version": "1.0",
|
||||
"manifest_version": 3,
|
||||
"description": "Chrome devtools extension for Odoo Owl framework",
|
||||
"icons": {
|
||||
"128": "assets/icon128.png"
|
||||
},
|
||||
"action": {
|
||||
"default_icon": {
|
||||
"128": "assets/icon_disabled128.png"
|
||||
},
|
||||
"default_title": "Owl devtools",
|
||||
"default_popup": "popup_app/popup.html"
|
||||
},
|
||||
"permissions": ["scripting", "storage"],
|
||||
"host_permissions": ["http://*/*", "https://*/*"],
|
||||
"content_security_policy": {
|
||||
"script-src": "self",
|
||||
"object-src": "self"
|
||||
},
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"devtools_page": "devtools_app/devtools.html",
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["content.js"]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
{
|
||||
"name": "Owl devtools",
|
||||
"version": "1.0",
|
||||
"description": "Firefox devtools extension for Odoo Owl framework",
|
||||
"manifest_version": 2,
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "@owl-devtools",
|
||||
"strict_min_version": "74.0"
|
||||
}
|
||||
},
|
||||
"icons": {
|
||||
"128": "assets/icon128.png"
|
||||
},
|
||||
"browser_action": {
|
||||
"default_icon": {
|
||||
"128": "assets/icon_disabled128.png"
|
||||
},
|
||||
"default_title": "Owl devtools",
|
||||
"default_popup": "popup_app/popup.html"
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
"popup_app/popup.html",
|
||||
"devtools_app/devtools.html",
|
||||
"devtools_app/components_panel.html"
|
||||
],
|
||||
"permissions": ["storage", "scripting", "<all_urls>"],
|
||||
"background": {
|
||||
"scripts": ["background.js"]
|
||||
},
|
||||
"devtools_page": "devtools_app/devtools.html",
|
||||
"content_security_policy": "script-src 'self' 'unsafe-eval' blob:; object-src 'self'",
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["content.js"]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import terser from "rollup-plugin-terser";
|
||||
import copy from "rollup-plugin-copy";
|
||||
import execute from "rollup-plugin-execute";
|
||||
import del from "rollup-plugin-delete";
|
||||
import { string } from "rollup-plugin-string";
|
||||
|
||||
export default ({ "config-browser": browser }) => {
|
||||
const isProduction = process.env.NODE_ENV === "production";
|
||||
const isChrome = browser === "chrome";
|
||||
const filesToMove = [
|
||||
{ src: "tools/devtools/assets/**/*", dest: "dist/devtools/assets/" },
|
||||
{
|
||||
src: "tools/devtools/src/devtools_app/devtools.html",
|
||||
dest: "dist/devtools/devtools_app",
|
||||
},
|
||||
{
|
||||
src: "tools/devtools/src/devtools_app/devtools_panel.html",
|
||||
dest: "dist/devtools/devtools_app",
|
||||
},
|
||||
{
|
||||
src: "tools/devtools/src/page_scripts/owl_devtools_global_hook.js",
|
||||
dest: "dist/devtools/page_scripts",
|
||||
},
|
||||
{ src: "tools/devtools/src/fonts/*", dest: "dist/devtools/fonts/" },
|
||||
{ src: "tools/devtools/src/popup_app/popup.html", dest: "dist/devtools/popup_app" },
|
||||
{ src: "tools/devtools/src/background.html", dest: "dist/devtools" },
|
||||
{ src: "tools/devtools/src/main.css", dest: "dist/devtools/popup_app" },
|
||||
{ src: "tools/devtools/src/main.css", dest: "dist/devtools/devtools_app" },
|
||||
{
|
||||
src: isChrome
|
||||
? "tools/devtools/manifest-chrome.json"
|
||||
: "tools/devtools/manifest-firefox.json",
|
||||
dest: "dist/devtools",
|
||||
rename: "manifest.json",
|
||||
},
|
||||
];
|
||||
|
||||
function generateRule(input, format = "esm") {
|
||||
return {
|
||||
input: input,
|
||||
output: [
|
||||
{
|
||||
format: format,
|
||||
file: input.replace("tools/devtools/src", "dist/devtools"),
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
string({
|
||||
include: "**/page_scripts/owl_devtools_global_hook.js",
|
||||
}),
|
||||
isProduction && terser.terser(),
|
||||
],
|
||||
};
|
||||
}
|
||||
const commands = new Array(2);
|
||||
commands[1] =
|
||||
"npm run compile_templates -- tools/devtools/src && mv templates.js tools/devtools/assets/templates.js";
|
||||
const firstRule = generateRule("tools/devtools/src/page_scripts/owl_devtools_global_hook.js");
|
||||
if (isProduction)
|
||||
commands[0] =
|
||||
"npm run build && cp dist/owl.iife.js tools/devtools/assets/owl.js && npm run build:compiler";
|
||||
else commands[0] = "cp dist/owl.iife.js tools/devtools/assets/owl.js";
|
||||
firstRule.plugins.push(execute(commands, true));
|
||||
const secondRule = generateRule("tools/devtools/src/content.js");
|
||||
secondRule.plugins.push(copy({ targets: filesToMove }));
|
||||
const lastRule = generateRule("tools/devtools/src/background.js");
|
||||
lastRule.plugins.push(del({ targets: "tools/devtools/assets/*.js" }));
|
||||
|
||||
return [
|
||||
firstRule,
|
||||
secondRule,
|
||||
generateRule("tools/devtools/src/devtools_app/devtools.js"),
|
||||
generateRule("tools/devtools/src/utils.js"),
|
||||
generateRule("tools/devtools/src/devtools_app/devtools_panel.js"),
|
||||
generateRule("tools/devtools/src/popup_app/popup.js"),
|
||||
lastRule,
|
||||
];
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
<script type="module" src="./background.js"></script>
|
||||
@@ -1,103 +0,0 @@
|
||||
import { IS_FIREFOX, getActiveTabURL } from "./utils";
|
||||
|
||||
let owlStatus = 0;
|
||||
|
||||
const browserInstance = IS_FIREFOX ? browser : chrome;
|
||||
|
||||
// Used to keep track of the tabs where the owl devtools have been opened
|
||||
const activePanels = new Set();
|
||||
|
||||
// Load the devtools global hook this way when running on manifest v3 chrome
|
||||
if (!IS_FIREFOX) {
|
||||
chrome.scripting.registerContentScripts([
|
||||
{
|
||||
id: "owlDevtoolsGLobalHook",
|
||||
matches: ["<all_urls>"],
|
||||
js: ["page_scripts/owl_devtools_global_hook.js"],
|
||||
world: chrome.scripting.ExecutionWorld.MAIN,
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
// Update the owlStatus variable and the extension icon accordingly
|
||||
function setOwlStatus(status) {
|
||||
owlStatus = status;
|
||||
if (IS_FIREFOX) {
|
||||
browser.browserAction.setIcon({
|
||||
path: owlStatus === 2 ? "assets/icon128.png" : "assets/icon_disabled128.png",
|
||||
});
|
||||
} else {
|
||||
browserInstance.action.setIcon({
|
||||
path: owlStatus === 2 ? "assets/icon128.png" : "assets/icon_disabled128.png",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Delete from the set when the tab is closed
|
||||
browserInstance.tabs.onRemoved.addListener((tabId) => {
|
||||
activePanels.delete(tabId);
|
||||
});
|
||||
|
||||
// Check owl status on tab update
|
||||
browserInstance.tabs.onUpdated.addListener((tab) => {
|
||||
browserInstance.tabs.get(tab, (tabData) => {
|
||||
if (tabData.status === "complete") {
|
||||
setOwlStatus(0);
|
||||
checkOwlStatus(tabData.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Check owl status on tab activation
|
||||
browserInstance.tabs.onActivated.addListener((activeInfo) => {
|
||||
setOwlStatus(0);
|
||||
checkOwlStatus(activeInfo.tabId);
|
||||
});
|
||||
|
||||
// send a message to the window which will be intercepted by the page script and will result in a response of type owlStatus
|
||||
function checkOwlStatus(tabId) {
|
||||
browserInstance.scripting.executeScript({
|
||||
target: { tabId: tabId },
|
||||
func: () => {
|
||||
window.postMessage({
|
||||
source: "owl-devtools-background",
|
||||
type: "checkOwlStatus",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Messages handler for the background script
|
||||
browserInstance.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
|
||||
// Send back the owl status to the sender
|
||||
if (message.type === "getOwlStatus") {
|
||||
sendResponse({ result: owlStatus });
|
||||
return true;
|
||||
} else if (message.type === "owlStatus") {
|
||||
setOwlStatus(message.data);
|
||||
// Dummy message to test if the extension context is still valid
|
||||
} else if (message.type === "keepAlive") {
|
||||
return;
|
||||
// Relay the received message to the devtools app
|
||||
} else if (message.type === "newDevtoolsPanel") {
|
||||
const tab = await getActiveTabURL();
|
||||
activePanels.add(tab);
|
||||
// This is solely for firefox which doesnt allow access to the chrome.tabs api inside devtools
|
||||
} else if (message.type === "getActiveTabURL") {
|
||||
getActiveTabURL().then((tab) => {
|
||||
sendResponse({ result: tab });
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
const tab = await getActiveTabURL();
|
||||
if (!activePanels.has(tab)) {
|
||||
return;
|
||||
}
|
||||
const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort" });
|
||||
port.postMessage(
|
||||
message.data
|
||||
? { type: message.type, data: message.data, origin: message.origin }
|
||||
: { type: message.type, origin: message.origin }
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -1,30 +0,0 @@
|
||||
import globalHook from "./page_scripts/owl_devtools_global_hook";
|
||||
import { IS_FIREFOX } from "./utils";
|
||||
|
||||
// Relays the owlDevtools__... type top window messages to the background script so that it can relay it to the devtools app
|
||||
window.addEventListener(
|
||||
"message",
|
||||
function (event) {
|
||||
if (event.data.type && event.data.source === "owl-devtools") {
|
||||
try {
|
||||
chrome.runtime.sendMessage(
|
||||
event.data.data
|
||||
? { type: event.data.type, data: event.data.data, origin: event.data.origin }
|
||||
: { type: event.data.type, origin: event.data.origin }
|
||||
);
|
||||
} catch (e) {
|
||||
// Extension context invalidated, cannot be handled here since the whole communication system
|
||||
// inside the extension is dead in this case.
|
||||
}
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Load the devtools global hook this way when running on firefox
|
||||
if (IS_FIREFOX) {
|
||||
const script = document.createElement("script");
|
||||
script.textContent = globalHook;
|
||||
document.documentElement.appendChild(script);
|
||||
script.parentNode.removeChild(script);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<script src="devtools.js"></script>
|
||||
@@ -1,33 +0,0 @@
|
||||
import { IS_FIREFOX } from "../utils";
|
||||
|
||||
let created = false;
|
||||
let browserInstance = IS_FIREFOX ? browser : chrome;
|
||||
|
||||
// Try to load the owl panel each 1000 ms in case it (re)appears on the page later on
|
||||
const checkInterval = setInterval(createPanelsIfOwl, 1000);
|
||||
|
||||
createPanelsIfOwl();
|
||||
|
||||
// Create the owl devtools panel if owl on the page is available at a sufficient version
|
||||
function createPanelsIfOwl() {
|
||||
if (created) {
|
||||
clearInterval(checkInterval);
|
||||
return;
|
||||
}
|
||||
browserInstance.devtools.inspectedWindow.eval(
|
||||
"window.__OWL_DEVTOOLS__?.Fiber !== undefined;",
|
||||
async (hasOwl) => {
|
||||
if (!hasOwl || created) {
|
||||
return;
|
||||
}
|
||||
clearInterval(checkInterval);
|
||||
created = true;
|
||||
browserInstance.devtools.panels.create(
|
||||
"Owl",
|
||||
"../../assets/icon128.png",
|
||||
IS_FIREFOX ? "devtools_panel.html" : "devtools_app/devtools_panel.html"
|
||||
);
|
||||
browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel" });
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="../assets/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="../assets/owl.js"></script>
|
||||
<script src="devtools_panel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,10 +0,0 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import { DevtoolsWindow } from "./devtools_window/devtools_window";
|
||||
const { mount } = owl;
|
||||
import { templates } from "../../assets/templates.js";
|
||||
|
||||
for (const template in templates) {
|
||||
owl.App.registerTemplate(template, templates[template]);
|
||||
}
|
||||
mount(DevtoolsWindow, document.body, { dev: true });
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
import { useStore } from "../../../store/store";
|
||||
|
||||
const { Component } = owl;
|
||||
|
||||
export class ComponentSearchBar extends Component {
|
||||
static template = "devtools.ComponentSearchBar";
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
}
|
||||
|
||||
updateSearch(event) {
|
||||
if (event.key !== "Enter") {
|
||||
this.store.updateSearch(event.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
// Go to the next search result repeatedly while enter is pressed
|
||||
onSearchKeyDown(event) {
|
||||
if (event.key === "Enter") {
|
||||
this.store.componentSearch.getNextSearch();
|
||||
}
|
||||
}
|
||||
}
|
||||
-19
@@ -1,19 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.ComponentSearchBar" owl="1">
|
||||
<div class="pointer-icon ms-1 px-2 py-1" t-on-click.stop='() => this.store.toggleSelector()'>
|
||||
<i title="Select an element in the page to inspect the corresponding component" class="fa fa-mouse-pointer" t-attf-style="color: {{store.componentSearch.activeSelector ? 'var(--active-icon)' : 'var(--text-color)'}};"></i>
|
||||
</div>
|
||||
<div class="icons-separator"/>
|
||||
<div class="d-flex align-items-center ms-2 flex-grow-1">
|
||||
<i class="fa fa-search search-icon" aria-hidden="true"></i>
|
||||
<input type="text" class="search-input ms-1 w-100 border-0 h-100" placeholder="Search" t-on-keyup.stop="updateSearch" t-on-keydown.stop="onSearchKeyDown" t-att-value="store.componentSearch.search"/>
|
||||
<t t-if="store.componentSearch.search.length > 0">
|
||||
<t t-esc="store.componentSearch.searchResults.length ? store.componentSearch.searchIndex + 1 : 0"/>|<t t-esc="store.componentSearch.searchResults.length"/>
|
||||
<i class="fa fa-angle-up lg-icon utility-icon ms-1 p-1" t-on-click.stop="() => this.store.componentSearch.getPrevSearch()"></i>
|
||||
<i class="fa fa-angle-down lg-icon utility-icon p-1" t-on-click.stop="() => this.store.componentSearch.getNextSearch()"></i>
|
||||
<i class="fa fa-times lg-icon utility-icon p-1 me-2" t-on-click.stop='() => this.store.updateSearch("")'></i>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,67 +0,0 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
const { Component, onWillUnmount, useExternalListener } = owl;
|
||||
import { TreeElement } from "./tree_element/tree_element";
|
||||
import { DetailsWindow } from "./details_window/details_window";
|
||||
import { ComponentSearchBar } from "./component_search_bar/component_search_bar";
|
||||
import { useStore } from "../../store/store";
|
||||
|
||||
export class ComponentsTab extends Component {
|
||||
static template = "devtools.ComponentsTab";
|
||||
|
||||
static components = { TreeElement, DetailsWindow, ComponentSearchBar };
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
this.flushRendersTimeout = false;
|
||||
useExternalListener(document, "keydown", this.onKeyboardEvent);
|
||||
|
||||
onWillUnmount(() => {
|
||||
window.removeEventListener("mousemove", this.onMouseMove);
|
||||
window.removeEventListener("mouseup", this.onMouseUp);
|
||||
});
|
||||
}
|
||||
|
||||
// Apply the right action depending on which arrow key is pressed (on keydown)
|
||||
onKeyboardEvent(event) {
|
||||
switch (event.key) {
|
||||
case "ArrowLeft":
|
||||
this.store.toggleOrSelectPrevElement(true);
|
||||
event.preventDefault();
|
||||
break;
|
||||
case "ArrowUp":
|
||||
this.store.toggleOrSelectPrevElement(false);
|
||||
event.preventDefault();
|
||||
break;
|
||||
case "ArrowRight":
|
||||
this.store.toggleOrSelectNextElement(true);
|
||||
event.preventDefault();
|
||||
break;
|
||||
case "ArrowDown":
|
||||
this.store.toggleOrSelectNextElement(false);
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onMouseDown = () => {
|
||||
// Add event listeners for mouse move and mouse up events
|
||||
// to allow the user to drag the split screen border
|
||||
window.addEventListener("mousemove", this.onMouseMove);
|
||||
window.addEventListener("mouseup", this.onMouseUp);
|
||||
};
|
||||
|
||||
// Adjust the position of the split between the left and right right window of the components tab
|
||||
onMouseMove = (event) => {
|
||||
this.store.splitPosition = Math.max(
|
||||
Math.min((event.clientX / window.innerWidth) * 100, 85),
|
||||
15
|
||||
);
|
||||
};
|
||||
|
||||
onMouseUp = () => {
|
||||
// Remove the event listeners when the user releases the mouse button
|
||||
window.removeEventListener("mousemove", this.onMouseMove);
|
||||
window.removeEventListener("mouseup", this.onMouseUp);
|
||||
};
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.ComponentsTab" owl="1">
|
||||
<t t-if="store.apps.length === 0">
|
||||
<div class="status-message d-flex justify-content-center align-items-center">
|
||||
There are no apps currently running.
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="position-relative overflow-hidden d-flex flex-row h-100">
|
||||
<div class="split-screen-left d-flex flex-column" t-attf-style="width:{{store.splitPosition}}%;">
|
||||
<div class="panel-top d-flex align-items-center">
|
||||
<ComponentSearchBar/>
|
||||
</div>
|
||||
<div class="overflow-auto h-100 font-monospace">
|
||||
<div id="tree-wrapper">
|
||||
<t t-foreach="store.apps" t-as="app" t-key="app_index">
|
||||
<TreeElement component="app"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="split-screen-border user-select-none"
|
||||
t-on-mousedown="onMouseDown"
|
||||
/>
|
||||
<div class="split-screen-right d-flex flex-column font-monospace" t-attf-style="width:{{100 - store.splitPosition}}%;">
|
||||
<DetailsWindow t-if="store.activeComponent"/>
|
||||
<t t-else="">
|
||||
<div class="status-message d-flex justify-content-center align-items-center">
|
||||
There was an error while processing this component.
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
-33
@@ -1,33 +0,0 @@
|
||||
const { Component, useRef, useEffect } = owl;
|
||||
import { useStore } from "../../../store/store";
|
||||
import { ObjectTreeElement } from "./object_tree_element/object_tree_element";
|
||||
import { Subscriptions } from "./subscriptions/subscriptions";
|
||||
|
||||
export class DetailsWindow extends Component {
|
||||
static template = "devtools.DetailsWindow";
|
||||
static components = { ObjectTreeElement, Subscriptions };
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
this.contextMenu = useRef("contextmenu");
|
||||
this.contextMenuId = this.store.contextMenu.id++;
|
||||
this.contextMenuEvent;
|
||||
// Open the context menu when the ids match
|
||||
useEffect(
|
||||
(menuId) => {
|
||||
if (menuId === this.contextMenuId) {
|
||||
this.store.contextMenu.open(this.contextMenuEvent, this.contextMenu.el);
|
||||
}
|
||||
},
|
||||
() => [this.store.contextMenu.activeMenu]
|
||||
);
|
||||
}
|
||||
|
||||
openMenu(ev) {
|
||||
this.contextMenuEvent = ev;
|
||||
this.store.contextMenu.activeMenu = this.contextMenuId;
|
||||
}
|
||||
|
||||
toggleCategory(ev, category) {
|
||||
this.store.activeComponent[category].toggled = !this.store.activeComponent[category].toggled;
|
||||
}
|
||||
}
|
||||
-92
@@ -1,92 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.DetailsWindow" owl="1">
|
||||
<div class="panel-top d-flex align-items-center">
|
||||
<div class="ms-1 p-1 text-truncate" style="width: 100%;">
|
||||
<span t-if="store.activeComponent.path.length > 1"><</span>
|
||||
<b style="color: var(--component-color); cursor: pointer;" t-on-mouseover.stop="() => this.store.highlightComponent(this.store.activeComponent.path)" t-on-click.stop="() => this.store.focusSelectedComponent()" t-on-contextmenu.prevent="openMenu" t-esc="store.activeComponent.name"/>
|
||||
<span t-if="store.activeComponent.path.length > 1">></span>
|
||||
<span class="version" t-else="">owl=<t t-esc="store.activeComponent.version"/></span>
|
||||
</div>
|
||||
<t t-if="store.activeComponent.path.length > 1">
|
||||
<i title="Inspect component in the Elements tab" class="fa fa-eye utility-icon p-1" t-on-click.stop="() => this.store.inspectComponent('DOM')"></i>
|
||||
<i title="Store component as global variable in the console" class="fa fa-bug utility-icon p-1" t-on-click.stop="() => this.store.logObjectInConsole()"></i>
|
||||
<i title="Inspect source code of component" class="fa fa-file-code-o utility-icon p-1" t-on-click.stop="() => this.store.inspectComponent('source')"></i>
|
||||
<i title="Trigger rerender of the component" class="fa fa-refresh utility-icon p-1" t-on-click.stop="() => this.store.refreshComponent()"></i>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<i title="Store app as global variable in the console" class="fa fa-bug utility-icon p-1" t-on-click.stop="() => this.store.logObjectInConsole()"></i>
|
||||
<i title="Inspect source code of the app" class="fa fa-file-code-o utility-icon p-1" t-on-click.stop="() => this.store.inspectComponent('source')"></i>
|
||||
</t>
|
||||
</div>
|
||||
<div class="details-container">
|
||||
<div t-if="store.activeComponent.env.children.length > 0" id="env" class="details-panel ps-2 py-1">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="w-100" t-on-click.stop="(ev) => this.toggleCategory(ev, 'env')">
|
||||
<i class="fa mx-1 pointer-icon"
|
||||
t-att-class="{'fa-caret-right': !store.activeComponent.env.toggled, 'fa-caret-down': store.activeComponent.env.toggled}"
|
||||
/><b>env</b>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="store.activeComponent.env.toggled" t-foreach="store.activeComponent.env.children" t-as="env" t-key="env_index">
|
||||
<ObjectTreeElement object="env"/>
|
||||
</t>
|
||||
</div>
|
||||
<div t-if="store.activeComponent.props.children.length > 0" class="details-panel ps-2 py-1">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="w-100" t-on-click.stop="(ev) => this.toggleCategory(ev, 'props')">
|
||||
<i class="fa mx-1 pointer-icon"
|
||||
t-att-class="{'fa-caret-right': !store.activeComponent.props.toggled, 'fa-caret-down': store.activeComponent.props.toggled}"
|
||||
/><b>props</b>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="store.activeComponent.props.toggled" t-foreach="store.activeComponent.props.children" t-as="prop" t-key="prop_index">
|
||||
<ObjectTreeElement object="prop"/>
|
||||
</t>
|
||||
</div>
|
||||
<div t-if="store.activeComponent.subscriptions.children.length > 0" id="subscriptions" class="details-panel ps-2 py-1">
|
||||
<div class="d-flex">
|
||||
<div title="Shows all the targets that will trigger a re-render of the component when one of its associated keys is modified" class="w-100 text-truncate" t-on-click.stop="(ev) => this.toggleCategory(ev, 'subscriptions')">
|
||||
<i class="fa mx-1 pointer-icon"
|
||||
t-att-class="{'fa-caret-right': !store.activeComponent.subscriptions.toggled, 'fa-caret-down': store.activeComponent.subscriptions.toggled}"
|
||||
/><b>observed state</b>
|
||||
</div>
|
||||
<i title="Store observed states as global variable in the console" class="fa fa-bug utility-icon p-1" t-on-click.stop="() => this.store.logObjectInConsole([...this.store.activeComponent.path, {type: 'item', value: 'subscriptions'}])"></i>
|
||||
</div>
|
||||
<Subscriptions t-if="store.activeComponent.subscriptions.toggled"/>
|
||||
</div>
|
||||
<div t-if="store.activeComponent.instance.children.length > 0" id="instance" class="details-panel ps-2 py-1">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="w-100 text-truncate" t-on-click.stop="(ev) => this.toggleCategory(ev, 'instance')">
|
||||
<i class="fa mx-1 pointer-icon"
|
||||
t-att-class="{'fa-caret-right': !store.activeComponent.instance.toggled, 'fa-caret-down': store.activeComponent.instance.toggled}"
|
||||
/><b>instance</b>
|
||||
</div>
|
||||
<t t-if="store.activeComponent.path.length > 1">
|
||||
<i title="Inspect compiled template" class="fa fa-hashtag utility-icon p-1" t-on-click.stop="() => this.store.inspectComponent('compiled template')"></i>
|
||||
<i title="Send raw template to console" class="fa fa-file-word-o utility-icon p-1" t-on-click.stop="() => this.store.inspectComponent('raw template')"></i>
|
||||
</t>
|
||||
</div>
|
||||
<t t-if="store.activeComponent.instance.toggled" t-foreach="store.activeComponent.instance.children" t-as="instance" t-key="instance_index">
|
||||
<ObjectTreeElement object="instance"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
|
||||
<ul class="my-1">
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('source', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
|
||||
<t t-if="store.activeComponent.path.length !== 1">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...store.activeComponent.path, { type: 'item', value: 'component'}])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('DOM', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect in Elements tab</li>
|
||||
<li t-on-click.stop="() => this.store.refreshComponent(store.activeComponent.path)" class="custom-menu-item py-1 px-4">Force rerender</li>
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...store.activeComponent.path, { type: 'item', value: 'subscriptions'}])" class="custom-menu-item py-1 px-4">Store observed states as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('compiled template', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect compiled template</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('raw template', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Log raw template</li>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...store.activeComponent.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
-87
@@ -1,87 +0,0 @@
|
||||
import { useStore } from "../../../../store/store";
|
||||
|
||||
const { Component, useState, useEffect, useRef } = owl;
|
||||
|
||||
export class ObjectTreeElement extends Component {
|
||||
static template = "devtools.ObjectTreeElement";
|
||||
|
||||
static components = { ObjectTreeElement };
|
||||
|
||||
setup() {
|
||||
this.state = useState({
|
||||
editMode: false,
|
||||
menuTop: 0,
|
||||
menuLeft: 0,
|
||||
});
|
||||
this.contextMenu = useRef("contextmenu");
|
||||
const inputRef = useRef("input");
|
||||
this.store = useStore();
|
||||
this.contextMenuId = this.store.contextMenu.id++;
|
||||
this.contextMenuEvent,
|
||||
useEffect(
|
||||
(menuId) => {
|
||||
if (menuId === this.contextMenuId) {
|
||||
this.store.contextMenu.open(this.contextMenuEvent, this.contextMenu.el);
|
||||
}
|
||||
},
|
||||
() => [this.store.contextMenu.activeMenu]
|
||||
);
|
||||
useEffect(
|
||||
(editMode) => {
|
||||
// Focus on the input when it is created
|
||||
if (editMode) {
|
||||
inputRef.el.select();
|
||||
}
|
||||
},
|
||||
() => [this.state.editMode]
|
||||
);
|
||||
}
|
||||
|
||||
get pathAsString() {
|
||||
return JSON.stringify(this.props.object.path);
|
||||
}
|
||||
|
||||
get objectName() {
|
||||
return this.props.object.name;
|
||||
}
|
||||
|
||||
get objectLineClass() {
|
||||
// Prototype items will be dyed down to appear less important
|
||||
if (this.pathAsString.includes('{"type":"prototype",')) {
|
||||
return { attenuate: true };
|
||||
}
|
||||
// Same for subscription items which are not present in the keys while the keys will be bold
|
||||
if (this.props.object.objectType === "subscription" && this.props.object.depth > 0) {
|
||||
if (this.props.keys.includes(this.props.object.name.toString())) {
|
||||
return { "fw-bolder": true };
|
||||
}
|
||||
return { attenuate: true };
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
get objectPadding() {
|
||||
return this.props.object.depth * 0.8 + 0.3;
|
||||
}
|
||||
|
||||
openMenu(ev) {
|
||||
this.contextMenuEvent = ev;
|
||||
this.store.contextMenu.activeMenu = this.contextMenuId;
|
||||
}
|
||||
|
||||
setupEditMode() {
|
||||
if (!this.state.editMode) {
|
||||
if (!this.props.object.hasChildren) {
|
||||
this.state.editMode = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
editObject(ev) {
|
||||
let value = ev.target.value;
|
||||
if (ev.keyCode === 13 && value !== "") {
|
||||
this.store.editObjectTreeElement(this.props.object.path, value, this.props.object.objectType);
|
||||
this.state.editMode = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
-48
@@ -1,48 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.ObjectTreeElement" owl="1">
|
||||
<div class="m-0 p-0 text-nowrap w-100 object-line"
|
||||
t-att-class="objectLineClass"
|
||||
t-on-click.stop="() => this.store.toggleObjectTreeElementsDisplay(this.props.object)"
|
||||
t-on-contextmenu.prevent="openMenu"
|
||||
>
|
||||
<div t-attf-style="padding-left: {{objectPadding}}rem">
|
||||
<i class="fa px-1 pointer-icon caret"
|
||||
t-att-class="{'fa-caret-right': !props.object.toggled, 'fa-caret-down': props.object.toggled}"
|
||||
t-attf-style="visibility: {{props.object.hasChildren ? '' : 'hidden'}};"
|
||||
/>
|
||||
<t t-esc="objectName"/>
|
||||
<t t-if="props.object.content.length > 0">: </t>
|
||||
<t t-if="props.object.contentType == 'getter'">
|
||||
<span class="getter-content object-content" t-att-class="objectLineClass" t-on-click.stop="() => this.store.loadGetterContent(this.props.object)">
|
||||
<t t-esc="props.object.content"/>
|
||||
</span>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<span class="object-content" t-att-class="objectLineClass" t-on-dblclick.stop="setupEditMode">
|
||||
<t t-if="state.editMode">
|
||||
<input t-attf-id="objectEditionInput/{{pathAsString}}" t-ref="input" type="text" placeholder="" t-att-value="props.object.content" t-on-keydown.stop="editObject"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-esc="props.object.content"/>
|
||||
</t>
|
||||
</span>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
|
||||
<ul class="my-1">
|
||||
<li t-on-click="() => this.store.logObjectInConsole(this.props.object.path)" class="custom-menu-item py-1 px-4 text-nowrap">Store as global variable</li>
|
||||
<t t-if='props.object.contentType == "function"'>
|
||||
<li t-on-click="() => this.store.inspectFunctionSource(this.props.object.path)" class="custom-menu-item py-1 px-4 text-nowrap">Inspect function source code</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
<t t-if="props.object.toggled">
|
||||
<t t-foreach="props.object.children" t-as="child" t-key="child.name">
|
||||
<ObjectTreeElement t-if="props.object.objectType === 'subscription'" object="child" keys="props.keys"/>
|
||||
<ObjectTreeElement t-else="" object="child"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
-30
@@ -1,30 +0,0 @@
|
||||
const { Component } = owl;
|
||||
import { useStore } from "../../../../store/store";
|
||||
import { ObjectTreeElement } from "../object_tree_element/object_tree_element";
|
||||
|
||||
export class Subscriptions extends Component {
|
||||
static template = "devtools.Subscriptions";
|
||||
|
||||
static components = { ObjectTreeElement };
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
}
|
||||
|
||||
// Used to display the keys in a compact way
|
||||
keysContent(index) {
|
||||
const keys = this.store.activeComponent.subscriptions.children[index].keys;
|
||||
let content = JSON.stringify(keys);
|
||||
const maxLength = 50;
|
||||
content = content.replace(/,/g, ", ");
|
||||
if (content.length > maxLength) {
|
||||
content = content.slice(0, content.lastIndexOf(",", maxLength - 5)) + ", ...]";
|
||||
}
|
||||
return content;
|
||||
}
|
||||
|
||||
expandKeys(event, index) {
|
||||
this.store.activeComponent.subscriptions.children[index].keysExpanded =
|
||||
!this.store.activeComponent.subscriptions.children[index].keysExpanded;
|
||||
}
|
||||
}
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.Subscriptions" owl="1">
|
||||
<div id="subscriptionsPanel">
|
||||
<t t-foreach="store.activeComponent.subscriptions.children" t-as="subscription" t-key="subscription_index">
|
||||
<div class="my-2">
|
||||
<div class="my-0 p-0 object-line" t-on-click.stop="(ev) => this.expandKeys(ev, subscription_index)">
|
||||
<span class="ps-1 text-nowrap">
|
||||
<i class="fa fa-caret-right ms-1" t-attf-style="cursor: pointer;{{subscription.keysExpanded ? 'transform: rotate(90deg);' : ''}}"></i>
|
||||
keys: <span class="key-name"><t t-esc="this.keysContent(subscription_index)"/></span>
|
||||
</span>
|
||||
</div>
|
||||
<div t-foreach="subscription.keys" t-as="key" t-key="key_index" class="my-0 p-0 object-line" t-attf-style="display: {{subscription.keysExpanded ? 'flex' : 'none'}}">
|
||||
<div style="transform: translateX(calc(1.1rem))" class="key-content">
|
||||
<i class="fa fa-caret-right mx-1" t-attf-style="cursor: pointer; visibility: hidden;"></i>
|
||||
<t t-esc="key"/>
|
||||
</div>
|
||||
</div>
|
||||
<ObjectTreeElement object="subscription.target" keys="subscription.keys"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
-50
@@ -1,50 +0,0 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
const { Component, onWillRender } = owl;
|
||||
|
||||
export class HighlightText extends Component {
|
||||
setup() {
|
||||
onWillRender(() => {
|
||||
const splitText = this.splitFuzzySearch(this.props.originalText, this.props.searchValue);
|
||||
this.splitText =
|
||||
this.props.searchValue.length && splitText.length > 1
|
||||
? splitText
|
||||
: [this.props.originalText];
|
||||
});
|
||||
}
|
||||
|
||||
// Logic to split the text to highlight it according to a fuzzy search pattern
|
||||
splitFuzzySearch(text, search) {
|
||||
if (!search || search.length === 0) {
|
||||
return [text];
|
||||
}
|
||||
let splits = [""];
|
||||
let searchIndex = 0;
|
||||
for (const letter of text) {
|
||||
if (
|
||||
!(searchIndex >= search.length) &&
|
||||
(letter === search[searchIndex] || letter === search[searchIndex].toUpperCase())
|
||||
) {
|
||||
if (splits.length % 2) {
|
||||
splits.push(letter);
|
||||
} else {
|
||||
splits[splits.length - 1] += letter;
|
||||
}
|
||||
searchIndex++;
|
||||
} else {
|
||||
if (splits.length % 2) {
|
||||
splits[splits.length - 1] += letter;
|
||||
} else {
|
||||
splits.push(letter);
|
||||
}
|
||||
}
|
||||
}
|
||||
return splits;
|
||||
}
|
||||
}
|
||||
HighlightText.template = "utils.HighlightText";
|
||||
HighlightText.props = {
|
||||
originalText: String,
|
||||
searchValue: String,
|
||||
};
|
||||
HighlightText.highlightClass = "highlight-search";
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="utils.HighlightText" owl="1">
|
||||
<t t-foreach="splitText" t-as="name" t-key="name_index">
|
||||
<b t-if="name_index % 2" t-esc="name" t-att-class="constructor.highlightClass"/>
|
||||
<t t-else="" t-esc="name"/>
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
-108
@@ -1,108 +0,0 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import { isElementInCenterViewport, minimizeKey } from "../../../../utils";
|
||||
import { useStore } from "../../../store/store";
|
||||
import { HighlightText } from "./highlight_text/highlight_text";
|
||||
|
||||
const { Component, useRef, useState, useEffect, onMounted } = owl;
|
||||
|
||||
export class TreeElement extends Component {
|
||||
static template = "devtools.TreeElement";
|
||||
|
||||
static components = { TreeElement, HighlightText };
|
||||
|
||||
setup() {
|
||||
this.state = useState({
|
||||
searched: false,
|
||||
});
|
||||
this.store = useStore();
|
||||
this.contextMenu = useRef("contextmenu");
|
||||
this.element = useRef("element");
|
||||
this.contextMenuId = this.store.contextMenu.id++;
|
||||
this.contextMenuEvent;
|
||||
this.stringifiedPath = JSON.stringify(this.props.component.path);
|
||||
// Scroll to the selected element when it changes
|
||||
onMounted(() => {
|
||||
if (this.props.component.selected) {
|
||||
this.element.el.scrollIntoView({ block: "center", behavior: "auto" });
|
||||
}
|
||||
});
|
||||
useEffect(
|
||||
(selected) => {
|
||||
if (selected) {
|
||||
if (!isElementInCenterViewport(this.element.el)) {
|
||||
this.element.el.scrollIntoView({ block: "center", behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
this.store.selectedElement = this.element.el;
|
||||
},
|
||||
() => [this.props.component.selected]
|
||||
);
|
||||
// Open the context menu when the ids match
|
||||
useEffect(
|
||||
(menuId) => {
|
||||
if (menuId === this.contextMenuId) {
|
||||
this.store.contextMenu.open(this.contextMenuEvent, this.contextMenu.el);
|
||||
}
|
||||
},
|
||||
() => [this.store.contextMenu.activeMenu]
|
||||
);
|
||||
// Effect to apply a short highlight effect to the component when it is rendered
|
||||
useEffect(
|
||||
() => {
|
||||
if (this.store.renderPaths.has(this.stringifiedPath)) {
|
||||
const treeElement = this.element.el;
|
||||
treeElement.classList.add("render-highlight");
|
||||
setTimeout(() => {
|
||||
treeElement.classList.add("highlight-fade");
|
||||
treeElement.classList.remove("render-highlight");
|
||||
setTimeout(() => {
|
||||
treeElement.classList.remove("highlight-fade");
|
||||
this.blockHighlight = false;
|
||||
}, 500);
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
() => [this.store.renderPaths.size]
|
||||
);
|
||||
// Used to know when the component is in the search bar results
|
||||
useEffect(
|
||||
(searchResults) => {
|
||||
if (searchResults.includes(this.props.component.path)) {
|
||||
this.state.searched = true;
|
||||
} else {
|
||||
this.state.searched = false;
|
||||
}
|
||||
},
|
||||
() => [this.store.componentSearch.searchResults]
|
||||
);
|
||||
}
|
||||
|
||||
get componentPadding() {
|
||||
return this.props.component.depth * 0.8;
|
||||
}
|
||||
|
||||
get minimizedKey() {
|
||||
return minimizeKey(this.props.component.key);
|
||||
}
|
||||
|
||||
openMenu(ev) {
|
||||
this.contextMenuEvent = ev;
|
||||
this.store.contextMenu.activeMenu = this.contextMenuId;
|
||||
}
|
||||
|
||||
// Expand/fold the component node
|
||||
toggleDisplay() {
|
||||
this.props.component.toggled = !this.props.component.toggled;
|
||||
}
|
||||
|
||||
// Used to select the component node
|
||||
toggleComponent() {
|
||||
if (this.store.settings.toggleOnSelected) {
|
||||
this.toggleDisplay();
|
||||
}
|
||||
if (!this.props.component.selected) {
|
||||
this.store.selectComponent(this.props.component.path);
|
||||
}
|
||||
}
|
||||
}
|
||||
-55
@@ -1,55 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.TreeElement" owl="1">
|
||||
<div t-ref="element"
|
||||
t-att-class="{'component-selected': props.component.selected,'component-highlighted': props.component.highlighted}"
|
||||
class="tree-component m-0 p-0 w-100 text-nowrap user-select-none"
|
||||
t-on-contextmenu.prevent="openMenu"
|
||||
t-on-mouseover.stop="() => this.store.highlightComponent(props.component.path)"
|
||||
t-on-click.stop="toggleComponent"
|
||||
>
|
||||
<div class="component-wrapper" t-attf-style="padding-left: {{componentPadding}}rem">
|
||||
<i class="fa px-1 pointer-icon caret"
|
||||
t-att-class="{'fa-caret-right': !props.component.toggled, 'fa-caret-down': props.component.toggled}"
|
||||
t-on-click.stop="toggleDisplay"
|
||||
t-attf-style="{{props.component.children.length > 0 ? '' : 'visibility: hidden;'}}"
|
||||
/>
|
||||
<span t-if="props.component.depth"><</span>
|
||||
<span style="color: var(--component-color);">
|
||||
<HighlightText originalText="props.component.name" searchValue="state.searched ? store.componentSearch.search : ''"/>
|
||||
<t t-if="minimizedKey.length > 0">
|
||||
<span t-if="minimizedKey.length > 0" style="color: var(--key-name);"> key</span>=<span style="color: var(--key-content);">
|
||||
<t t-esc="minimizedKey"/>
|
||||
</span>
|
||||
</t>
|
||||
</span>
|
||||
<span t-if="props.component.depth">></span>
|
||||
<span class="version" t-else="">owl=<t t-esc="props.component.version"/></span>
|
||||
</div>
|
||||
<div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
|
||||
<ul class="my-1">
|
||||
<li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, true)" class="custom-menu-item py-1 px-4">Expand children</li>
|
||||
<li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
|
||||
<li t-on-click.stop="() => this.store.foldDirectChildren(props.component)" class="custom-menu-item py-1 px-4">Fold direct children</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('source', props.component.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
|
||||
<t t-if="props.component.path.length !== 1">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.component.path, { type: 'item', value: 'component'}])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('DOM', props.component.path)" class="custom-menu-item py-1 px-4">Inspect in Elements tab</li>
|
||||
<li t-on-click.stop="() => this.store.refreshComponent(props.component.path)" class="custom-menu-item py-1 px-4">Force rerender</li>
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.component.path, { type: 'item', value: 'subscriptions'}])" class="custom-menu-item py-1 px-4">Store observed states as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('compiled template', props.component.path)" class="custom-menu-item py-1 px-4">Inspect compiled template</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('raw template', props.component.path)" class="custom-menu-item py-1 px-4">Log raw template</li>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.component.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="props.component.toggled">
|
||||
<t t-foreach="props.component.children" t-as="child" t-key="child.key">
|
||||
<TreeElement component="child_value"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,19 +0,0 @@
|
||||
const { Component } = owl;
|
||||
import { ComponentsTab } from "./components_tab/components_tab";
|
||||
import { Tab } from "./tab/tab";
|
||||
import { ProfilerTab } from "./profiler_tab/profiler_tab";
|
||||
import { useStore } from "../store/store";
|
||||
|
||||
export class DevtoolsWindow extends Component {
|
||||
static props = [];
|
||||
static template = "devtools.DevtoolsWindow";
|
||||
static components = { ComponentsTab, Tab, ProfilerTab };
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
}
|
||||
|
||||
selectFrame(ev) {
|
||||
const val = ev.target.value;
|
||||
this.store.selectFrame(val);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.DevtoolsWindow" owl="1">
|
||||
<div id="container" class="d-flex w-100 h-100 flex-column position-absolute overflow-hidden" t-on-mouseover.stop="() => this.store.removeHighlights()" t-on-mouseout.stop="() => this.store.removeHighlights()">
|
||||
<t t-if="!store.extensionContextStatus">
|
||||
<div class="status-message d-flex justify-content-center align-items-center">
|
||||
Extension context is invalid. Please close the devtools and reload the page.
|
||||
</div>
|
||||
</t>
|
||||
<t t-elif="store.owlStatus">
|
||||
<div class="panel-top d-flex align-items-center custom-navbar">
|
||||
<Tab tabName="'ComponentsTab'"/>
|
||||
<Tab tabName="'ProfilerTab'"/>
|
||||
<select t-if="store.frameUrls.length > 1" class="form-select form-select-sm custom-select navbar-select border-0" t-on-change="selectFrame">
|
||||
<t t-foreach="store.frameUrls" t-as="frame" t-key="frame_index">
|
||||
<option t-att-value="frame"><t t-esc="frame"/></option>
|
||||
</t>
|
||||
</select>
|
||||
<i class="ms-auto p-1 me-1 lg-icon fa pointer-icon" title="Toggle dark mode" t-att-class="{ 'fa-sun-o': store.settings.darkMode, 'fa-moon-o' : !store.settings.darkMode}" t-on-click.stop="() => this.store.toggleDarkMode()"></i>
|
||||
<i class="p-1 me-1 lg-icon fa fa-repeat pointer-icon" title="Refresh extension" t-on-click.stop="() => this.store.refreshExtension()"></i>
|
||||
</div>
|
||||
<ComponentsTab t-if="store.page === 'ComponentsTab'"/>
|
||||
<ProfilerTab t-if="store.page === 'ProfilerTab'"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="status-message d-flex justify-content-center align-items-center">
|
||||
Owl is not loaded on this page.
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,66 +0,0 @@
|
||||
import { minimizeKey } from "../../../../utils";
|
||||
import { useStore } from "../../../store/store";
|
||||
|
||||
const { Component, useEffect, useRef } = owl;
|
||||
|
||||
export class Event extends Component {
|
||||
static template = "devtools.Event";
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
this.componentContextMenu = useRef("componentContextmenu");
|
||||
this.componentContextMenuId = this.store.contextMenu.id++;
|
||||
this.contextMenuEvent,
|
||||
useEffect(
|
||||
(menuId) => {
|
||||
if (menuId === this.componentContextMenuId) {
|
||||
this.store.contextMenu.open(this.contextMenuEvent, this.componentContextMenu.el);
|
||||
}
|
||||
},
|
||||
() => [this.store.contextMenu.activeMenu]
|
||||
);
|
||||
}
|
||||
|
||||
// Formatting for displaying the key of the component
|
||||
get minimizedKey() {
|
||||
return minimizeKey(this.props.event.key);
|
||||
}
|
||||
|
||||
// Same for the origin component
|
||||
get originMinimizedKey() {
|
||||
return minimizeKey(this.props.event.origin.key);
|
||||
}
|
||||
|
||||
get renderTime() {
|
||||
if (Number.isInteger(this.props.event.time)) {
|
||||
if (this.props.event.time === 0) {
|
||||
return "<1";
|
||||
} else {
|
||||
return this.props.event.time;
|
||||
}
|
||||
} else {
|
||||
if (this.props.event.time < 0.1) {
|
||||
return "<0.1";
|
||||
} else {
|
||||
return this.props.event.time.toFixed(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand/fold the event
|
||||
toggleDisplay() {
|
||||
if (this.props.event.origin) {
|
||||
this.props.event.toggled = !this.props.event.toggled;
|
||||
}
|
||||
}
|
||||
|
||||
openComponentMenu(ev) {
|
||||
if (this.props.event.type === "destroy") {
|
||||
return;
|
||||
} else {
|
||||
ev.preventDefault();
|
||||
this.contextMenuEvent = ev;
|
||||
this.store.contextMenu.activeMenu = this.componentContextMenuId;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.Event" owl="1">
|
||||
<div class="event-container">
|
||||
<div class="my-0 p-0 object-line" t-on-click.stop="toggleDisplay">
|
||||
<div class="ps-2 text-nowrap">
|
||||
<i class="fa px-1 pointer-icon caret"
|
||||
t-att-class="{'fa-caret-right': !props.event.toggled, 'fa-caret-down': props.event.toggled}"
|
||||
t-attf-style="visibility: {{props.event.origin ? '' : 'hidden'}};"
|
||||
/>
|
||||
<t t-esc="props.event.type"/>:
|
||||
<<span style="cursor:pointer; color: var(--component-color);"
|
||||
t-on-click.stop="() => this.store.selectComponent(props.event.path)"
|
||||
t-on-mouseover.stop="() => this.store.highlightComponent(props.event.path)"
|
||||
t-on-contextmenu="openComponentMenu"
|
||||
t-esc="props.event.component"
|
||||
/>
|
||||
<t t-if="minimizedKey.length > 0">
|
||||
<span t-if="minimizedKey.length > 0" style="color: var(--key-name);"> key</span>=<span style="color: var(--key-content);">
|
||||
<t t-esc="minimizedKey"/>
|
||||
</span>
|
||||
</t>>
|
||||
<span>
|
||||
(<t t-esc="renderTime"/>ms)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="props.event.toggled">
|
||||
<div class="my-0 pt-1 object-line">
|
||||
<i class="fa fa-caret-right mx-1 pe-2" style="visibility: hidden;"></i>
|
||||
<span>
|
||||
origin:
|
||||
<<span style="cursor:pointer; color: var(--component-color);"
|
||||
t-on-click.stop="() => this.store.selectComponent(props.event.origin.path)"
|
||||
t-on-mouseover.stop="() => this.store.highlightComponent(props.event.origin.path)"
|
||||
t-esc="props.event.origin.component"
|
||||
/>
|
||||
<t t-if="originMinimizedKey.length > 0">
|
||||
<span style="color: var(--key-name);"> key</span>=<span style="color: var(--key-content);">
|
||||
<t t-esc="originMinimizedKey"/>
|
||||
</span>
|
||||
</t>>
|
||||
</span>
|
||||
</div>
|
||||
</t>
|
||||
<div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
|
||||
<ul class="my-1">
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
|
||||
<t t-if="props.event.path.length !== 1">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.event.path, { type: 'item', value: 'component'}])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('DOM', props.event.path)" class="custom-menu-item py-1 px-4">Inspect in Elements tab</li>
|
||||
<li t-on-click.stop="() => this.store.refreshComponent(props.event.path)" class="custom-menu-item py-1 px-4">Force rerender</li>
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.event.path, { type: 'item', value: 'subscriptions'}])" class="custom-menu-item py-1 px-4">Store observed states as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('compiled template', props.event.path)" class="custom-menu-item py-1 px-4">Inspect compiled template</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('raw template', props.event.path)" class="custom-menu-item py-1 px-4">Log raw template</li>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.event.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,78 +0,0 @@
|
||||
import { minimizeKey } from "../../../../utils";
|
||||
import { useStore } from "../../../store/store";
|
||||
|
||||
const { Component, useRef, useEffect } = owl;
|
||||
|
||||
export class EventNode extends Component {
|
||||
static template = "devtools.EventNode";
|
||||
|
||||
static components = { EventNode };
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
this.nodeContextMenu = useRef("nodeContextMenu");
|
||||
this.nodeContextMenuId = this.store.contextMenu.id++;
|
||||
this.componentContextMenu = useRef("componentContextmenu");
|
||||
this.componentContextMenuId = this.store.contextMenu.id++;
|
||||
this.contextMenuEvent,
|
||||
useEffect(
|
||||
(menuId) => {
|
||||
if (menuId === this.nodeContextMenuId) {
|
||||
this.store.contextMenu.open(this.contextMenuEvent, this.nodeContextMenu.el);
|
||||
}
|
||||
if (menuId === this.componentContextMenuId) {
|
||||
this.store.contextMenu.open(this.contextMenuEvent, this.componentContextMenu.el);
|
||||
}
|
||||
},
|
||||
() => [this.store.contextMenu.activeMenu]
|
||||
);
|
||||
}
|
||||
|
||||
get eventPadding() {
|
||||
return this.props.event.depth * 0.8 + 0.3;
|
||||
}
|
||||
|
||||
openNodeMenu(ev) {
|
||||
if (this.props.event.children.length) {
|
||||
ev.preventDefault();
|
||||
this.contextMenuEvent = ev;
|
||||
this.store.contextMenu.activeMenu = this.nodeContextMenuId;
|
||||
}
|
||||
}
|
||||
|
||||
openComponentMenu(ev) {
|
||||
if (this.props.event.type === "destroy") {
|
||||
return;
|
||||
} else {
|
||||
ev.preventDefault();
|
||||
this.contextMenuEvent = ev;
|
||||
this.store.contextMenu.activeMenu = this.componentContextMenuId;
|
||||
}
|
||||
}
|
||||
|
||||
// Expand/fold the event node
|
||||
toggleDisplay() {
|
||||
this.props.event.toggled = !this.props.event.toggled;
|
||||
}
|
||||
|
||||
// Formatting for displaying the key of the component
|
||||
get minimizedKey() {
|
||||
return minimizeKey(this.props.event.key);
|
||||
}
|
||||
|
||||
get renderTime() {
|
||||
if (Number.isInteger(this.props.event.time)) {
|
||||
if (this.props.event.time === 0) {
|
||||
return "<1";
|
||||
} else {
|
||||
return this.props.event.time;
|
||||
}
|
||||
} else {
|
||||
if (this.props.event.time < 1.0) {
|
||||
return "<1";
|
||||
} else {
|
||||
return this.props.event.time.toFixed(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
-60
@@ -1,60 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.EventNode" owl="1">
|
||||
<div class="my-0 p-0 object-line"
|
||||
t-on-click.stop="toggleDisplay"
|
||||
t-on-contextmenu="openNodeMenu"
|
||||
>
|
||||
<div class="text-nowrap" t-attf-style="padding-left: {{eventPadding}}rem">
|
||||
<i class="fa px-1 pointer-icon caret"
|
||||
t-att-class="{'fa-caret-right': !props.event.toggled, 'fa-caret-down': props.event.toggled}"
|
||||
t-attf-style="visibility: {{props.event.children.length > 0 ? '' : 'hidden'}};"
|
||||
/>
|
||||
<span>
|
||||
<t t-esc="props.event.type"/>:
|
||||
<<span style="cursor:pointer; color: var(--component-color);"
|
||||
t-on-click.stop="() => this.store.selectComponent(props.event.path)"
|
||||
t-on-mouseover.stop="() => this.store.highlightComponent(props.event.path)"
|
||||
t-on-contextmenu.stop="openComponentMenu"
|
||||
t-esc="props.event.component"/>
|
||||
<t t-if="minimizedKey.length > 0">
|
||||
<span t-if="minimizedKey.length > 0" style="color: var(--key-name);"> key</span>=<span style="color: var(--key-content);">
|
||||
<t t-esc="minimizedKey"/>
|
||||
</span>
|
||||
</t>>
|
||||
<span>
|
||||
(<t t-esc="renderTime"/>ms)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="nodeContextMenu">
|
||||
<ul class="my-1">
|
||||
<li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, true)" class="custom-menu-item py-1 px-4">Expand children</li>
|
||||
<li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
|
||||
<li t-on-click.stop="() => this.store.foldDirectChildren(props.event)" class="custom-menu-item py-1 px-4">Fold direct children</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
|
||||
<ul class="my-1">
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
|
||||
<t t-if="props.event.path.length !== 1">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.event.path, { type: 'item', value: 'component'}])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('DOM', props.event.path)" class="custom-menu-item py-1 px-4">Inspect in Elements tab</li>
|
||||
<li t-on-click.stop="() => this.store.refreshComponent(props.event.path)" class="custom-menu-item py-1 px-4">Force rerender</li>
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.event.path, { type: 'item', value: 'subscriptions'}])" class="custom-menu-item py-1 px-4">Store observed states as global variable</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('compiled template', props.event.path)" class="custom-menu-item py-1 px-4">Inspect compiled template</li>
|
||||
<li t-on-click.stop="() => this.store.inspectComponent('raw template', props.event.path)" class="custom-menu-item py-1 px-4">Log raw template</li>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<li t-on-click.stop="() => this.store.logObjectInConsole([...props.event.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
<t t-if="props.event.toggled">
|
||||
<t t-foreach="props.event.children" t-as="child" t-key="child.id">
|
||||
<EventNode event="child"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { useStore } from "../../../store/store";
|
||||
|
||||
const { Component } = owl;
|
||||
|
||||
export class EventSearchBar extends Component {
|
||||
static template = "devtools.EventSearchBar";
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
}
|
||||
|
||||
// On keyup
|
||||
updateSearch(event) {
|
||||
if (!(event.keyCode === 13)) {
|
||||
const search = event.target.value;
|
||||
this.store.updateSearch(search);
|
||||
}
|
||||
}
|
||||
|
||||
clearSearch() {
|
||||
this.store.updateSearch("");
|
||||
}
|
||||
}
|
||||
-12
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.EventSearchBar" owl="1">
|
||||
<div class="search-bar-wrapper">
|
||||
<i class="fa fa-search search-icon" aria-hidden="true"></i>
|
||||
<input type="text" class="search-input" placeholder="Search" t-on-keyup.stop="updateSearch" t-att-value="store.eventSearch.search"/>
|
||||
<t t-if="store.eventSearch.search.length > 0">
|
||||
<i class="fa fa-times lg-icon utility-icon pe-2" t-on-click.stop="clearSearch"></i>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,29 +0,0 @@
|
||||
const { Component } = owl;
|
||||
import { useStore } from "../../store/store";
|
||||
import { Event } from "./event/event";
|
||||
import { EventNode } from "./event_node/event_node";
|
||||
import { EventSearchBar } from "./event_search_bar/event_search_bar";
|
||||
|
||||
export class ProfilerTab extends Component {
|
||||
static template = "devtools.ProfilerTab";
|
||||
|
||||
static components = { Event, EventNode, EventSearchBar };
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
}
|
||||
|
||||
showHelp() {
|
||||
return this.store.events.length < 1 && !this.store.activeRecorder;
|
||||
}
|
||||
|
||||
selectDisplayMode(ev) {
|
||||
const val = ev.target.value;
|
||||
if (val === "Tree") {
|
||||
this.store.buildEventsTree();
|
||||
this.store.eventsTreeView = true;
|
||||
} else {
|
||||
this.store.eventsTreeView = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.ProfilerTab" owl="1">
|
||||
<div class="position-relative overflow-hidden d-flex flex-column h-100">
|
||||
<div class="panel-top d-flex align-items-center">
|
||||
<i title="Start/Stop Recording" class="fa fa-circle pointer-icon ms-1 p-1" t-attf-style="color: {{store.activeRecorder ? 'var(--active-recorder)' : 'var(--text-color)'}};" t-on-click.stop="() => this.store.toggleRecording()" aria-hidden="true"></i>
|
||||
<i title="Clear events" class="fa fa-ban pointer-icon p-1 px-2" t-on-click.stop="() => this.store.clearEventsConsole()" aria-hidden="true"></i>
|
||||
<div class="icons-separator mx-1"/>
|
||||
<select class="form-select form-select-sm custom-select border-0" t-on-change="selectDisplayMode">
|
||||
<option t-att-selected="store.eventsTreeView" value="Tree">Tree view</option>
|
||||
<option t-att-selected="!store.eventsTreeView" value="List">Events log</option>
|
||||
</select>
|
||||
<i title="Collapse All" class="fa fa-list me-1" t-on-click="() => this.store.collapseAll()"></i>
|
||||
<div class="icons-separator"/>
|
||||
<label class="mx-2 form-check-label pointer-icon" title="Trace renderings in console">
|
||||
<input type="checkbox" class="form-check-input me-1" t-att-checked="store.traceRenderings" t-on-input="() => this.store.toggleTracing()"/> Trace Renderings
|
||||
</label>
|
||||
<label class="mx-2 form-check-label pointer-icon" title="Trace subscriptions in console (warning: it is VERY verbose)">
|
||||
<input type="checkbox" class="form-check-input me-1" t-att-checked="store.traceSubscriptions" t-on-input="() => this.store.toggleSubscriptionTracing()"/> Trace Subscriptions
|
||||
</label>
|
||||
<!-- <EventSearchBar/> -->
|
||||
</div>
|
||||
<div class="events-container h-100 font-monospace">
|
||||
<t t-if="showHelp()">
|
||||
<div class="status-message d-flex justify-content-center align-items-center">
|
||||
<div>
|
||||
Click on the <i class="fa fa-circle" style="font-size: 0.8em;"></i> button to start recording events.
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-if="store.eventsTreeView">
|
||||
<t t-foreach="store.eventsTree" t-as="event" t-key="event.id">
|
||||
<EventNode event="event"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-foreach="store.events" t-as="event" t-key="event_index">
|
||||
<Event event="event"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,32 +0,0 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import { useStore } from "../../store/store";
|
||||
|
||||
const { Component } = owl;
|
||||
|
||||
export class Tab extends Component {
|
||||
static props = ["tabName"];
|
||||
|
||||
static template = "devtools.Tab";
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
}
|
||||
|
||||
get active() {
|
||||
return this.props.tabName === this.store.page;
|
||||
}
|
||||
|
||||
get name() {
|
||||
switch (this.props.tabName) {
|
||||
case "ComponentsTab":
|
||||
return "Components";
|
||||
case "ProfilerTab":
|
||||
return "Profiler";
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(ev) {
|
||||
this.store.switchTab(this.props.tabName);
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="devtools.Tab" owl="1">
|
||||
<div t-on-click="selectTab" class="navbar-btn d-block" t-att-class="active
|
||||
? 'btn-selected'
|
||||
: ''">
|
||||
<t t-esc="name" />
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,983 +0,0 @@
|
||||
const { reactive, useState, toRaw } = owl;
|
||||
import { fuzzySearch, IS_FIREFOX, getActiveTabURL } from "../../utils";
|
||||
import globalHook from "../../page_scripts/owl_devtools_global_hook";
|
||||
|
||||
const browserInstance = IS_FIREFOX ? browser : chrome;
|
||||
|
||||
// Main store which contains all states that needs to be maintained throughout all components in the devtools app
|
||||
export const store = reactive({
|
||||
devtoolsId: 0,
|
||||
settings: {
|
||||
expandByDefault: true,
|
||||
toggleOnSelected: false,
|
||||
darkmode: false,
|
||||
},
|
||||
contextMenu: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
id: 0,
|
||||
activeMenu: -1,
|
||||
// Opens the context menu corresponding with the given menu html element
|
||||
open(event, menu) {
|
||||
const menuWidth = menu.offsetWidth;
|
||||
const menuHeight = menu.offsetHeight;
|
||||
let x = event.clientX;
|
||||
let y = event.clientY;
|
||||
if (x + menuWidth > window.innerWidth) {
|
||||
x = window.innerWidth - menuWidth;
|
||||
}
|
||||
if (y + menuHeight > window.innerHeight) {
|
||||
y = window.innerHeight - menuHeight;
|
||||
}
|
||||
this.left = x + "px";
|
||||
// Need 25px offset because of the main navbar from the browser devtools
|
||||
this.top = y - 25 + "px";
|
||||
},
|
||||
// Close the currently displayed context menu
|
||||
close() {
|
||||
this.activeMenu = -1;
|
||||
},
|
||||
},
|
||||
isFirefox: IS_FIREFOX,
|
||||
frameUrls: ["top"],
|
||||
activeFrame: "top",
|
||||
page: "ComponentsTab",
|
||||
events: [],
|
||||
eventsTreeView: true,
|
||||
eventsTree: [],
|
||||
activeRecorder: false,
|
||||
owlStatus: true,
|
||||
extensionContextStatus: true,
|
||||
splitPosition: window.innerWidth > window.innerHeight ? 45 : 60,
|
||||
apps: [],
|
||||
traceRenderings: false,
|
||||
traceSubscriptions: false,
|
||||
activeComponent: {
|
||||
path: ["0"],
|
||||
name: "App",
|
||||
subscriptions: { toggled: true, children: [] },
|
||||
props: { toggled: true, children: [] },
|
||||
env: { toggled: false, children: [] },
|
||||
instance: { toggled: true, children: [] },
|
||||
version: "1.0",
|
||||
},
|
||||
selectedElement: null,
|
||||
componentSearch: {
|
||||
search: "",
|
||||
searchResults: [],
|
||||
searchIndex: 0,
|
||||
activeSelector: false,
|
||||
getNextSearch() {
|
||||
if (this.searchIndex > -1 && this.searchIndex < this.searchResults.length - 1) {
|
||||
store.setSearchIndex(this.searchIndex + 1);
|
||||
} else if (this.searchIndex === this.searchResults.length - 1) {
|
||||
store.setSearchIndex(0);
|
||||
}
|
||||
},
|
||||
getPrevSearch() {
|
||||
if (this.searchIndex > 0) {
|
||||
store.setSearchIndex(this.searchIndex - 1);
|
||||
} else if (this.searchIndex === 0) {
|
||||
store.setSearchIndex(this.searchResults.length - 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
// eventSearch: {
|
||||
// search: "",
|
||||
// searchResults: [],
|
||||
// filters: [],
|
||||
// },
|
||||
renderPaths: new Set(),
|
||||
|
||||
// Used to navigate between the Components tab and the Events tab
|
||||
switchTab(componentName) {
|
||||
this.page = componentName;
|
||||
this.componentSearch.activeSelector = false;
|
||||
evalFunctionInWindow("disableHTMLSelector", [], this.activeFrame);
|
||||
},
|
||||
|
||||
// Load all data related to the components tree using the global hook loaded on the page
|
||||
// Use fromOld to specify if we want to keep most of the toggled/selected data of the old tree
|
||||
// when generating the new one
|
||||
async loadComponentsTree(fromOld) {
|
||||
if (IS_FIREFOX) {
|
||||
await evalInWindow("window.$0 = $0;", this.activeFrame);
|
||||
}
|
||||
const apps = await evalFunctionInWindow(
|
||||
"getComponentsTree",
|
||||
fromOld && this.activeComponent ? [this.activeComponent.path, this.apps] : [],
|
||||
this.activeFrame
|
||||
);
|
||||
this.apps = apps ? apps : [];
|
||||
if (!fromOld && this.settings.expandByDefault) {
|
||||
this.apps.forEach((tree) => expandNodes(tree));
|
||||
}
|
||||
const component = await evalFunctionInWindow(
|
||||
"getComponentDetails",
|
||||
fromOld && this.activeComponent ? [this.activeComponent.path, this.activeComponent] : [],
|
||||
this.activeFrame
|
||||
);
|
||||
this.activeComponent = component;
|
||||
},
|
||||
|
||||
// Select a component by retrieving its details from the page based on its path
|
||||
async selectComponent(path) {
|
||||
// Deselect all components
|
||||
this.apps.forEach((app) => {
|
||||
app.selected = false;
|
||||
app.highlighted = false;
|
||||
app.children.forEach((child) => {
|
||||
deselectComponent(child);
|
||||
});
|
||||
});
|
||||
let component;
|
||||
// element is the app here
|
||||
if (path.length === 1) {
|
||||
component = this.apps[path[0]];
|
||||
// the second element in the path is always the root of the app so no need to check
|
||||
} else {
|
||||
component = this.apps[path[0]].children[0];
|
||||
}
|
||||
for (let i = 2; i < path.length; i++) {
|
||||
component.toggled = true;
|
||||
const result = component.children.find((child) => child.key === path[i]);
|
||||
if (result) {
|
||||
component = result;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
component.selected = true;
|
||||
highlightChildren(component);
|
||||
const details = await evalFunctionInWindow(
|
||||
"getComponentDetails",
|
||||
[component.path],
|
||||
this.activeFrame
|
||||
);
|
||||
this.activeComponent = details;
|
||||
if (!this.activeComponent) {
|
||||
await this.loadComponentsTree(false);
|
||||
}
|
||||
if (this.page !== "ComponentsTab") {
|
||||
this.switchTab("ComponentsTab");
|
||||
}
|
||||
},
|
||||
|
||||
// Update the search state value with the current search string and trigger the search
|
||||
updateSearch(search) {
|
||||
this.componentSearch.search = search;
|
||||
this.componentSearch.searchResults = [];
|
||||
this.apps.forEach((app) => this.getComponentSearchResults(search, app));
|
||||
if (this.componentSearch.searchResults.length > 0) {
|
||||
this.componentSearch.searchIndex = 0;
|
||||
this.selectComponent(this.componentSearch.searchResults[0]);
|
||||
this.apps.forEach((app) => foldNodes(app));
|
||||
for (const result of this.componentSearch.searchResults) {
|
||||
this.toggleComponentParents(result);
|
||||
}
|
||||
} else {
|
||||
this.componentSearch.searchIndex = -1;
|
||||
}
|
||||
},
|
||||
|
||||
// Search for results in the components tree given the current search string (in a fuzzy way)
|
||||
getComponentSearchResults(search, node) {
|
||||
if (search.length < 1) {
|
||||
return;
|
||||
}
|
||||
if (fuzzySearch(node.name, search)) {
|
||||
this.componentSearch.searchResults.push(node.path);
|
||||
}
|
||||
if (node.children) {
|
||||
node.children.forEach((child) => this.getComponentSearchResults(search, child));
|
||||
}
|
||||
},
|
||||
|
||||
// Same but only record the component names for events
|
||||
// getComponentNameSearchResults(search, node) {
|
||||
// if (search.length < 1) return;
|
||||
// if (fuzzySearch(node.name, search)) {
|
||||
// if(!this.eventSearch.searchResults.includes(node.name))
|
||||
// this.eventSearch.searchResults.push(node.name);
|
||||
// }
|
||||
// if (node.children) {
|
||||
// node.children.forEach((child) => this.getComponentNameSearchResults(search, child));
|
||||
// }
|
||||
// },
|
||||
|
||||
// updateEventSearch(search){
|
||||
// this.eventSearch.search = search;
|
||||
// this.eventSearch.searchResults = [];
|
||||
// this.apps.forEach((app) => this.getComponentNameSearchResults(search, app));
|
||||
// [""]
|
||||
// },
|
||||
|
||||
// Toggle all parent components of the specified one to make sure it is visible in the tree
|
||||
toggleComponentParents(path) {
|
||||
let cp = path.slice(2);
|
||||
this.apps[path[0]].toggled = true;
|
||||
let component = this.apps[path[0]].children[0];
|
||||
for (const key of cp) {
|
||||
component.toggled = true;
|
||||
component = component.children.find((child) => child.key === key);
|
||||
}
|
||||
},
|
||||
|
||||
// Returns access to the specified component in the tree
|
||||
getComponentByPath(path) {
|
||||
let component;
|
||||
if (path.length < 2) {
|
||||
component = this.apps[path[0]];
|
||||
} else {
|
||||
component = this.apps[path[0]].children[0];
|
||||
}
|
||||
let cp = path.slice(2);
|
||||
for (const key of cp) {
|
||||
component = component.children.find((child) => child.key === key);
|
||||
}
|
||||
return component;
|
||||
},
|
||||
|
||||
// expand/fold the component and its children based on toggle
|
||||
toggleComponentAndChildren(component, toggle) {
|
||||
if (toggle) {
|
||||
expandNodes(component);
|
||||
} else {
|
||||
foldNodes(component);
|
||||
}
|
||||
},
|
||||
|
||||
foldDirectChildren(element) {
|
||||
for (const child of element.children) {
|
||||
child.toggled = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Action related to the left(toggle)/up(not toggle) arrow keys for navigation purpose
|
||||
// The resulting behaviour is the same as in the Elements tab of the chrome devtools
|
||||
toggleOrSelectPrevElement(toggle) {
|
||||
if (toggle) {
|
||||
const component = this.getComponentByPath(this.activeComponent.path);
|
||||
if (component.children.length > 0 && component.toggled) {
|
||||
component.toggled = false;
|
||||
} else if (this.activeComponent.path.length > 1) {
|
||||
this.selectComponent(this.activeComponent.path.slice(0, -1));
|
||||
}
|
||||
return;
|
||||
}
|
||||
const parentPath = [...this.activeComponent.path];
|
||||
const key = parentPath.pop();
|
||||
// If component is an app, find descendant with the highest successive children indexes of the app above
|
||||
// or do nothing if there is no app above
|
||||
if (parentPath.length === 0) {
|
||||
const parent = this.apps;
|
||||
const index = Number(key);
|
||||
if (index > 0) {
|
||||
let sibling = parent[index - 1];
|
||||
while (sibling.toggled && sibling.children.length) {
|
||||
sibling = sibling.children[sibling.children.length - 1];
|
||||
}
|
||||
this.selectComponent(sibling.path);
|
||||
}
|
||||
} else {
|
||||
const parent = this.getComponentByPath(parentPath);
|
||||
const index = parent.children.findIndex((child) => child.key === key);
|
||||
if (index > 0) {
|
||||
let sibling = parent.children[index - 1];
|
||||
while (sibling.toggled && sibling.children.length) {
|
||||
sibling = sibling.children[sibling.children.length - 1];
|
||||
}
|
||||
this.selectComponent(sibling.path);
|
||||
} else {
|
||||
this.selectComponent(parent.path);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Action related to the right(toggle)/down(not toggle) arrow keys for navigation purpose
|
||||
// The resulting behaviour is the same as in the Elements tab of the chrome devtools
|
||||
toggleOrSelectNextElement(toggle) {
|
||||
let component = this.getComponentByPath(this.activeComponent.path);
|
||||
if (toggle) {
|
||||
if (!component.children.length) {
|
||||
return;
|
||||
} else if (!component.toggled) {
|
||||
component.toggled = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
// If component has children and is toggled, select its first child
|
||||
if (component.toggled && component.children.length) {
|
||||
this.selectComponent(component.children[0].path);
|
||||
} else {
|
||||
const parentPath = [...this.activeComponent.path];
|
||||
while (true) {
|
||||
const key = parentPath.pop();
|
||||
if (parentPath.length === 0) {
|
||||
const index = Number(key);
|
||||
if (index < this.apps.length - 1) {
|
||||
this.selectComponent(this.apps[index + 1].path);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const parent = this.getComponentByPath(parentPath);
|
||||
const index = parent.children.findIndex((child) => child.key === key);
|
||||
if (index < parent.children.length - 1 && index > -1) {
|
||||
this.selectComponent(parent.children[index + 1].path);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Set the search index to the provided one in order to select the current searched component
|
||||
setSearchIndex(index) {
|
||||
this.componentSearch.searchIndex = index;
|
||||
this.selectComponent(this.componentSearch.searchResults[index]);
|
||||
},
|
||||
|
||||
// Replace the (...) content of a getter with the value returned by the corresponding get method
|
||||
async loadGetterContent(obj) {
|
||||
const result = await evalFunctionInWindow("loadGetterContent", [obj], this.activeFrame);
|
||||
Object.keys(obj).forEach((key) => {
|
||||
obj[key] = result[key];
|
||||
});
|
||||
obj.children = [];
|
||||
},
|
||||
|
||||
// Expand the children of the input object property and load it from page if necessary
|
||||
async toggleObjectTreeElementsDisplay(obj) {
|
||||
if (!obj.hasChildren) {
|
||||
return;
|
||||
}
|
||||
// Since it is sometimes impossible (and always ineffective) to load all descendants of a property
|
||||
// when the component details are loaded, we need to populate the children of a property only when
|
||||
// it is first expanded. Do note that it has a limit to how deep we can expand (when reaching a circular dependancy)
|
||||
if (obj.hasChildren && obj.children.length === 0) {
|
||||
const children = await evalFunctionInWindow(
|
||||
"loadObjectChildren",
|
||||
[obj.path, obj.depth, obj.contentType, obj.objectType, this.activeComponent],
|
||||
this.activeFrame
|
||||
);
|
||||
obj.children = children;
|
||||
}
|
||||
obj.toggled = !obj.toggled;
|
||||
},
|
||||
|
||||
// Toggle the selector tool which is used to select a component based on the hovered Dom element
|
||||
toggleSelector() {
|
||||
this.componentSearch.activeSelector = !this.componentSearch.activeSelector;
|
||||
evalFunctionInWindow(
|
||||
this.componentSearch.activeSelector ? "enableHTMLSelector" : "disableHTMLSelector",
|
||||
[],
|
||||
this.activeFrame
|
||||
);
|
||||
},
|
||||
|
||||
// Update the value of the given object with the new provided one
|
||||
editObjectTreeElement(path, value, objectType) {
|
||||
evalFunctionInWindow("editObject", [path, value, objectType], this.activeFrame);
|
||||
},
|
||||
|
||||
// toggle the tracing mode which will record all root render events and send their trace in the console
|
||||
async toggleTracing() {
|
||||
this.traceRenderings = await evalFunctionInWindow(
|
||||
"toggleTracing",
|
||||
[!this.traceRenderings],
|
||||
this.activeFrame
|
||||
);
|
||||
},
|
||||
|
||||
// toggle subscriptions tracing mode which will record all new subscriptions
|
||||
async toggleSubscriptionTracing() {
|
||||
this.traceSubscriptions = await evalFunctionInWindow(
|
||||
"toggleSubscriptionTracing",
|
||||
[!this.traceSubscriptions],
|
||||
this.activeFrame
|
||||
);
|
||||
},
|
||||
|
||||
// Checks for all iframes in the page, register it and load the scripts inside if not already done
|
||||
async updateIFrameList() {
|
||||
const frames = await evalFunctionInWindow("getIFrameUrls");
|
||||
this.frameUrls = ["top"];
|
||||
if (this.activeFrame !== "top") {
|
||||
this.selectFrame("top");
|
||||
}
|
||||
for (const frame of frames) {
|
||||
const hasOwl = await evalInWindow("window.__OWL_DEVTOOLS__?.Fiber !== undefined;", frame);
|
||||
if (hasOwl) {
|
||||
const scriptsLoaded = await evalInWindow(
|
||||
"window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;",
|
||||
frame
|
||||
);
|
||||
if (!scriptsLoaded) {
|
||||
await loadScripts(frame);
|
||||
}
|
||||
evalInWindow(
|
||||
`__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = ${
|
||||
store.devtoolsId
|
||||
}; __OWL__DEVTOOLS_GLOBAL_HOOK__.frame = ${JSON.stringify(frame)};`,
|
||||
frame
|
||||
);
|
||||
if (!this.frameUrls.includes(frame)) {
|
||||
this.frameUrls = [...this.frameUrls, frame];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Remove all the highlight boxes created above the html elements in the page to show components
|
||||
removeHighlights() {
|
||||
if (this.owlStatus && !this.invalidContext) {
|
||||
evalFunctionInWindow("removeHighlights", [], this.activeFrame);
|
||||
}
|
||||
},
|
||||
|
||||
// Reset the context of all values in the devtools tab and load the one from the given frame
|
||||
selectFrame(frame) {
|
||||
this.removeHighlights();
|
||||
evalFunctionInWindow("toggleEventsRecording", [false, 0], this.activeFrame);
|
||||
evalFunctionInWindow("toggleTracing", [false], this.activeFrame);
|
||||
evalFunctionInWindow("toggleSubscriptionTracing", [false], this.activeFrame);
|
||||
this.events = [];
|
||||
this.eventsTree = [];
|
||||
this.activeFrame = frame;
|
||||
store.loadComponentsTree(false);
|
||||
evalFunctionInWindow(
|
||||
"toggleEventsRecording",
|
||||
[this.activeRecorder, this.events.length],
|
||||
this.activeFrame
|
||||
);
|
||||
evalFunctionInWindow("toggleTracing", [this.traceRenderings], this.activeFrame);
|
||||
evalFunctionInWindow("toggleSubscriptionTracing", [this.traceSubscriptions], this.activeFrame);
|
||||
},
|
||||
|
||||
// Constructs the tree that represents the currently recorded events to see them as a tree instead of a temporally accurate list
|
||||
buildEventsTree() {
|
||||
let tree = [];
|
||||
for (const event of this.events) {
|
||||
let eventNode = Object.assign({}, event);
|
||||
eventNode.children = [];
|
||||
eventNode.toggled = true;
|
||||
if (!eventNode.origin) {
|
||||
eventNode.depth = 0;
|
||||
tree.push(eventNode);
|
||||
} else {
|
||||
// This is litteraly an array.find but which starts searching from the end of the array
|
||||
for (let i = tree.length - 1; i >= 0; i--) {
|
||||
if (arraysEqual(eventNode.origin.path, tree[i].path)) {
|
||||
// path from the origin event (root render) to the direct parent of the current event
|
||||
const relativePath = eventNode.path.slice(
|
||||
tree[i].path.length,
|
||||
eventNode.path.length - 1
|
||||
);
|
||||
let parent = tree[i];
|
||||
// find the direct parent in the tree
|
||||
for (const key of relativePath) {
|
||||
parent = parent.children.find((child) => child.key === key);
|
||||
}
|
||||
eventNode.depth = parent.depth + 1;
|
||||
parent.children.push(eventNode);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.eventsTree = tree;
|
||||
},
|
||||
|
||||
// expand/fold the event tree node based on toggle
|
||||
toggleEventAndChildren(event, toggle) {
|
||||
if (toggle) {
|
||||
expandNodes(event);
|
||||
} else {
|
||||
foldNodes(event);
|
||||
}
|
||||
},
|
||||
|
||||
collapseAll() {
|
||||
for (let event of this.eventsTree) {
|
||||
event.toggled = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Reset all the relevant data about the page currently stored
|
||||
resetData() {
|
||||
this.loadComponentsTree(false);
|
||||
this.events = [];
|
||||
this.eventsTree = [];
|
||||
this.activeRecorder = false;
|
||||
evalFunctionInWindow("toggleEventsRecording", [false, 0]);
|
||||
evalFunctionInWindow("toggleTracing", [false]);
|
||||
},
|
||||
|
||||
// Triggers manually the rendering of the selected component
|
||||
refreshComponent(path = this.activeComponent.path) {
|
||||
evalFunctionInWindow("refreshComponent", [path], this.activeFrame);
|
||||
},
|
||||
|
||||
// Allows to log any object in the console, defaults to the active component (or app)
|
||||
logObjectInConsole(path) {
|
||||
if (!path) {
|
||||
if (this.activeComponent.path.length > 1) {
|
||||
path = [...this.activeComponent.path, { type: "item", value: "component" }];
|
||||
} else {
|
||||
path = this.activeComponent.path;
|
||||
}
|
||||
}
|
||||
evalFunctionInWindow("sendObjectToConsole", [path], this.activeFrame);
|
||||
},
|
||||
|
||||
// inspect the source code of the object given by its path
|
||||
async inspectFunctionSource(path) {
|
||||
await evalFunctionInWindow("inspectFunctionSource", [path], this.activeFrame);
|
||||
if (IS_FIREFOX) {
|
||||
await evalInWindow("inspect(window.$temp);", this.activeFrame);
|
||||
}
|
||||
},
|
||||
|
||||
// Inspect the given component's data based on the given type
|
||||
async inspectComponent(type, path = this.activeComponent.path) {
|
||||
switch (type) {
|
||||
case "DOM":
|
||||
await evalFunctionInWindow("inspectComponentDOM", [path], this.activeFrame);
|
||||
break;
|
||||
case "source":
|
||||
if (path.length > 1) {
|
||||
await evalFunctionInWindow(
|
||||
"inspectFunctionSource",
|
||||
[
|
||||
[
|
||||
...path,
|
||||
{ type: "item", value: "component" },
|
||||
{ type: "item", value: "constructor" },
|
||||
],
|
||||
],
|
||||
this.activeFrame
|
||||
);
|
||||
} else {
|
||||
await evalFunctionInWindow(
|
||||
"inspectFunctionSource",
|
||||
[[...path, { type: "item", value: "constructor" }]],
|
||||
this.activeFrame
|
||||
);
|
||||
}
|
||||
break;
|
||||
case "compiled template":
|
||||
await evalFunctionInWindow("inspectComponentCompiledTemplate", [path], this.activeFrame);
|
||||
break;
|
||||
case "raw template":
|
||||
await evalFunctionInWindow("inspectComponentRawTemplate", [path], this.activeFrame);
|
||||
break;
|
||||
}
|
||||
if (IS_FIREFOX && type !== "raw template") {
|
||||
await evalInWindow("inspect(window.$temp);", this.activeFrame);
|
||||
}
|
||||
},
|
||||
|
||||
// Trigger the highlight on the component in the page
|
||||
highlightComponent(path) {
|
||||
evalFunctionInWindow("highlightComponent", [path], this.activeFrame);
|
||||
},
|
||||
|
||||
// Center the view around the currently selected component
|
||||
focusSelectedComponent() {
|
||||
this.selectedElement.scrollIntoView({ block: "center", behavior: "smooth" });
|
||||
},
|
||||
|
||||
// Toggle the recording of events in the page
|
||||
async toggleRecording() {
|
||||
this.activeRecorder = await evalFunctionInWindow(
|
||||
"toggleEventsRecording",
|
||||
[!this.activeRecorder, this.events.length],
|
||||
this.activeFrame
|
||||
);
|
||||
},
|
||||
|
||||
// Reset all events data
|
||||
clearEventsConsole() {
|
||||
this.events = [];
|
||||
this.eventsTree = [];
|
||||
evalFunctionInWindow("resetEvents", [], this.activeFrame);
|
||||
},
|
||||
|
||||
// Refresh the whole extension
|
||||
async refreshExtension() {
|
||||
await loadScripts();
|
||||
this.resetData();
|
||||
},
|
||||
|
||||
// Toggle dark mode in the extension and store result in the storage
|
||||
toggleDarkMode() {
|
||||
this.settings.darkMode = !this.settings.darkMode;
|
||||
if (this.settings.darkMode) {
|
||||
document.querySelector("html").classList.add("dark-mode");
|
||||
} else {
|
||||
document.querySelector("html").classList.remove("dark-mode");
|
||||
}
|
||||
browserInstance.storage.local.set({ owl_devtools_dark_mode: this.settings.darkMode });
|
||||
},
|
||||
});
|
||||
|
||||
// Instantiate the store
|
||||
export function useStore() {
|
||||
return useState(store);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
async function init() {
|
||||
store.devtoolsId = await getTabURL();
|
||||
|
||||
evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
|
||||
|
||||
// We want to load the base components tree when the devtools tab is first opened
|
||||
store.loadComponentsTree(false);
|
||||
|
||||
// We also want to detect the different iframes at first loading of the devtools tab
|
||||
store.updateIFrameList();
|
||||
|
||||
// Global listeners to close the currently shown context menu when the user clicks or opens another
|
||||
document.addEventListener("click", () => store.contextMenu.close(), { capture: true });
|
||||
document.addEventListener("contextmenu", () => store.contextMenu.close(), { capture: true });
|
||||
|
||||
// Make sure the events recorder is at its initial state in every frame
|
||||
for (const frame of store.frameUrls) {
|
||||
evalFunctionInWindow("toggleEventsRecording", [false, 0], frame);
|
||||
}
|
||||
|
||||
loadSettings();
|
||||
}
|
||||
|
||||
// Heartbeat message to test whether the extension context is still valid or not
|
||||
setInterval(() => {
|
||||
if (store.extensionContextStatus) {
|
||||
try {
|
||||
browserInstance.runtime.sendMessage({ type: "keepAlive" });
|
||||
} catch (e) {
|
||||
store.extensionContextStatus = false;
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
let flushRendersTimeout = false;
|
||||
// Connect to the port to communicate to the background script
|
||||
browserInstance.runtime.onConnect.addListener((port) => {
|
||||
if (!port.name === "OwlDevtoolsPort") {
|
||||
return;
|
||||
}
|
||||
port.onMessage.addListener(async (msg) => {
|
||||
// Reload the tree after checking if the scripts are loaded when this message is received
|
||||
if (msg.type === "Reload") {
|
||||
const tab = await getTabURL();
|
||||
// Since this message is sent to all devtools windows, only take it into account when this is the active tab
|
||||
if (tab !== store.devtoolsId) {
|
||||
return;
|
||||
}
|
||||
store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
|
||||
if (store.owlStatus) {
|
||||
evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
|
||||
store.resetData();
|
||||
}
|
||||
}
|
||||
// Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
|
||||
if (msg.type === "FrameReady") {
|
||||
const tab = await getTabURL();
|
||||
// Same as for the reload message
|
||||
if (tab !== store.devtoolsId) {
|
||||
return;
|
||||
}
|
||||
store.updateIFrameList();
|
||||
store.owlStatus = true;
|
||||
store.resetData();
|
||||
}
|
||||
// We need to reload the components tree when the set of apps in the page is modified
|
||||
if (msg.type === "RefreshApps") {
|
||||
store.loadComponentsTree(true);
|
||||
}
|
||||
// Filter out the messages that are not destined to this devtools tab. The messages above may be sent before
|
||||
// the devtoolsId is set
|
||||
if (msg.origin.id !== store.devtoolsId) {
|
||||
return;
|
||||
}
|
||||
// When message of type Flush is received, overwrite the component tree with the new one from page
|
||||
// A flush message is sent everytime a component is rendered on the page
|
||||
if (msg.type === "Flush") {
|
||||
if (msg.origin.frame !== store.activeFrame) {
|
||||
return;
|
||||
}
|
||||
if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
|
||||
return;
|
||||
}
|
||||
// This determines which components will have a short highlight effect in the tree to indicate they have been rendered
|
||||
store.renderPaths.add(JSON.stringify(msg.data));
|
||||
clearTimeout(flushRendersTimeout);
|
||||
flushRendersTimeout = setTimeout(() => {
|
||||
store.renderPaths.clear();
|
||||
}, 100);
|
||||
store.loadComponentsTree(true);
|
||||
}
|
||||
// Select the component based on the path received with the SelectElement message
|
||||
if (msg.type === "SelectElement") {
|
||||
if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
|
||||
return;
|
||||
}
|
||||
store.selectComponent(msg.data);
|
||||
}
|
||||
// Stop the DOM element selector tool upon receiving the StopSelector message
|
||||
if (msg.type === "StopSelector") {
|
||||
store.componentSearch.activeSelector = false;
|
||||
}
|
||||
|
||||
// Logic for recording an event when the event message is received
|
||||
if (msg.type === "Event") {
|
||||
let events = msg.data;
|
||||
loadEvents(events);
|
||||
}
|
||||
|
||||
// If we know a new iframe has been added to the page, load scripts into it and update the
|
||||
// frames list if it has been directly loaded.
|
||||
if (msg.type === "NewIFrame") {
|
||||
const isLoaded = await loadScripts(msg.data);
|
||||
if (isLoaded) {
|
||||
store.updateIFrameList();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Load all settings from the chrome sync storage
|
||||
async function loadSettings() {
|
||||
let storage = await browserInstance.storage.local.get();
|
||||
if (storage.owl_devtools_dark_mode === undefined) {
|
||||
// Load dark mode based on the global settings of the chrome devtools
|
||||
darkMode = browserInstance.devtools.panels.themeName === "dark";
|
||||
} else {
|
||||
darkMode = storage.owl_devtools_dark_mode;
|
||||
}
|
||||
store.settings.darkMode = darkMode;
|
||||
if (darkMode) {
|
||||
document.querySelector("html").classList.add("dark-mode");
|
||||
} else {
|
||||
document.querySelector("html").classList.remove("dark-mode");
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle and store a batch of events coming from the page
|
||||
function loadEvents(events) {
|
||||
if (!Array.isArray(events)) {
|
||||
return;
|
||||
}
|
||||
for (const event of events) {
|
||||
// Check if the event data has the right shape for security purpose
|
||||
if (
|
||||
!isObjectWithShape(event, {
|
||||
type: "string",
|
||||
component: "string",
|
||||
key: "string",
|
||||
path: "object",
|
||||
time: "number",
|
||||
id: "number",
|
||||
}) ||
|
||||
!(Array.isArray(event.path) && event.path.every((val) => typeof val === "string"))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
event.origin = null;
|
||||
event.toggled = false;
|
||||
// Logic to retrace the origin of the event if it is not a root render event
|
||||
if (!event.type.includes("render")) {
|
||||
for (let i = store.events.length - 1; i >= 0; i--) {
|
||||
if (
|
||||
!store.events[i].origin &&
|
||||
event.path.join("/").includes(store.events[i].path.join("/"))
|
||||
) {
|
||||
event.origin = toRaw(store.events[i]);
|
||||
break;
|
||||
}
|
||||
if (
|
||||
store.events[i].origin &&
|
||||
event.path.join("/").includes(store.events[i].origin.path.join("/"))
|
||||
) {
|
||||
event.origin = toRaw(store.events[i].origin);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Add the event to the events tree immediatly when the events view is in tree mode
|
||||
if (store.eventsTreeView) {
|
||||
let eventNode = Object.assign({}, event);
|
||||
eventNode.children = [];
|
||||
eventNode.toggled = true;
|
||||
if (!eventNode.origin) {
|
||||
eventNode.depth = 0;
|
||||
store.eventsTree.push(eventNode);
|
||||
} else {
|
||||
// Similar to when we're constructing the whole tree
|
||||
for (let i = store.eventsTree.length - 1; i >= 0; i--) {
|
||||
if (eventNode.origin.path.join("/") === store.eventsTree[i].path.join("/")) {
|
||||
const relativePath = eventNode.path.slice(
|
||||
store.eventsTree[i].path.length,
|
||||
eventNode.path.length - 1
|
||||
);
|
||||
let parent = store.eventsTree[i];
|
||||
for (const key of relativePath) {
|
||||
parent = parent.children.find((child) => child.key === key);
|
||||
}
|
||||
eventNode.depth = parent.depth + 1;
|
||||
parent.children.push(eventNode);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Make sure we add the event while keeping the whole list ordered by id
|
||||
addEventSorted(event);
|
||||
}
|
||||
}
|
||||
|
||||
// Deselect component and remove highlight on all children
|
||||
function deselectComponent(component) {
|
||||
component.selected = false;
|
||||
component.highlighted = false;
|
||||
for (const child of component.children) {
|
||||
deselectComponent(child);
|
||||
}
|
||||
}
|
||||
|
||||
// Used to check if the given object has the right shape
|
||||
function isObjectWithShape(obj, shape) {
|
||||
if (typeof obj !== "object" || Array.isArray(obj)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return Object.keys(shape).every(
|
||||
(key) => obj.hasOwnProperty(key) && typeof obj[key] === shape[key]
|
||||
);
|
||||
}
|
||||
|
||||
// A binary search algorith to efficiently add an event in the events array while keeping it sorted
|
||||
function addEventSorted(item) {
|
||||
let low = 0;
|
||||
let high = store.events.length;
|
||||
while (low < high) {
|
||||
let mid = Math.floor((low + high) / 2);
|
||||
if (store.events[mid].id < item.id) {
|
||||
low = mid + 1;
|
||||
} else {
|
||||
high = mid;
|
||||
}
|
||||
}
|
||||
store.events.splice(low, 0, item);
|
||||
}
|
||||
|
||||
// Apply highlight recursively to all children of a selected component
|
||||
function highlightChildren(component) {
|
||||
component.children.forEach((child) => {
|
||||
child.highlighted = true;
|
||||
highlightChildren(child);
|
||||
});
|
||||
}
|
||||
|
||||
// Expand the node given in entry and all of its children
|
||||
function expandNodes(node) {
|
||||
node.toggled = true;
|
||||
for (const child of node.children) {
|
||||
expandNodes(child);
|
||||
}
|
||||
}
|
||||
|
||||
// Fold the node given in entry and all of its children
|
||||
function foldNodes(node) {
|
||||
node.toggled = false;
|
||||
for (const child of node.children) {
|
||||
foldNodes(child);
|
||||
}
|
||||
}
|
||||
|
||||
// Load the scripts in the specified frame
|
||||
async function loadScripts(frameUrl) {
|
||||
return await evalInWindow(globalHook, frameUrl);
|
||||
}
|
||||
|
||||
// Shallow array equality
|
||||
function arraysEqual(arr1, arr2) {
|
||||
if (arr1.length !== arr2.length) {
|
||||
// Check if the arrays are of the same length
|
||||
return false;
|
||||
}
|
||||
return arr1.every((val, i) => val === arr2[i]); // Compare each element of the arrays
|
||||
}
|
||||
|
||||
async function getTabURL() {
|
||||
if (IS_FIREFOX) {
|
||||
// This happens in firefox when the method is called inside devtools so we ask the background to execute it instead
|
||||
browserInstance.runtime.sendMessage({ type: "getActiveTabURL" }).then((response) => {
|
||||
return response.result;
|
||||
});
|
||||
} else {
|
||||
return await getActiveTabURL();
|
||||
}
|
||||
}
|
||||
|
||||
// General method for executing functions from the loaded scripts in the right frame of the page
|
||||
// using the __OWL__DEVTOOLS_GLOBAL_HOOK__. Take the function's args as an array.
|
||||
async function evalFunctionInWindow(fn, args = [], frameUrl = "top") {
|
||||
const stringifiedArgs = [...args].map((arg) => {
|
||||
arg = JSON.stringify(arg);
|
||||
return arg;
|
||||
});
|
||||
const argsString = "(" + stringifiedArgs.join(", ") + ");";
|
||||
let script = `__OWL__DEVTOOLS_GLOBAL_HOOK__.${fn}${argsString}`;
|
||||
return await new Promise((resolve, reject) => {
|
||||
if (frameUrl !== "top") {
|
||||
browserInstance.devtools.inspectedWindow.eval(
|
||||
script,
|
||||
{ frameURL: frameUrl },
|
||||
(result, isException) => {
|
||||
if (!isException) {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(script);
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
browserInstance.devtools.inspectedWindow.eval(script, (result, isException) => {
|
||||
if (!isException) {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(script);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// General method for executing code in the window using chrome.devtools.inspectedWindow.eval.
|
||||
async function evalInWindow(code, frameUrl = "top") {
|
||||
return await new Promise((resolve, reject) => {
|
||||
if (frameUrl !== "top") {
|
||||
browserInstance.devtools.inspectedWindow.eval(
|
||||
code,
|
||||
{ frameURL: frameUrl },
|
||||
(result, isException) => {
|
||||
if (!isException) {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(code);
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
browserInstance.devtools.inspectedWindow.eval(code, (result, isException) => {
|
||||
if (!isException) {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(code);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user