canvasengine 2.0.0-beta.41 → 2.0.0-beta.42

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-BnuKipxl.js";
-import { A as r, _ as o, $ as n, t as l, x as c, v as p, C as S, d as m, Y as u, Z as d, an as g, f as b, D as C, am as k, ak as h, y as j, j as T, G as w, w as D, c as E, I as f, a0 as v, J as y, K as O, M as P, X as V, O as x, P as A, al as B, R as G, H, S as M, g as F, e as J, L as N, B as R, Q as q, U as z, T as I, z as K, b as U, N as L, W as Q, V as W, aj as X, ai as Y, ag as Z, k as _, a7 as $, a5 as aa, a8 as sa, l as ea, ac as ta, ah as ia, m as ra, n as oa, a1 as na, a4 as la, o as ca, i as pa, a2 as Sa, p as ma, ad as ua, q as da, a6 as ga, aa as ba, a9 as Ca, af as ka, a3 as ha, s as ja, ab as Ta, ae as wa, r as Da, a as Ea, u as fa } from "./index-BnuKipxl.js";
+import { h as a } from "./index-DNwqVzaq.js";
+import { A as r, $ as o, a0 as n, v as l, y as c, w as p, C as S, d as m, Z as u, _ as g, ao as d, f as C, D as b, an as k, al as h, z as j, j as T, G as w, x as D, c as E, I as f, a1 as v, J as y, K as O, M as A, Y as P, O as V, P as x, am as B, R as G, L as H, S as M, g as F, e as J, N, H as R, U as q, W as z, T as I, B as K, b as U, Q as L, X as Q, V as W, ak as X, aj as Y, ah as Z, k as _, a8 as $, a6 as aa, a9 as sa, l as ea, ad as ta, ai as ia, m as ra, n as oa, a2 as na, a5 as la, o as ca, i as pa, a3 as Sa, p as ma, ae as ua, q as ga, a7 as da, ab as Ca, aa as ba, ag as ka, r as ha, a4 as ja, s as Ta, ac as wa, af as Da, t as Ea, a as fa, u as va } from "./index-DNwqVzaq.js";
 const e = a.Howler;
 export {
   r as ArraySubject,
@@ -11,10 +11,10 @@ export {
   S as ControlsBase,
   m as ControlsDirective,
   u as DOMContainer,
-  d as DOMElement,
-  g as DisplayObject,
-  b as Drag,
-  C as Drop,
+  g as DOMElement,
+  d as DisplayObject,
+  C as Drag,
+  b as Drop,
   k as EVENTS,
   h as Easing,
   j as Ellipse,
@@ -27,10 +27,10 @@ export {
   v as Joystick,
   y as JoystickControls,
   O as KeyboardControls,
-  P as Mesh,
-  V as NineSliceSprite,
-  x as ObjectSubject,
-  A as ParticlesEmitter,
+  A as Mesh,
+  P as NineSliceSprite,
+  V as ObjectSubject,
+  x as ParticlesEmitter,
   B as RadialGradient,
   G as Rect,
   H as Scene,
@@ -66,17 +66,18 @@ export {
   Sa as isPrimitive,
   ma as isSignal,
   ua as isTrigger,
-  da as linkedSignal,
-  ga as loop,
-  ba as mount,
-  Ca as mountTracker,
+  ga as linkedSignal,
+  da as loop,
+  Ca as mount,
+  ba as mountTracker,
   ka as on,
-  ha as registerComponent,
-  ja as signal,
-  Ta as tick,
-  wa as trigger,
-  Da as untracked,
-  Ea as useDefineProps,
-  fa as useProps
+  ha as registerAllComponents,
+  ja as registerComponent,
+  Ta as signal,
+  wa as tick,
+  Da as trigger,
+  Ea as untracked,
+  fa as useDefineProps,
+  va as useProps
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.41",
+  "version": "2.0.0-beta.42",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/engine/bootstrap.ts

@@ -2,23 +2,90 @@ import '@pixi/layout';
 import { Application, ApplicationOptions } from "pixi.js";
 import { ComponentFunction, h } from "./signal";
 import { useProps } from '../hooks/useProps';
+import { registerAllComponents, registerComponent } from './reactive';
+
+// Import all components to ensure they are registered
+// This is done here (not in reactive.ts) to avoid circular dependencies
+// Components register themselves when their modules are imported
+import '../components/Canvas';
+import '../components/Container';
+import '../components/Sprite';
+import '../components/Text';
+import '../components/Graphic';
+import '../components/Mesh';
+import '../components/Viewport';
+import '../components/TilingSprite';
+import '../components/NineSliceSprite';
+import '../components/DOMContainer';
+import '../components/DOMElement';
+import '../components/ParticleEmitter';
+
+/**
+ * Extended options for bootstrapCanvas that includes component registration configuration.
+ * 
+ * @property components - Optional mapping of component names to their classes (can include mocks for testing)
+ * @property autoRegister - If true (default), registers all default components before applying custom components. If false, only registers the specified components.
+ */
+export interface BootstrapOptions extends ApplicationOptions {
+  components?: {
+    [name: string]: any; // ComponentClass
+  };
+  autoRegister?: boolean; // true by default if components is not provided
+}
 
 /**
  * Bootstraps a canvas element and renders it to the DOM.
  * 
  * @param rootElement - The HTML element where the canvas will be rendered. Can be null.
  * @param canvas - A Promise that resolves to an Element representing the canvas component.
+ * @param options - Optional bootstrap options including ApplicationOptions and component registration configuration.
  * @returns A Promise that resolves to the rendered canvas element.
  * @throws {Error} If the provided element is not a Canvas component.
+ * 
+ * @example
+ * ```typescript
+ * // Default: all components registered automatically
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   width: 800,
+ *   height: 600
+ * });
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // With mocks for testing
+ * import { mockComponents } from '@canvasengine/testing';
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   components: mockComponents,
+ *   autoRegister: false
+ * });
+ * ```
  */
-export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: ApplicationOptions) => {
+export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions) => {
+  // Extract component registration options
+  const { components, autoRegister, ...appOptions } = options ?? {};
+  
+  // Handle component registration
+  if (components) {
+    if (autoRegister !== false) {
+      // Register all default components first, then override with custom ones
+      registerAllComponents();
+    }
+    // Register the specified components (overriding defaults if autoRegister is true)
+    Object.entries(components).forEach(([name, componentClass]) => {
+      registerComponent(name, componentClass);
+    });
+  } else {
+    // Default behavior: register all components
+    registerAllComponents();
+  }
   
   const app = new Application();
   await app.init({
     resizeTo: rootElement,
     autoStart: false,
     antialias: true,
-    ...(options ?? {})
+    ...appOptions
   });
   const canvasElement = await h(canvas);
   if (canvasElement.tag != 'Canvas') {

package/src/engine/reactive.ts

@@ -84,6 +84,41 @@ export function registerComponent(name, component) {
   components[name] = component;
 }
 
+// Track if components have been registered to avoid duplicate imports
+let componentsRegistered = false;
+
+/**
+ * Registers all default CanvasEngine components.
+ * 
+ * This function imports and registers all core components that are available by default.
+ * It's called automatically by bootstrapCanvas() if no custom component configuration is provided.
+ * 
+ * Components register themselves when their modules are imported, so this function ensures
+ * all component modules are loaded. Since components call registerComponent() at module load time,
+ * importing them will automatically register them synchronously.
+ * 
+ * @example
+ * ```typescript
+ * // Register all default components manually
+ * registerAllComponents();
+ * 
+ * // Now you can use any component
+ * const sprite = createComponent('Sprite', { image: 'hero.png' });
+ * ```
+ */
+export function registerAllComponents() {
+  if (componentsRegistered) {
+    return;
+  }
+  
+  // Components are registered when their modules are imported
+  // Since bootstrap.ts imports all components, they should already be registered
+  // when bootstrapCanvas() is called. This function just marks that registration
+  // has been attempted. If components aren't registered yet, they will be when
+  // bootstrap.ts imports them (which happens before bootstrapCanvas() is called).
+  componentsRegistered = true;
+}
+
 /**
  * Checks if an element is currently frozen.
  * An element is frozen when the `freeze` prop is set to `true` (either as a boolean or Signal<boolean>),

package/src/index.ts

@@ -4,6 +4,7 @@ export * from '@signe/reactive'
 export { Howler } from 'howler'
 export * from './components'
 export * from './engine/reactive'
+export { registerAllComponents } from './engine/reactive'
 export * from './engine/signal'
 export * from './engine/trigger'
 export * from './engine/bootstrap'