mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Simon Genin (ges)
|
6aaa174a8a | ||
|
Simon Genin (ges)
|
35121dff59 |
@@ -23,5 +23,4 @@ jobs:
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
- run: npm install
|
||||
- run: npm run test
|
||||
- run: npm run prettier
|
||||
- run: npm test
|
||||
|
||||
+1
-3
@@ -26,6 +26,4 @@ node_modules
|
||||
# Extras temp file
|
||||
/tools/owl.js
|
||||
|
||||
release-notes.md
|
||||
|
||||
.rpt2_cache
|
||||
release-notes.md
|
||||
@@ -121,7 +121,8 @@ npm install @odoo/owl
|
||||
|
||||
If you want to use a simple `<script>` tag, the last release can be downloaded here:
|
||||
|
||||
- [owl-1.0.13](https://github.com/odoo/owl/releases/tag/v1.0.13)
|
||||
- [owl-1.0.11.js](https://github.com/odoo/owl/releases/download/v1.0.11/owl.js)
|
||||
- [owl-1.0.11.min.js](https://github.com/odoo/owl/releases/download/v1.0.11/owl.min.js)
|
||||
|
||||
## License
|
||||
|
||||
|
||||
+2
-19
@@ -2,10 +2,9 @@
|
||||
|
||||
The Owl framework is designed to work in many situations. However, it is
|
||||
sometimes necessary to customize some behaviour. This is done by using the
|
||||
global `config` object. It provides two settings:
|
||||
global `config` object. It currently has one key:
|
||||
|
||||
- [`mode`](#mode) (default value: `prod`),
|
||||
- [`enableTransitions`](#enabletransitions) (default value: `true`).
|
||||
- [`mode`](#mode).
|
||||
|
||||
## Mode
|
||||
|
||||
@@ -26,19 +25,3 @@ So, changing this setting is best done at startup.
|
||||
|
||||
An important job done by the `dev` mode is to validate props for each component
|
||||
creation and update. Also, extra props will cause an error.
|
||||
|
||||
## `enableTransitions`
|
||||
|
||||
Transitions are usually nice, but they can cause issues in some specific cases,
|
||||
such as automated tests. It is uncomfortable having to wait for a transition
|
||||
to end before moving to the next step.
|
||||
|
||||
To solve this issue, Owl can be configured to ignore the `t-transition` directive.
|
||||
To do that, one only needs to set the `enableTransitions` flag to false:
|
||||
|
||||
```js
|
||||
owl.config.enableTransitions = false;
|
||||
```
|
||||
|
||||
Note that it suffers from the same drawback as the "dev" mode: all compiled
|
||||
templates, if any, will keep their current behaviours.
|
||||
|
||||
@@ -78,20 +78,6 @@ The `t-on` directive allows to prebind its arguments. For example,
|
||||
Here, `expr` is a valid Owl expression, so it could be `true` or some variable
|
||||
from the rendering context.
|
||||
|
||||
### Type Hinting
|
||||
|
||||
Note that if you work with Typescript, the `trigger` method is generic on the type of the payload.
|
||||
|
||||
You can then describe the type of the event, so you will see typing errors...
|
||||
|
||||
```typescript
|
||||
this.trigger<MyCustomPayload>("my-custom-event", payload);
|
||||
```
|
||||
|
||||
```typescript
|
||||
myCustomEventHandler(ev: OwlEvent<MyCustomPayload>) { ... }
|
||||
```
|
||||
|
||||
## Inline Event Handlers
|
||||
|
||||
One can also directly specify inline statements. For example,
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
- [Dynamic Attributes](#dynamic-attributes)
|
||||
- [Loops](#loops)
|
||||
- [Rendering Sub Templates](#rendering-sub-templates)
|
||||
- [Dynamic Sub Templates](#dynamic-sub-templates)
|
||||
- [Translations](#translations)
|
||||
- [Debugging](#debugging)
|
||||
|
||||
@@ -453,17 +452,6 @@ are all equivalent:
|
||||
|
||||
If there is no `t-key` directive, Owl will use the index as a default key.
|
||||
|
||||
Note: the `t-foreach` directive only accepts arrays (lists) or objects. It does
|
||||
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>
|
||||
```
|
||||
|
||||
The `...` operator will convert the `Set` (or any other iterables) into a list,
|
||||
which will work with Owl QWeb.
|
||||
|
||||
### Rendering Sub Templates
|
||||
|
||||
QWeb templates can be used for top level rendering, but they can also be used
|
||||
@@ -521,22 +509,6 @@ This can be used to define variables scoped to a sub template:
|
||||
<!-- "var" does not exist here -->
|
||||
```
|
||||
|
||||
### Dynamic sub templates
|
||||
|
||||
The `t-call` directive can also be used to dynamically call a sub template,
|
||||
using string interpolation. For example:
|
||||
|
||||
```xml
|
||||
<div t-name="main-template">
|
||||
<t t-call="{{template}}">
|
||||
<em>content</em>
|
||||
</t>
|
||||
</div>
|
||||
```
|
||||
|
||||
Here, the name of the template is obtained from the `template` value in the
|
||||
template rendering context.
|
||||
|
||||
### Translations
|
||||
|
||||
By default, QWeb specify that templates should be translated. If this behaviour
|
||||
|
||||
+14
-11
@@ -1,20 +1,23 @@
|
||||
{
|
||||
"name": "@odoo/owl",
|
||||
"version": "1.0.13",
|
||||
"version": "1.0.11",
|
||||
"description": "Odoo Web Library (OWL)",
|
||||
"main": "dist/owl.cjs.js",
|
||||
"browser": "dist/owl.iife.js",
|
||||
"module": "dist/owl.es.js",
|
||||
"main": "dist/owl.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
"dist/types/",
|
||||
"dist/owl.js",
|
||||
"dist/owl-iife.js"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10.15.3"
|
||||
},
|
||||
"scripts": {
|
||||
"build:js": "tsc --target esnext --module es6 --outDir dist/owl",
|
||||
"build:bundle": "rollup -c",
|
||||
"build": "npm run build:bundle",
|
||||
"build": "npm run build:js && npm run build:bundle",
|
||||
"buildcommonjs": "npm run build:js && npm run build:bundle -- -f cjs",
|
||||
"minify": "uglifyjs dist/owl.js -o dist/owl.min.js --compress --mangle",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"tools:serve": "python3 tools/server.py || python tools/server.py",
|
||||
@@ -22,7 +25,7 @@
|
||||
"pretools:watch": "npm run build",
|
||||
"tools:watch": "npm-run-all --parallel tools:serve \"build:* -- --watch\"",
|
||||
"prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --write",
|
||||
"publish": "npm run build && npm publish",
|
||||
"publish": "npm run build && mv dist/owl.js dist/owl-iife.js && npm run buildcommonjs && npm publish",
|
||||
"release": "node tools/release.js"
|
||||
},
|
||||
"repository": {
|
||||
@@ -35,9 +38,9 @@
|
||||
"url": "https://github.com/odoo/owl/issues"
|
||||
},
|
||||
"homepage": "https://github.com/odoo/owl#readme",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^23.3.14",
|
||||
"@types/node": "^14.11.8",
|
||||
"@types/jest": "^23.3.12",
|
||||
"chalk": "^3.0.0",
|
||||
"cpx": "^1.5.0",
|
||||
"git-rev-sync": "^1.12.0",
|
||||
@@ -45,11 +48,11 @@
|
||||
"jest": "^23.6.0",
|
||||
"jest-environment-jsdom": "^24.7.1",
|
||||
"live-server": "^1.2.1",
|
||||
"monaco-editor": "^0.21.2",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.0.4",
|
||||
"rollup": "^1.6.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"rollup-plugin-typescript2": "^0.27.3",
|
||||
"rollup-plugin-typescript2": "^0.20.1",
|
||||
"sass": "^1.16.1",
|
||||
"source-map-support": "^0.5.10",
|
||||
"ts-jest": "^23.10.5",
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
# 🦉 OWL Roadmap 🦉
|
||||
|
||||
- Current version: 1.0.13
|
||||
- Current version: 1.0.11
|
||||
- Status: stable
|
||||
|
||||
This roadmap is only an attempt at predicting Owl's future. Everything may
|
||||
|
||||
+10
-66
@@ -1,70 +1,14 @@
|
||||
import pkg from "./package.json";
|
||||
import { version } from "./package.json";
|
||||
import git from "git-rev-sync";
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
|
||||
const name = "owl";
|
||||
const extend = true;
|
||||
|
||||
/**
|
||||
* Meta data to be added on the __info__ object.
|
||||
* Used to let external tools know the current owl version.
|
||||
*/
|
||||
const outro = `
|
||||
__info__.version = '${pkg.version}';
|
||||
__info__.date = '${new Date().toISOString()}';
|
||||
__info__.hash = '${git.short()}';
|
||||
__info__.url = 'https://github.com/odoo/owl';
|
||||
`;
|
||||
|
||||
/**
|
||||
* Generate from a string depicting a path a new path for the minified version.
|
||||
* @param {string} pkgFileName file name
|
||||
*/
|
||||
function generateMinifiedNameFromPkgName(pkgFileName) {
|
||||
const parts = pkgFileName.split('.');
|
||||
parts.splice(parts.length - 1, 0, "min");
|
||||
return parts.join('.');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the rollup config based on the arguments
|
||||
* @param {string} format format of the bundle
|
||||
* @param {string} generatedFileName generated file name
|
||||
* @param {boolean} minified should it be minified
|
||||
*/
|
||||
function getConfigForFormat(format, generatedFileName, minified = false) {
|
||||
return {
|
||||
file: minified ? generateMinifiedNameFromPkgName(generatedFileName) : generatedFileName,
|
||||
format: format,
|
||||
name: name,
|
||||
extend: extend,
|
||||
outro: outro,
|
||||
plugins: minified ? [terser()] : [],
|
||||
indent: ' ', // indent with 4 spaces
|
||||
};
|
||||
}
|
||||
|
||||
// rollup.config.js
|
||||
export default {
|
||||
input: "src/index.ts",
|
||||
output: [
|
||||
|
||||
/**
|
||||
* Read about module formats:
|
||||
* https://auth0.com/blog/javascript-module-systems-showdown/
|
||||
* https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
|
||||
*/
|
||||
|
||||
getConfigForFormat('esm', pkg.module),
|
||||
getConfigForFormat('esm', pkg.module, true),
|
||||
getConfigForFormat('cjs', pkg.main),
|
||||
getConfigForFormat('cjs', pkg.main, true),
|
||||
getConfigForFormat('iife', pkg.browser),
|
||||
getConfigForFormat('iife', pkg.browser, true),
|
||||
],
|
||||
plugins: [
|
||||
typescript({
|
||||
useTsconfigDeclarationDir: true
|
||||
}),
|
||||
]
|
||||
input: "dist/owl/index.js",
|
||||
output: {
|
||||
file: "dist/owl.js",
|
||||
format: "iife",
|
||||
name: "owl",
|
||||
extend: true,
|
||||
outro: `exports.__info__.version = '${version}';\nexports.__info__.date = '${new Date().toISOString()}';\nexports.__info__.hash = '${git.short()}';\nexports.__info__.url = 'https://github.com/odoo/owl';`
|
||||
}
|
||||
};
|
||||
|
||||
@@ -433,8 +433,8 @@ export class Component<Props extends {} = any, T extends Env = Env> {
|
||||
* up to the parent DOM nodes. Thus, it must be called between mounted() and
|
||||
* willUnmount().
|
||||
*/
|
||||
trigger<T = any>(eventType: string, payload?: T) {
|
||||
this.__trigger<T>(this, eventType, payload);
|
||||
trigger(eventType: string, payload?: any) {
|
||||
this.__trigger(this, eventType, payload);
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
@@ -512,9 +512,9 @@ export class Component<Props extends {} = any, T extends Env = Env> {
|
||||
* Private trigger method, allows to choose the component which triggered
|
||||
* the event in the first place
|
||||
*/
|
||||
__trigger<T>(component: Component, eventType: string, payload?: T) {
|
||||
__trigger(component: Component, eventType: string, payload?: any) {
|
||||
if (this.el) {
|
||||
const ev = new OwlEvent<T>(component, eventType, {
|
||||
const ev = new OwlEvent(component, eventType, {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
detail: payload,
|
||||
|
||||
@@ -227,9 +227,7 @@ QWeb.addDirective({
|
||||
if (name.startsWith("t-on-")) {
|
||||
events.push([name, value]);
|
||||
} else if (name === "t-transition") {
|
||||
if (QWeb.enableTransitions) {
|
||||
transition = value;
|
||||
}
|
||||
transition = value;
|
||||
} else if (!name.startsWith("t-")) {
|
||||
if (name !== "class" && name !== "style") {
|
||||
// this is a prop!
|
||||
@@ -436,7 +434,6 @@ QWeb.addDirective({
|
||||
isInSubComponent = true;
|
||||
break;
|
||||
}
|
||||
el = el.parentElement;
|
||||
}
|
||||
if (isInSubComponent) {
|
||||
continue;
|
||||
@@ -449,7 +446,7 @@ QWeb.addDirective({
|
||||
slotNode.removeAttribute("t-set-slot");
|
||||
slotNode.parentElement!.removeChild(slotNode);
|
||||
|
||||
const slotFn = qweb._compile(`slot_${key}_template`, { elem: slotNode, hasParent: true });
|
||||
const slotFn = qweb._compile(`slot_${key}_template`, slotNode, ctx);
|
||||
QWeb.slots[`${slotId}_${key}`] = slotFn;
|
||||
}
|
||||
}
|
||||
@@ -458,7 +455,7 @@ QWeb.addDirective({
|
||||
for (let child of Object.values(clone.childNodes)) {
|
||||
t.appendChild(child);
|
||||
}
|
||||
const slotFn = qweb._compile(`slot_default_template`, { elem: t, hasParent: true });
|
||||
const slotFn = qweb._compile(`slot_default_template`, t, ctx);
|
||||
QWeb.slots[`${slotId}_default`] = slotFn;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,6 @@ import { QWeb } from "./qweb/index";
|
||||
|
||||
interface Config {
|
||||
mode: string;
|
||||
enableTransitions: boolean;
|
||||
}
|
||||
|
||||
export const config = {} as Config;
|
||||
@@ -29,12 +28,3 @@ Object.defineProperty(config, "mode", {
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(config, "enableTransitions", {
|
||||
get() {
|
||||
return QWeb.enableTransitions;
|
||||
},
|
||||
set(value: boolean) {
|
||||
QWeb.enableTransitions = value;
|
||||
},
|
||||
});
|
||||
|
||||
+14
-28
@@ -1,4 +1,4 @@
|
||||
import { CompilationContext, INTERP_REGEXP } from "./compilation_context";
|
||||
import { CompilationContext } from "./compilation_context";
|
||||
import { QWeb } from "./qweb";
|
||||
import { htmlToVDOM } from "../vdom/html_to_vdom";
|
||||
import { QWebVar } from "./expression_parser";
|
||||
@@ -224,36 +224,19 @@ QWeb.addDirective({
|
||||
ctx.rootContext.shouldDefineScope = true;
|
||||
ctx.rootContext.shouldDefineUtils = true;
|
||||
const subTemplate = node.getAttribute("t-call")!;
|
||||
const isDynamic = INTERP_REGEXP.test(subTemplate);
|
||||
const nodeTemplate = qweb.templates[subTemplate];
|
||||
if (!isDynamic && !nodeTemplate) {
|
||||
if (!nodeTemplate) {
|
||||
throw new Error(`Cannot find template "${subTemplate}" (t-call)`);
|
||||
}
|
||||
|
||||
// Step 2: compile target template in sub templates
|
||||
// ------------------------------------------------
|
||||
let subIdstr: string;
|
||||
if (isDynamic) {
|
||||
const _id = ctx.generateID();
|
||||
ctx.addLine(`let tname${_id} = ${ctx.interpolate(subTemplate)};`);
|
||||
ctx.addLine(`let tid${_id} = this.subTemplates[tname${_id}];`);
|
||||
ctx.addIf(`!tid${_id}`);
|
||||
ctx.addLine(`tid${_id} = this.constructor.nextId++;`);
|
||||
ctx.addLine(`this.subTemplates[tname${_id}] = tid${_id};`);
|
||||
ctx.addLine(
|
||||
`this.constructor.subTemplates[tid${_id}] = this._compile(tname${_id}, {hasParent: true, defineKey: true});`
|
||||
);
|
||||
ctx.closeIf();
|
||||
subIdstr = `tid${_id}`;
|
||||
} else {
|
||||
let subId = qweb.subTemplates[subTemplate];
|
||||
if (!subId) {
|
||||
subId = QWeb.nextId++;
|
||||
qweb.subTemplates[subTemplate] = subId;
|
||||
const subTemplateFn = qweb._compile(subTemplate, { hasParent: true, defineKey: true });
|
||||
QWeb.subTemplates[subId] = subTemplateFn;
|
||||
}
|
||||
subIdstr = `'${subId}'`;
|
||||
let subId = qweb.subTemplates[subTemplate];
|
||||
if (!subId) {
|
||||
subId = QWeb.nextId++;
|
||||
qweb.subTemplates[subTemplate] = subId;
|
||||
const subTemplateFn = qweb._compile(subTemplate, nodeTemplate.elem, ctx, true);
|
||||
QWeb.subTemplates[subId] = subTemplateFn;
|
||||
}
|
||||
|
||||
// Step 3: compile t-call body if necessary
|
||||
@@ -268,13 +251,16 @@ QWeb.addDirective({
|
||||
for (let attr of ["t-if", "t-else", "t-elif", "t-call"]) {
|
||||
nodeCopy.removeAttribute(attr);
|
||||
}
|
||||
const parentNode = ctx.parentNode;
|
||||
ctx.parentNode = "__0";
|
||||
// this local scope is intended to trap c__0
|
||||
ctx.addLine(`{`);
|
||||
ctx.indent();
|
||||
ctx.addLine("let c__0 = [];");
|
||||
qweb._compileNode(nodeCopy, ctx.subContext("parentNode", "__0"));
|
||||
qweb._compileNode(nodeCopy, ctx);
|
||||
ctx.rootContext.shouldDefineUtils = true;
|
||||
ctx.addLine("scope[utils.zero] = c__0;");
|
||||
ctx.parentNode = parentNode;
|
||||
ctx.dedent();
|
||||
ctx.addLine(`}`);
|
||||
}
|
||||
@@ -286,12 +272,12 @@ QWeb.addDirective({
|
||||
const parentNode = ctx.parentNode ? `c${ctx.parentNode}` : "result";
|
||||
const extra = `Object.assign({}, extra, {parentNode: ${parentNode}, parent: ${parentComponent}, key: ${key}})`;
|
||||
if (ctx.parentNode) {
|
||||
ctx.addLine(`this.constructor.subTemplates[${subIdstr}].call(this, scope, ${extra});`);
|
||||
ctx.addLine(`this.constructor.subTemplates['${subId}'].call(this, scope, ${extra});`);
|
||||
} else {
|
||||
// this is a t-call with no parentnode, we need to extract the result
|
||||
ctx.rootContext.shouldDefineResult = true;
|
||||
ctx.addLine(`result = []`);
|
||||
ctx.addLine(`this.constructor.subTemplates[${subIdstr}].call(this, scope, ${extra});`);
|
||||
ctx.addLine(`this.constructor.subTemplates['${subId}'].call(this, scope, ${extra});`);
|
||||
ctx.addLine(`result = result[0]`);
|
||||
}
|
||||
|
||||
|
||||
@@ -205,9 +205,6 @@ QWeb.addDirective({
|
||||
name: "transition",
|
||||
priority: 96,
|
||||
atNodeCreation({ ctx, value, addNodeHook }) {
|
||||
if (!QWeb.enableTransitions) {
|
||||
return;
|
||||
}
|
||||
ctx.rootContext.shouldDefineUtils = true;
|
||||
let name = value;
|
||||
const hooks = {
|
||||
|
||||
+9
-13
@@ -212,7 +212,6 @@ export class QWeb extends EventBus {
|
||||
h = h;
|
||||
// dev mode enables better error messages or more costly validations
|
||||
static dev: boolean = false;
|
||||
static enableTransitions: boolean = true;
|
||||
|
||||
// slots contains sub templates defined with t-set inside t-component nodes, and
|
||||
// are meant to be used by the t-slot directive.
|
||||
@@ -313,7 +312,7 @@ export class QWeb extends EventBus {
|
||||
const template = {
|
||||
elem,
|
||||
fn: function (this: QWeb, context, extra) {
|
||||
const compiledFunction = this._compile(name);
|
||||
const compiledFunction = this._compile(name, elem);
|
||||
template.fn = compiledFunction;
|
||||
return compiledFunction.call(this, context, extra);
|
||||
},
|
||||
@@ -418,33 +417,30 @@ export class QWeb extends EventBus {
|
||||
|
||||
_compile(
|
||||
name: string,
|
||||
options: {
|
||||
elem?: Element;
|
||||
hasParent?: boolean;
|
||||
defineKey?: boolean;
|
||||
} = {}
|
||||
elem: Element,
|
||||
parentContext?: CompilationContext,
|
||||
defineKey?: boolean
|
||||
): CompiledTemplate {
|
||||
const elem = options.elem || this.templates[name].elem;
|
||||
const isDebug = elem.attributes.hasOwnProperty("t-debug");
|
||||
const ctx = new CompilationContext(name);
|
||||
if (elem.tagName !== "t") {
|
||||
ctx.shouldDefineResult = false;
|
||||
}
|
||||
if (options.hasParent) {
|
||||
ctx.variables = Object.create(null);
|
||||
ctx.parentNode = ctx.generateID();
|
||||
if (parentContext) {
|
||||
ctx.variables = Object.create(parentContext.variables);
|
||||
ctx.parentNode = parentContext.parentNode || ctx.generateID();
|
||||
ctx.allowMultipleRoots = true;
|
||||
ctx.hasParentWidget = true;
|
||||
ctx.shouldDefineResult = false;
|
||||
ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);
|
||||
if (options.defineKey) {
|
||||
if (defineKey) {
|
||||
ctx.addLine(`let key0 = extra.key || "";`);
|
||||
ctx.hasKey0 = true;
|
||||
}
|
||||
}
|
||||
this._compileNode(elem, ctx);
|
||||
|
||||
if (!options.hasParent) {
|
||||
if (!parentContext) {
|
||||
if (ctx.shouldDefineResult) {
|
||||
ctx.addLine(`return result;`);
|
||||
} else {
|
||||
|
||||
@@ -13,9 +13,6 @@ export function htmlToVDOM(html: string): VNode[] {
|
||||
|
||||
function htmlToVNode(node: ChildNode): VNode {
|
||||
if (!(node instanceof Element)) {
|
||||
if (node instanceof Comment) {
|
||||
return h("!", node.textContent);
|
||||
}
|
||||
return { text: node.textContent! } as VNode;
|
||||
}
|
||||
const attrs = {};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Component, Env } from "../src/component/component";
|
||||
import { useRef, useState } from "../src/hooks";
|
||||
import { QWeb } from "../src/qweb/index";
|
||||
import { useState, useRef } from "../src/hooks";
|
||||
import { xml } from "../src/tags";
|
||||
import {
|
||||
makeDeferred,
|
||||
makeTestEnv,
|
||||
makeTestFixture,
|
||||
nextFrame,
|
||||
makeTestEnv,
|
||||
patchNextFrame,
|
||||
renderToDOM,
|
||||
unpatchNextFrame,
|
||||
nextTick,
|
||||
} from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
@@ -420,29 +420,29 @@ describe("animations", () => {
|
||||
|
||||
widget.state.flag = true;
|
||||
|
||||
await nextFrame();
|
||||
await nextTick();
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
|
||||
expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
|
||||
|
||||
widget.state.flag = false;
|
||||
await nextFrame();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__3__">blue</span></div>'
|
||||
);
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
|
||||
|
||||
widget.state.flag = true;
|
||||
await nextFrame();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__3__">blue</span></div>'
|
||||
);
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(2);
|
||||
|
||||
widget.state.flag = false;
|
||||
await nextFrame();
|
||||
await nextTick();
|
||||
widget.state.flag = true;
|
||||
await nextFrame();
|
||||
await nextTick();
|
||||
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(3);
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
|
||||
|
||||
@@ -534,11 +534,11 @@ exports[`other directives with t-component slot setted value (with t-set) not ac
|
||||
w3.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w3.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('p', p6, c6);
|
||||
c1.push(vn6);
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('p', p5, c5);
|
||||
c1.push(vn5);
|
||||
if (scope.iter != null) {
|
||||
c6.push({text: scope.iter});
|
||||
c5.push({text: scope.iter});
|
||||
}
|
||||
return vn1;
|
||||
}"
|
||||
@@ -1253,16 +1253,16 @@ exports[`other directives with t-component t-set can't alter from within callee
|
||||
if (scope.iter != null) {
|
||||
c2.push({text: scope.iter});
|
||||
}
|
||||
let _origScope6 = scope;
|
||||
let _origScope4 = scope;
|
||||
scope = Object.create(scope);
|
||||
scope.__access_mode__ = 'ro';
|
||||
this.constructor.subTemplates['2'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__7__'}));
|
||||
scope = _origScope6;
|
||||
let c8 = [], p8 = {key:8};
|
||||
let vn8 = h('p', p8, c8);
|
||||
c1.push(vn8);
|
||||
this.constructor.subTemplates['2'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__5__'}));
|
||||
scope = _origScope4;
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('p', p6, c6);
|
||||
c1.push(vn6);
|
||||
if (scope.iter != null) {
|
||||
c8.push({text: scope.iter});
|
||||
c6.push({text: scope.iter});
|
||||
}
|
||||
return vn1;
|
||||
}"
|
||||
@@ -1284,7 +1284,7 @@ exports[`other directives with t-component t-set can't alter in t-call body 1`]
|
||||
if (scope.iter != null) {
|
||||
c2.push({text: scope.iter});
|
||||
}
|
||||
let _origScope6 = scope;
|
||||
let _origScope4 = scope;
|
||||
scope = Object.create(scope);
|
||||
scope.__access_mode__ = 'ro';
|
||||
{
|
||||
@@ -1293,14 +1293,14 @@ exports[`other directives with t-component t-set can't alter in t-call body 1`]
|
||||
utils.getScope(scope, 'iter').iter = 'inCall';
|
||||
scope[utils.zero] = c__0;
|
||||
}
|
||||
this.constructor.subTemplates['2'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__7__'}));
|
||||
this.constructor.subTemplates['2'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__5__'}));
|
||||
}
|
||||
scope = _origScope6;
|
||||
let c8 = [], p8 = {key:8};
|
||||
let vn8 = h('p', p8, c8);
|
||||
c1.push(vn8);
|
||||
scope = _origScope4;
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('p', p6, c6);
|
||||
c1.push(vn6);
|
||||
if (scope.iter != null) {
|
||||
c8.push({text: scope.iter});
|
||||
c6.push({text: scope.iter});
|
||||
}
|
||||
return vn1;
|
||||
}"
|
||||
@@ -1455,11 +1455,11 @@ exports[`random stuff/miscellaneous can inject values in tagged templates 1`] =
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
let _origScope5 = scope;
|
||||
let _origScope4 = scope;
|
||||
scope = Object.create(scope);
|
||||
scope.__access_mode__ = 'ro';
|
||||
this.constructor.subTemplates['3'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__6__'}));
|
||||
scope = _origScope5;
|
||||
this.constructor.subTemplates['3'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__5__'}));
|
||||
scope = _origScope4;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
@@ -1574,15 +1574,15 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
|
||||
// Template name: \\"sub\\"
|
||||
let utils = this.constructor.utils;
|
||||
let h = this.h;
|
||||
let c2 = extra.parentNode;
|
||||
let c1 = extra.parentNode;
|
||||
let key0 = extra.key || \\"\\";
|
||||
let c3 = [], p3 = {key:\`\${key0}_3\`,on:{}};
|
||||
let vn3 = h('p', p3, c3);
|
||||
c2.push(vn3);
|
||||
let k4 = \`click__4__\${key0}__\`;
|
||||
extra.handlers[k4] = extra.handlers[k4] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);};
|
||||
p3.on['click'] = extra.handlers[k4];
|
||||
c3.push({text: \`lucas\`});
|
||||
let c2 = [], p2 = {key:\`\${key0}_2\`,on:{}};
|
||||
let vn2 = h('p', p2, c2);
|
||||
c1.push(vn2);
|
||||
let k3 = \`click__3__\${key0}__\`;
|
||||
extra.handlers[k3] = extra.handlers[k3] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);};
|
||||
p2.on['click'] = extra.handlers[k3];
|
||||
c2.push({text: \`lucas\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -1593,14 +1593,14 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c2 = extra.parentNode;
|
||||
let c1 = extra.parentNode;
|
||||
let key0 = extra.key || \\"\\";
|
||||
let c3 = [], p3 = {key:\`\${key0}_3\`,on:{}};
|
||||
let vn3 = h('p', p3, c3);
|
||||
c2.push(vn3);
|
||||
let args4 = [scope['a']];
|
||||
p3.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](...args4, e);};
|
||||
c3.push({text: \`lucas\`});
|
||||
let c2 = [], p2 = {key:\`\${key0}_2\`,on:{}};
|
||||
let vn2 = h('p', p2, c2);
|
||||
c1.push(vn2);
|
||||
let args3 = [scope['a']];
|
||||
p2.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](...args3, e);};
|
||||
c2.push({text: \`lucas\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -1613,32 +1613,32 @@ exports[`t-call parent is set within t-call 1`] = `
|
||||
let parent = extra.parent;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c2 = extra.parentNode;
|
||||
let c1 = extra.parentNode;
|
||||
let key0 = extra.key || \\"\\";
|
||||
// Component 'Child'
|
||||
let k4 = \`__4__\${key0}__\`;
|
||||
let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
|
||||
let props3 = {};
|
||||
if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
|
||||
w3.destroy();
|
||||
w3 = false;
|
||||
let k3 = \`__3__\${key0}__\`;
|
||||
let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w3) {
|
||||
w3.__updateProps(props3, extra.fiber, undefined);
|
||||
let pvnode = w3.__owl__.pvnode;
|
||||
c2.push(pvnode);
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined);
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey3 = \`Child\`;
|
||||
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| scope['Child'];
|
||||
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
|
||||
w3 = new W3(parent, props3);
|
||||
parent.__owl__.cmap[k4] = w3.__owl__.id;
|
||||
let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}});
|
||||
c2.push(pvnode);
|
||||
w3.__owl__.pvnode = pvnode;
|
||||
let componentKey2 = \`Child\`;
|
||||
let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap[k3] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w3.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
}"
|
||||
`;
|
||||
|
||||
|
||||
@@ -44,23 +44,23 @@ exports[`t-slot directive can define and call slots 2`] = `
|
||||
) {
|
||||
// Template name: \\"Dialog\\"
|
||||
let h = this.h;
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('div', p6, c6);
|
||||
let c7 = [], p7 = {key:7};
|
||||
let vn7 = h('div', p7, c7);
|
||||
c6.push(vn7);
|
||||
const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
|
||||
if (slot8) {
|
||||
slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
|
||||
}
|
||||
let c9 = [], p9 = {key:9};
|
||||
let vn9 = h('div', p9, c9);
|
||||
let c10 = [], p10 = {key:10};
|
||||
let vn10 = h('div', p10, c10);
|
||||
c9.push(vn10);
|
||||
const slot11 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
|
||||
if (slot11) {
|
||||
slot11.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c10, parent: extra.parent || context}));
|
||||
c6.push(vn9);
|
||||
const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
|
||||
if (slot10) {
|
||||
slot10.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context}));
|
||||
}
|
||||
let c12 = [], p12 = {key:12};
|
||||
let vn12 = h('div', p12, c12);
|
||||
c9.push(vn12);
|
||||
const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
|
||||
if (slot13) {
|
||||
slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context}));
|
||||
}
|
||||
return vn9;
|
||||
return vn6;
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -69,11 +69,11 @@ exports[`t-slot directive can define and call slots 3`] = `
|
||||
) {
|
||||
// Template name: \\"slot_header_template\\"
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`header\`});
|
||||
let c1 = extra.parentNode;
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
c1.push(vn4);
|
||||
c4.push({text: \`header\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -82,11 +82,11 @@ exports[`t-slot directive can define and call slots 4`] = `
|
||||
) {
|
||||
// Template name: \\"slot_footer_template\\"
|
||||
let h = this.h;
|
||||
let c6 = extra.parentNode;
|
||||
let c7 = [], p7 = {key:7};
|
||||
let vn7 = h('span', p7, c7);
|
||||
c6.push(vn7);
|
||||
c7.push({text: \`footer\`});
|
||||
let c1 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c1.push(vn5);
|
||||
c5.push({text: \`footer\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -134,23 +134,23 @@ exports[`t-slot directive can define and call slots using old t-set keyword 2`]
|
||||
) {
|
||||
// Template name: \\"__template__1\\"
|
||||
let h = this.h;
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('div', p6, c6);
|
||||
let c7 = [], p7 = {key:7};
|
||||
let vn7 = h('div', p7, c7);
|
||||
c6.push(vn7);
|
||||
const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
|
||||
if (slot8) {
|
||||
slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
|
||||
}
|
||||
let c9 = [], p9 = {key:9};
|
||||
let vn9 = h('div', p9, c9);
|
||||
let c10 = [], p10 = {key:10};
|
||||
let vn10 = h('div', p10, c10);
|
||||
c9.push(vn10);
|
||||
const slot11 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
|
||||
if (slot11) {
|
||||
slot11.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c10, parent: extra.parent || context}));
|
||||
c6.push(vn9);
|
||||
const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
|
||||
if (slot10) {
|
||||
slot10.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context}));
|
||||
}
|
||||
let c12 = [], p12 = {key:12};
|
||||
let vn12 = h('div', p12, c12);
|
||||
c9.push(vn12);
|
||||
const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
|
||||
if (slot13) {
|
||||
slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context}));
|
||||
}
|
||||
return vn9;
|
||||
return vn6;
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -159,11 +159,11 @@ exports[`t-slot directive can define and call slots using old t-set keyword 3`]
|
||||
) {
|
||||
// Template name: \\"slot_header_template\\"
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`header\`});
|
||||
let c1 = extra.parentNode;
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
c1.push(vn4);
|
||||
c4.push({text: \`header\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -172,11 +172,11 @@ exports[`t-slot directive can define and call slots using old t-set keyword 4`]
|
||||
) {
|
||||
// Template name: \\"slot_footer_template\\"
|
||||
let h = this.h;
|
||||
let c6 = extra.parentNode;
|
||||
let c7 = [], p7 = {key:7};
|
||||
let vn7 = h('span', p7, c7);
|
||||
c6.push(vn7);
|
||||
c7.push({text: \`footer\`});
|
||||
let c1 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c1.push(vn5);
|
||||
c5.push({text: \`footer\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -185,11 +185,11 @@ exports[`t-slot directive content is the default slot 1`] = `
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`sts rocks\`});
|
||||
let c1 = extra.parentNode;
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
c1.push(vn4);
|
||||
c4.push({text: \`sts rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -215,8 +215,8 @@ exports[`t-slot directive default slot work with text nodes 1`] = `
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
c4.push({text: \`sts rocks\`});
|
||||
let c1 = extra.parentNode;
|
||||
c1.push({text: \`sts rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -225,15 +225,15 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c1 = extra.parentNode;
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
c1.push(vn4);
|
||||
c4.push({text: \`sts\`});
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`sts\`});
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('span', p6, c6);
|
||||
c4.push(vn6);
|
||||
c6.push({text: \`rocks\`});
|
||||
c1.push(vn5);
|
||||
c5.push({text: \`rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -242,15 +242,15 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
|
||||
) {
|
||||
// Template name: \\"slot_content_template\\"
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c1 = extra.parentNode;
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
c1.push(vn4);
|
||||
c4.push({text: \`sts\`});
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`sts\`});
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('span', p6, c6);
|
||||
c4.push(vn6);
|
||||
c6.push({text: \`rocks\`});
|
||||
c1.push(vn5);
|
||||
c5.push({text: \`rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -278,22 +278,22 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
|
||||
let utils = this.constructor.utils;
|
||||
context.__owl__.refs = context.__owl__.refs || {};
|
||||
let h = this.h;
|
||||
let c8 = extra.parentNode;
|
||||
let c9 = [], p9 = {key:9,on:{}};
|
||||
let vn9 = h('button', p9, c9);
|
||||
c8.push(vn9);
|
||||
extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
|
||||
p9.on['click'] = extra.handlers['click__10__'];
|
||||
const ref11 = \`myButton\`;
|
||||
p9.hook = {
|
||||
let c1 = extra.parentNode;
|
||||
let c8 = [], p8 = {key:8,on:{}};
|
||||
let vn8 = h('button', p8, c8);
|
||||
c1.push(vn8);
|
||||
extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
|
||||
p8.on['click'] = extra.handlers['click__9__'];
|
||||
const ref10 = \`myButton\`;
|
||||
p8.hook = {
|
||||
create: (_, n) => {
|
||||
context.__owl__.refs[ref11] = n.elm;
|
||||
context.__owl__.refs[ref10] = n.elm;
|
||||
},
|
||||
destroy: () => {
|
||||
delete context.__owl__.refs[ref11];
|
||||
delete context.__owl__.refs[ref10];
|
||||
},
|
||||
};
|
||||
c9.push({text: \`do something\`});
|
||||
c8.push({text: \`do something\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -303,13 +303,13 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
|
||||
// Template name: \\"slot_footer_template\\"
|
||||
let utils = this.constructor.utils;
|
||||
let h = this.h;
|
||||
let c8 = extra.parentNode;
|
||||
let c9 = [], p9 = {key:9,on:{}};
|
||||
let vn9 = h('button', p9, c9);
|
||||
c8.push(vn9);
|
||||
extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
|
||||
p9.on['click'] = extra.handlers['click__10__'];
|
||||
c9.push({text: \`do something\`});
|
||||
let c1 = extra.parentNode;
|
||||
let c8 = [], p8 = {key:8,on:{}};
|
||||
let vn8 = h('button', p8, c8);
|
||||
c1.push(vn8);
|
||||
extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
|
||||
p8.on['click'] = extra.handlers['click__9__'];
|
||||
c8.push({text: \`do something\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -319,14 +319,14 @@ exports[`t-slot directive slots are rendered with proper context, part 2 1`] = `
|
||||
// Template name: \\"Link\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _12 = scope['props'].to;
|
||||
let c13 = [], p13 = {key:13,attrs:{href: _12}};
|
||||
let vn13 = h('a', p13, c13);
|
||||
const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot14) {
|
||||
slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context}));
|
||||
let _11 = scope['props'].to;
|
||||
let c12 = [], p12 = {key:12,attrs:{href: _11}};
|
||||
let vn12 = h('a', p12, c12);
|
||||
const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot13) {
|
||||
slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context}));
|
||||
}
|
||||
return vn13;
|
||||
return vn12;
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -401,11 +401,11 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c10 = extra.parentNode;
|
||||
c10.push({text: \`User \`});
|
||||
let _11 = scope['user'].name;
|
||||
if (_11 != null) {
|
||||
c10.push({text: _11});
|
||||
let c7 = extra.parentNode;
|
||||
c7.push({text: \`User \`});
|
||||
let _10 = scope['user'].name;
|
||||
if (_10 != null) {
|
||||
c7.push({text: _10});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -416,14 +416,14 @@ exports[`t-slot directive slots are rendered with proper context, part 3 1`] = `
|
||||
// Template name: \\"Link\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _12 = scope['props'].to;
|
||||
let c13 = [], p13 = {key:13,attrs:{href: _12}};
|
||||
let vn13 = h('a', p13, c13);
|
||||
const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot14) {
|
||||
slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context}));
|
||||
let _10 = scope['props'].to;
|
||||
let c11 = [], p11 = {key:11,attrs:{href: _10}};
|
||||
let vn11 = h('a', p11, c11);
|
||||
const slot12 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot12) {
|
||||
slot12.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c11, parent: extra.parent || context}));
|
||||
}
|
||||
return vn13;
|
||||
return vn11;
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -499,10 +499,9 @@ exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c10 = extra.parentNode;
|
||||
let _11 = scope['userdescr'];
|
||||
if (_11 != null) {
|
||||
c10.push({text: _11});
|
||||
let c7 = extra.parentNode;
|
||||
if (scope.userdescr != null) {
|
||||
c7.push({text: scope.userdescr});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -553,10 +552,9 @@ exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let _5 = scope['userdescr'];
|
||||
if (_5 != null) {
|
||||
c4.push({text: _5});
|
||||
let c1 = extra.parentNode;
|
||||
if (scope.userdescr != null) {
|
||||
c1.push({text: scope.userdescr});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -566,13 +564,13 @@ exports[`t-slot directive t-set t-value in a slot 1`] = `
|
||||
) {
|
||||
// Template name: \\"__template__1\\"
|
||||
let h = this.h;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot6) {
|
||||
slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c5, parent: extra.parent || context}));
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot5) {
|
||||
slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
|
||||
}
|
||||
return vn5;
|
||||
return vn4;
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -583,12 +581,12 @@ exports[`t-slot directive template can just return a slot 1`] = `
|
||||
let utils = this.constructor.utils;
|
||||
let result;
|
||||
let h = this.h;
|
||||
const slot7 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot7) {
|
||||
let children8= []
|
||||
const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot6) {
|
||||
let children7= []
|
||||
result = {}
|
||||
slot7.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children8, parent: extra.parent || context}));
|
||||
utils.defineProxy(result, children8[0]);
|
||||
slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children7, parent: extra.parent || context}));
|
||||
utils.defineProxy(result, children7[0]);
|
||||
}
|
||||
return result;
|
||||
}"
|
||||
|
||||
@@ -1052,37 +1052,4 @@ describe("t-slot directive", () => {
|
||||
"<div><child><p>Ablip</p>default2<child>default1<p>Bblip</p></child></child></div>"
|
||||
);
|
||||
});
|
||||
|
||||
test("named slot inside slot, part 3", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-slot="brol"/>
|
||||
<t t-slot="default"/>
|
||||
</div>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child>
|
||||
<t t-set-slot="brol">
|
||||
<p>A<t t-esc="value"/></p>
|
||||
</t>
|
||||
<Child>
|
||||
<t>
|
||||
<t t-set-slot="brol">
|
||||
<p>B<t t-esc="value"/></p>
|
||||
</t>
|
||||
</t>
|
||||
</Child>
|
||||
</Child>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
value = "blip";
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><div><p>Ablip</p><div><p>Bblip</p></div></div></div>");
|
||||
});
|
||||
});
|
||||
|
||||
+3
-8
@@ -37,13 +37,8 @@ export function nextMicroTick(): Promise<void> {
|
||||
}
|
||||
|
||||
export async function nextTick(): Promise<void> {
|
||||
await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
|
||||
}
|
||||
|
||||
export async function nextFrame(): Promise<void> {
|
||||
await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
|
||||
await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
|
||||
}
|
||||
|
||||
export function makeTestFixture() {
|
||||
@@ -132,7 +127,7 @@ export function renderToString(
|
||||
// is useful for animations tests, as we hook before repaints to trigger
|
||||
// animations (thanks to requestAnimationFrame). Patching nextFrame allows to
|
||||
// simulate calls to this hook. One must not forget to unpatch afterwards.
|
||||
let _nextFrame = QWeb.utils.nextFrame;
|
||||
let nextFrame = QWeb.utils.nextFrame;
|
||||
export function patchNextFrame(f: Function) {
|
||||
QWeb.utils.nextFrame = (cb: () => void) => {
|
||||
setTimeout(() => f(cb));
|
||||
@@ -140,7 +135,7 @@ export function patchNextFrame(f: Function) {
|
||||
}
|
||||
|
||||
export function unpatchNextFrame() {
|
||||
QWeb.utils.nextFrame = _nextFrame;
|
||||
QWeb.utils.nextFrame = nextFrame;
|
||||
}
|
||||
|
||||
export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, value: string) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -238,13 +238,6 @@ describe("t-raw", () => {
|
||||
"<span><span>hello</span><ok>world</ok></span>"
|
||||
);
|
||||
});
|
||||
|
||||
test("t-raw with comment", () => {
|
||||
qweb.addTemplate("test", `<span><t t-raw="var"/></span>`);
|
||||
expect(renderToString(qweb, "test", { var: "<p>text<!-- top secret --></p>" })).toBe(
|
||||
"<span><p>text<!-- top secret --></p></span>"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("t-set", () => {
|
||||
@@ -1095,26 +1088,6 @@ describe("t-call (template calling", () => {
|
||||
const expected = "<div><p>yip yip</p></div>";
|
||||
expect(renderToString(qweb, "main")).toBe(expected);
|
||||
});
|
||||
|
||||
test("t-call with body content as root of a template", () => {
|
||||
qweb.addTemplate("antony", `<foo><t t-raw="0"/></foo>`);
|
||||
qweb.addTemplate("main", `<t><t t-call="antony"><p>antony</p></t></t>`);
|
||||
const expected = "<foo><p>antony</p></foo>";
|
||||
expect(renderToString(qweb, "main")).toBe(expected);
|
||||
});
|
||||
|
||||
test("dynamic t-call", () => {
|
||||
qweb.addTemplate("foo", `<foo><t t-esc="val"/></foo>`);
|
||||
qweb.addTemplate("bar", `<bar><t t-esc="val"/></bar>`);
|
||||
qweb.addTemplate("main", `<div><t t-call="{{template}}"/></div>`);
|
||||
const expected = "<div><foo>foo</foo></div>";
|
||||
expect(renderToString(qweb, "main", { template: "foo", val: "foo" })).toBe(expected);
|
||||
const expected2 = "<div><bar>quux</bar></div>";
|
||||
expect(renderToString(qweb, "main", { template: "bar", val: "quux" })).toBe(expected2);
|
||||
// duplicate call because there was a specific bug with some id that was
|
||||
// incremented each rendering.
|
||||
expect(renderToString(qweb, "main", { template: "bar", val: "quux" })).toBe(expected2);
|
||||
});
|
||||
});
|
||||
|
||||
describe("foreach", () => {
|
||||
|
||||
@@ -7,16 +7,16 @@ exports[`Link component can render simple cases 1`] = `
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _5 = utils.toObj({'router-link-active':scope['isActive']});
|
||||
let _6 = scope['href'];
|
||||
let c7 = [], p7 = {key:7,attrs:{href: _6},class:_5,on:{}};
|
||||
let vn7 = h('a', p7, c7);
|
||||
extra.handlers['click__8__'] = extra.handlers['click__8__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['navigate'](e);};
|
||||
p7.on['click'] = extra.handlers['click__8__'];
|
||||
const slot9 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot9) {
|
||||
slot9.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
|
||||
let _4 = utils.toObj({'router-link-active':scope['isActive']});
|
||||
let _5 = scope['href'];
|
||||
let c6 = [], p6 = {key:6,attrs:{href: _5},class:_4,on:{}};
|
||||
let vn6 = h('a', p6, c6);
|
||||
extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['navigate'](e);};
|
||||
p6.on['click'] = extra.handlers['click__7__'];
|
||||
const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot8) {
|
||||
slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c6, parent: extra.parent || context}));
|
||||
}
|
||||
return vn7;
|
||||
return vn6;
|
||||
}"
|
||||
`;
|
||||
|
||||
+255
-284
@@ -1,4 +1,4 @@
|
||||
import { SAMPLES } from "./samples.js";
|
||||
import { SAMPLES as samples } from "./samples.js" ;
|
||||
const { useState, useRef, onMounted, onWillUnmount } = owl.hooks;
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers, utils
|
||||
@@ -6,18 +6,18 @@ const { useState, useRef, onMounted, onWillUnmount } = owl.hooks;
|
||||
let owlJS;
|
||||
|
||||
async function owlSourceCode() {
|
||||
if (owlJS) {
|
||||
if (owlJS) {
|
||||
return owlJS;
|
||||
}
|
||||
const result = await fetch("../owl.js");
|
||||
owlJS = await result.text();
|
||||
return owlJS;
|
||||
}
|
||||
const result = await fetch("../owl.js");
|
||||
owlJS = await result.text();
|
||||
return owlJS;
|
||||
}
|
||||
|
||||
const MODES = {
|
||||
js: "ace/mode/javascript",
|
||||
css: "ace/mode/css",
|
||||
xml: "ace/mode/xml"
|
||||
js: "ace/mode/javascript",
|
||||
css: "ace/mode/css",
|
||||
xml: "ace/mode/xml"
|
||||
};
|
||||
|
||||
const DEFAULT_XML = `<templates>
|
||||
@@ -71,22 +71,23 @@ if __name__ == "__main__":
|
||||
* Make an iframe, with all the js, css and xml properly injected.
|
||||
*/
|
||||
function makeCodeIframe(js, css, xml) {
|
||||
const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");
|
||||
const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");
|
||||
|
||||
|
||||
// create iframe
|
||||
const iframe = document.createElement("iframe");
|
||||
// create iframe
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.className += "h-full w-full";
|
||||
|
||||
iframe.onload = () => {
|
||||
const doc = iframe.contentDocument;
|
||||
// inject js
|
||||
const owlScript = doc.createElement("script");
|
||||
owlScript.type = "text/javascript";
|
||||
owlScript.src = "../owl.js";
|
||||
owlScript.addEventListener("load", () => {
|
||||
const script = doc.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
const content = `
|
||||
iframe.onload = () => {
|
||||
const doc = iframe.contentDocument;
|
||||
// inject js
|
||||
const owlScript = doc.createElement("script");
|
||||
owlScript.type = "text/javascript";
|
||||
owlScript.src = "../owl.js";
|
||||
owlScript.addEventListener("load", () => {
|
||||
const script = doc.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
const content = `
|
||||
{
|
||||
owl.config.mode = 'dev';
|
||||
let templates = \`${sanitizedXML}\`;
|
||||
@@ -94,32 +95,32 @@ function makeCodeIframe(js, css, xml) {
|
||||
owl.Component.env = { qweb };
|
||||
}
|
||||
${js}`;
|
||||
script.innerHTML = content;
|
||||
doc.body.appendChild(script);
|
||||
});
|
||||
doc.head.appendChild(owlScript);
|
||||
script.innerHTML = content;
|
||||
doc.body.appendChild(script);
|
||||
});
|
||||
doc.head.appendChild(owlScript);
|
||||
|
||||
// inject css
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = css;
|
||||
doc.head.appendChild(style);
|
||||
};
|
||||
return iframe;
|
||||
// inject css
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = css;
|
||||
doc.head.appendChild(style);
|
||||
};
|
||||
return iframe;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make a zip file containing a functioning application
|
||||
*/
|
||||
async function makeApp(js, css, xml) {
|
||||
await owl.utils.loadJS("libs/jszip.min.js");
|
||||
await owl.utils.loadJS("libs/jszip.min.js");
|
||||
|
||||
const zip = new JSZip();
|
||||
const processedJS = js
|
||||
.split("\n")
|
||||
.map(l => (l === "" ? "" : " " + l))
|
||||
.join("\n");
|
||||
const zip = new JSZip();
|
||||
const processedJS = js
|
||||
.split("\n")
|
||||
.map(l => (l === "" ? "" : " " + l))
|
||||
.join("\n");
|
||||
|
||||
const JS = `
|
||||
const JS = `
|
||||
/**
|
||||
* This is the javascript code defined in the playground.
|
||||
* In a larger application, this code should probably be moved in different
|
||||
@@ -150,278 +151,248 @@ async function start() {
|
||||
start();
|
||||
`;
|
||||
|
||||
zip.file("app.js", JS);
|
||||
zip.file("app.css", css);
|
||||
zip.file("app.py", APP_PY);
|
||||
zip.file("app.xml", xml);
|
||||
zip.file("index.html", DEFAULT_HTML);
|
||||
zip.file("owl.js", owlSourceCode());
|
||||
return zip.generateAsync({ type: "blob" });
|
||||
zip.file("app.js", JS);
|
||||
zip.file("app.css", css);
|
||||
zip.file("app.py", APP_PY);
|
||||
zip.file("app.xml", xml);
|
||||
zip.file("index.html", DEFAULT_HTML);
|
||||
zip.file("owl.js", owlSourceCode());
|
||||
return zip.generateAsync({ type: "blob" });
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// SAMPLES
|
||||
//------------------------------------------------------------------------------
|
||||
function loadSamples() {
|
||||
let result = SAMPLES.slice();
|
||||
const localSample = localStorage.getItem("owl-playground-local-sample");
|
||||
if (localSample) {
|
||||
const { js, css, xml } = JSON.parse(localSample);
|
||||
result.unshift({
|
||||
description: "Local Storage Code",
|
||||
code: js,
|
||||
xml,
|
||||
css
|
||||
});
|
||||
}
|
||||
return result;
|
||||
let result = samples.slice();
|
||||
const localSample = localStorage.getItem("owl-playground-local-sample");
|
||||
if (localSample) {
|
||||
const { js, css, xml } = JSON.parse(localSample);
|
||||
result.unshift({
|
||||
description: "Local Storage Code",
|
||||
code: js,
|
||||
xml,
|
||||
css
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function saveLocalSample(js, css, xml) {
|
||||
const str = JSON.stringify({ js, css, xml });
|
||||
localStorage.setItem("owl-playground-local-sample", str);
|
||||
const str = JSON.stringify({ js, css, xml });
|
||||
localStorage.setItem("owl-playground-local-sample", str);
|
||||
}
|
||||
|
||||
function deleteLocalSample() {
|
||||
localStorage.removeItem("owl-playground-local-sample");
|
||||
localStorage.removeItem("owl-playground-local-sample");
|
||||
}
|
||||
|
||||
function useSamples() {
|
||||
const samples = loadSamples();
|
||||
const component = owl.Component.current;
|
||||
let interval;
|
||||
|
||||
onMounted(() => {
|
||||
const state = component.state;
|
||||
interval = setInterval(() => {
|
||||
if (component.isDirty) {
|
||||
saveLocalSample(state.js, state.css, state.xml);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
clearInterval(interval);
|
||||
});
|
||||
return samples;
|
||||
}
|
||||
//------------------------------------------------------------------------------
|
||||
// Tabbed editor
|
||||
//------------------------------------------------------------------------------
|
||||
class TabbedEditor extends owl.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.state = useState({
|
||||
currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
|
||||
});
|
||||
this.setTab = owl.utils.debounce(this.setTab, 250, true);
|
||||
|
||||
this.sessions = {};
|
||||
this._setupSessions(props);
|
||||
this.editorNode = useRef("editor");
|
||||
this._updateCode = this._updateCode.bind(this);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.editor = this.editor || ace.edit(this.editorNode.el);
|
||||
|
||||
this.editor.setValue(this.props[this.state.currentTab], -1);
|
||||
this.editor.setFontSize("12px");
|
||||
this.editor.setTheme("ace/theme/monokai");
|
||||
this.editor.setSession(this.sessions[this.state.currentTab]);
|
||||
const tabSize = this.state.currentTab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.editor.on("blur", this._updateCode);
|
||||
this.interval = setInterval(this._updateCode, 3000);
|
||||
}
|
||||
|
||||
willUnmount() {
|
||||
clearInterval(this.interval);
|
||||
this.editor.off("blur", this._updateCode);
|
||||
}
|
||||
willUpdateProps(nextProps) {
|
||||
this._setupSessions(nextProps);
|
||||
}
|
||||
|
||||
patched() {
|
||||
const session = this.sessions[this.state.currentTab];
|
||||
let content = this.props[this.state.currentTab];
|
||||
if (content === false) {
|
||||
const tab = this.props.js !== false ? "js" : this.props.xml ? "xml" : "css";
|
||||
content = this.props[tab];
|
||||
this.state.currentTab = tab;
|
||||
}
|
||||
if (this.editor.getValue() !== content) {
|
||||
session.setValue(content, -1);
|
||||
this.editor.setSession(session);
|
||||
this.editor.resize();
|
||||
}
|
||||
}
|
||||
|
||||
setTab(tab) {
|
||||
if (this.state.currentTab !== tab) {
|
||||
this.state.currentTab = tab;
|
||||
const session = this.sessions[this.state.currentTab];
|
||||
session.doc.setValue(this.props[tab], -1);
|
||||
this.editor.setSession(session);
|
||||
}
|
||||
}
|
||||
|
||||
onMouseDown(ev) {
|
||||
if (ev.target.tagName === "DIV") {
|
||||
let y = ev.clientY;
|
||||
const resizer = ev => {
|
||||
const delta = ev.clientY - y;
|
||||
y = ev.clientY;
|
||||
this.trigger("updatePanelHeight", { delta });
|
||||
};
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_setupSessions(props) {
|
||||
for (let tab of ["js", "xml", "css"]) {
|
||||
if (props[tab] !== false && !this.sessions[tab]) {
|
||||
this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
|
||||
this.sessions[tab].setOption("useWorker", false);
|
||||
const tabSize = tab === "xml" ? 2 : 4;
|
||||
this.sessions[tab].setOption("tabSize", tabSize);
|
||||
this.sessions[tab].setUndoManager(new ace.UndoManager());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_updateCode() {
|
||||
const editorValue = this.editor.getValue();
|
||||
const propsValue = this.props[this.state.currentTab];
|
||||
if (editorValue !== propsValue) {
|
||||
this.trigger("updateCode", {
|
||||
type: this.state.currentTab,
|
||||
value: editorValue
|
||||
});
|
||||
}
|
||||
}
|
||||
return loadSamples();
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// MAIN APP
|
||||
//------------------------------------------------------------------------------
|
||||
class App extends owl.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.version = owl.__info__.version;
|
||||
this.SAMPLES = useSamples();
|
||||
this.isDirty = false;
|
||||
|
||||
this.state = useState({
|
||||
js: this.SAMPLES[0].code,
|
||||
css: this.SAMPLES[0].css || "",
|
||||
xml: this.SAMPLES[0].xml || DEFAULT_XML,
|
||||
displayWelcome: true,
|
||||
splitLayout: true,
|
||||
leftPaneWidth: Math.ceil(window.innerWidth / 2),
|
||||
topPanelHeight: null
|
||||
});
|
||||
|
||||
this.toggleLayout = owl.utils.debounce(this.toggleLayout, 250, true);
|
||||
this.runCode = owl.utils.debounce(this.runCode, 250, true);
|
||||
this.downloadCode = owl.utils.debounce(this.downloadCode, 250, true);
|
||||
this.content = useRef("content");
|
||||
}
|
||||
|
||||
runCode() {
|
||||
this.content.el.innerHTML = "";
|
||||
this.state.displayWelcome = false;
|
||||
|
||||
const { js, css, xml } = this.state;
|
||||
const subiframe = makeCodeIframe(js, css, xml);
|
||||
this.content.el.appendChild(subiframe);
|
||||
}
|
||||
|
||||
setSample(ev) {
|
||||
const sample = this.SAMPLES.find(s => s.description === ev.target.value);
|
||||
this.state.js = sample.code;
|
||||
this.state.css = sample.css || "";
|
||||
this.state.xml = sample.xml || DEFAULT_XML;
|
||||
deleteLocalSample();
|
||||
this.isDirty = false;
|
||||
}
|
||||
|
||||
get leftPaneStyle() {
|
||||
return `width:${this.state.leftPaneWidth}px`;
|
||||
}
|
||||
|
||||
get rightPaneStyle() {
|
||||
return `width:${window.innerWidth - 6 - this.state.leftPaneWidth}px`;
|
||||
}
|
||||
|
||||
get topEditorStyle() {
|
||||
return `flex: 0 0 ${this.state.topPanelHeight}px`;
|
||||
}
|
||||
|
||||
onMouseDown() {
|
||||
const resizer = ev => {
|
||||
this.state.leftPaneWidth = ev.clientX;
|
||||
};
|
||||
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
for (let iframe of document.getElementsByTagName("iframe")) {
|
||||
iframe.classList.add("disabled");
|
||||
}
|
||||
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
for (let iframe of document.getElementsByTagName("iframe")) {
|
||||
iframe.classList.remove("disabled");
|
||||
}
|
||||
});
|
||||
}
|
||||
updateCode(ev) {
|
||||
if (this.state[ev.detail.type] !== ev.detail.value) {
|
||||
this.state[ev.detail.type] = ev.detail.value;
|
||||
this.isDirty = true;
|
||||
}
|
||||
}
|
||||
toggleLayout() {
|
||||
this.state.splitLayout = !this.state.splitLayout;
|
||||
}
|
||||
updatePanelHeight(ev) {
|
||||
if (!ev.detail.delta) {
|
||||
return;
|
||||
}
|
||||
let height = this.state.topPanelHeight;
|
||||
if (!height) {
|
||||
height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
|
||||
}
|
||||
this.state.topPanelHeight = height + ev.detail.delta;
|
||||
}
|
||||
|
||||
async downloadCode() {
|
||||
const { js, css, xml } = this.state;
|
||||
const content = await makeApp(js, css, xml);
|
||||
await owl.utils.loadJS("libs/FileSaver.min.js");
|
||||
saveAs(content, "app.zip");
|
||||
}
|
||||
class Tab extends owl.Component {
|
||||
}
|
||||
App.components = { TabbedEditor };
|
||||
|
||||
class Editor extends owl.Component {
|
||||
|
||||
static props = ['js', 'xml', 'css']
|
||||
|
||||
state = useState({
|
||||
currentExtension: 'js',
|
||||
js: this.props.js,
|
||||
css: this.props.css,
|
||||
xml: this.props.xml,
|
||||
|
||||
})
|
||||
|
||||
jsModel = null;
|
||||
cssModel = null;
|
||||
xmlModel = null;
|
||||
|
||||
editor = null;
|
||||
|
||||
willUpdateProps(nextProps) {
|
||||
console.log(nextProps);
|
||||
this.state.js = nextProps.js;
|
||||
this.state.css = nextProps.css;
|
||||
this.state.xml = nextProps.xml;
|
||||
|
||||
this.jsModel = null;
|
||||
this.cssModel = null;
|
||||
this.xmlModel = null;
|
||||
|
||||
this._openFile(this.state.currentExtension, false)
|
||||
}
|
||||
|
||||
_run(ev) {
|
||||
this._saveCodeState();
|
||||
this.trigger('run-project', {
|
||||
js: this.state.js,
|
||||
xml: this.state.xml,
|
||||
css: this.state.css
|
||||
})
|
||||
}
|
||||
|
||||
_openFile(extension, save = true) {
|
||||
if (save) this._saveCodeState();
|
||||
|
||||
this.state.currentExtension = extension;
|
||||
let language = null;
|
||||
let model = null;
|
||||
|
||||
if (extension === 'js') {
|
||||
console.log("here")
|
||||
|
||||
if (this.jsModel) {
|
||||
model = this.jsModel;
|
||||
}
|
||||
|
||||
else {
|
||||
language = 'javascript'
|
||||
}
|
||||
}
|
||||
|
||||
if (extension === 'xml') {
|
||||
|
||||
if (this.xmlModel) {
|
||||
model = this.xmlModel;
|
||||
}
|
||||
|
||||
else {
|
||||
language = 'xml'
|
||||
}
|
||||
}
|
||||
|
||||
if (extension === 'css') {
|
||||
|
||||
if (this.cssModel) {
|
||||
model = this.cssModel;
|
||||
}
|
||||
|
||||
else {
|
||||
language = 'css'
|
||||
}
|
||||
}
|
||||
|
||||
console.log(model)
|
||||
|
||||
if (!model) {
|
||||
model = monaco.editor.createModel(
|
||||
this.state[this.state.currentExtension],
|
||||
language,
|
||||
null
|
||||
)
|
||||
|
||||
if (extension === 'js') {
|
||||
this.jsModel = model;
|
||||
}
|
||||
|
||||
if (extension === 'xml') {
|
||||
this.xmlModel = model;
|
||||
}
|
||||
|
||||
if (extension === 'css') {
|
||||
this.cssModel = model;
|
||||
}
|
||||
}
|
||||
|
||||
this.editor.setModel(model)
|
||||
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: this.state[this.state.currentExtension],
|
||||
language: 'javascript',
|
||||
automaticLayout: true,
|
||||
minimap: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_saveCodeState() {
|
||||
this.state[this.state.currentExtension] = this.editor.getValue();
|
||||
}
|
||||
|
||||
_openCSS(ev) {
|
||||
this._openFile('css')
|
||||
}
|
||||
|
||||
_openXML(ev) {
|
||||
this._openFile('xml')
|
||||
}
|
||||
|
||||
_openJS(ev) {
|
||||
this._openFile('js')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Editor.components = { Tab }
|
||||
|
||||
|
||||
class App extends owl.Component {
|
||||
|
||||
samples = [];
|
||||
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.version = owl.__info__.version;
|
||||
this.samples = useSamples();
|
||||
|
||||
this.state = useState({
|
||||
js: this.samples[0].code,
|
||||
css: this.samples[0].css || "",
|
||||
xml: this.samples[0].xml || DEFAULT_XML,
|
||||
});
|
||||
|
||||
this.runCode = owl.utils.debounce(this.runCode, 250, true);
|
||||
this.downloadCode = owl.utils.debounce(this.downloadCode, 250, true);
|
||||
this.content = useRef("iframe-container");
|
||||
}
|
||||
|
||||
|
||||
_run(ev) {
|
||||
this.content.el.innerHTML = "";
|
||||
const { js, css, xml } = ev.detail;
|
||||
const subiframe = makeCodeIframe(js, css, xml);
|
||||
this.content.el.appendChild(subiframe);
|
||||
}
|
||||
|
||||
_setSample(ev) {
|
||||
const sample = this.samples.find(s => s.description === ev.target.value);
|
||||
this.state.js = sample.code;
|
||||
this.state.css = sample.css || "";
|
||||
this.state.xml = sample.xml || DEFAULT_XML;
|
||||
deleteLocalSample();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
App.components = { Editor }
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application initialization
|
||||
//------------------------------------------------------------------------------
|
||||
async function start() {
|
||||
document.title = `${document.title} (v${owl.__info__.version})`;
|
||||
const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
|
||||
console.info(`This application is using Owl built with the following commit:`, commit);
|
||||
const [templates] = await Promise.all([
|
||||
owl.utils.loadFile("templates.xml"),
|
||||
owl.utils.whenReady()
|
||||
]);
|
||||
const qweb = new owl.QWeb({ templates });
|
||||
owl.Component.env = { qweb };
|
||||
const app = new App();
|
||||
app.mount(document.body);
|
||||
document.title = `${document.title} (v${owl.__info__.version})`;
|
||||
const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
|
||||
console.info(`This application is using Owl built with the following commit:`, commit);
|
||||
const [templates] = await Promise.all([
|
||||
owl.utils.loadFile("templates.xml"),
|
||||
owl.utils.whenReady()
|
||||
]);
|
||||
const qweb = new owl.QWeb({ templates });
|
||||
owl.Component.env = { qweb };
|
||||
const app = new App();
|
||||
app.mount(document.body);
|
||||
}
|
||||
|
||||
start();
|
||||
|
||||
+21
-15
@@ -1,20 +1,26 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OWL Playground</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
data-name="vs/editor/editor.main"
|
||||
href="../../node_modules/monaco-editor/min/vs/editor/editor.main.css"
|
||||
/>
|
||||
<script src="../owl.js"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<link rel="stylesheet" href="playground.css">
|
||||
<script type="module" src="app.js"></script>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="h-screen bg-gray-200">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<script>
|
||||
var require = { paths: { vs: '../../node_modules/monaco-editor/min/vs' } };
|
||||
</script>
|
||||
<script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
|
||||
<script src="../../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,427 @@
|
||||
import { SAMPLES } from "./samples.js";
|
||||
const { useState, useRef, onMounted, onWillUnmount } = owl.hooks;
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers, utils
|
||||
//------------------------------------------------------------------------------
|
||||
let owlJS;
|
||||
|
||||
async function owlSourceCode() {
|
||||
if (owlJS) {
|
||||
return owlJS;
|
||||
}
|
||||
const result = await fetch("../owl.js");
|
||||
owlJS = await result.text();
|
||||
return owlJS;
|
||||
}
|
||||
|
||||
const MODES = {
|
||||
js: "ace/mode/javascript",
|
||||
css: "ace/mode/css",
|
||||
xml: "ace/mode/xml"
|
||||
};
|
||||
|
||||
const DEFAULT_XML = `<templates>
|
||||
</templates>`;
|
||||
|
||||
const DEFAULT_HTML = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OWL App</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="owl.js"></script>
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
const APP_PY = `#!/usr/bin/env python3
|
||||
|
||||
import threading
|
||||
import time
|
||||
|
||||
from http.server import SimpleHTTPRequestHandler, HTTPServer
|
||||
|
||||
def start_server():
|
||||
SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
|
||||
httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
|
||||
httpd.serve_forever()
|
||||
|
||||
url = 'http://127.0.0.1:3600'
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("Owl Application")
|
||||
print("---------------")
|
||||
print("Server running on: {}".format(url))
|
||||
threading.Thread(target=start_server, daemon=True).start()
|
||||
|
||||
while True:
|
||||
try:
|
||||
time.sleep(1)
|
||||
except KeyboardInterrupt:
|
||||
httpd.server_close()
|
||||
quit(0)
|
||||
`;
|
||||
|
||||
/**
|
||||
* Make an iframe, with all the js, css and xml properly injected.
|
||||
*/
|
||||
function makeCodeIframe(js, css, xml) {
|
||||
const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");
|
||||
|
||||
|
||||
// create iframe
|
||||
const iframe = document.createElement("iframe");
|
||||
|
||||
iframe.onload = () => {
|
||||
const doc = iframe.contentDocument;
|
||||
// inject js
|
||||
const owlScript = doc.createElement("script");
|
||||
owlScript.type = "text/javascript";
|
||||
owlScript.src = "../owl.js";
|
||||
owlScript.addEventListener("load", () => {
|
||||
const script = doc.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
const content = `
|
||||
{
|
||||
owl.config.mode = 'dev';
|
||||
let templates = \`${sanitizedXML}\`;
|
||||
const qweb = new owl.QWeb({ templates });
|
||||
owl.Component.env = { qweb };
|
||||
}
|
||||
${js}`;
|
||||
script.innerHTML = content;
|
||||
doc.body.appendChild(script);
|
||||
});
|
||||
doc.head.appendChild(owlScript);
|
||||
|
||||
// inject css
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = css;
|
||||
doc.head.appendChild(style);
|
||||
};
|
||||
return iframe;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make a zip file containing a functioning application
|
||||
*/
|
||||
async function makeApp(js, css, xml) {
|
||||
await owl.utils.loadJS("libs/jszip.min.js");
|
||||
|
||||
const zip = new JSZip();
|
||||
const processedJS = js
|
||||
.split("\n")
|
||||
.map(l => (l === "" ? "" : " " + l))
|
||||
.join("\n");
|
||||
|
||||
const JS = `
|
||||
/**
|
||||
* This is the javascript code defined in the playground.
|
||||
* In a larger application, this code should probably be moved in different
|
||||
* sub files.
|
||||
*/
|
||||
function app() {
|
||||
${processedJS}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialization code
|
||||
* This code load templates, and make sure everything is properly connected.
|
||||
*/
|
||||
async function start() {
|
||||
let templates;
|
||||
try {
|
||||
templates = await owl.utils.loadFile('app.xml');
|
||||
} catch(e) {
|
||||
console.error(\`This app requires a static server. If you have python installed, try 'python app.py'\`);
|
||||
return;
|
||||
}
|
||||
const env = { qweb: new owl.QWeb({templates})};
|
||||
owl.Component.env = env;
|
||||
await owl.utils.whenReady();
|
||||
app();
|
||||
}
|
||||
|
||||
start();
|
||||
`;
|
||||
|
||||
zip.file("app.js", JS);
|
||||
zip.file("app.css", css);
|
||||
zip.file("app.py", APP_PY);
|
||||
zip.file("app.xml", xml);
|
||||
zip.file("index.html", DEFAULT_HTML);
|
||||
zip.file("owl.js", owlSourceCode());
|
||||
return zip.generateAsync({ type: "blob" });
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// SAMPLES
|
||||
//------------------------------------------------------------------------------
|
||||
function loadSamples() {
|
||||
let result = SAMPLES.slice();
|
||||
const localSample = localStorage.getItem("owl-playground-local-sample");
|
||||
if (localSample) {
|
||||
const { js, css, xml } = JSON.parse(localSample);
|
||||
result.unshift({
|
||||
description: "Local Storage Code",
|
||||
code: js,
|
||||
xml,
|
||||
css
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function saveLocalSample(js, css, xml) {
|
||||
const str = JSON.stringify({ js, css, xml });
|
||||
localStorage.setItem("owl-playground-local-sample", str);
|
||||
}
|
||||
|
||||
function deleteLocalSample() {
|
||||
localStorage.removeItem("owl-playground-local-sample");
|
||||
}
|
||||
|
||||
function useSamples() {
|
||||
const samples = loadSamples();
|
||||
const component = owl.Component.current;
|
||||
let interval;
|
||||
|
||||
onMounted(() => {
|
||||
const state = component.state;
|
||||
interval = setInterval(() => {
|
||||
if (component.isDirty) {
|
||||
saveLocalSample(state.js, state.css, state.xml);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
clearInterval(interval);
|
||||
});
|
||||
return samples;
|
||||
}
|
||||
//------------------------------------------------------------------------------
|
||||
// Tabbed editor
|
||||
//------------------------------------------------------------------------------
|
||||
class TabbedEditor extends owl.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.state = useState({
|
||||
currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
|
||||
});
|
||||
this.setTab = owl.utils.debounce(this.setTab, 250, true);
|
||||
|
||||
this.sessions = {};
|
||||
this._setupSessions(props);
|
||||
this.editorNode = useRef("editor");
|
||||
this._updateCode = this._updateCode.bind(this);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.editor = this.editor || ace.edit(this.editorNode.el);
|
||||
|
||||
this.editor.setValue(this.props[this.state.currentTab], -1);
|
||||
this.editor.setFontSize("12px");
|
||||
this.editor.setTheme("ace/theme/monokai");
|
||||
this.editor.setSession(this.sessions[this.state.currentTab]);
|
||||
const tabSize = this.state.currentTab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.editor.on("blur", this._updateCode);
|
||||
this.interval = setInterval(this._updateCode, 3000);
|
||||
}
|
||||
|
||||
willUnmount() {
|
||||
clearInterval(this.interval);
|
||||
this.editor.off("blur", this._updateCode);
|
||||
}
|
||||
willUpdateProps(nextProps) {
|
||||
this._setupSessions(nextProps);
|
||||
}
|
||||
|
||||
patched() {
|
||||
const session = this.sessions[this.state.currentTab];
|
||||
let content = this.props[this.state.currentTab];
|
||||
if (content === false) {
|
||||
const tab = this.props.js !== false ? "js" : this.props.xml ? "xml" : "css";
|
||||
content = this.props[tab];
|
||||
this.state.currentTab = tab;
|
||||
}
|
||||
if (this.editor.getValue() !== content) {
|
||||
session.setValue(content, -1);
|
||||
this.editor.setSession(session);
|
||||
this.editor.resize();
|
||||
}
|
||||
}
|
||||
|
||||
setTab(tab) {
|
||||
if (this.state.currentTab !== tab) {
|
||||
this.state.currentTab = tab;
|
||||
const session = this.sessions[this.state.currentTab];
|
||||
session.doc.setValue(this.props[tab], -1);
|
||||
this.editor.setSession(session);
|
||||
}
|
||||
}
|
||||
|
||||
onMouseDown(ev) {
|
||||
if (ev.target.tagName === "DIV") {
|
||||
let y = ev.clientY;
|
||||
const resizer = ev => {
|
||||
const delta = ev.clientY - y;
|
||||
y = ev.clientY;
|
||||
this.trigger("updatePanelHeight", { delta });
|
||||
};
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_setupSessions(props) {
|
||||
for (let tab of ["js", "xml", "css"]) {
|
||||
if (props[tab] !== false && !this.sessions[tab]) {
|
||||
this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
|
||||
this.sessions[tab].setOption("useWorker", false);
|
||||
const tabSize = tab === "xml" ? 2 : 4;
|
||||
this.sessions[tab].setOption("tabSize", tabSize);
|
||||
this.sessions[tab].setUndoManager(new ace.UndoManager());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_updateCode() {
|
||||
const editorValue = this.editor.getValue();
|
||||
const propsValue = this.props[this.state.currentTab];
|
||||
if (editorValue !== propsValue) {
|
||||
this.trigger("updateCode", {
|
||||
type: this.state.currentTab,
|
||||
value: editorValue
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// MAIN APP
|
||||
//------------------------------------------------------------------------------
|
||||
class App extends owl.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.version = owl.__info__.version;
|
||||
this.SAMPLES = useSamples();
|
||||
this.isDirty = false;
|
||||
|
||||
this.state = useState({
|
||||
js: this.SAMPLES[0].code,
|
||||
css: this.SAMPLES[0].css || "",
|
||||
xml: this.SAMPLES[0].xml || DEFAULT_XML,
|
||||
displayWelcome: true,
|
||||
splitLayout: true,
|
||||
leftPaneWidth: Math.ceil(window.innerWidth / 2),
|
||||
topPanelHeight: null
|
||||
});
|
||||
|
||||
this.toggleLayout = owl.utils.debounce(this.toggleLayout, 250, true);
|
||||
this.runCode = owl.utils.debounce(this.runCode, 250, true);
|
||||
this.downloadCode = owl.utils.debounce(this.downloadCode, 250, true);
|
||||
this.content = useRef("content");
|
||||
}
|
||||
|
||||
runCode() {
|
||||
this.content.el.innerHTML = "";
|
||||
this.state.displayWelcome = false;
|
||||
|
||||
const { js, css, xml } = this.state;
|
||||
const subiframe = makeCodeIframe(js, css, xml);
|
||||
this.content.el.appendChild(subiframe);
|
||||
}
|
||||
|
||||
setSample(ev) {
|
||||
const sample = this.SAMPLES.find(s => s.description === ev.target.value);
|
||||
this.state.js = sample.code;
|
||||
this.state.css = sample.css || "";
|
||||
this.state.xml = sample.xml || DEFAULT_XML;
|
||||
deleteLocalSample();
|
||||
this.isDirty = false;
|
||||
}
|
||||
|
||||
get leftPaneStyle() {
|
||||
return `width:${this.state.leftPaneWidth}px`;
|
||||
}
|
||||
|
||||
get rightPaneStyle() {
|
||||
return `width:${window.innerWidth - 6 - this.state.leftPaneWidth}px`;
|
||||
}
|
||||
|
||||
get topEditorStyle() {
|
||||
return `flex: 0 0 ${this.state.topPanelHeight}px`;
|
||||
}
|
||||
|
||||
onMouseDown() {
|
||||
const resizer = ev => {
|
||||
this.state.leftPaneWidth = ev.clientX;
|
||||
};
|
||||
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
for (let iframe of document.getElementsByTagName("iframe")) {
|
||||
iframe.classList.add("disabled");
|
||||
}
|
||||
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
for (let iframe of document.getElementsByTagName("iframe")) {
|
||||
iframe.classList.remove("disabled");
|
||||
}
|
||||
});
|
||||
}
|
||||
updateCode(ev) {
|
||||
if (this.state[ev.detail.type] !== ev.detail.value) {
|
||||
this.state[ev.detail.type] = ev.detail.value;
|
||||
this.isDirty = true;
|
||||
}
|
||||
}
|
||||
toggleLayout() {
|
||||
this.state.splitLayout = !this.state.splitLayout;
|
||||
}
|
||||
updatePanelHeight(ev) {
|
||||
if (!ev.detail.delta) {
|
||||
return;
|
||||
}
|
||||
let height = this.state.topPanelHeight;
|
||||
if (!height) {
|
||||
height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
|
||||
}
|
||||
this.state.topPanelHeight = height + ev.detail.delta;
|
||||
}
|
||||
|
||||
async downloadCode() {
|
||||
const { js, css, xml } = this.state;
|
||||
const content = await makeApp(js, css, xml);
|
||||
await owl.utils.loadJS("libs/FileSaver.min.js");
|
||||
saveAs(content, "app.zip");
|
||||
}
|
||||
}
|
||||
App.components = { TabbedEditor };
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application initialization
|
||||
//------------------------------------------------------------------------------
|
||||
async function start() {
|
||||
document.title = `${document.title} (v${owl.__info__.version})`;
|
||||
const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
|
||||
console.info(`This application is using Owl built with the following commit:`, commit);
|
||||
const [templates] = await Promise.all([
|
||||
owl.utils.loadFile("templates.xml"),
|
||||
owl.utils.whenReady()
|
||||
]);
|
||||
const qweb = new owl.QWeb({ templates });
|
||||
owl.Component.env = { qweb };
|
||||
const app = new App();
|
||||
app.mount(document.body);
|
||||
}
|
||||
|
||||
start();
|
||||
@@ -0,0 +1,21 @@
|
||||
<!---->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OWL Playground</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../owl.js"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<link rel="stylesheet" href="playground.css">
|
||||
<script type="module" src="app.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<templates>
|
||||
<div t-name="TabbedEditor" class="tabbed-editor">
|
||||
<div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
|
||||
<t t-foreach="['js', 'xml', 'css']" t-as="tab">
|
||||
<a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
|
||||
<t t-esc="tab"/>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
<div class="code-editor" t-ref="editor"></div>
|
||||
</div>
|
||||
|
||||
<div t-name="App" class="playground">
|
||||
<div class="left-bar" t-att-class="{split: state.splitLayout}"
|
||||
t-att-style="leftPaneStyle"
|
||||
t-on-updateCode="updateCode">
|
||||
<div class="menubar">
|
||||
<a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
|
||||
<select t-on-change="setSample">
|
||||
<option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
|
||||
<t t-esc="sample.description"/>
|
||||
</option>
|
||||
</select>
|
||||
<a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
|
||||
<a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas" t-att-class="state.splitLayout ? 'fa-toggle-on' : 'fa-toggle-off'"></i></a>
|
||||
</div>
|
||||
<TabbedEditor
|
||||
js="state.js"
|
||||
css="!state.splitLayout and state.css"
|
||||
xml="!state.splitLayout and state.xml"
|
||||
t-att-style="topEditorStyle"/>
|
||||
<t t-if="state.splitLayout">
|
||||
<div class="separator horizontal"/>
|
||||
<TabbedEditor
|
||||
js="false"
|
||||
css="state.css"
|
||||
xml="state.xml"
|
||||
resizeable="true"
|
||||
t-on-updatePanelHeight="updatePanelHeight"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="separator vertical" t-on-mousedown="onMouseDown"/>
|
||||
<div class="right-pane" t-att-style="rightPaneStyle">
|
||||
<div class="welcome" t-if="state.displayWelcome">
|
||||
<div>🦉 Odoo Web Library 🦉</div>
|
||||
<div>v<t t-esc="version"/></div>
|
||||
<div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
|
||||
<div class="note">
|
||||
<p>Note: these examples are using recent features of Javascript, and require a recent browser to work without a transpilation step!
|
||||
For example, it makes use of class fields and class static fields. These examples should work in a recent Chrome version.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" t-ref="content"/>
|
||||
</div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,57 +1,79 @@
|
||||
<templates>
|
||||
<div t-name="TabbedEditor" class="tabbed-editor">
|
||||
<div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
|
||||
<t t-foreach="['js', 'xml', 'css']" t-as="tab">
|
||||
<a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
|
||||
<t t-esc="tab"/>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
<div class="code-editor" t-ref="editor"></div>
|
||||
</div>
|
||||
|
||||
<div t-name="App" class="playground">
|
||||
<div class="left-bar" t-att-class="{split: state.splitLayout}"
|
||||
t-att-style="leftPaneStyle"
|
||||
t-on-updateCode="updateCode">
|
||||
<div class="menubar">
|
||||
<a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
|
||||
<select t-on-change="setSample">
|
||||
<option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
|
||||
<t t-esc="sample.description"/>
|
||||
</option>
|
||||
</select>
|
||||
<a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
|
||||
<a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas" t-att-class="state.splitLayout ? 'fa-toggle-on' : 'fa-toggle-off'"></i></a>
|
||||
<div t-name="App" t-on-run-project="_run" class="h-full flex">
|
||||
|
||||
<Editor js="state.js" xml="state.xml" css="state.css" />
|
||||
|
||||
|
||||
<div class="flex flex-col w-1/2 h-full">
|
||||
|
||||
<div class="bg-purple-300 mx-2 my-1 p-2 rounded-sm" style="background-color: #865A7B">
|
||||
<div class="flex items-center">
|
||||
<div class="relative">
|
||||
<select t-on-change="_setSample" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-1 px-2 pr-8 rounded-sm leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
|
||||
<t t-foreach="samples" t-as="sample" t-key="sample_index">
|
||||
<option>
|
||||
<t t-esc="sample.description"/>
|
||||
</option>
|
||||
</t>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<svg class="fill-current h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div t-ref="iframe-container" class="bg-white flex-grow m-2 rounded-sm shadow"></div>
|
||||
</div>
|
||||
<TabbedEditor
|
||||
js="state.js"
|
||||
css="!state.splitLayout and state.css"
|
||||
xml="!state.splitLayout and state.xml"
|
||||
t-att-style="topEditorStyle"/>
|
||||
<t t-if="state.splitLayout">
|
||||
<div class="separator horizontal"/>
|
||||
<TabbedEditor
|
||||
js="false"
|
||||
css="state.css"
|
||||
xml="state.xml"
|
||||
resizeable="true"
|
||||
t-on-updatePanelHeight="updatePanelHeight"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="separator vertical" t-on-mousedown="onMouseDown"/>
|
||||
<div class="right-pane" t-att-style="rightPaneStyle">
|
||||
<div class="welcome" t-if="state.displayWelcome">
|
||||
<div>🦉 Odoo Web Library 🦉</div>
|
||||
<div>v<t t-esc="version"/></div>
|
||||
<div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
|
||||
<div class="note">
|
||||
<p>Note: these examples are using recent features of Javascript, and require a recent browser to work without a transpilation step!
|
||||
For example, it makes use of class fields and class static fields. These examples should work in a recent Chrome version.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<t t-name="Editor" t-on-open-file="_openFile">
|
||||
<div class="resize-x w-1/2">
|
||||
|
||||
<div class="flex justify-between items-center" style="background-color: #865A7B">
|
||||
<ul class="flex justify-start">
|
||||
<li>
|
||||
<Tab t-on-click="_openXML">
|
||||
xml
|
||||
</Tab>
|
||||
</li>
|
||||
<li>
|
||||
<Tab t-on-click="_openJS">
|
||||
js
|
||||
</Tab>
|
||||
</li>
|
||||
<li>
|
||||
<Tab t-on-click="_openCSS">
|
||||
css
|
||||
</Tab>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex justify-end m-2">
|
||||
<li>
|
||||
<button class="h-6 w-6 bg-white rounded-full p-1 shadow" t-on-click="_run">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="container" class="h-full"></div>
|
||||
</div>
|
||||
<div class="content" t-ref="content"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="Tab">
|
||||
<button class="bg-white hover:bg-gray-300 uppercase rounded-sm px-2 shadow mx-1">
|
||||
<t t-slot="default"/>
|
||||
</button>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
+59
-24
@@ -3,9 +3,10 @@ const readline = require("readline");
|
||||
const fs = require("fs");
|
||||
const exec = require("child_process").exec;
|
||||
const chalk = require("chalk");
|
||||
const GitHub = require("github-api");
|
||||
|
||||
const REL_NOTES_FILE = `release-notes.md`;
|
||||
const STEPS = 8;
|
||||
const STEPS = 10;
|
||||
|
||||
const rl = readline.createInterface({
|
||||
input: process.stdin,
|
||||
@@ -27,8 +28,7 @@ async function startRelease() {
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 1/${STEPS}: collecting info...`);
|
||||
const current = package.version;
|
||||
let next = await ask("Next version: ");
|
||||
if (next[0] === 'v') next = next.substring(1);
|
||||
const next = await ask("Next version: ");
|
||||
let file = await ask(`Release notes (${REL_NOTES_FILE}): `);
|
||||
file = file || REL_NOTES_FILE;
|
||||
let content;
|
||||
@@ -39,12 +39,11 @@ async function startRelease() {
|
||||
log("Cannot find release notes... Aborting");
|
||||
return;
|
||||
}
|
||||
let shouldBeDraft = await ask(`Should be a draft [y/n] ? (n)`);
|
||||
let draft = ""
|
||||
if (shouldBeDraft.toLowerCase() === 'y')
|
||||
{
|
||||
draft = "--draft";
|
||||
}
|
||||
|
||||
// Todo: add playground update feature
|
||||
// let shouldUpdateStr = await ask("Update Playground? (y/n)");
|
||||
// const shouldUpdatePlayground = shouldUpdateStr === "y";
|
||||
const token = await ask("Github token: ");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 2/${STEPS}: running tests...`);
|
||||
@@ -53,12 +52,14 @@ async function startRelease() {
|
||||
log("Test suite does not pass. Aborting.");
|
||||
return;
|
||||
}
|
||||
await ask("Ready for next step...");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 3/${STEPS}: updating package.json, readme.md and roadmap.md...`);
|
||||
await replaceInFile("./package.json", current, next);
|
||||
await replaceInFile("./README.md", current, next);
|
||||
await replaceInFile("./roadmap.md", current, next);
|
||||
await ask("Ready for next step...");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 4/${STEPS}: creating git commit...`);
|
||||
@@ -67,40 +68,61 @@ async function startRelease() {
|
||||
log("Git commit failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
await ask("Ready for next step...");
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
log(`Step 5/${STEPS}: building owl...`);
|
||||
await execCommand("npm run prettier");
|
||||
// -------------------j--------------------------------------------------------
|
||||
log(`Step 5/${STEPS}: building owl (iife version)...`);
|
||||
const buildResult = await execCommand("npm run build");
|
||||
if (buildResult !== 0) {
|
||||
log("Build failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
await ask("Ready for next step...");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 6/${STEPS}: pushing on github...`);
|
||||
log(`Step 6/${STEPS}: minifying owl...`);
|
||||
const minifyResult = await execCommand("npm run minify");
|
||||
if (minifyResult !== 0) {
|
||||
log("Minify failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
await ask("Ready for next step...");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 7/${STEPS}: pushing on github...`);
|
||||
const pushResult = await execCommand("git push");
|
||||
if (pushResult !== 0) {
|
||||
log("git push failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
await ask("Ready for next step...");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 8/${STEPS}: publishing release notes on github...`);
|
||||
const options = {
|
||||
tag_name: `v${next}`,
|
||||
name: `v${next}`,
|
||||
body: content,
|
||||
draft: true // todo: remove this someday
|
||||
};
|
||||
const result = await createRelease(token, options);
|
||||
await ask("Ready for next step...");
|
||||
|
||||
log(`Step 7/${STEPS}: Creating the release...`);
|
||||
const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F release-notes.md`);
|
||||
if (relaseResult !== 0) {
|
||||
log("github release failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 9/${STEPS}: adding assets to release...`);
|
||||
await ask("Please add owl.js and owl.min.js to draft release, then confirm");
|
||||
// todo: do this with curl
|
||||
// curl \
|
||||
// -H "Authorization: token $GITHUB_TOKEN" \
|
||||
// -H "Content-Type: $(file -b --mime-type $FILE)" \
|
||||
// --data-binary @$FILE \
|
||||
// "https://uploads.github.com/repos/hubot/singularity/releases/123/assets?name=$(basename $FILE)"
|
||||
|
||||
log(`Step 8/${STEPS}: publishing module on npm...`);
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 10/${STEPS}: publishing module on npm...`);
|
||||
await execCommand("npm run publish");
|
||||
|
||||
log("Owl Release process completed! Thank you for your patience");
|
||||
await execCommand(`gh release view`);
|
||||
await execCommand(`gh release view -w`);
|
||||
|
||||
log("Owl Release process completed! Thank you for your patience");
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -177,3 +199,16 @@ async function replaceInFile(file, from, to) {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function createRelease(token, options) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var gh = new GitHub({ token });
|
||||
gh.getRepo("odoo", "owl").createRelease(options, (err, result, req) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
+2
-2
@@ -14,9 +14,9 @@ URL = 'http://{0}:{1}/tools'.format(HOST, PORT)
|
||||
# With this, we can simply copy the playground folder as is in the gh-page when
|
||||
# we want to update the playground.
|
||||
class OWLHandler(SimpleHTTPRequestHandler):
|
||||
def do_GET(self):
|
||||
def do_GET(self):
|
||||
if self.path == '/tools/owl.js':
|
||||
self.path = '/dist/owl.iife.js'
|
||||
self.path = '/dist/owl.js'
|
||||
return SimpleHTTPRequestHandler.do_GET(self)
|
||||
|
||||
def end_headers(self):
|
||||
|
||||
+17
-104
@@ -1,107 +1,20 @@
|
||||
{
|
||||
/**
|
||||
** Commented-out options have their default values.
|
||||
**/
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/*.ts"
|
||||
],
|
||||
// "exclude": [],
|
||||
// "files": [], // A list of relative or absolute file paths to include.
|
||||
// "extends": "", // A string containing a path to another configuration file to inherit from.
|
||||
// "references": [], // An array of objects `{"path": "./to/dirOrConfig"}` that specifies projects to reference.
|
||||
// "compileOnSave": false, // Signals to the IDE to generate all files for a given tsconfig.json upon saving.
|
||||
"compilerOptions": {
|
||||
// Main options
|
||||
"target": "esnext", // Specify ECMAScript target version: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017','es2018' or 'esnext'.
|
||||
"module": "esnext", // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
|
||||
// "lib": ["esnext", "dom"], // Specify library files to be included in the compilation.
|
||||
// "allowJs": false, // Allow javascript files to be compiled.
|
||||
// "checkJs": false, // Report errors in .js files.
|
||||
// "outFile": "./", // Concatenate and emit output to single file.
|
||||
"outDir": "dist", // Redirect output structure to the directory.
|
||||
// "rootDir": "./", // Specify the root directory of input files. Use to control the output directory structure with `--outDir`.
|
||||
// "project": "", // Compile a project given a valid configuration file.
|
||||
// Compilation options
|
||||
// "composite": true, // Enable project compilation
|
||||
// "diagnostics": false, // Show diagnostic information.
|
||||
// "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk.
|
||||
// "isolatedModules": false, // Transpile each file as a separate module (similar to 'ts.transpileModule').
|
||||
// "listEmittedFiles": false, // Print names of generated files part of the compilation.
|
||||
// "listFiles": true, // Print names of files part of the compilation.
|
||||
// "noErrorTruncation": false, // Do not truncate error messages.
|
||||
// "preserveWatchOutput": false, // Keep outdated console output in watch mode instead of clearing the screen.
|
||||
// "traceResolution": false, // Enable tracing of the name resolution process.
|
||||
// "tsBuildInfoFile": ".tsbuildinfo", // Specify file to store incremental compilation information.
|
||||
// Strict typechecking options
|
||||
// "strict": false, // Enable all strict type-checking options.
|
||||
// "noImplicitAny": true, // Raise error on expressions and declarations with an implied 'any' type.
|
||||
// "noImplicitThis": true, // Raise error on 'this' expressions with an implied 'any' type.
|
||||
// "strictBindCallApply": true, // Enable stricter checking of of the `bind`, `call`, and `apply` methods on functions.
|
||||
// "strictFunctionTypes": true, // Disable bivariant parameter checking for function types.
|
||||
// "strictNullChecks": true, // In strict null checking mode, the null and undefined values are not in the domain of every type and are only assignable to themselves and any.
|
||||
// "strictPropertyInitialization": true, // Ensure non-undefined class properties are initialized in the constructor. This option requires `--strictNullChecks` be enabled in order to take effect.
|
||||
// "alwaysStrict": true, // Parse in strict mode and emit "use strict" for each source file.
|
||||
// Additional checks
|
||||
// "allowUnreachableCode": false, // Do not report errors on unreachable code.
|
||||
// "allowUnusedLabels": false, // Do not report errors on unused labels.
|
||||
"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
|
||||
// "noStrictGenericChecks": false, // Disable strict checking of generic signatures in function types.
|
||||
"noUnusedLocals": true, // Report errors on unused locals.
|
||||
"noUnusedParameters": false, // Report errors on unused parameters.
|
||||
"noImplicitReturns": true, // Report error when not all code paths in function return a value.
|
||||
"noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement.
|
||||
// "skipLibCheck": false, // Skip type checking of all declaration files (*.d.ts).
|
||||
// "suppressExcessPropertyErrors": false, // Suppress excess property checks for object literals.
|
||||
// "suppressImplicitAnyIndexErrors": false, // Suppress noImplicitAny errors for indexing objects lacking index signatures.
|
||||
// Module resolution options
|
||||
"moduleResolution": "node", // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
|
||||
// "baseUrl": "./", // Base directory to resolve non-absolute module names.
|
||||
// "paths": {}, // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
|
||||
// "rootDirs": [], // List of root folders whose combined content represents the structure of the project at runtime.
|
||||
// "typeRoots": [], // List of folders to include type definitions from.
|
||||
"types": [
|
||||
"jest",
|
||||
"node"
|
||||
], // Type declaration files to be included in compilation.
|
||||
// "allowSyntheticDefaultImports": false // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
|
||||
"esModuleInterop": true, // Emit '__importStar' and '__importDefault' helpers for runtime babel ecosystem compatibility and enable '--allowSyntheticDefaultImports' for typesystem compatibility.
|
||||
// "maxNodeModuleJsDepth": 0, // The maximum dependency depth to search under node_modules and load JavaScript files. Only applicable with --allowJs.
|
||||
// "preserveSymlinks": false, // Do not resolve the real path of symlinks.
|
||||
"resolveJsonModule": true, // Include modules imported with '.json' extension.
|
||||
// Emit options
|
||||
"declaration": true, // Generates corresponding '.d.ts' file.
|
||||
"declarationDir": "dist/types", // Output directory for generated declaration files.
|
||||
// "declarationMap": false, // Generates a sourcemap for each corresponding '.d.ts' file.
|
||||
// "emitBOM": false, // Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.
|
||||
// "emitDeclarationOnly": false, // Only emit ‘.d.ts’ declaration files.
|
||||
// "importHelpers": false, // Import emit helpers from 'tslib'.
|
||||
// "newLine": "LF", // Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix).”
|
||||
// "noEmit": true, // Do not emit outputs.
|
||||
// "noEmitHelpers": false, // Do not generate custom helper functions like __extends in compiled output.
|
||||
// "noEmitOnError": false, // Do not emit outputs if any errors were reported.
|
||||
// "noImplicitUseStrict": false, // Do not emit "use strict" directives in module output.
|
||||
// "noResolve": false, // Do not add triple-slash references or module import targets to the list of compiled files.
|
||||
"preserveConstEnums": true, // Do not erase const enum declarations in generated code.
|
||||
// "removeComments": false, // Remove all comments except copy-right header comments beginning with
|
||||
// "experimentalDecorators": true, // Enables experimental support for ES7 decorators.
|
||||
// "emitDecoratorMetadata": true, // Enables experimental support for emitting type metadata for decorators.
|
||||
// Source map options
|
||||
// "sourceMap": false, // Generates corresponding '.map' file.
|
||||
// "sourceRoot": "", // Specify the location where debugger should locate TypeScript files instead of source locations.
|
||||
// "mapRoot": "", // Specify the location where debugger should locate map files instead of generated locations.
|
||||
// "inlineSourceMap": true, // Emit a single file with source maps instead of having a separate file.
|
||||
// "inlineSources": true, // Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set.
|
||||
// JSX options
|
||||
// "jsx": "preserve", // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
|
||||
// "jsxFactory": "React.createElement", // Specify the JSX factory function to use when targeting react JSX emit, e.g. 'React.createElement' or 'h'.
|
||||
// Other options
|
||||
// "allowUmdGlobalAccess": true, // Allow accessing UMD globals from modules.
|
||||
// "charset": "utf8", // The character set of the input files.
|
||||
// "downlevelIteration": false, // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'.
|
||||
// "disableSizeLimit": false, // Disable size limitation on JavaScript project.
|
||||
// "keyofStringsOnly": false, // Resolve 'keyof' to string valued property names only (no numbers or symbols).
|
||||
// "noLib": false, // Do not include the default library file (lib.d.ts).
|
||||
// "pretty": true, // Stylize errors and messages using color and context.
|
||||
}
|
||||
"module": "commonjs",
|
||||
"preserveConstEnums": true,
|
||||
"noImplicitThis": true,
|
||||
"removeComments": false,
|
||||
"declaration": true,
|
||||
"target": "esnext",
|
||||
"outDir": "dist",
|
||||
"alwaysStrict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": false,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"strictPropertyInitialization": true,
|
||||
"strictNullChecks": true,
|
||||
"declarationDir": "dist/types"
|
||||
},
|
||||
"include": ["src/**/*.ts","src/*.ts"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user