@thatopen/services 0.5.0 → 0.7.0

package/src/cli/templates/app/package.json

@@ -1,33 +1,33 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "thatopen serve",
-    "build": "vite build",
-    "login": "thatopen login --local",
-    "publish": "thatopen publish"
-  },
-  "dependencies": {
-    "@lit/context": "^1.1.6",
-    "lit": "^3.0.0",
-    "@markerjs/markerjs3": "^3.9.0",
-    "@thatopen/components": "~3.4.0",
-    "@thatopen/components-front": "~3.4.0",
-    "@thatopen/fragments": "~3.4.0",
-    "@thatopen/services": "file:../../../..",
-    "@thatopen/ui": "~3.4.0",
-    "three": "0.185.0",
-    "@sparkjsdev/spark": "^0.1.10",
-    "3d-tiles-renderer": "^0.4.28",
-    "camera-controls": "^3.1.2",
-    "opentype.js": "1.3.4",
-    "potree-core": "^2.0.15",
-    "web-ifc": "^0.0.77"
-  },
-  "devDependencies": {
-    "@types/three": "^0.182.0",
-    "typescript": "^5.2.0",
-    "vite": "^5.2.0"
-  }
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "thatopen serve",
+    "build": "vite build",
+    "login": "thatopen login --local",
+    "publish": "thatopen publish"
+  },
+  "dependencies": {
+    "@lit/context": "^1.1.6",
+    "lit": "^3.0.0",
+    "@markerjs/markerjs3": "^3.9.0",
+    "@thatopen/components": "~3.4.0",
+    "@thatopen/components-front": "~3.4.0",
+    "@thatopen/fragments": "~3.4.0",
+    "@thatopen/services": "file:../../../..",
+    "@thatopen/ui": "~3.4.0",
+    "three": "0.185.0",
+    "@sparkjsdev/spark": "^0.1.10",
+    "3d-tiles-renderer": "^0.4.28",
+    "camera-controls": "^3.1.2",
+    "opentype.js": "1.3.4",
+    "potree-core": "^2.0.15",
+    "web-ifc": "^0.0.77"
+  },
+  "devDependencies": {
+    "@types/three": "^0.182.0",
+    "typescript": "^5.2.0",
+    "vite": "^5.2.0"
+  }
 }

package/src/cli/templates/app/src/bim-components/CloudRunner/index.ts

@@ -1,95 +1,95 @@
-import * as OBC from "@thatopen/components";
-import { getAppManager } from "../../app";
-import { CloudRunnerStatus } from "./src";
-
-export class CloudRunner extends OBC.Component {
-  static readonly uuid = "7c4e5d3b-2a1f-4e8d-9b6c-0a3f7e2c5d1b" as const;
-
-  enabled = true;
-
-  readonly onExecutionUpdated = new OBC.Event<CloudRunnerStatus>();
-
-  // TODO: Replace with your actual component ID after publishing.
-  componentId = "your-component-id";
-  localServerUrl = "http://localhost:4001";
-
-  // Reactive state — read by the UI template on each render.
-  status = "Idle";
-  progress = 0;
-  messages: string[] = [];
-
-  constructor(components: OBC.Components) {
-    super(components);
-    components.add(CloudRunner.uuid, this);
-  }
-
-  async run(useLocal: boolean) {
-    // Resolve client at call time via the app shim — never store it as a field.
-    const client = getAppManager(this.components).client;
-    if (!client) {
-      this.status = "No platform client available.";
-      this._trigger();
-      return;
-    }
-
-    client.localServerUrl = useLocal ? this.localServerUrl : null;
-
-    this.status = useLocal ? "Starting (local)..." : "Starting (deployed)...";
-    this.progress = 0;
-    this.messages = [];
-    this._trigger();
-
-    try {
-      const { executionId } = await client.executeComponent(this.componentId, {
-        greeting: "Hello from the BIM app!",
-      });
-
-      this.status = `Running (${executionId.slice(0, 8)}...)`;
-      this._trigger();
-
-      // Subscribe to real-time progress updates via WebSocket.
-      client.onExecutionProgress(executionId, (data) => {
-        if (data.progressUpdate) {
-          this.progress = data.progressUpdate.progress;
-          if (data.progressUpdate.result) {
-            this.status = `${data.progressUpdate.result}: ${data.progressUpdate.resultMessage ?? "Done"}`;
-          }
-        }
-        if (data.messageUpdate) {
-          this.messages.push(data.messageUpdate.content);
-        }
-        this._trigger();
-      });
-
-      // Poll once after a short delay to catch fast executions that complete
-      // before the WebSocket subscription is established.
-      setTimeout(async () => {
-        try {
-          const exec = await client.getExecution(executionId);
-          if (exec.result) {
-            this.progress = exec.progress;
-            this.status = `${exec.result}: ${exec.resultMessage ?? "Done"}`;
-            this._trigger();
-          }
-        } catch {
-          /* WebSocket handles it */
-        }
-      }, 2000);
-    } catch (err) {
-      this.status = `Error: ${err}`;
-      this._trigger();
-    } finally {
-      client.localServerUrl = null;
-    }
-  }
-
-  private _trigger() {
-    this.onExecutionUpdated.trigger({
-      status: this.status,
-      progress: this.progress,
-      messages: [...this.messages],
-    });
-  }
-}
-
-export * from "./src";
+import * as OBC from "@thatopen/components";
+import { getAppManager } from "../../app";
+import { CloudRunnerStatus } from "./src";
+
+export class CloudRunner extends OBC.Component {
+  static readonly uuid = "7c4e5d3b-2a1f-4e8d-9b6c-0a3f7e2c5d1b" as const;
+
+  enabled = true;
+
+  readonly onExecutionUpdated = new OBC.Event<CloudRunnerStatus>();
+
+  // TODO: Replace with your actual component ID after publishing.
+  componentId = "your-component-id";
+  localServerUrl = "http://localhost:4001";
+
+  // Reactive state — read by the UI template on each render.
+  status = "Idle";
+  progress = 0;
+  messages: string[] = [];
+
+  constructor(components: OBC.Components) {
+    super(components);
+    components.add(CloudRunner.uuid, this);
+  }
+
+  async run(useLocal: boolean) {
+    // Resolve client at call time via the app shim — never store it as a field.
+    const client = getAppManager(this.components).client;
+    if (!client) {
+      this.status = "No platform client available.";
+      this._trigger();
+      return;
+    }
+
+    client.localServerUrl = useLocal ? this.localServerUrl : null;
+
+    this.status = useLocal ? "Starting (local)..." : "Starting (deployed)...";
+    this.progress = 0;
+    this.messages = [];
+    this._trigger();
+
+    try {
+      const { executionId } = await client.executeComponent(this.componentId, {
+        greeting: "Hello from the BIM app!",
+      });
+
+      this.status = `Running (${executionId.slice(0, 8)}...)`;
+      this._trigger();
+
+      // Subscribe to real-time progress updates via WebSocket.
+      client.onExecutionProgress(executionId, (data) => {
+        if (data.progressUpdate) {
+          this.progress = data.progressUpdate.progress;
+          if (data.progressUpdate.result) {
+            this.status = `${data.progressUpdate.result}: ${data.progressUpdate.resultMessage ?? "Done"}`;
+          }
+        }
+        if (data.messageUpdate) {
+          this.messages.push(data.messageUpdate.content);
+        }
+        this._trigger();
+      });
+
+      // Poll once after a short delay to catch fast executions that complete
+      // before the WebSocket subscription is established.
+      setTimeout(async () => {
+        try {
+          const exec = await client.getExecution(executionId);
+          if (exec.result) {
+            this.progress = exec.progress;
+            this.status = `${exec.result}: ${exec.resultMessage ?? "Done"}`;
+            this._trigger();
+          }
+        } catch {
+          /* WebSocket handles it */
+        }
+      }, 2000);
+    } catch (err) {
+      this.status = `Error: ${err}`;
+      this._trigger();
+    } finally {
+      client.localServerUrl = null;
+    }
+  }
+
+  private _trigger() {
+    this.onExecutionUpdated.trigger({
+      status: this.status,
+      progress: this.progress,
+      messages: [...this.messages],
+    });
+  }
+}
+
+export * from "./src";

package/src/cli/templates/app/src/bim-components/CloudRunner/src/index.ts

@@ -1 +1 @@
-export * from "./types";
+export * from "./types";

package/src/cli/templates/app/src/bim-components/CloudRunner/src/types.ts

@@ -1,5 +1,5 @@
-export interface CloudRunnerStatus {
-  status: string;
-  progress: number;
-  messages: string[];
-}
+export interface CloudRunnerStatus {
+  status: string;
+  progress: number;
+  messages: string[];
+}

package/src/cli/templates/app/src/bim-components/index.ts

@@ -1 +1 @@
-export * from "./CloudRunner";
+export * from "./CloudRunner";

package/src/cli/templates/app/src/globals.ts

@@ -1 +1 @@
-export const icons = {};
+export const icons = {};

package/src/cli/templates/app/src/ui-components/app-info-section/index.ts

@@ -1,26 +1,26 @@
-import * as BUI from "@thatopen/ui";
-import { AppInfoSectionComponent } from "./src";
-import { getAppManager } from "../../app";
-
-export const appInfoSectionTemplate: AppInfoSectionComponent = ({
-  components,
-}) => {
-  const app = getAppManager(components);
-
-  const fileItems =
-    app.projectData?.files.map(
-      (f: { name: string }) => BUI.html`<bim-label>${f.name}</bim-label>`,
-    ) ?? [];
-
-  return BUI.html`
-    <bim-panel-section label="App Info" icon="solar:info-circle-bold">
-      <bim-label>App ID: ${app.client?.context.appId}</bim-label>
-      <bim-label>Project ID: ${app.client?.context.projectId}</bim-label>
-      <bim-label>API URL: ${app.client?.context.apiUrl}</bim-label>
-      <bim-label>Files: ${fileItems.length}</bim-label>
-      ${fileItems}
-    </bim-panel-section>
-  `;
-};
-
-export * from "./src";
+import * as BUI from "@thatopen/ui";
+import { AppInfoSectionComponent } from "./src";
+import { getAppManager } from "../../app";
+
+export const appInfoSectionTemplate: AppInfoSectionComponent = ({
+  components,
+}) => {
+  const app = getAppManager(components);
+
+  const fileItems =
+    app.projectData?.files.map(
+      (f: { name: string }) => BUI.html`<bim-label>${f.name}</bim-label>`,
+    ) ?? [];
+
+  return BUI.html`
+    <bim-panel-section label="App Info" icon="solar:info-circle-bold">
+      <bim-label>App ID: ${app.client?.context.appId}</bim-label>
+      <bim-label>Project ID: ${app.client?.context.projectId}</bim-label>
+      <bim-label>API URL: ${app.client?.context.apiUrl}</bim-label>
+      <bim-label>Files: ${fileItems.length}</bim-label>
+      ${fileItems}
+    </bim-panel-section>
+  `;
+};
+
+export * from "./src";

package/src/cli/templates/app/src/ui-components/app-info-section/src/index.ts

@@ -1 +1 @@
-export * from "./types";
+export * from "./types";

package/src/cli/templates/app/src/ui-components/app-info-section/src/types.ts

@@ -1,15 +1,15 @@
-import * as BUI from "@thatopen/ui";
-import * as OBC from "@thatopen/components";
-
-export interface AppInfoSectionState {
-  components: OBC.Components;
-}
-
-export type AppInfoSectionComponent =
-  BUI.StatefullComponent<AppInfoSectionState>;
-
-// Used in App type (app.ts) to type this element slot in the grid.
-export type AppInfoSectionGridElement = {
-  name: "appInfoSection";
-  state: AppInfoSectionState;
-};
+import * as BUI from "@thatopen/ui";
+import * as OBC from "@thatopen/components";
+
+export interface AppInfoSectionState {
+  components: OBC.Components;
+}
+
+export type AppInfoSectionComponent =
+  BUI.StatefullComponent<AppInfoSectionState>;
+
+// Used in App type (app.ts) to type this element slot in the grid.
+export type AppInfoSectionGridElement = {
+  name: "appInfoSection";
+  state: AppInfoSectionState;
+};

package/src/cli/templates/app/src/ui-components/cloud-runner-section/index.ts

@@ -1,37 +1,37 @@
-import * as BUI from "@thatopen/ui";
-import { CloudRunner } from "../../bim-components";
-import { CloudRunnerSectionComponent } from "./src";
-
-export const cloudRunnerSectionTemplate: CloudRunnerSectionComponent = ({
-  components,
-}) => {
-  const runner = components.get(CloudRunner);
-
-  const messageItems = runner.messages.map(
-    (m) => BUI.html`<bim-label>${m}</bim-label>`,
-  );
-
-  return BUI.html`
-    <bim-panel-section label="Cloud Component" icon="solar:code-bold">
-      <bim-label>Component ID: ${runner.componentId}</bim-label>
-      <bim-label>Local server: ${runner.localServerUrl}</bim-label>
-      <div style="display:flex;gap:0.5rem;">
-        <bim-button
-          label="Run Local"
-          icon="solar:play-bold"
-          @click=${() => runner.run(true)}
-        ></bim-button>
-        <bim-button
-          label="Run Deployed"
-          icon="solar:cloud-bold-duotone"
-          @click=${() => runner.run(false)}
-        ></bim-button>
-      </div>
-      <bim-label>${runner.status}</bim-label>
-      <bim-label>Progress: ${runner.progress}%</bim-label>
-      ${messageItems}
-    </bim-panel-section>
-  `;
-};
-
-export * from "./src";
+import * as BUI from "@thatopen/ui";
+import { CloudRunner } from "../../bim-components";
+import { CloudRunnerSectionComponent } from "./src";
+
+export const cloudRunnerSectionTemplate: CloudRunnerSectionComponent = ({
+  components,
+}) => {
+  const runner = components.get(CloudRunner);
+
+  const messageItems = runner.messages.map(
+    (m) => BUI.html`<bim-label>${m}</bim-label>`,
+  );
+
+  return BUI.html`
+    <bim-panel-section label="Cloud Component" icon="solar:code-bold">
+      <bim-label>Component ID: ${runner.componentId}</bim-label>
+      <bim-label>Local server: ${runner.localServerUrl}</bim-label>
+      <div style="display:flex;gap:0.5rem;">
+        <bim-button
+          label="Run Local"
+          icon="solar:play-bold"
+          @click=${() => runner.run(true)}
+        ></bim-button>
+        <bim-button
+          label="Run Deployed"
+          icon="solar:cloud-bold-duotone"
+          @click=${() => runner.run(false)}
+        ></bim-button>
+      </div>
+      <bim-label>${runner.status}</bim-label>
+      <bim-label>Progress: ${runner.progress}%</bim-label>
+      ${messageItems}
+    </bim-panel-section>
+  `;
+};
+
+export * from "./src";

package/src/cli/templates/app/src/ui-components/cloud-runner-section/src/index.ts

@@ -1 +1 @@
-export * from "./types";
+export * from "./types";

package/src/cli/templates/app/src/ui-components/cloud-runner-section/src/types.ts

@@ -1,14 +1,14 @@
-import * as OBC from "@thatopen/components";
-import * as BUI from "@thatopen/ui";
-
-export interface CloudRunnerSectionState {
-  components: OBC.Components;
-}
-
-export type CloudRunnerSectionComponent =
-  BUI.StatefullComponent<CloudRunnerSectionState>;
-
-export type CloudRunnerSectionGridElement = {
-  name: "cloudRunnerSection";
-  state: CloudRunnerSectionState;
-};
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+
+export interface CloudRunnerSectionState {
+  components: OBC.Components;
+}
+
+export type CloudRunnerSectionComponent =
+  BUI.StatefullComponent<CloudRunnerSectionState>;
+
+export type CloudRunnerSectionGridElement = {
+  name: "cloudRunnerSection";
+  state: CloudRunnerSectionState;
+};

package/src/cli/templates/app/src/ui-components/index.ts

@@ -1,2 +1,2 @@
-export * from "./app-info-section";
-export * from "./cloud-runner-section";
+export * from "./app-info-section";
+export * from "./cloud-runner-section";

package/src/cli/templates/app/tsconfig.json

@@ -1,16 +1,16 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true
+  },
+  "include": ["src"]
+}

package/src/cli/templates/app/vite.config.js

@@ -1,57 +1,57 @@
-// Production build config — builds dist/bundle.js as IIFE.
-// For local development, use: npm run dev (runs thatopen serve with esbuild).
-// Do NOT run "vite" or "vite build --watch" directly for dev.
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-import { existsSync, readFileSync } from 'fs';
-
-// When `.thatopen` marks the project as beta, alias the public engine imports
-// to their `@thatopen-platform/*-beta` packages at build time, so the source
-// can use the stable import names in both stable and beta modes.
-function getBetaAliases() {
-  if (!existsSync('.thatopen')) return {};
-  try {
-    const config = JSON.parse(readFileSync('.thatopen', 'utf-8'));
-    if (!config.beta) return {};
-    return {
-      '@thatopen/components': '@thatopen-platform/components-beta',
-      '@thatopen/components-front': '@thatopen-platform/components-front-beta',
-      '@thatopen/fragments': '@thatopen-platform/fragments-beta',
-    };
-  } catch {
-    return {};
-  }
-}
-
-// Some three.js example loaders (e.g. TTFLoader) import their deps from a
-// jsdelivr `/+esm` CDN URL. A bundler can't put a URL import in an IIFE — it
-// degrades to a runtime `require("https://…")` that throws — so rewrite any such
-// URL back to the bare package name and let it resolve from node_modules.
-const CDN_ESM = /^https:\/\/cdn\.jsdelivr\.net\/npm\/((?:@[^/]+\/)?[^@/]+)(?:@[^/]+)?\/\+esm$/;
-
-export default defineConfig({
-  resolve: {
-    alias: [
-      { find: CDN_ESM, replacement: '$1' },
-      ...Object.entries(getBetaAliases()).map(([find, replacement]) => ({
-        find,
-        replacement,
-      })),
-    ],
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/main.ts'),
-      name: 'ThatOpenApp',
-      formats: ['iife'],
-      fileName: () => 'bundle.js',
-    },
-    outDir: 'dist',
-    sourcemap: true,
-    rollupOptions: {
-      output: {
-        entryFileNames: 'bundle.js',
-      },
-    },
-  },
-});
+// Production build config — builds dist/bundle.js as IIFE.
+// For local development, use: npm run dev (runs thatopen serve with esbuild).
+// Do NOT run "vite" or "vite build --watch" directly for dev.
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { existsSync, readFileSync } from 'fs';
+
+// When `.thatopen` marks the project as beta, alias the public engine imports
+// to their `@thatopen-platform/*-beta` packages at build time, so the source
+// can use the stable import names in both stable and beta modes.
+function getBetaAliases() {
+  if (!existsSync('.thatopen')) return {};
+  try {
+    const config = JSON.parse(readFileSync('.thatopen', 'utf-8'));
+    if (!config.beta) return {};
+    return {
+      '@thatopen/components': '@thatopen-platform/components-beta',
+      '@thatopen/components-front': '@thatopen-platform/components-front-beta',
+      '@thatopen/fragments': '@thatopen-platform/fragments-beta',
+    };
+  } catch {
+    return {};
+  }
+}
+
+// Some three.js example loaders (e.g. TTFLoader) import their deps from a
+// jsdelivr `/+esm` CDN URL. A bundler can't put a URL import in an IIFE — it
+// degrades to a runtime `require("https://…")` that throws — so rewrite any such
+// URL back to the bare package name and let it resolve from node_modules.
+const CDN_ESM = /^https:\/\/cdn\.jsdelivr\.net\/npm\/((?:@[^/]+\/)?[^@/]+)(?:@[^/]+)?\/\+esm$/;
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      { find: CDN_ESM, replacement: '$1' },
+      ...Object.entries(getBetaAliases()).map(([find, replacement]) => ({
+        find,
+        replacement,
+      })),
+    ],
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/main.ts'),
+      name: 'ThatOpenApp',
+      formats: ['iife'],
+      fileName: () => 'bundle.js',
+    },
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'bundle.js',
+      },
+    },
+  },
+});