@kustomizer/visual-editor 0.1.0 → 0.2.1

package/fesm2022/kustomizer-visual-editor.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, makeEnvironmentProviders, ViewContainerRef, DestroyRef, input, effect, reflectComponentType, ChangeDetectionStrategy, Component, computed, NgZone, signal, viewChild, output } from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, provideEnvironmentInitializer, signal, ViewContainerRef, DestroyRef, input, effect, reflectComponentType, ChangeDetectionStrategy, Component, computed, NgZone, viewChild, output, isDevMode } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { of, startWith, map, delay, throwError, isObservable, Observable, BehaviorSubject, tap, Subject, filter, debounceTime, switchMap as switchMap$1, takeUntil } from 'rxjs';
+import { of, startWith, map, delay, throwError, isObservable, Observable, BehaviorSubject, tap, Subject, filter, firstValueFrom, debounceTime, switchMap as switchMap$1, takeUntil } from 'rxjs';
 import { switchMap, map as map$1, catchError } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { createActionGroup, emptyProps, props, createReducer, on, createFeatureSelector, createSelector, provideState, Store } from '@ngrx/store';
@@ -2104,6 +2104,17 @@ function provideEditorComponents(definitions) {
             useValue: definitions,
             multi: true,
         },
+        // Fallback: directly register definitions via environment initializer.
+        // This ensures registration works even when the InjectionToken doesn't
+        // match between pre-bundled library code and app code (e.g. ng serve with Vite).
+        provideEnvironmentInitializer(() => {
+            const registry = inject(ComponentRegistryService);
+            for (const def of definitions) {
+                if (!registry.has(def.type)) {
+                    registry.register(def);
+                }
+            }
+        }),
     ]);
 }
 
@@ -2112,10 +2123,28 @@ function provideEditorComponents(definitions) {
  */
 class ComponentRegistryService {
     definitions = new Map();
+    _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : []));
     injectedDefinitions = inject(EDITOR_COMPONENT_DEFINITIONS, { optional: true }) ?? [];
     constructor() {
         this.injectedDefinitions.flat().forEach((def) => this.register(def));
     }
+    /**
+     * Clear all registered definitions
+     */
+    clear() {
+        this.definitions.clear();
+        this._version.update(v => v + 1);
+    }
+    /**
+     * Unregister a single component definition by type
+     */
+    unregister(type) {
+        const deleted = this.definitions.delete(type);
+        if (deleted) {
+            this._version.update(v => v + 1);
+        }
+        return deleted;
+    }
     /**
      * Register a component definition
      */
@@ -2124,6 +2153,7 @@ class ComponentRegistryService {
             console.warn(`ComponentRegistry: Component type "${definition.type}" is already registered. Overwriting.`);
         }
         this.definitions.set(definition.type, definition);
+        this._version.update(v => v + 1);
     }
     /**
      * Register multiple definitions
@@ -2172,6 +2202,7 @@ class ComponentRegistryService {
      * Get all definitions
      */
     getAll() {
+        this._version(); // reactive dependency for signal consumers
         return Array.from(this.definitions.values());
     }
     /**
@@ -2365,8 +2396,7 @@ class DynamicRendererComponent {
     /** Additional context (sectionId, index, etc.) */
     context = input({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
     /** Error state signal */
-    _error = false;
-    error = () => this._error;
+    error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
     componentRef = null;
     currentType = null;
     currentAvailableInputs = null;
@@ -2392,13 +2422,17 @@ class DynamicRendererComponent {
         this.cleanup();
         const componentType = this.registry.getComponent(element.type);
         if (!componentType) {
-            this._error = true;
+            this.error.set(true);
             this.currentType = null;
             this.currentAvailableInputs = null;
-            console.warn(`DynamicRenderer: No component registered for type "${element.type}"`);
+            const all = this.registry.getAll();
+            const hasType = this.registry.has(element.type);
+            console.warn(`DynamicRenderer: No component registered for type "${element.type}".`, hasType
+                ? `Definition exists but has no "component" class (manifest-only).`
+                : `Registry has ${all.length} definition(s): [${all.map(d => d.type).join(', ')}]`);
             return;
         }
-        this._error = false;
+        this.error.set(false);
         this.currentType = element.type;
         this.previousInputs.clear();
         this.componentRef = this.viewContainerRef.createComponent(componentType);
@@ -3260,6 +3294,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * Service that holds and dynamically loads the per-merchant storefront URL.
+ *
+ * Resolution order:
+ * 1. Metafield value loaded from GET /api/storefront-url (per-shop)
+ * 2. Static STOREFRONT_URL injection token (env var / window global fallback)
+ * 3. Empty string (editor works with local components only)
+ */
+class StorefrontUrlService {
+    http = inject(HttpClient);
+    staticUrl = inject(STOREFRONT_URL);
+    /** Current storefront URL — reactive signal used by the editor and iframe. */
+    url = signal('', ...(ngDevMode ? [{ debugName: "url" }] : []));
+    /**
+     * Load the storefront URL from the backend metafield.
+     * Falls back to the static STOREFRONT_URL token if the endpoint
+     * returns no value or fails.
+     *
+     * Called during APP_INITIALIZER.
+     */
+    async load() {
+        try {
+            const res = await firstValueFrom(this.http.get('/api/storefront-url'));
+            if (res.url) {
+                this.url.set(res.url);
+                return;
+            }
+        }
+        catch {
+            // Non-fatal — fall back to static token
+        }
+        // Fallback: use the static injection token (env var / window global)
+        if (this.staticUrl) {
+            this.url.set(this.staticUrl);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontUrlService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontUrlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const MAX_DEPTH = 12;
 class DragDropService {
     store = inject(Store);
@@ -4391,7 +4469,7 @@ class VisualEditorComponent {
     config = inject(VISUAL_EDITOR_CONFIG);
     dndService = inject(DragDropService);
     iframeBridge = inject(IframeBridgeService);
-    storefrontUrl = inject(STOREFRONT_URL);
+    storefrontUrlService = inject(StorefrontUrlService);
     sanitizer = inject(DomSanitizer);
     destroy$ = new Subject();
     // Configuration-driven UI options
@@ -4404,9 +4482,10 @@ class VisualEditorComponent {
     // Iframe preview
     previewFrame = viewChild('previewFrame', ...(ngDevMode ? [{ debugName: "previewFrame" }] : []));
     previewUrl = computed(() => {
-        if (!this.storefrontUrl)
+        const url = this.storefrontUrlService.url();
+        if (!url)
             return null;
-        return this.sanitizer.bypassSecurityTrustResourceUrl(`${this.storefrontUrl}/kustomizer/editor`);
+        return this.sanitizer.bypassSecurityTrustResourceUrl(`${url}/kustomizer/editor`);
     }, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
     iframeReady = false;
     propertiesTab = signal('props', ...(ngDevMode ? [{ debugName: "propertiesTab" }] : []));
@@ -4673,7 +4752,8 @@ class VisualEditorComponent {
     onIframeLoad() {
         const iframe = this.previewFrame()?.nativeElement;
         if (iframe) {
-            const origin = this.storefrontUrl ? new URL(this.storefrontUrl).origin : '*';
+            const sfUrl = this.storefrontUrlService.url();
+            const origin = sfUrl ? new URL(sfUrl).origin : '*';
             this.iframeBridge.connect(iframe, origin);
         }
     }
@@ -7768,22 +7848,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ManifestLoaderService {
     http = inject(HttpClient);
     registry = inject(ComponentRegistryService);
+    watchInterval = null;
+    lastManifestHash = '';
+    manifestTypes = new Set();
     /**
      * Fetch the manifest from the given URL and register all components.
      */
     loadManifest(url) {
-        return this.http.get(url).pipe(tap((manifest) => this.registerManifestComponents(manifest)));
+        return this.http.get(url).pipe(tap((manifest) => {
+            this.registerManifestComponents(manifest);
+            this.lastManifestHash = this.hashManifest(manifest);
+        }));
+    }
+    /**
+     * Poll the manifest URL for changes and re-register components when the
+     * content hash differs. Only active in dev mode. No-op in production.
+     */
+    startWatching(manifestUrl, intervalMs = 2000) {
+        if (!isDevMode() || this.watchInterval)
+            return;
+        this.watchInterval = setInterval(() => {
+            this.http.get(manifestUrl).subscribe({
+                next: (manifest) => {
+                    const hash = this.hashManifest(manifest);
+                    if (hash !== this.lastManifestHash) {
+                        console.log('[Kustomizer] Manifest changed, reloading components…');
+                        this.lastManifestHash = hash;
+                        this.registerManifestComponents(manifest);
+                    }
+                },
+                error: () => { }, // silently ignore polling errors
+            });
+        }, intervalMs);
+    }
+    ngOnDestroy() {
+        if (this.watchInterval) {
+            clearInterval(this.watchInterval);
+            this.watchInterval = null;
+        }
     }
     /**
      * Register manifest entries in the ComponentRegistryService.
      * Each entry becomes a ComponentDefinition without a `component` field.
      */
     registerManifestComponents(manifest) {
+        // Remove only previously manifest-loaded definitions, preserving local components
+        for (const type of this.manifestTypes) {
+            this.registry.unregister(type);
+        }
+        this.manifestTypes.clear();
         for (const entry of manifest.components) {
             const definition = this.manifestEntryToDefinition(entry);
             this.registry.register(definition);
+            this.manifestTypes.add(definition.type);
         }
     }
+    hashManifest(manifest) {
+        return JSON.stringify(manifest.components.map(c => c.type + c.name + JSON.stringify(c.props ?? {}) + JSON.stringify(c.slots ?? [])));
+    }
     manifestEntryToDefinition(entry) {
         return {
             type: entry.type,
@@ -7839,5 +7961,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BlockTreeItemComponent, CREATE_METAFIELD_DEFINITION_MUTATION, ComponentRegistryService, DEFAULT_ROUTER_NAVIGATION_CONFIG, DEFAULT_VISUAL_EDITOR_CONFIG, DELETE_METAFIELDS_MUTATION, DELETE_METAFIELD_DEFINITION_MUTATION, DefaultRouterNavigationService, DragDropService, DynamicRendererComponent, EDITOR_COMPONENT_DEFINITIONS, FILES_QUERY, GET_METAFIELD_DEFINITION_QUERY, GET_SHOP_ID_QUERY, GET_SHOP_METAFIELD_QUERY$1 as GET_SHOP_METAFIELD_QUERY, INDEX_KEY$1 as INDEX_KEY, IframeBridgeService, InputPageLoadingStrategy, MAX_METAFIELD_SIZE, ManifestLoaderService, NAMESPACE$1 as NAMESPACE, PageLoadingStrategy, PageManagerComponent, PageService, PageShopifyRepository, PageStorefrontRepository, ROUTER_NAVIGATION_CONFIG, RoutePageLoadingStrategy, SET_METAFIELD_MUTATION, SHOPIFY_CONFIG, STOREFRONT_CONFIG, STOREFRONT_URL, ShopifyFilePickerComponent, ShopifyFilesService, ShopifyGraphQLClient, ShopifyMetafieldRepository, SlotRendererComponent, StorefrontGraphQLClient, StorefrontMetafieldRepository, USE_IN_MEMORY_PAGES, VISUAL_EDITOR_CONFIG, VISUAL_EDITOR_FEATURE_KEY, VisualEditor, VisualEditorActions, VisualEditorComponent, VisualEditorFacade, VisualEditorNavigation, initialVisualEditorState, provideEditorComponents, provideVisualEditor, provideVisualEditorStore, selectBlocksForSection, selectBlocksForSlot, selectCanRedo, selectCanUndo, selectCurrentPage, selectCurrentPageId, selectCurrentPageSlug, selectCurrentPageStatus, selectCurrentPageTitle, selectCurrentPageVersion, selectDraggedElementId, selectElementById, selectHistory, selectHistoryIndex, selectHistoryLength, selectIsDirty, selectIsDragging, selectIsPageLoaded, selectLastAction, selectSectionById, selectSections, selectSelectedBlock, selectSelectedBlockSlotName, selectSelectedElement, selectSelectedElementId, selectSelectedElementType, selectSelectedSection, selectSelectedSectionId, selectSelectedSectionType, selectVisualEditorState, visualEditorReducer };
+export { BlockTreeItemComponent, CREATE_METAFIELD_DEFINITION_MUTATION, ComponentRegistryService, DEFAULT_ROUTER_NAVIGATION_CONFIG, DEFAULT_VISUAL_EDITOR_CONFIG, DELETE_METAFIELDS_MUTATION, DELETE_METAFIELD_DEFINITION_MUTATION, DefaultRouterNavigationService, DragDropService, DynamicRendererComponent, EDITOR_COMPONENT_DEFINITIONS, FILES_QUERY, GET_METAFIELD_DEFINITION_QUERY, GET_SHOP_ID_QUERY, GET_SHOP_METAFIELD_QUERY$1 as GET_SHOP_METAFIELD_QUERY, INDEX_KEY$1 as INDEX_KEY, IframeBridgeService, InputPageLoadingStrategy, MAX_METAFIELD_SIZE, ManifestLoaderService, NAMESPACE$1 as NAMESPACE, PageLoadingStrategy, PageManagerComponent, PageService, PageShopifyRepository, PageStorefrontRepository, ROUTER_NAVIGATION_CONFIG, RoutePageLoadingStrategy, SET_METAFIELD_MUTATION, SHOPIFY_CONFIG, STOREFRONT_CONFIG, STOREFRONT_URL, ShopifyFilePickerComponent, ShopifyFilesService, ShopifyGraphQLClient, ShopifyMetafieldRepository, SlotRendererComponent, StorefrontGraphQLClient, StorefrontMetafieldRepository, StorefrontUrlService, USE_IN_MEMORY_PAGES, VISUAL_EDITOR_CONFIG, VISUAL_EDITOR_FEATURE_KEY, VisualEditor, VisualEditorActions, VisualEditorComponent, VisualEditorFacade, VisualEditorNavigation, initialVisualEditorState, provideEditorComponents, provideVisualEditor, provideVisualEditorStore, selectBlocksForSection, selectBlocksForSlot, selectCanRedo, selectCanUndo, selectCurrentPage, selectCurrentPageId, selectCurrentPageSlug, selectCurrentPageStatus, selectCurrentPageTitle, selectCurrentPageVersion, selectDraggedElementId, selectElementById, selectHistory, selectHistoryIndex, selectHistoryLength, selectIsDirty, selectIsDragging, selectIsPageLoaded, selectLastAction, selectSectionById, selectSections, selectSelectedBlock, selectSelectedBlockSlotName, selectSelectedElement, selectSelectedElementId, selectSelectedElementType, selectSelectedSection, selectSelectedSectionId, selectSelectedSectionType, selectVisualEditorState, visualEditorReducer };
 //# sourceMappingURL=kustomizer-visual-editor.mjs.map