@myop/vue 0.0.25 → 0.0.26

package/README.md

@@ -24,6 +24,81 @@ yarn add @myop/vue
 pnpm add @myop/vue
 ```
 
+## Auto-Generated Vue Components
+
+Myop automatically generates a typed Vue component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:
+
+```bash
+npm install https://cloud.myop.dev/npm/{component-id}/vue
+```
+
+Then import and use it like any Vue component. For example, if you created a table component called "users-table" in the dashboard:
+
+```vue
+<script setup lang="ts">
+import { UsersTable } from "@myop/users-table";
+
+const users = [
+  { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
+  { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
+  { id: 3, name: "Charlie", email: "charlie@example.com", role: "User" },
+];
+
+function handleRowClicked(payload: { rowData: any }) {
+  console.log("Selected user:", payload.rowData);
+}
+
+function handleDeleteClicked(payload: { userId: number }) {
+  deleteUser(payload.userId);
+}
+
+function handleExportRequested(payload: { format: "csv" | "xlsx" }) {
+  exportToFormat(payload.format);
+}
+</script>
+
+<template>
+  <UsersTable
+    :data="{ rows: users }"
+    @row-clicked="handleRowClicked"
+    @delete-clicked="handleDeleteClicked"
+    @export-requested="handleExportRequested"
+  />
+</template>
+```
+
+**Why this is powerful:**
+
+- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
+- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
+- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
+- **Zero bundle impact** — The entire `@myop/vue` package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed
+
+**Environment options:**
+
+Set the default environment for all components using `setEnvironment`:
+
+```ts
+import { setEnvironment } from "@myop/vue";
+
+// Set default environment for all component loads
+setEnvironment("staging");
+```
+
+You can also override the environment directly on a specific component:
+
+```vue
+<template>
+  <UsersTable
+    :data="{ rows: users }"
+    :preview="true"
+    environment="staging"
+  />
+</template>
+```
+
+Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.
+
 ## Requirements
 
 - Vue 3.0+
@@ -32,57 +107,55 @@ pnpm add @myop/vue
 
 ```vue
 <script setup lang="ts">
-import { MyopContainer } from "@myop/vue";
+import { MyopComponent } from "@myop/vue";
 
-function handleReady(component) {
-  console.log("Component loaded!", component);
+function handleAction(action: string, payload: any) {
+  console.log("Action:", action, "Payload:", payload);
 }
 </script>
 
 <template>
-  <MyopContainer
+  <MyopComponent
     componentId="your-component-id"
-    :onReady="handleReady"
     :style="{ width: '600px', height: '400px' }"
+    @action="handleAction"
   />
 </template>
 ```
 
 ## Components
 
-### `MyopContainer`
+### `MyopComponent`
 
-The main component for embedding Myop components in Vue applications.
+The main component for embedding Myop components.
 
 ```vue
 <script setup lang="ts">
-import { MyopContainer } from "@myop/vue";
-import type { IMyopComponent } from "@myop/sdk/host";
+import { MyopComponent } from "@myop/vue";
 
-const items = [
-  { id: 1, name: "Item 1" },
-  { id: 2, name: "Item 2" },
-];
+const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }];
+
+function handleRowClicked(payload: any) {
+  console.log("Row clicked:", payload);
+}
+
+function handleLoad(component: any) {
+  console.log("Loaded!", component);
+}
 
-function handleReady(component: IMyopComponent, innerVueComponentRef?: any) {
-  console.log("Component ready!", component);
-  // Access inner Vue component if the Myop component is Vue-based
-  if (innerVueComponentRef) {
-    console.log("Inner Vue component:", innerVueComponentRef);
-  }
+function handleError(error: string) {
+  console.error("Error:", error);
 }
 </script>
 
 <template>
-  <MyopContainer
+  <MyopComponent
     componentId="abc123"
-    :items="items"
-    :onReady="handleReady"
-  >
-    <template #loading>
-      <div class="loading-spinner">Loading...</div>
-    </template>
-  </MyopContainer>
+    :data="{ items }"
+    @row-clicked="handleRowClicked"
+    @load="handleLoad"
+    @error="handleError"
+  />
 </template>
 ```
 
@@ -90,132 +163,235 @@ function handleReady(component: IMyopComponent, innerVueComponentRef?: any) {
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `componentId` | `string` | **Required.** The ID of the Myop component to load |
-| `flowId` | `string` | Optional flow ID for component resolution |
-| `onReady` | `(component, innerVueRef?) => void` | Called when the component finishes loading |
+| `componentId` | `string` | The ID of the Myop component to load |
+| `data` | `object` | Data to pass to the component via `myop_init_interface` |
+| `style` | `object` | CSS styles for the container |
+| `#loader` | `slot` | Loading indicator slot (default: no loader). Use `<MyopLoader />` for default Myop loader |
+| `#fallback` | `slot` | Error fallback slot (default: `<MyopFallback />`). Override with custom component |
+| `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |
+| `environment` | `string` | Load from a specific environment (e.g., `"staging"`, `"prod"`) |
+| `preview` | `boolean` | Load the unpublished preview version of the component |
+
+#### Events
 
-#### Passing Data
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `@action` | `(action, payload)` | Generic handler for all CTA events |
+| `@[action-name]` | `payload` | Handler for specific actions (e.g., `@row-clicked`) |
+| `@load` | `component` | Called when the component finishes loading |
+| `@error` | `error: string` | Called when loading fails |
 
-Pass data to your Myop component using Vue's attribute binding. All attributes are forwarded to the component:
+#### Environments & Preview
+
+Myop supports multiple environments, allowing you to test changes before going live:
 
 ```vue
 <template>
-  <MyopContainer
-    componentId="my-table"
-    :rows="tableData"
-    :columns="columnConfig"
-    :sortable="true"
-    title="Users Table"
-  />
-</template>
-```
+  <!-- Production (default) -->
+  <MyopComponent componentId="abc123" />
 
-#### Loading Slot
+  <!-- Load from staging environment -->
+  <MyopComponent componentId="abc123" environment="staging" />
 
-Display a custom loading indicator using the `loading` slot:
+  <!-- Load unpublished preview version (for testing before publishing) -->
+  <MyopComponent componentId="abc123" :preview="true" />
 
-```vue
-<template>
-  <MyopContainer componentId="my-component">
-    <template #loading>
-      <div class="custom-loader">
-        <span>Loading component...</span>
-      </div>
-    </template>
-  </MyopContainer>
+  <!-- Combine both: preview version in staging -->
+  <MyopComponent componentId="abc123" environment="staging" :preview="true" />
 </template>
 ```
 
-## Vue-to-Vue Integration
+Environments are configured in the [dashboard](https://dashboard.myop.dev/). Use `:preview="true"` to test unpublished changes before making them live.
 
-When your Myop component is built with Vue, you get seamless integration:
+### `MyopContainer` (Legacy)
 
-- **Prop reactivity**: Props passed to `MyopContainer` automatically flow to the inner Vue component
-- **Expose access**: Access the inner component's exposed properties and methods via the `innerVueComponentRef` parameter in `onReady`
+The legacy container component. Use `MyopComponent` for new projects.
 
 ```vue
 <script setup lang="ts">
-import { ref } from "vue";
 import { MyopContainer } from "@myop/vue";
 
-const myopContainerRef = ref(null);
-
-function handleReady(component, innerVueRef) {
-  // Call methods exposed by the inner Vue component
-  if (innerVueRef?.someMethod) {
-    innerVueRef.someMethod();
-  }
+function handleReady(component: any) {
+  console.log("Ready!", component);
 }
 </script>
 
 <template>
   <MyopContainer
-    ref="myopContainerRef"
-    componentId="vue-component"
+    componentId="abc123"
     :onReady="handleReady"
   />
 </template>
 ```
 
-## Handling Events
+## Type-Safe Event Handlers
 
-Myop components can emit CTA (Call-to-Action) events. Handle them using the component reference:
+Define your CTA payloads for fully typed event handlers:
 
 ```vue
 <script setup lang="ts">
-import { MyopContainer } from "@myop/vue";
+import { MyopComponent } from "@myop/vue";
+
+// Define your component's data and CTA payload types
+interface MyData {
+  items: { id: string; name: string }[];
+}
 
-function handleReady(component) {
-  // Subscribe to CTA events
-  component.on("row-clicked", (payload) => {
-    console.log("Row clicked:", payload);
-  });
+interface RowClickedPayload {
+  rowIndex: number;
+  rowData: any;
+}
 
-  component.on("export-requested", (payload) => {
-    console.log("Export format:", payload.format);
-  });
+interface ItemSelectedPayload {
+  itemId: string;
+}
+
+interface ExportRequestedPayload {
+  format: "csv" | "json";
+}
+
+function handleRowClicked(payload: RowClickedPayload) {
+  console.log("Row clicked:", payload.rowIndex);
+}
+
+function handleItemSelected(payload: ItemSelectedPayload) {
+  console.log("Item selected:", payload.itemId);
+}
+
+function handleAction(action: string, payload: any) {
+  console.log(action, payload);
 }
 </script>
 
 <template>
-  <MyopContainer
-    componentId="data-table"
-    :onReady="handleReady"
+  <MyopComponent
+    componentId="dashboard-component"
+    :data="{ items: [...] }"
+    @row-clicked="handleRowClicked"
+    @item-selected="handleItemSelected"
+    @action="handleAction"
   />
 </template>
 ```
 
-## TypeScript Support
+## Configuration
+
+### Preloading Components
+
+Preload components for faster rendering:
+
+```ts
+import { preloadComponents, isPreloaded } from "@myop/vue";
+
+// Preload multiple components
+await preloadComponents(["component-1", "component-2"]);
+
+// Check if a component is preloaded
+if (isPreloaded("component-1")) {
+  console.log("Component is cached and ready");
+}
+```
+
+### Custom Repository URL
+
+```ts
+import { setCloudRepositoryUrl } from "@myop/vue";
+
+// Point to a custom Myop server
+setCloudRepositoryUrl("https://your-custom-server.com");
+```
+
+### Environment Configuration
+
+```ts
+import { setEnvironment } from "@myop/vue";
+
+// Set default environment for all component loads
+setEnvironment("staging");
+```
+
+### Local Development
+
+```ts
+import { enableLocalDev } from "@myop/vue";
+
+// Connect to local Myop development server (localhost:9292)
+enableLocalDev();
+```
+
+### Advanced: Custom Repository
+
+```ts
+import { setCloudRepository, getCloudRepository } from "@myop/vue";
+import { CloudRepository } from "@myop/sdk/helpers";
+
+// Set a custom CloudRepository instance
+const customRepo = new CloudRepository("https://custom-url.com");
+setCloudRepository(customRepo);
+
+// Get the current repository
+const repo = getCloudRepository();
+```
+
+## Loading & Error States
+
+By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.
 
-The package includes full TypeScript support:
+### Using the Default Myop Loader
 
 ```vue
 <script setup lang="ts">
-import { MyopContainer } from "@myop/vue";
-import type { IMyopComponent } from "@myop/sdk/host";
+import { MyopComponent, MyopLoader } from "@myop/vue";
+</script>
 
-interface TableData {
-  rows: { id: number; name: string }[];
-}
+<template>
+  <MyopComponent componentId="my-component" :fadeDuration="300">
+    <template #loader>
+      <MyopLoader />
+    </template>
+  </MyopComponent>
+</template>
+```
 
-const tableData: TableData = {
-  rows: [
-    { id: 1, name: "Alice" },
-    { id: 2, name: "Bob" },
-  ],
-};
+### Custom Loading State
 
-function handleReady(component: IMyopComponent) {
-  console.log("Loaded:", component);
-}
+```vue
+<template>
+  <MyopComponent componentId="my-component" :fadeDuration="300">
+    <template #loader>
+      <div class="custom-loader">
+        <Spinner />
+        <p>Loading component...</p>
+      </div>
+    </template>
+  </MyopComponent>
+</template>
+```
+
+### Custom Error Fallback
+
+```vue
+<script setup lang="ts">
+import { MyopComponent, MyopFallback } from "@myop/vue";
 </script>
 
 <template>
-  <MyopContainer
-    componentId="users-table"
-    v-bind="tableData"
-    :onReady="handleReady"
-  />
+  <MyopComponent componentId="my-component">
+    <!-- Custom fallback -->
+    <template #fallback>
+      <div class="error-state">
+        <p>Failed to load component</p>
+        <button @click="() => window.location.reload()">Retry</button>
+      </div>
+    </template>
+  </MyopComponent>
+
+  <!-- Or use default Myop fallback explicitly -->
+  <MyopComponent componentId="other-component">
+    <template #fallback>
+      <MyopFallback />
+    </template>
+  </MyopComponent>
 </template>
 ```
 
@@ -225,16 +401,17 @@ function handleReady(component: IMyopComponent) {
 
 | Export | Description |
 |--------|-------------|
-| `MyopContainer` | Main component for embedding Myop components |
-
-### MyopContainer Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `componentId` | `string` | Yes | The ID of the Myop component to load |
-| `flowId` | `string` | No | Flow ID for component resolution |
-| `onReady` | `function` | No | Callback when component is ready |
+| `MyopComponent` | Main component for embedding Myop components |
+| `MyopLoader` | Default Myop-branded loading indicator (opt-in) |
+| `MyopFallback` | Default Myop-branded error fallback |
+| `preloadComponents` | Preload components for faster rendering |
+| `isPreloaded` | Check if a component is cached |
+| `enableLocalDev` | Enable local development mode |
+| `setCloudRepositoryUrl` | Set custom server URL |
+| `setCloudRepository` | Set custom CloudRepository instance |
+| `getCloudRepository` | Get current CloudRepository instance |
+| `setEnvironment` | Set default environment |
 
 ## License
 
-MIT
+MIT

package/dist/components/MyopComponent.vue.d.ts

@@ -0,0 +1,27 @@
+import { type IMyopComponent } from "@myop/sdk/host";
+import type { SizeInfo, ITypedMyopComponent, IBaseProps } from "../types";
+declare const _default: <TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onError?: ((error: string) => any) | undefined;
+        readonly onLoad?: ((component: ITypedMyopComponent<TData, TCtaPayloads>) => any) | undefined;
+        readonly onSizeChange?: ((size: SizeInfo) => any) | undefined;
+        readonly onCta?: ((action: string, payload: any) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onLoad" | "onError" | "onSizeChange" | "onCta"> & IBaseProps<TData, TCtaPayloads> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        myopComponent: import("vue").ShallowRef<IMyopComponent<any, any> | null, IMyopComponent<any, any> | null>;
+        isLoaded: import("vue").Ref<boolean, boolean>;
+    }>): void;
+    attrs: any;
+    slots: {
+        loader?: (props: {}) => any;
+    } & {
+        fallback?: (props: {}) => any;
+    };
+    emit: ((evt: "error", error: string) => void) & ((evt: "load", component: ITypedMyopComponent<TData, TCtaPayloads>) => void) & ((evt: "sizeChange", size: SizeInfo) => void) & ((evt: "cta", action: string, payload: any) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MyopFallback.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/MyopLoader.vue.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    opacity?: number;
+    fadeDuration?: number;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    opacity: number;
+    fadeDuration: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -1 +1,44 @@
-export { default as MyopContainer } from './components/MyopVueComponent.vue';
+export { default as MyopComponent } from "./components/MyopComponent.vue";
+export { default as MyopLoader } from "./components/MyopLoader.vue";
+export { default as MyopFallback } from "./components/MyopFallback.vue";
+export { default as MyopContainer } from "./components/MyopVueComponent.vue";
+export type { IMyopComponent } from "@myop/sdk/host";
+export type { IComponentInstanceConfig, SizeInfo, IPropTypes, KebabToPascal, EventHandlerProps, IMyopComponentProps, ITypedMyopComponent, } from "./types";
+import { CloudRepository } from "@myop/sdk/helpers";
+/**
+ * Get the current CloudRepository instance
+ */
+export declare const getCloudRepository: () => CloudRepository;
+/**
+ * Check if a component is already preloaded/cached
+ * If env/preview not provided, checks if ANY version is preloaded
+ */
+export declare const isPreloaded: (componentId: string, env?: string, preview?: boolean) => boolean;
+/**
+ * Get the preloaded params for a component
+ */
+export declare const getPreloadedParams: (componentId: string) => {
+    env: string;
+    preview: boolean;
+} | undefined;
+/**
+ * Enable local development mode
+ */
+export declare const enableLocalDev: () => void;
+/**
+ * Set a custom CloudRepository URL
+ */
+export declare const setCloudRepositoryUrl: (url: string) => void;
+/**
+ * Set a custom CloudRepository instance
+ */
+export declare const setCloudRepository: (repository: CloudRepository) => void;
+/**
+ * Set the default environment for component loading
+ */
+export declare const setEnvironment: (env: string) => void;
+/**
+ * Preload components for faster rendering.
+ * Continues even if some components fail to load.
+ */
+export declare const preloadComponents: (ids: string[], env?: string, preview?: boolean) => Promise<PromiseSettledResult<import("@myop/sdk/common").IComponentConfig>[]>;