fix: showcase promise example in vite/test

npenin · Sep 10, 2024 · 4140105 · 4140105
1 parent f037550
commit 4140105
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/packages/vite/test/home.ts b/packages/vite/test/home.ts
@@ -1,5 +1,5 @@
 import { Scope as IScope, Page, LocationService, ScopeImpl, page } from '@akala/client'
-import { Container, Processors } from '@akala/commands';
+import { Container, Metadata, Processors } from '@akala/commands';
 import { EventEmitter, Event, ObservableObject, Parser } from '@akala/core';
 import { Login } from './login/login.js';
 
@@ -15,8 +15,11 @@ class HomePage extends Page
             location.dispatch('/login');
         else
             root.$setAsync('currentUser', root.container.dispatch('auth.whoami').catch(e => { if (e.status == 401) Login.clearState(root); location.dispatch('/login') }))
+        this.commands = root.container.dispatch('$metadata', true).then(c => c.commands);
     }
 
+    public readonly commands: Promise<Metadata.Command[]>;
+
     public coco: boolean = true;
 
     public toggleCoco()

diff --git a/packages/vite/test/index.html b/packages/vite/test/index.html
@@ -9,6 +9,12 @@ <h1>Welcome <span data-bind data-bind-inner-text="context.name"></span> !</h1>
     <input id="dd" onfocus="kldd.showPopover()" />
 
     <button on on-click="controller.toggleCoco.bind(controller)">Toggle coco</button>
-    <span id="debug" data-bind="{innerText:controller.coco#json}"></span>
-</main>
-<img data-bind="{src: context.icon}" />
+    <span id="debug" data-bind="{innerText:controller#json}"></span>
+    <span id="debug3" data-bind="{innerText:controller.commands#async#json}"></span>
+
+    <ul is="ul-each" each="controller.commands" item-property-name="command">
+        <template>
+            <li data-bind data-bind-inner-text="command.name"></li>
+        </template>
+    </ul>
+</main>
diff --git a/packages/vite/test/index.ts b/packages/vite/test/index.ts
@@ -2,13 +2,13 @@
 import './index.scss'
 import { Container } from '@akala/commands'
 import { Event, EventEmitter, isPromiseLike } from '@akala/core';
-import { Scope as IScope, LocationService, Template, serviceModule, templateCache, templateFunction, FormComposer, bootstrapModule, DataContext, DataBind, OutletService, outletDefinition, EventComposer, I18nComposer, webComponent } from '@akala/client'
+import { Scope as IScope, LocationService, Template, serviceModule, templateCache, templateFunction, FormComposer, bootstrapModule, DataContext, DataBind, OutletService, outletDefinition, EventComposer, I18nComposer, webComponent, Each } from '@akala/client'
 import { Processors } from '@akala/commands';
 import { Signup } from './signup/signup.js';
 import { Login } from './login/login.js';
 import Home from './home.js';
 import { Popover } from '@akala/web-ui';
-import weather from './weather.js';
+// import weather from './weather.js';
 
 
 
@@ -26,14 +26,16 @@ import.meta.hot.on('template-reload', (data) =>
 
 type Scope = IScope<{ $authProcessor: Processors.AuthPreProcessor, container: Container<void>, $commandEvents: EventEmitter<Record<string, Event<[unknown]>>> }>;
 
-bootstrapModule.activate(['$rootScope', '$rootScope', 'services.$outlet'], async (rootScope: Scope, outlet: OutletService) =>
+bootstrapModule.activate(['$rootScope', 'services.$outlet'], async (rootScope: Scope, outlet: OutletService) =>
 {
     Template.composers.push(new FormComposer(rootScope.container))
     Template.composers.push(new DataContext());
     Template.composers.push(new DataBind());
     Template.composers.push(new EventComposer());
     Template.composers.push(new I18nComposer());
     webComponent('kl-popover')(Popover);
+    webComponent('kl-each')(Each);
+    webComponent('ul-each', { extends: 'ul' })(Each);
 
     serviceModule.register('templateOptions', {
         $rootScope: rootScope, i18n: {
@@ -57,11 +59,11 @@ bootstrapModule.ready(['services.$location', '$rootScope'], async function (loca
     this.whenDone.then(async () =>
     {
 
-        const auth = new Processors.AuthPreProcessor(Processors.HttpClient.fromUrl('https://api.weatherapi.com/v1/'));
-        const weatherContainer = weather.connect(auth);
-        auth.authState = 'xxxx';
-        const result = (await weatherContainer.dispatch('realtime-weather', 'Mulhouse', 'fr')).current.condition.icon;
-        rootScope['icon'] = result;
+        // const auth = new Processors.AuthPreProcessor(Processors.HttpClient.fromUrl('https://api.weatherapi.com/v1/'));
+        // const weatherContainer = weather.connect(auth);
+        // auth.authState = 'xxxx';
+        // const result = (await weatherContainer.dispatch('realtime-weather', 'Mulhouse', 'fr')).current.condition.icon;
+        // rootScope['icon'] = result;
 
         Template.composeAll([document.getElementById('app')], document.body, { $rootScope: rootScope });
         location.start({ dispatch: true, hashbang: false })