@effindomv2/create-fui-as-app 0.1.3 → 0.1.5

package/build/templates/mvc/src/host/generated/HostServices.ts

@@ -0,0 +1,8 @@
+// Generated from the scaffold host-services definition.
+
+@external("fui_host_service", "appClockNowUnixSeconds")
+declare function __host_appClockNowUnixSeconds(): i32;
+
+export function appClockNowUnixSeconds(): i32 {
+  return __host_appClockNowUnixSeconds();
+}

package/build/templates/mvc/src/host/host-events.ts

@@ -0,0 +1,22 @@
+import { defineHostEvents, hostEvent } from "../fui/FuiBrowser";
+
+function nowUnixSeconds(): number {
+  return Math.floor(Date.now() / 1000);
+}
+
+export const appHostEvents = defineHostEvents({
+  // Example host event for scaffolded apps:
+  // push a timer tick from browser host into AssemblyScript.
+  appClock: {
+    tick: hostEvent({
+      args: ["i32"],
+      subscribe: (emit) => {
+        emit(nowUnixSeconds());
+        const timer = setInterval(() => {
+          emit(nowUnixSeconds());
+        }, 1000);
+        return () => clearInterval(timer);
+      },
+    }),
+  },
+});

package/build/templates/mvc/src/host/host-services.ts

@@ -0,0 +1,17 @@
+import { defineHostServices, hostService } from "../fui/FuiBrowser";
+
+function nowUnixSeconds(): number {
+  return Math.floor(Date.now() / 1000);
+}
+
+export const appHostServices = defineHostServices({
+  // Example host service for scaffolded apps:
+  // fetch a scalar value on demand from the browser host.
+  appClock: {
+    nowUnixSeconds: hostService({
+      args: [],
+      returns: "i32",
+      implementation: (): number => nowUnixSeconds(),
+    }),
+  },
+});

package/build/templates/mvc/src/routes/mvc/pages/home/HomeController.ts

@@ -0,0 +1,55 @@
+import { Application, Node } from "../../../../fui/Fui";
+import { Callback1 } from "../../../../fui/FuiPrimitives";
+import { onAppClockTick } from "../../../../host/generated/HostEvents";
+import { appClockNowUnixSeconds } from "../../../../host/generated/HostServices";
+import { HomeModel } from "./HomeModel";
+import { HomeView } from "./HomeView";
+
+class ClockTickHandler extends Callback1<i32> {
+  private readonly controller: HomeController;
+
+  constructor(controller: HomeController) {
+    super();
+    this.controller = controller;
+  }
+
+  invoke(value: i32): void {
+    this.controller.model.hostEventSeconds = value;
+    this.controller.view.setHostEventSeconds(value);
+  }
+}
+
+export class HomeController {
+  readonly model: HomeModel = new HomeModel();
+  readonly view: HomeView = new HomeView(this.model);
+  private readonly clockTickHandler: ClockTickHandler = new ClockTickHandler(this);
+
+  constructor() {
+    this.view.actionButton.onClickWith(this, (controller) => {
+      controller.model.actionCount += 1;
+      controller.view.setActionCount(controller.model.actionCount);
+      controller.refreshHostServiceTime();
+    });
+    onAppClockTick(this.clockTickHandler);
+    this.refreshHostServiceTime();
+  }
+
+  private refreshHostServiceTime(): void {
+    const seconds = appClockNowUnixSeconds();
+    this.model.hostServiceSeconds = seconds;
+    this.view.setHostServiceSeconds(seconds);
+  }
+
+  getRoot(): Node {
+    return this.view.getRoot();
+  }
+
+  mount(): void {
+    Application.mount(this.view.getRoot());
+  }
+
+  dispose(): void {
+    onAppClockTick(null);
+    Application.unmount();
+  }
+}

package/build/templates/mvc/src/routes/mvc/pages/home/HomeModel.ts

@@ -0,0 +1,8 @@
+export class HomeModel {
+  actionCount: i32 = 0;
+  hostServiceSeconds: i32 = 0;
+  hostEventSeconds: i32 = 0;
+  readonly title: string = "Home page";
+  readonly subtitle: string = "Page-level MVC sample. Use the header pills to navigate.";
+  readonly actionLabel: string = "Increment home counter";
+}

package/build/templates/mvc/src/routes/mvc/pages/home/HomeView.ts

@@ -0,0 +1,76 @@
+import { Column, FlexBox, JustifyContent, Row, SelectionArea, Text, Unit, rgb } from "../../../../fui/Fui";
+import { MvcNavPill } from "../../shared/design-system/MvcNavPill";
+import { MvcPrimaryButton } from "../../shared/design-system/MvcPrimaryButton";
+import { mvcHomeRoute, mvcSettingsRoute } from "../../shared/routes";
+import { HomeModel } from "./HomeModel";
+
+function navSpacer(): FlexBox {
+  return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);
+}
+
+export class HomeView {
+  readonly actionButton: MvcPrimaryButton;
+  private readonly statusText: Text;
+  private readonly hostServiceText: Text;
+  private readonly hostEventText: Text;
+  private readonly root!: SelectionArea;
+
+  constructor(model: HomeModel) {
+    const homePill = new MvcNavPill(mvcHomeRoute(), "Home").active(true);
+    const settingsPill = new MvcNavPill(mvcSettingsRoute(), "Settings").active(false);
+
+    const navBar = Row()
+      .width(100.0, Unit.Percent)
+      .justifyContent(JustifyContent.End)
+      .child(homePill)
+      .child(navSpacer())
+      .child(settingsPill);
+
+    const title = new Text(model.title).fontSize(34.0).textColor(rgb(241, 245, 249)) as Text;
+    const subtitle = new Text(model.subtitle).fontSize(16.0).textColor(rgb(148, 163, 184)) as Text;
+    this.statusText = new Text("Home counter: 0").fontSize(18.0).textColor(rgb(147, 197, 253)) as Text;
+    this.hostServiceText = new Text("Host service time: -").fontSize(15.0).textColor(rgb(191, 219, 254)) as Text;
+    this.hostEventText = new Text("Host event tick: -").fontSize(15.0).textColor(rgb(134, 239, 172)) as Text;
+    this.actionButton = new MvcPrimaryButton(model.actionLabel);
+
+    const content = Column(
+      navBar,
+      new FlexBox().height(24.0, Unit.Pixel),
+      title,
+      new FlexBox().height(12.0, Unit.Pixel),
+      subtitle,
+      new FlexBox().height(20.0, Unit.Pixel),
+      this.statusText,
+      new FlexBox().height(10.0, Unit.Pixel),
+      this.hostServiceText,
+      this.hostEventText,
+      new FlexBox().height(16.0, Unit.Pixel),
+      this.actionButton,
+    )
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .padding(24.0, 24.0, 24.0, 24.0);
+
+    this.root = new SelectionArea()
+      .fillWidth()
+      .fillHeight()
+      .bgColor(rgb(2, 6, 23))
+      .child(content) as SelectionArea;
+  }
+
+  getRoot(): SelectionArea {
+    return this.root;
+  }
+
+  setActionCount(count: i32): void {
+    this.statusText.text("Home counter: " + count.toString());
+  }
+
+  setHostServiceSeconds(value: i32): void {
+    this.hostServiceText.text("Host service time: " + value.toString());
+  }
+
+  setHostEventSeconds(value: i32): void {
+    this.hostEventText.text("Host event tick: " + value.toString());
+  }
+}

package/build/templates/mvc/src/routes/mvc/pages/settings/SettingsController.ts

@@ -0,0 +1,27 @@
+import { Application, Node } from "../../../../fui/Fui";
+import { SettingsModel } from "./SettingsModel";
+import { SettingsView } from "./SettingsView";
+
+export class SettingsController {
+  readonly model: SettingsModel = new SettingsModel();
+  readonly view: SettingsView = new SettingsView(this.model);
+
+  constructor() {
+    this.view.actionButton.onClickWith(this, (controller) => {
+      controller.model.saveCount += 1;
+      controller.view.setSaveCount(controller.model.saveCount);
+    });
+  }
+
+  getRoot(): Node {
+    return this.view.getRoot();
+  }
+
+  mount(): void {
+    Application.mount(this.view.getRoot());
+  }
+
+  dispose(): void {
+    Application.unmount();
+  }
+}

package/build/templates/mvc/src/routes/mvc/pages/settings/SettingsModel.ts

@@ -0,0 +1,6 @@
+export class SettingsModel {
+  saveCount: i32 = 0;
+  readonly title: string = "Settings page";
+  readonly subtitle: string = "This page is a separate MVC slice with its own model and controller.";
+  readonly actionLabel: string = "Save settings";
+}

package/build/templates/mvc/src/routes/mvc/pages/settings/SettingsView.ts

@@ -0,0 +1,61 @@
+import { Column, FlexBox, JustifyContent, Row, SelectionArea, Text, Unit, rgb } from "../../../../fui/Fui";
+import { MvcNavPill } from "../../shared/design-system/MvcNavPill";
+import { MvcPrimaryButton } from "../../shared/design-system/MvcPrimaryButton";
+import { mvcHomeRoute, mvcSettingsRoute } from "../../shared/routes";
+import { SettingsModel } from "./SettingsModel";
+
+function navSpacer(): FlexBox {
+  return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);
+}
+
+export class SettingsView {
+  readonly actionButton: MvcPrimaryButton;
+  private readonly statusText: Text;
+  private readonly root!: SelectionArea;
+
+  constructor(model: SettingsModel) {
+    const homePill = new MvcNavPill(mvcHomeRoute(), "Home").active(false);
+    const settingsPill = new MvcNavPill(mvcSettingsRoute(), "Settings").active(true);
+
+    const navBar = Row()
+      .width(100.0, Unit.Percent)
+      .justifyContent(JustifyContent.End)
+      .child(homePill)
+      .child(navSpacer())
+      .child(settingsPill);
+
+    const title = new Text(model.title).fontSize(34.0).textColor(rgb(241, 245, 249)) as Text;
+    const subtitle = new Text(model.subtitle).fontSize(16.0).textColor(rgb(148, 163, 184)) as Text;
+    this.statusText = new Text("Settings saved: 0").fontSize(18.0).textColor(rgb(134, 239, 172)) as Text;
+    this.actionButton = new MvcPrimaryButton(model.actionLabel);
+
+    const content = Column(
+      navBar,
+      new FlexBox().height(24.0, Unit.Pixel),
+      title,
+      new FlexBox().height(12.0, Unit.Pixel),
+      subtitle,
+      new FlexBox().height(20.0, Unit.Pixel),
+      this.statusText,
+      new FlexBox().height(16.0, Unit.Pixel),
+      this.actionButton,
+    )
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .padding(24.0, 24.0, 24.0, 24.0);
+
+    this.root = new SelectionArea()
+      .fillWidth()
+      .fillHeight()
+      .bgColor(rgb(2, 6, 23))
+      .child(content) as SelectionArea;
+  }
+
+  getRoot(): SelectionArea {
+    return this.root;
+  }
+
+  setSaveCount(count: i32): void {
+    this.statusText.text("Settings saved: " + count.toString());
+  }
+}

package/build/templates/mvc/src/routes/mvc/shared/design-system/MvcNavPill.ts

@@ -0,0 +1,42 @@
+import { NavLink, Text, rgb } from "../../../../fui/Fui";
+
+const PILL_RADIUS: f32 = 999.0;
+const PILL_PADDING_X: f32 = 16.0;
+const PILL_PADDING_Y: f32 = 8.0;
+const PILL_INACTIVE_BG: u32 = rgb(33, 45, 67);
+const PILL_ACTIVE_BG: u32 = rgb(34, 197, 94);
+const PILL_INACTIVE_TEXT: u32 = rgb(226, 232, 240);
+const PILL_ACTIVE_TEXT: u32 = rgb(12, 16, 24);
+
+export class MvcNavPill extends NavLink {
+  private readonly labelNode: Text;
+  private activeValue: bool = false;
+
+  constructor(href: string, label: string) {
+    super(href, label, false);
+    this.labelNode = new Text(label)
+      .fontSize(14.0)
+      .selectable(false) as Text;
+    this
+      .cornerRadius(PILL_RADIUS)
+      .padding(PILL_PADDING_X, PILL_PADDING_Y, PILL_PADDING_X, PILL_PADDING_Y)
+      .child(this.labelNode);
+    this.applyVisualState();
+  }
+
+  active(flag: bool = true): this {
+    this.activeValue = flag;
+    this.applyVisualState();
+    return this;
+  }
+
+  private applyVisualState(): void {
+    if (this.activeValue) {
+      this.bgColor(PILL_ACTIVE_BG);
+      this.labelNode.textColor(PILL_ACTIVE_TEXT);
+      return;
+    }
+    this.bgColor(PILL_INACTIVE_BG);
+    this.labelNode.textColor(PILL_INACTIVE_TEXT);
+  }
+}

package/build/templates/mvc/src/routes/mvc/shared/design-system/MvcPrimaryButton.ts

@@ -0,0 +1,19 @@
+import { Button, rgb } from "../../../../fui/Fui";
+
+const BUTTON_RADIUS: f32 = 12.0;
+const BUTTON_PADDING_X: f32 = 18.0;
+const BUTTON_PADDING_Y: f32 = 10.0;
+const BUTTON_BG: u32 = rgb(59, 130, 246);
+const BUTTON_TEXT: u32 = rgb(241, 245, 249);
+
+export class MvcPrimaryButton extends Button {
+  constructor(label: string) {
+    super(label);
+    this
+      .cornerRadius(BUTTON_RADIUS)
+      .padding(BUTTON_PADDING_X, BUTTON_PADDING_Y, BUTTON_PADDING_X, BUTTON_PADDING_Y)
+      .bgColor(BUTTON_BG)
+      .textColor(BUTTON_TEXT)
+      .fontSize(14.0);
+  }
+}

package/build/templates/mvc/src/routes/mvc/shared/routes.ts

@@ -0,0 +1,22 @@
+import { currentRoute } from "../../../fui/Fui";
+
+const SOURCE_DEMO_BASE: string = "/v2/fui-as/demo-mvc";
+const SOURCE_HOME_ROUTE: string = "/v2/fui-as/demo-mvc/mvc-home/";
+const SOURCE_SETTINGS_ROUTE: string = "/v2/fui-as/demo-mvc/mvc-settings/";
+const PUBLISHED_HOME_ROUTE: string = "/mvc-home/";
+const PUBLISHED_SETTINGS_ROUTE: string = "/mvc-settings/";
+
+function isSourceDemoRoute(route: string): bool {
+  if (route.length == 0) {
+    return true;
+  }
+  return route.startsWith(SOURCE_DEMO_BASE);
+}
+
+export function mvcHomeRoute(): string {
+  return isSourceDemoRoute(currentRoute.value) ? SOURCE_HOME_ROUTE : PUBLISHED_HOME_ROUTE;
+}
+
+export function mvcSettingsRoute(): string {
+  return isSourceDemoRoute(currentRoute.value) ? SOURCE_SETTINGS_ROUTE : PUBLISHED_SETTINGS_ROUTE;
+}

package/build/templates/mvc/src/routes/mvc_home.ts

@@ -0,0 +1,20 @@
+export * from "../fui/FuiExports";
+export * from "../host/generated/HostEvents";
+
+import { Node, createManagedApplication } from "../fui/Fui";
+import { HomeController } from "./mvc/pages/home/HomeController";
+
+const app = createManagedApplication<HomeController>(
+  () => new HomeController(),
+  (controller): Node => controller.getRoot(),
+  (controller): void => controller.mount(),
+  (controller): void => controller.dispose(),
+);
+
+export function __runApp(): void {
+  app.run();
+}
+
+export function __disposeApp(): void {
+  app.dispose();
+}

package/build/templates/mvc/src/routes/mvc_settings.ts

@@ -0,0 +1,20 @@
+export * from "../fui/FuiExports";
+export * from "../host/generated/HostEvents";
+
+import { Node, createManagedApplication } from "../fui/Fui";
+import { SettingsController } from "./mvc/pages/settings/SettingsController";
+
+const app = createManagedApplication<SettingsController>(
+  () => new SettingsController(),
+  (controller): Node => controller.getRoot(),
+  (controller): void => controller.mount(),
+  (controller): void => controller.dispose(),
+);
+
+export function __runApp(): void {
+  app.run();
+}
+
+export function __disposeApp(): void {
+  app.dispose();
+}

package/build/templates/mvc/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "assemblyscript/std/assembly.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/dist/scripts/sync-templates.d.ts

@@ -0,0 +1 @@
+export {};