NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] tools: improve playground samples

Browse Source 
closes #177
This commit is contained in:
Géry Debongnie
2019-06-14 16:01:24 +02:00
parent 72f6daa695
commit 0d933b8570
1 changed files with 235 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/playground/samples.js
+235 -268
View File
@@ -1,33 +1,6 @@
const CLICK_COUNTER = `class ClickCounter extends owl.Component { const COMPONENTS = `// In this example, we show how components can be defined and created.
constructor() {
super(...arguments);
this.state = { value: 0 };
}
increment() { class Counter extends owl.Component {
this.state.value++;
}
}
const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({ qweb });
counter.mount(document.body);
`;
const CLICK_COUNTER_XML = `<templates>
<button t-name="ClickCounter" t-on-click="increment">
Click Me! [<t t-esc="state.value"/>]
</button>
</templates>`;
const CLICK_COUNTER_CSS = `button {
color: darkred;
font-size: 30px;
width: 220px;
}`;
const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields
class ClickCounter extends owl.Component {
state = { value: 0 }; state = { value: 0 };
increment() { increment() {
@@ -35,68 +8,39 @@ class ClickCounter extends owl.Component {
} }
} }
const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({ qweb });
counter.mount(document.body);
`;
const WIDGET_COMPOSITION = `// This example will not work if your browser does not support ESNext class fields
class ClickCounter extends owl.Component {
state = { value: 0 };
increment() {
this.state.value++;
}
}
class InputWidget extends owl.Component {
state = {text: ""};
updateVal(event) {
let value = event.target.value;
if (this.props.reverse) {
value = value.split("").reverse().join("");
}
this.state.text = value
}
}
// Main root widget // Main root widget
class App extends owl.Component { class App extends owl.Component {
widgets = {ClickCounter, InputWidget}; widgets = { Counter };
} }
// Application setup // Application setup
// Note that the xml templates are injected into the global TEMPLATES variable.
const qweb = new owl.QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const app = new App({ qweb }); const app = new App({ qweb });
app.mount(document.body); app.mount(document.body);
`; `;
const WIDGET_COMPOSITION_XML = `<templates> const COMPONENTS_XML = `<templates>
<button t-name="ClickCounter" t-on-click="increment"> <button t-name="Counter" t-on-click="increment">
Click Me! [<t t-esc="state.value"/>] Click Me! [<t t-esc="state.value"/>]
</button> </button>
<div t-name="InputWidget">
<input t-on-input="updateVal" placeholder="type here some text..."/>
<span><t t-esc="state.text"/></span>
</div>
<div t-name="App"> <div t-name="App">
<t t-widget="ClickCounter"/> <t t-widget="Counter"/>
<t t-widget="InputWidget" reverse="true"/> <t t-widget="Counter"/>
</div> </div>
</templates>`; </templates>`;
const WIDGET_COMPOSITION_CSS = `button, input { const COMPONENTS_CSS = `button {
font-size: 20px; font-size: 20px;
width: 220px; width: 220px;
margin: 5px; margin: 5px;
}`; }`;
const ANIMATION = `// This example will not work if your browser does not support ESNext class fields const ANIMATION = `// The goal of this component is to see how the t-transition directive can be
class ClickCounter extends owl.Component { // used to generate simple transition effects.
class Counter extends owl.Component {
state = { value: 0 }; state = { value: 0 };
increment() { increment() {
@@ -105,15 +49,11 @@ class ClickCounter extends owl.Component {
} }
class App extends owl.Component { class App extends owl.Component {
state = {flag: false, widgetFlag: false, numbers: []}; state = { flag: false, widgetFlag: false, numbers: [] };
widgets = {ClickCounter}; widgets = { Counter };
toggle() { toggle(key) {
this.state.flag = !this.state.flag; this.state[key] = !this.state[key];
}
toggleWidget() {
this.state.widgetFlag = !this.state.widgetFlag;
} }
addNumber() { addNumber() {
@@ -129,46 +69,44 @@ app.mount(document.body);
`; `;
const ANIMATION_XML = `<templates> const ANIMATION_XML = `<templates>
<button t-name="ClickCounter" t-on-click="increment" class="clickcounter"> <button t-name="Counter" t-on-click="increment" class="clickcounter">
Click Me! [<t t-esc="state.value"/>] Click Me! [<t t-esc="state.value"/>]
</button> </button>
<div t-name="App"> <div t-name="App">
<h2>Transition on DOM element</h2>
<h2>Transition on DOM element</h2> <div class="demo">
<button t-on-click="toggle('flag')">Toggle square</button>
<div class="demo"> <div>
<button t-on-click="toggle">Toggle square</button> <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
<div> </div>
<div t-if="state.flag" class="square" t-transition="fade">Hello</div>
</div> </div>
</div>
<h2>Transition on sub widgets</h2> <h2>Transition on sub widgets</h2>
<div class="demo"> <div class="demo">
<button t-on-click="toggleWidget"> <button t-on-click="toggle('widgetFlag')">Toggle widget</button>
Toggle widget <div>
</button> <t t-widget="Counter" t-if="state.widgetFlag" t-transition="fade"/>
<div> </div>
<t t-widget="ClickCounter" t-if="state.widgetFlag" t-transition="fade"/>
</div> </div>
</div>
<h2>Transition on lists</h2> <h2>Transition on lists</h2>
<p>Transitions can also be applied on lists</p> <p>Transitions can also be applied on lists</p>
<div class="demo"> <div class="demo">
<button t-on-click="addNumber">Add a number</button> <button t-on-click="addNumber">Add a number</button>
<div> <div>
<t t-foreach="state.numbers" t-as="n"> <t t-foreach="state.numbers" t-as="n">
<span t-transition="fade" class="numberspan"><t t-esc="n"/></span> <span t-transition="fade" class="numberspan"><t t-esc="n"/></span>
</t> </t>
</div>
</div> </div>
</div>
<h2>Simple CSS animation</h2> <h2>Simple CSS animation</h2>
<p>Remember, normal CSS still apply: for example, a simple flash animation with pure css </p> <p>Remember, normal CSS still apply: for example, a simple flash animation with pure css </p>
<div><a class="btn flash">Click</a></div> <div><a class="btn flash">Click</a>
</div>
</div> </div>
</templates> </templates>
`; `;
@@ -177,6 +115,7 @@ const ANIMATION_CSS = `button {
font-size: 18px; font-size: 18px;
height: 35px; height: 35px;
} }
.btn { .btn {
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
@@ -184,7 +123,6 @@ const ANIMATION_CSS = `button {
background-color: #dddddd; background-color: #dddddd;
} }
.flash { .flash {
background-position: center; background-position: center;
transition: background .6s; transition: background .6s;
@@ -195,7 +133,6 @@ const ANIMATION_CSS = `button {
transition: background 0s; transition: background 0s;
} }
.square { .square {
background-color: red; background-color: red;
width: 100px; width: 100px;
@@ -210,6 +147,7 @@ const ANIMATION_CSS = `button {
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity .6s; transition: opacity .6s;
} }
.fade-enter, .fade-leave-to { .fade-enter, .fade-leave-to {
opacity: 0; opacity: 0;
} }
@@ -233,7 +171,14 @@ const ANIMATION_CSS = `button {
} }
`; `;
const LIFECYCLE_DEMO = `class HookWidget extends owl.Component { const LIFECYCLE_DEMO = `// This example shows all the possible lifecycle hooks
//
// The root widget controls a sub widget (DemoWidget). It logs all its lifecycle
// methods in the console. Try modifying its state by clicking on it, or by
// clicking on the two main buttons, and look into the console to see what
// happens.
class DemoWidget extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.state = { n: 0 }; this.state = { n: 0 };
@@ -262,37 +207,60 @@ const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
} }
} }
class ParentWidget extends owl.Component { class App extends owl.Component {
constructor() { widgets = { DemoWidget };
super(...arguments); state = { n: 0, flag: true };
this.widgets = { HookWidget };
this.state = { n: 0, flag: true };
}
increment() { increment() {
this.state.n++; this.state.n++;
} }
toggleSubWidget() { toggleSubWidget() {
this.state.flag = !this.state.flag; this.state.flag = !this.state.flag;
} }
} }
const qweb = new owl.QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const widget = new ParentWidget({ qweb }); const app = new App({ qweb });
widget.mount(document.body); app.mount(document.body);
`; `;
const LIFECYCLE_DEMO_XML = `<templates> const LIFECYCLE_DEMO_XML = `<templates>
<div t-name="ParentWidget"> <div t-name="DemoWidget" t-on-click="increment" class="demo">
<button t-on-click="increment">Increment</button> <div>Demo Sub Widget</div>
<button t-on-click="toggleSubWidget">ToggleSubWidget</button> <div>(click on me to update me)</div>
<div t-if="state.flag"> <div>Props: <t t-esc="props.n"/>, State: <t t-esc="state.n"/>. </div>
<t t-widget="HookWidget" n="state.n"/> </div>
</div>
<div t-name="App">
<button t-on-click="increment">Increment Parent State</button>
<button t-on-click="toggleSubWidget">Toggle SubWidget</button>
<div t-if="state.flag">
<t t-widget="DemoWidget" n="state.n"/>
</div> </div>
<div t-name="HookWidget" t-on-click="increment">Demo Sub Widget. Props: <t t-esc="props.n"/>. State: <t t-esc="state.n"/>. (click on me to update me)</div> </div>
</templates>`; </templates>`;
const TODO_APP_STORE = `const ENTER_KEY = 13; const LIFECYCLE_CSS = `button {
font-size: 18px;
margin: 5px;
}
.demo {
margin: 10px;
padding: 10px;
background-color: #dddddd;
width: 250px;
}`;
const TODO_APP_STORE = `// This example is an implementation of the TodoList application, from the
// www.todomvc.com project. This is a non trivial application with some
// interesting user interactions. It uses the local storage for persistence.
//
// In this implementation, we use the owl Store class to manage the state. It
// is very similar to the VueX store.
const ENTER_KEY = 13;
const ESC_KEY = 27; const ESC_KEY = 27;
const LOCALSTORAGE_KEY = "todos-odoo"; const LOCALSTORAGE_KEY = "todos-odoo";
@@ -937,7 +905,20 @@ html .clear-completed:active {
} }
`; `;
const RESPONSIVE = `class Navbar extends owl.Component {} const RESPONSIVE = `// In this example, we show how we can modify keys in the global environment to
// make a responsive application.
//
// The main idea is to have a "isMobile" key in the environment, then listen
// to resize events and update the env if needed. Then, the whole interface
// will be updated, creating and destroying widgets as needed.
//
// To see this in action, try resizing the window. The application will switch
// to mobile mode whenever it has less than 768px.
//------------------------------------------------------------------------------
// Components
//------------------------------------------------------------------------------
class Navbar extends owl.Component {}
class ControlPanel extends owl.Component { class ControlPanel extends owl.Component {
widgets = { MobileSearchView }; widgets = { MobileSearchView };
@@ -958,6 +939,9 @@ class App extends owl.Component {
widgets = { Navbar, ControlPanel, FormView, Chatter }; widgets = { Navbar, ControlPanel, FormView, Chatter };
} }
//------------------------------------------------------------------------------
// Application Startup
//------------------------------------------------------------------------------
function isMobile() { function isMobile() {
return window.innerWidth <= 768; return window.innerWidth <= 768;
} }
@@ -967,6 +951,7 @@ const env = {
isMobile: isMobile() isMobile: isMobile()
}; };
const app = new App(env); const app = new App(env);
app.mount(document.body); app.mount(document.body);
@@ -983,44 +968,44 @@ window.addEventListener("resize", owl.utils.debounce(updateEnv, 20));
`; `;
const RESPONSIVE_XML = `<templates> const RESPONSIVE_XML = `<templates>
<div t-name="Navbar" class="navbar">Navbar</div> <div t-name="Navbar" class="navbar">Navbar</div>
<div t-name="ControlPanel" class="controlpanel"> <div t-name="ControlPanel" class="controlpanel">
<h2>controlpanel</h2> <h2>Control Panel</h2>
<t t-if="env.isMobile" t-widget="MobileSearchView"/> <t t-if="env.isMobile" t-widget="MobileSearchView"/>
</div> </div>
<div t-name="FormView" class="formview"> <div t-name="FormView" class="formview">
<h2>formview</h2> <h2>Form View</h2>
<t t-if="!env.isMobile" t-widget="AdvancedWidget"/> <t t-if="!env.isMobile" t-widget="AdvancedWidget"/>
</div> </div>
<div t-name="Chatter" class="chatter"> <div t-name="Chatter" class="chatter">
<h2>Chatter</h2> <h2>Chatter</h2>
<t t-foreach="100" t-as="item"><div>Message <t t-esc="item"/></div></t> <t t-foreach="100" t-as="item"><div>Message <t t-esc="item"/></div></t>
</div> </div>
<div t-name="MobileSearchView">MOBILE searchview</div> <div t-name="MobileSearchView">Mobile searchview</div>
<div t-name="App" class="app" t-att-class="{mobile: env.isMobile, desktop: !env.isMobile}"> <div t-name="AdvancedWidget">
<t t-widget="Navbar"/> This widget is only created in desktop mode.
<t t-widget="ControlPanel"/> <button>Button!</button>
<div class="content-wrapper" t-if="!env.isMobile"> </div>
<div class="content">
<t t-widget="FormView"/> <div t-name="App" class="app" t-att-class="{mobile: env.isMobile, desktop: !env.isMobile}">
<t t-widget="Chatter"/> <t t-widget="Navbar"/>
</div> <t t-widget="ControlPanel"/>
</div> <div class="content-wrapper" t-if="!env.isMobile">
<t t-else="1"> <div class="content">
<t t-widget="FormView"/> <t t-widget="FormView"/>
<t t-widget="Chatter"/> <t t-widget="Chatter"/>
</t> </div>
</div>
<div t-name="AdvancedWidget">
This widget is only created in desktop mode.
<button>Button!</button>
</div> </div>
<t t-else="1">
<t t-widget="FormView"/>
<t t-widget="Chatter"/>
</t>
</div>
</templates> </templates>
`; `;
@@ -1036,6 +1021,7 @@ const RESPONSIVE_CSS = `body {
.app.desktop { .app.desktop {
display: flex; display: flex;
} }
.navbar { .navbar {
flex: 0 0 30px; flex: 0 0 30px;
height: 30px; height: 30px;
@@ -1081,17 +1067,19 @@ const RESPONSIVE_CSS = `body {
} }
`; `;
const SLOTS = `// This example will not work if your browser does not support ESNext class fields const SLOTS = `// We show here how slots can be used to create generic components.
// In this example, the Card component is basically only a container. It is not
// We show here how slots can be used to create generic components. In this // aware of its content. It just knows where it should be (with t-slot).
// example, the Card component is basically only a container, and is created // The parent widget define the content with t-set.
// by giving it slots, inside the t-widget directive. //
// Note that the t-on-click event, defined in the App template, is executed in
// the context of the App component, even though it is inside the Card component
class Card extends owl.Component { class Card extends owl.Component {
state = { fullDisplay: true }; state = { showContent: true };
toggleDisplay() { toggleDisplay() {
this.state.fullDisplay = !this.state.fullDisplay; this.state.showContent = !this.state.showContent;
} }
} }
@@ -1119,11 +1107,11 @@ const app = new App({ qweb });
app.mount(document.body);`; app.mount(document.body);`;
const SLOTS_XML = `<templates> const SLOTS_XML = `<templates>
<div t-name="Card" class="card" t-att-class="state.fullDisplay ? 'full' : 'small'"> <div t-name="Card" class="card" t-att-class="state.showContent ? 'full' : 'small'">
<div class="card-title"> <div class="card-title">
<t t-esc="props.title"/><button t-on-click="toggleDisplay">Toggle</button> <t t-esc="props.title"/><button t-on-click="toggleDisplay">Toggle</button>
</div> </div>
<t t-if="state.fullDisplay"> <t t-if="state.showContent">
<div class="card-content" > <div class="card-content" >
<t t-slot="content"/> <t t-slot="content"/>
</div> </div>
@@ -1198,34 +1186,18 @@ const SLOTS_CSS = `.main {
const ASYNC_COMPONENTS = `// This example will not work if your browser does not support ESNext class fields const ASYNC_COMPONENTS = `// This example will not work if your browser does not support ESNext class fields
// In this example, we have 2 sub widgets, one of them being async. However, we // In this example, we have 2 sub widgets, one of them being async (slow).
// don't want renderings of the sync sub widget to be delayed because of the // However, we don't want renderings of the other sub widget to be delayed
// async one. We use the 't-asyncroot' directive for this purpose. // because of the slow widget. We use the 't-asyncroot' directive for this
// purpose. Try removing it to see the difference.
class App extends owl.Component { class App extends owl.Component {
widgets = {AsyncChild, NotificationManager}; widgets = {SlowWidget, NotificationList};
state = { value: 0 }; state = { value: 0, notifs: [] };
increment() { increment() {
this.state.value++; this.state.value++;
this.refs.notificationManager.notify("Value will be set to " + this.state.value); const notif = "Value will be set to " + this.state.value;
}
}
class AsyncChild extends owl.Component {
willUpdateProps() {
// simulate a widget that needs to perform async stuff (e.g. an RPC)
// with the updated props before re-rendering itself
return new Promise(function (resolve) {
setTimeout(resolve, 1000);
});
}
}
class NotificationManager extends owl.Component {
state = { notifs: [] };
notify(notif) {
this.state.notifs.push(notif); this.state.notifs.push(notif);
setTimeout(() => { setTimeout(() => {
var index = this.state.notifs.indexOf(notif); var index = this.state.notifs.indexOf(notif);
@@ -1234,23 +1206,34 @@ class NotificationManager extends owl.Component {
} }
} }
class SlowWidget extends owl.Component {
willUpdateProps() {
// simulate a widget that needs to perform async stuff (e.g. an RPC)
// with the updated props before re-rendering itself
return new Promise(resolve => setTimeout(resolve, 1500));
}
}
class NotificationList extends owl.Component {}
const qweb = new owl.QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const app = new App({ qweb }); const app = new App({ qweb });
app.mount(document.body);`; app.mount(document.body);
`;
const ASYNC_COMPONENTS_XML = `<templates> const ASYNC_COMPONENTS_XML = `<templates>
<div t-name="App" class="app"> <div t-name="App" class="app">
<button t-on-click="increment">Increment</button> <button t-on-click="increment">Increment</button>
<t t-widget="AsyncChild" t-asyncroot="1" value="state.value"/> <t t-widget="SlowWidget" value="state.value"/>
<t t-widget="NotificationManager" t-ref="notificationManager"/> <t t-widget="NotificationList" t-asyncroot="1" notifications="state.notifs"/>
</div> </div>
<div class="value" t-name="AsyncChild"> <div t-name="SlowWidget" class="value" >
Current value: <t t-esc="props.value"/> Current value: <t t-esc="props.value"/>
</div> </div>
<div class="notification_manager" t-name="NotificationManager"> <div t-name="NotificationList" class="notification-list">
<t t-foreach="state.notifs" t-as="notif"> <t t-foreach="props.notifications" t-as="notif">
<div class="notification"><t t-esc="notif"/></div> <div class="notification"><t t-esc="notif"/></div>
</t> </t>
</div> </div>
@@ -1271,11 +1254,12 @@ button {
padding: 20px; padding: 20px;
} }
.notification_manager { .notification-list {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
.notification { .notification {
width: 150px; width: 150px;
margin: 4px 8px; margin: 4px 8px;
@@ -1284,15 +1268,12 @@ button {
background-color: lightgray; background-color: lightgray;
}`; }`;
const EMPTY = `class App extends owl.Component { const FORM = `// This example illustrate how the t-model directive can be used to synchronize
} // data between html inputs (and select/textareas) and the state of a component.
// Note that there are two controls with t-model="color": they are totally
// synchronized.
const qweb = new owl.QWeb(TEMPLATES); class Form extends owl.Component {
const app = new App({qweb});
app.mount(document.body);
`;
const FORM = `class Form extends owl.Component {
state = { state = {
text: "", text: "",
othertext: "", othertext: "",
@@ -1302,73 +1283,62 @@ const FORM = `class Form extends owl.Component {
}; };
} }
// Application setup
const qweb = new owl.QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const form = new Form({ qweb }); const form = new Form({ qweb });
form.mount(document.body); form.mount(document.body);
`; `;
const FORM_XML = `<templates> const FORM_XML = `<templates>
<div t-name="Form"> <div t-name="Form">
<h1>Form</h1> <h1>Form</h1>
<div> <div>
Text (immediate): <input t-model="text"/> Text (immediate): <input t-model="text"/>
</div>
<div>
Other text (lazy): <input t-model.lazy="othertext"/>
</div>
<div>
Number: <input t-model.number="number"/>
</div>
<div>
Boolean: <input type="checkbox" t-model="bool"/>
</div>
<div>
Color, with a select: <select t-model="color">
<option value="">Select a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div>
Color, with radio buttons:
<span><input type="radio" name="color" id="red" value="red" t-model="color"/><label for="red">Red</label></span>
<span><input type="radio" name="color" id="blue" value="blue" t-model="color"/><label for="blue">Blue</label></span>
</div>
<hr/>
<h1>State</h1>
<div>Text: <t t-esc="state.text"/></div>
<div>Other Text: <t t-esc="state.othertext"/></div>
<div>Number: <t t-esc="state.number"/></div>
<div>Boolean: <t t-if="state.bool">True</t><t t-else="1">False</t></div>
<div>Color: <t t-esc="state.color"/></div>
</div> </div>
<div>
Other text (lazy): <input t-model.lazy="othertext"/>
</div>
<div>
Number: <input t-model.number="number"/>
</div>
<div>
Boolean: <input type="checkbox" t-model="bool"/>
</div>
<div>
Color, with a select:
<select t-model="color">
<option value="">Select a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div>
Color, with radio buttons:
<span><input type="radio" name="color" id="red" value="red" t-model="color"/><label for="red">Red</label></span>
<span><input type="radio" name="color" id="blue" value="blue" t-model="color"/><label for="blue">Blue</label></span>
</div>
<hr/>
<h1>State</h1>
<div>Text: <t t-esc="state.text"/></div>
<div>Other Text: <t t-esc="state.othertext"/></div>
<div>Number: <t t-esc="state.number"/></div>
<div>Boolean: <t t-if="state.bool">True</t><t t-else="1">False</t></div>
<div>Color: <t t-esc="state.color"/></div>
</div>
</templates> </templates>
`; `;
export const SAMPLES = [ export const SAMPLES = [
{ {
description: "Click Counter", description: "Components",
code: CLICK_COUNTER, code: COMPONENTS,
xml: CLICK_COUNTER_XML, xml: COMPONENTS_XML,
css: CLICK_COUNTER_CSS css: COMPONENTS_CSS
}, },
{ {
description: "Click Counter (ESNext)", description: "Form Input Bindings",
code: CLICK_COUNTER_ESNEXT,
xml: CLICK_COUNTER_XML,
css: CLICK_COUNTER_CSS
},
{
description: "Form input bindings",
code: FORM, code: FORM,
xml: FORM_XML, xml: FORM_XML
},
{
description: "Widget Composition",
code: WIDGET_COMPOSITION,
xml: WIDGET_COMPOSITION_XML,
css: WIDGET_COMPOSITION_CSS
}, },
{ {
description: "Animations", description: "Animations",
@@ -1379,7 +1349,8 @@ export const SAMPLES = [
{ {
description: "Lifecycle demo", description: "Lifecycle demo",
code: LIFECYCLE_DEMO, code: LIFECYCLE_DEMO,
xml: LIFECYCLE_DEMO_XML xml: LIFECYCLE_DEMO_XML,
css: LIFECYCLE_CSS,
}, },
{ {
description: "Todo List App (with store)", description: "Todo List App (with store)",
@@ -1394,7 +1365,7 @@ export const SAMPLES = [
xml: RESPONSIVE_XML xml: RESPONSIVE_XML
}, },
{ {
description: "Slots", description: "Slots And Generic Components",
code: SLOTS, code: SLOTS,
xml: SLOTS_XML, xml: SLOTS_XML,
css: SLOTS_CSS css: SLOTS_CSS
@@ -1404,9 +1375,5 @@ export const SAMPLES = [
code: ASYNC_COMPONENTS, code: ASYNC_COMPONENTS,
xml: ASYNC_COMPONENTS_XML, xml: ASYNC_COMPONENTS_XML,
css: ASYNC_COMPONENTS_CSS css: ASYNC_COMPONENTS_CSS
},
{
description: "Empty",
code: EMPTY
} }
]; ];