@tresjs/core 1.0.0 → 1.1.0

package/dist/core/useCatalogue/index.d.ts

@@ -1,6 +1,6 @@
-export declare function useCatalogue(): {
+import { App, Ref } from 'vue';
+import { TresCatalogue } from '../../types';
+export declare function useCatalogue(app?: App, prefix?: string): {
     extend: (objects: any) => void;
-    catalogue: {
-        [key: string]: any;
-    };
+    catalogue: Ref<TresCatalogue>;
 };

package/dist/core/useInstanceCreator/index.d.ts

@@ -1,3 +1,7 @@
+import { Ref } from 'vue';
+import { TresCatalogue, TresInstance, TresVNode } from '../../types';
 export declare function useInstanceCreator(prefix: string): {
-    createComponentInstances: (newObjects: Record<string, any>) => (string | import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>)[][];
+    createComponentInstances: (catalogue: Ref<TresCatalogue>) => (string | import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>)[][];
+    processProps: (props: Record<string, any>, instance: TresInstance) => void;
+    createInstanceFromVNode: (vnode: TresVNode, catalogue: Ref<TresCatalogue>) => TresInstance;
 };

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v1.0.0
+ * version: v1.1.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { computed as D, watch as O, inject as X, defineComponent as _, shallowRef as j, reactive as fe, toRefs as me, ref as F, provide as A, onBeforeUnmount as de, h as J } from "vue";
-import { useWindowSize as Y, createEventHook as U, useRafFn as ge, useElementSize as he, useDevicePixelRatio as we, unrefElement as B, resolveUnref as S } from "@vueuse/core";
-import * as ve from "three";
-import { PerspectiveCamera as $, OrthographicCamera as Ce, Color as I, Vector3 as ye, Clock as Me, Scene as Se, LoadingManager as xe, TextureLoader as Ee, PCFShadowMap as Pe, LinearEncoding as Le, NoToneMapping as Te, WebGLRenderer as Re } from "three";
-var Oe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Oe || {});
-const P = {
+import { computed as D, watch as x, inject as X, ref as S, defineComponent as _, shallowRef as V, reactive as he, toRefs as we, provide as P, onBeforeUnmount as ve, h as J, watchEffect as Ce } from "vue";
+import { useWindowSize as Y, createEventHook as j, useRafFn as ye, useElementSize as Me, useDevicePixelRatio as Se, unrefElement as I, resolveUnref as C } from "@vueuse/core";
+import * as Ee from "three";
+import { PerspectiveCamera as T, OrthographicCamera as Z, Color as $, Vector3 as xe, Clock as Pe, Scene as Te, LoadingManager as Le, TextureLoader as Re, PCFShadowMap as Oe, LinearEncoding as Ae, NoToneMapping as Be, WebGLRenderer as Ie } from "three";
+var $e = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))($e || {});
+const M = {
   cameras: []
-}, Ae = 45;
-let E;
-function Z() {
-  const { width: e, height: t } = Y(), { setState: n } = oe();
-  function a(i = "Perspective", f) {
-    if (i === "Perspective") {
-      const { near: u, far: m, fov: d } = f || {
+}, be = 45;
+let y;
+function ee() {
+  const { width: e, height: t } = Y(), { setState: r } = ce();
+  function a(o = "Perspective", u) {
+    if (o === "Perspective") {
+      const { near: n, far: i, fov: p } = u || {
         near: 0.1,
         far: 1e3,
-        fov: Ae
+        fov: be
       };
-      E = new $(d, r.value, u, m), P.cameras.push(E);
+      y = new T(p, s.value, n, i), M.cameras.push(y);
     } else {
-      const { left: u, right: m, top: d, bottom: w, near: C, far: x } = f || {
+      const { left: n, right: i, top: p, bottom: h, near: g, far: w } = u || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,275 +33,289 @@ function Z() {
         near: 0.1,
         far: 1e3
       };
-      E = new Ce(u, m, d, w, C, x), P.cameras.push(E);
+      y = new Z(n, i, p, h, g, w), M.cameras.push(y);
     }
-    return P.cameras.push(E), E;
+    return M.cameras.push(y), y;
   }
-  const r = D(() => e.value / t.value), o = D(() => P.cameras[0]);
-  function s() {
-    o.value instanceof $ && (o.value.aspect = r.value), o.value.updateProjectionMatrix();
+  const s = D(() => e.value / t.value), l = D(() => M.cameras[0]);
+  function f() {
+    l.value instanceof T && (l.value.aspect = s.value), l.value.updateProjectionMatrix();
   }
-  function c(i) {
-    const f = X("camera");
-    i && f && (f.value = i, n("camera", f.value)), P.cameras.push(i), i instanceof $ && (i.aspect = r.value), i.updateProjectionMatrix();
+  function c(o) {
+    const u = X("camera");
+    o && u && (u.value = o, r("camera", u.value)), M.cameras.push(o), o instanceof T && (o.aspect = s.value), o.updateProjectionMatrix();
   }
-  return O(r, s), {
-    activeCamera: o,
+  return x(s, f), {
+    activeCamera: l,
     createCamera: a,
-    updateCamera: s,
+    updateCamera: f,
     pushCamera: c
   };
 }
-let b = { ...ve };
-delete b.Scene;
-function be() {
+const L = S({ ...Ee });
+delete L.value.Scene;
+let b;
+function Fe(e, t = "Tres") {
+  !b && e && (b = e);
+  const { createComponentInstances: r } = te(t);
   return {
-    extend: (t) => {
-      b = Object.assign(b, t);
+    extend: (s) => {
+      L.value = Object.assign(L.value, s), r(S(s)).forEach(([f, c]) => {
+        b.component(f, c);
+      });
     },
-    catalogue: b
+    catalogue: L
   };
 }
-const Be = (e) => typeof e < "u", V = (e) => !!e && e.constructor === Array;
-function $e(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof ye ? [e.x, e.y, e.z] : e;
+const F = (e) => typeof e < "u", ze = (e) => typeof e == "function", R = (e) => !!e && e.constructor === Array;
+function De(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof xe ? [e.x, e.y, e.z] : e;
 }
-function q(e) {
-  return e instanceof I ? e : Array.isArray(e) ? new I(...e) : new I(e);
+function K(e) {
+  return e instanceof $ ? e : Array.isArray(e) ? new $(...e) : new $(e);
 }
-const K = "[TresJS \u25B2 \u25A0 \u25CF] ";
-function W() {
-  function e(a, r) {
-    console.error(`${K} ${a}`, r || "");
+const q = "[TresJS \u25B2 \u25A0 \u25CF] ";
+function U() {
+  function e(a, s) {
+    console.error(`${q} ${a}`, s || "");
   }
   function t(a) {
-    console.warn(`${K} ${a}`);
+    console.warn(`${q} ${a}`);
   }
-  function n(a, r) {
+  function r(a, s) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: n
+    logMessage: r
   };
 }
-const Ie = ["rotation", "scale", "position"];
-function ze(e) {
-  const { logMessage: t, logError: n } = W();
-  function a(r) {
-    return Object.entries(r).filter(([o, s]) => {
-      var c, i;
-      return (i = (c = s == null ? void 0 : s.prototype) == null ? void 0 : c.constructor) == null ? void 0 : i.toString().includes("class");
-    }).map(([o, s]) => {
-      const c = `${e}${o}`, i = _({
-        name: c,
-        setup(f, { slots: u, attrs: m, ...d }) {
-          t(c, {
-            props: f,
-            slots: u,
-            attrs: m,
-            ctx: d
-          });
-          let w;
-          const { scene: C } = ae(), { pushCamera: x } = Z();
-          function L() {
-            if ((u == null ? void 0 : u.default) && (u == null ? void 0 : u.default())) {
-              const y = u.default().map((l) => {
-                var h;
-                let v;
-                const g = l.type.name.replace(e, "");
-                return (h = l == null ? void 0 : l.props) != null && h.args ? v = new r[g](...l.props.args) : v = new r[g](), l != null && l.props && T(l.props, v), v;
-              });
-              w = new s(...y);
-            } else
-              m.args ? w = new s(...m.args) : w = new s();
-            T(m, w), c.includes("Camera") && x(w), w.isObject3D && (C == null || C.value.add(w)), t("Instance added", C), d.expose(w);
-          }
-          function T(y, l) {
-            Object.entries(y).forEach(([v, g]) => {
-              const h = v.replace(/(-\w)/g, (M) => M[1].toUpperCase());
-              if (!(h === "args" || g === void 0)) {
-                Ie.includes(v) && g && (g = $e(g));
-                try {
-                  l[h] && Be(l[h].set) ? V(g) ? l[h].set(...g) : l[h].set(g) : (g === "" && (g = !0), l[h] = g);
-                } catch (M) {
-                  n(`There was an error setting ${h} property`, M);
-                }
-              }
-            }), y.ref && (y.ref = l);
+const _e = ["rotation", "scale", "position"];
+function te(e) {
+  const { logMessage: t, logError: r } = U();
+  function a(c, o) {
+    !F(c) || !F(o) || Object.entries(c).forEach(([u, n]) => {
+      const i = u.replace(/(-\w)/g, (p) => p[1].toUpperCase());
+      if (!(i === "args" || n === void 0)) {
+        _e.includes(i) && n && (n = De(n)), c.ref && (c.ref = o);
+        try {
+          if (o[i] && F(o[i].set))
+            o[i].set(...R(n) ? n : [n]);
+          else {
+            if (n === "" && (n = !0), ze(o[i])) {
+              o[i](...R(n) ? n : [n]);
+              return;
+            }
+            o[i] = n;
           }
-          return L(), () => {
+        } catch (p) {
+          r(`There was an error setting ${i} property`, p);
+        }
+      }
+    });
+  }
+  function s(c, o) {
+    var i;
+    const u = c.type.name.replace(e, "");
+    let n;
+    return (i = c == null ? void 0 : c.props) != null && i.args ? n = new o.value[u](...c.props.args) : n = new o.value[u](), c != null && c.props && a(c.props, n), n;
+  }
+  function l(c, o, u, n) {
+    if (n.default && (n == null ? void 0 : n.default())) {
+      const i = n.default().map((p) => s(p, c));
+      return new o(...i);
+    } else
+      return u.args ? new o(...u.args) : new o();
+  }
+  function f(c) {
+    return Object.entries(c.value).filter(([o, u]) => {
+      var n, i;
+      return (i = (n = u == null ? void 0 : u.prototype) == null ? void 0 : n.constructor) == null ? void 0 : i.toString().includes("class");
+    }).map(([o, u]) => {
+      const n = `${e}${o}`, i = _({
+        name: n,
+        setup(p, { slots: h, attrs: g, ...w }) {
+          const { scene: v } = se(), { pushCamera: O } = ee(), d = l(c, u, g, h);
+          return a(g, d), (d instanceof T || d instanceof Z) && O(d), d.isObject3D && (v == null || v.value.add(d)), w.expose(d), t(n, {
+            props: p,
+            slots: h,
+            attrs: g,
+            ctx: w,
+            scene: v
+          }), () => {
           };
         }
       });
-      return [c, i];
+      return [n, i];
     });
   }
   return {
-    createComponentInstances: a
+    createComponentInstances: f,
+    processProps: a,
+    createInstanceFromVNode: s
   };
 }
-const ee = U(), te = U(), ne = U(), Q = new Me(), { pause: De, resume: Fe, isActive: _e } = ge(
+const ne = j(), re = j(), oe = j(), Q = new Pe(), { pause: Ve, resume: je, isActive: Ue } = ye(
   () => {
     const e = Q.getElapsedTime(), t = Q.getDelta();
-    ee.trigger({ delta: t, elapsed: e }), te.trigger({ delta: t, elapsed: e }), ne.trigger({ delta: t, elapsed: e });
+    ne.trigger({ delta: t, elapsed: e }), re.trigger({ delta: t, elapsed: e }), oe.trigger({ delta: t, elapsed: e });
   },
   { immediate: !1 }
 );
-function re() {
+function ae() {
   return {
-    onBeforeLoop: ee.on,
-    onLoop: te.on,
-    onAfterLoop: ne.on,
-    pause: De,
-    resume: Fe,
-    isActive: _e
+    onBeforeLoop: ne.on,
+    onLoop: re.on,
+    onAfterLoop: oe.on,
+    pause: Ve,
+    resume: je,
+    isActive: Ue
   };
 }
-const je = j(new Se());
-function ae() {
+const ke = V(new Te());
+function se() {
   return {
-    scene: je
+    scene: ke
   };
 }
-function Ue(e) {
+function Ne(e) {
   const t = { nodes: {}, materials: {} };
-  return e && e.traverse((n) => {
-    n.name && (t.nodes[n.name] = n), n.material && !t.materials[n.material.name] && (t.materials[n.material.name] = n.material);
+  return e && e.traverse((r) => {
+    r.name && (t.nodes[r.name] = r), r.material && !t.materials[r.material.name] && (t.materials[r.material.name] = r.material);
   }), t;
 }
-async function Je(e, t, n, a, r) {
-  const { logError: o } = W(), s = new e();
-  r && r(s), n && n(e);
-  const i = (Array.isArray(t) ? t : [t]).map(
-    (f) => new Promise((u, m) => {
-      s.load(
-        f,
-        (d) => {
-          d.scene && Object.assign(d, Ue(d.scene)), u(d);
+async function Qe(e, t, r, a, s) {
+  const { logError: l } = U(), f = new e();
+  s && s(f), r && r(e);
+  const o = (Array.isArray(t) ? t : [t]).map(
+    (u) => new Promise((n, i) => {
+      f.load(
+        u,
+        (p) => {
+          p.scene && Object.assign(p, Ne(p.scene)), n(p);
         },
         a,
-        (d) => m(o("[useLoader] - Failed to load resource", d))
+        (p) => i(l("[useLoader] - Failed to load resource", p))
       );
     })
   );
-  return V(t) ? await Promise.all(i) : await i[0];
+  return R(t) ? await Promise.all(o) : await o[0];
 }
-async function qe(e) {
-  const t = new xe(), n = new Ee(t), a = (r) => new Promise((o, s) => {
-    n.load(
-      r,
-      (c) => o(c),
+async function Xe(e) {
+  const t = new Le(), r = new Re(t), a = (s) => new Promise((l, f) => {
+    r.load(
+      s,
+      (c) => l(c),
       () => null,
       () => {
-        s(new Error("[useTextures] - Failed to load texture"));
+        f(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (V(e)) {
-    const r = await Promise.all(e.map((o) => a(o)));
-    return e.length > 1 ? r : r[0];
+  if (R(e)) {
+    const s = await Promise.all(e.map((l) => a(l)));
+    return e.length > 1 ? s : s[0];
   } else {
-    const { map: r, displacementMap: o, normalMap: s, roughnessMap: c, metalnessMap: i, aoMap: f } = e;
+    const { map: s, displacementMap: l, normalMap: f, roughnessMap: c, metalnessMap: o, aoMap: u } = e;
     return {
-      map: r ? await a(r) : null,
-      displacementMap: o ? await a(o) : null,
-      normalMap: s ? await a(s) : null,
+      map: s ? await a(s) : null,
+      displacementMap: l ? await a(l) : null,
+      normalMap: f ? await a(f) : null,
       roughnessMap: c ? await a(c) : null,
-      metalnessMap: i ? await a(i) : null,
-      aoMap: f ? await a(f) : null
+      metalnessMap: o ? await a(o) : null,
+      aoMap: u ? await a(u) : null
     };
   }
 }
-const R = fe({});
-function oe() {
-  function e(n) {
-    return R[n];
+const E = he({});
+function ce() {
+  function e(r) {
+    return E[r];
   }
-  function t(n, a) {
-    R[n] = a;
+  function t(r, a) {
+    E[r] = a;
   }
   return {
-    state: R,
-    ...me(R),
+    state: E,
+    ...we(E),
     getState: e,
     setState: t
   };
 }
-const p = j(), z = F(!1);
-function Ve(e, t, n) {
+const m = V(), z = S(!1);
+function We(e, t, r) {
   const {
     alpha: a = !1,
-    antialias: r,
-    depth: o,
-    logarithmicDepthBuffer: s,
+    antialias: s,
+    depth: l,
+    logarithmicDepthBuffer: f,
     failIfMajorPerformanceCaveat: c,
-    precision: i,
-    premultipliedAlpha: f,
-    stencil: u,
-    shadows: m = !1,
-    shadowMapType: d = Pe,
-    physicallyCorrectLights: w = !1,
-    outputEncoding: C = Le,
-    toneMapping: x = Te,
-    toneMappingExposure: L = 1,
-    context: T = void 0,
-    powerPreference: y = "default",
-    preserveDrawingBuffer: l = !1,
-    clearColor: v = q("#000000"),
-    windowSize: g = !1
-  } = n, { width: h, height: M } = g ? Y() : he(t), { pixelRatio: k } = we(), { pause: se, resume: ie } = re(), ce = D(() => h.value / M.value), N = () => {
-    !p.value || (p.value.setSize(h.value, M.value), p.value.setPixelRatio(k.value));
+    precision: o,
+    premultipliedAlpha: u,
+    stencil: n,
+    shadows: i = !1,
+    shadowMapType: p = Oe,
+    physicallyCorrectLights: h = !1,
+    outputEncoding: g = Ae,
+    toneMapping: w = Be,
+    toneMappingExposure: v = 1,
+    context: O = void 0,
+    powerPreference: d = "default",
+    preserveDrawingBuffer: ie = !1,
+    clearColor: k = K("#000000"),
+    windowSize: ue = !1
+  } = r, { width: A, height: B } = ue ? Y() : Me(t), { pixelRatio: N } = Se(), { pause: le, resume: pe } = ae(), fe = D(() => A.value / B.value), W = () => {
+    !m.value || (m.value.setSize(A.value, B.value), m.value.setPixelRatio(N.value));
   }, H = () => {
-    !p.value || (p.value.shadowMap.enabled = S(m), p.value.outputEncoding = S(C), p.value.shadowMap.type = S(d), p.value.physicallyCorrectLights = S(w), p.value.toneMapping = S(x), p.value.toneMappingExposure = S(L), p.value.setClearColor(q(S(v))));
-  }, ue = () => {
-    const G = B(e);
-    if (p.value || !G)
+    !m.value || (m.value.shadowMap.enabled = C(i), m.value.outputEncoding = C(g), m.value.shadowMap.type = C(p), m.value.physicallyCorrectLights = C(h), m.value.toneMapping = C(w), m.value.toneMappingExposure = C(v), m.value.setClearColor(K(C(k))));
+  }, me = () => {
+    const G = I(e);
+    if (m.value || !G)
       return;
-    p.value = new Re({
+    m.value = new Ie({
       canvas: G,
       alpha: a,
-      antialias: r,
-      context: T,
-      depth: o,
+      antialias: s,
+      context: O,
+      depth: l,
       failIfMajorPerformanceCaveat: c,
-      logarithmicDepthBuffer: s,
-      powerPreference: y,
-      precision: i,
-      stencil: u,
-      preserveDrawingBuffer: l,
-      premultipliedAlpha: f
+      logarithmicDepthBuffer: f,
+      powerPreference: d,
+      precision: o,
+      stencil: n,
+      preserveDrawingBuffer: ie,
+      premultipliedAlpha: u
     });
-    const { setState: pe } = oe();
-    pe("renderer", p.value), H(), N(), ie(), z.value = !0;
-  }, le = () => {
-    !p.value || (p.value.dispose(), p.value = void 0, z.value = !1, se());
+    const { setState: ge } = ce();
+    ge("renderer", m.value), H(), W(), pe(), z.value = !0;
+  }, de = () => {
+    !m.value || (m.value.dispose(), m.value = void 0, z.value = !1, le());
   };
-  return O([h, M, k], N), O(
+  return x([A, B, N], W), x(
     () => [
-      m,
-      d,
-      C,
+      i,
+      p,
+      g,
+      h,
       w,
-      x,
-      L,
-      v
+      v,
+      k
     ],
     H
-  ), O(
+  ), x(
     () => [e, t],
     () => {
-      B(e) && B(t) && ue();
+      I(e) && I(t) && me();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: p,
+    renderer: m,
     isReady: z,
-    dispose: le,
-    aspectRatio: ce
+    dispose: de,
+    aspectRatio: fe
   };
 }
-const We = _({
+const He = _({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
@@ -316,27 +330,27 @@ const We = _({
     clearColor: String,
     windowSize: Boolean
   },
-  setup(e, { slots: t, attrs: n }) {
-    const { logError: a } = W(), r = F(), o = F(), { renderer: s, dispose: c, aspectRatio: i } = Ve(r, o, e), f = j();
-    return A("camera", f), A("renderer", s), A("aspect-ratio", i), t.default && !t.default().some((u) => u.type.name === "Scene") && a("TresCanvas must contain a Scene component."), t.default && !t.default().some((u) => {
-      var m;
-      return (m = u.type.name) == null ? void 0 : m.includes("Camera");
-    }) && a("Scene must contain a Camera component."), de(() => c()), () => {
+  setup(e, { slots: t, attrs: r }) {
+    const { logError: a } = U(), s = S(), l = S(), { renderer: f, dispose: c, aspectRatio: o } = We(s, l, e), u = V();
+    return P("camera", u), P("renderer", f), P("aspect-ratio", o), t.default && !t.default().some((n) => n.type.name === "Scene") && a("TresCanvas must contain a Scene component."), t.default && !t.default().some((n) => {
+      var i;
+      return (i = n.type.name) == null ? void 0 : i.includes("Camera");
+    }) && a("Scene must contain a Camera component."), ve(() => c()), () => {
       if (t.default)
         return J(
           "div",
           {
-            ref: o,
+            ref: l,
             style: {
               position: "relative",
               width: "100%",
               height: "100vh",
-              ...n.style
+              ...r.style
             }
           },
           [
             J("canvas", {
-              ref: r,
+              ref: s,
               style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 }
             }),
             t.default()
@@ -344,39 +358,41 @@ const We = _({
         );
     };
   }
-}), ke = _({
+}), Ge = _({
   name: "Scene",
   setup(e, { slots: t }) {
-    const { scene: n } = ae(), a = X("renderer"), { activeCamera: r } = Z(), { onLoop: o } = re();
-    return A("local-scene", n), o(() => {
-      (a == null ? void 0 : a.value) && (r == null ? void 0 : r.value) && (n == null ? void 0 : n.value) && a.value.render(n == null ? void 0 : n.value, r.value);
+    const { scene: r } = se(), a = X("renderer"), { activeCamera: s } = ee(), { onLoop: l } = ae();
+    return P("local-scene", r), l(() => {
+      (a == null ? void 0 : a.value) && (s == null ? void 0 : s.value) && (r == null ? void 0 : r.value) && a.value.render(r == null ? void 0 : r.value, s.value);
     }), () => {
       if (t.default)
         return t.default();
     };
   }
-}), Ke = Symbol("UseTresState"), Qe = {
+}), Ye = Symbol("UseTresState"), Ze = {
   install(e, t) {
-    const n = (t == null ? void 0 : t.prefix) || "Tres";
-    e.component(`${n}Canvas`, We), e.component(`${n}Scene`, ke);
-    const { catalogue: a } = be(), { createComponentInstances: r } = ze(n);
-    r(t != null && t.extends ? { ...a, ...t.extends } : a).forEach(([s, c]) => {
-      e.component(s, c);
+    const r = (t == null ? void 0 : t.prefix) || "Tres";
+    e.component(`${r}Canvas`, He), e.component(`${r}Scene`, Ge);
+    const { catalogue: a } = Fe(e, r), { createComponentInstances: s } = te(r);
+    s(a).forEach(([f, c]) => {
+      e.component(f, c);
+    }), Ce(() => {
+      console.log({ catalogue: a });
     });
   }
 };
 export {
-  Oe as CameraType,
-  Ke as UseTresStateSymbol,
-  Qe as default,
-  Ue as trasverseObjects,
-  Z as useCamera,
-  be as useCatalogue,
-  ze as useInstanceCreator,
-  Je as useLoader,
-  re as useRenderLoop,
-  Ve as useRenderer,
-  ae as useScene,
-  qe as useTexture,
-  oe as useTres
+  $e as CameraType,
+  Ye as UseTresStateSymbol,
+  Ze as default,
+  Ne as trasverseObjects,
+  ee as useCamera,
+  Fe as useCatalogue,
+  te as useInstanceCreator,
+  Qe as useLoader,
+  ae as useRenderLoop,
+  We as useRenderer,
+  se as useScene,
+  Xe as useTexture,
+  ce as useTres
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v1.0.0
+ * version: v1.1.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(u,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],o):(u=typeof globalThis<"u"?globalThis:u||self,o(u.tres={},u.Vue,u.VueUseCore,u.Three))})(this,function(u,o,p,g){"use strict";function te(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const ne=te(g);var V=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(V||{});const j={cameras:[]},re=45;let b;function z(){const{width:e,height:t}=p.useWindowSize(),{setState:n}=F();function r(c="Perspective",h){if(c==="Perspective"){const{near:f,far:w,fov:C}=h||{near:.1,far:1e3,fov:re};b=new g.PerspectiveCamera(C,a.value,f,w),j.cameras.push(b)}else{const{left:f,right:w,top:C,bottom:M,near:P,far:x}=h||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};b=new g.OrthographicCamera(f,w,C,M,P,x),j.cameras.push(b)}return j.cameras.push(b),b}const a=o.computed(()=>e.value/t.value),s=o.computed(()=>j.cameras[0]);function i(){s.value instanceof g.PerspectiveCamera&&(s.value.aspect=a.value),s.value.updateProjectionMatrix()}function l(c){const h=o.inject("camera");c&&h&&(h.value=c,n("camera",h.value)),j.cameras.push(c),c instanceof g.PerspectiveCamera&&(c.aspect=a.value),c.updateProjectionMatrix()}return o.watch(a,i),{activeCamera:s,createCamera:r,updateCamera:i,pushCamera:l}}let _={...ne};delete _.Scene;function k(){return{extend:t=>{_=Object.assign(_,t)},catalogue:_}}const ae=e=>typeof e<"u",B=e=>!!e&&e.constructor===Array;function oe(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function W(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const N="[TresJS \u25B2 \u25A0 \u25CF] ";function I(){function e(r,a){console.error(`${N} ${r}`,a||"")}function t(r){console.warn(`${N} ${r}`)}function n(r,a){}return{logError:e,logWarning:t,logMessage:n}}const se=["rotation","scale","position"];function q(e){const{logMessage:t,logError:n}=I();function r(a){return Object.entries(a).filter(([s,i])=>{var l,c;return(c=(l=i==null?void 0:i.prototype)==null?void 0:l.constructor)==null?void 0:c.toString().includes("class")}).map(([s,i])=>{const l=`${e}${s}`,c=o.defineComponent({name:l,setup(h,{slots:f,attrs:w,...C}){t(l,{props:h,slots:f,attrs:w,ctx:C});let M;const{scene:P}=D(),{pushCamera:x}=z();function U(){if((f==null?void 0:f.default)&&(f==null?void 0:f.default())){const O=f.default().map(m=>{var S;let v;const y=m.type.name.replace(e,"");return(S=m==null?void 0:m.props)!=null&&S.args?v=new a[y](...m.props.args):v=new a[y],m!=null&&m.props&&A(m.props,v),v});M=new i(...O)}else w.args?M=new i(...w.args):M=new i;A(w,M),l.includes("Camera")&&x(M),M.isObject3D&&(P==null||P.value.add(M)),t("Instance added",P),C.expose(M)}function A(O,m){Object.entries(O).forEach(([v,y])=>{const S=v.replace(/(-\w)/g,L=>L[1].toUpperCase());if(!(S==="args"||y===void 0)){se.includes(v)&&y&&(y=oe(y));try{m[S]&&ae(m[S].set)?B(y)?m[S].set(...y):m[S].set(y):(y===""&&(y=!0),m[S]=y)}catch(L){n(`There was an error setting ${S} property`,L)}}}),O.ref&&(O.ref=m)}return U(),()=>{}}});return[l,c]})}return{createComponentInstances:r}}const G=p.createEventHook(),J=p.createEventHook(),K=p.createEventHook(),Q=new g.Clock,{pause:ie,resume:ce,isActive:ue}=p.useRafFn(()=>{const e=Q.getElapsedTime(),t=Q.getDelta();G.trigger({delta:t,elapsed:e}),J.trigger({delta:t,elapsed:e}),K.trigger({delta:t,elapsed:e})},{immediate:!1});function $(){return{onBeforeLoop:G.on,onLoop:J.on,onAfterLoop:K.on,pause:ie,resume:ce,isActive:ue}}const le=o.shallowRef(new g.Scene);function D(){return{scene:le}}function X(e){const t={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(t.nodes[n.name]=n),n.material&&!t.materials[n.material.name]&&(t.materials[n.material.name]=n.material)}),t}async function fe(e,t,n,r,a){const{logError:s}=I(),i=new e;a&&a(i),n&&n(e);const c=(Array.isArray(t)?t:[t]).map(h=>new Promise((f,w)=>{i.load(h,C=>{C.scene&&Object.assign(C,X(C.scene)),f(C)},r,C=>w(s("[useLoader] - Failed to load resource",C)))}));return B(t)?await Promise.all(c):await c[0]}async function pe(e){const t=new g.LoadingManager,n=new g.TextureLoader(t),r=a=>new Promise((s,i)=>{n.load(a,l=>s(l),()=>null,()=>{i(new Error("[useTextures] - Failed to load texture"))})});if(B(e)){const a=await Promise.all(e.map(s=>r(s)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:s,normalMap:i,roughnessMap:l,metalnessMap:c,aoMap:h}=e;return{map:a?await r(a):null,displacementMap:s?await r(s):null,normalMap:i?await r(i):null,roughnessMap:l?await r(l):null,metalnessMap:c?await r(c):null,aoMap:h?await r(h):null}}}const T=o.reactive({});function F(){function e(n){return T[n]}function t(n,r){T[n]=r}return{state:T,...o.toRefs(T),getState:e,setState:t}}const d=o.shallowRef(),R=o.ref(!1);function Y(e,t,n){const{alpha:r=!1,antialias:a,depth:s,logarithmicDepthBuffer:i,failIfMajorPerformanceCaveat:l,precision:c,premultipliedAlpha:h,stencil:f,shadows:w=!1,shadowMapType:C=g.PCFShadowMap,physicallyCorrectLights:M=!1,outputEncoding:P=g.LinearEncoding,toneMapping:x=g.NoToneMapping,toneMappingExposure:U=1,context:A=void 0,powerPreference:O="default",preserveDrawingBuffer:m=!1,clearColor:v=W("#000000"),windowSize:y=!1}=n,{width:S,height:L}=y?p.useWindowSize():p.useElementSize(t),{pixelRatio:Z}=p.useDevicePixelRatio(),{pause:we,resume:Ce}=$(),ye=o.computed(()=>S.value/L.value),E=()=>{!d.value||(d.value.setSize(S.value,L.value),d.value.setPixelRatio(Z.value))},H=()=>{!d.value||(d.value.shadowMap.enabled=p.resolveUnref(w),d.value.outputEncoding=p.resolveUnref(P),d.value.shadowMap.type=p.resolveUnref(C),d.value.physicallyCorrectLights=p.resolveUnref(M),d.value.toneMapping=p.resolveUnref(x),d.value.toneMappingExposure=p.resolveUnref(U),d.value.setClearColor(W(p.resolveUnref(v))))},Se=()=>{const ee=p.unrefElement(e);if(d.value||!ee)return;d.value=new g.WebGLRenderer({canvas:ee,alpha:r,antialias:a,context:A,depth:s,failIfMajorPerformanceCaveat:l,logarithmicDepthBuffer:i,powerPreference:O,precision:c,stencil:f,preserveDrawingBuffer:m,premultipliedAlpha:h});const{setState:ve}=F();ve("renderer",d.value),H(),E(),Ce(),R.value=!0},Me=()=>{!d.value||(d.value.dispose(),d.value=void 0,R.value=!1,we())};return o.watch([S,L,Z],E),o.watch(()=>[w,C,P,M,x,U,v],H),o.watch(()=>[e,t],()=>{p.unrefElement(e)&&p.unrefElement(t)&&Se()},{immediate:!0,deep:!0}),{renderer:d,isReady:R,dispose:Me,aspectRatio:ye}}const de=o.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:Boolean},setup(e,{slots:t,attrs:n}){const{logError:r}=I(),a=o.ref(),s=o.ref(),{renderer:i,dispose:l,aspectRatio:c}=Y(a,s,e),h=o.shallowRef();return o.provide("camera",h),o.provide("renderer",i),o.provide("aspect-ratio",c),t.default&&!t.default().some(f=>f.type.name==="Scene")&&r("TresCanvas must contain a Scene component."),t.default&&!t.default().some(f=>{var w;return(w=f.type.name)==null?void 0:w.includes("Camera")})&&r("Scene must contain a Camera component."),o.onBeforeUnmount(()=>l()),()=>{if(t.default)return o.h("div",{ref:s,style:{position:"relative",width:"100%",height:"100vh",...n.style}},[o.h("canvas",{ref:a,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),t.default()])}}}),me=o.defineComponent({name:"Scene",setup(e,{slots:t}){const{scene:n}=D(),r=o.inject("renderer"),{activeCamera:a}=z(),{onLoop:s}=$();return o.provide("local-scene",n),s(()=>{(r==null?void 0:r.value)&&(a==null?void 0:a.value)&&(n==null?void 0:n.value)&&r.value.render(n==null?void 0:n.value,a.value)}),()=>{if(t.default)return t.default()}}}),ge=Symbol("UseTresState"),he={install(e,t){const n=(t==null?void 0:t.prefix)||"Tres";e.component(`${n}Canvas`,de),e.component(`${n}Scene`,me);const{catalogue:r}=k(),{createComponentInstances:a}=q(n);a(t!=null&&t.extends?{...r,...t.extends}:r).forEach(([i,l])=>{e.component(i,l)})}};u.CameraType=V,u.UseTresStateSymbol=ge,u.default=he,u.trasverseObjects=X,u.useCamera=z,u.useCatalogue=k,u.useInstanceCreator=q,u.useLoader=fe,u.useRenderLoop=$,u.useRenderer=Y,u.useScene=D,u.useTexture=pe,u.useTres=F,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(p,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],c):(p=typeof globalThis<"u"?globalThis:p||self,c(p.tres={},p.Vue,p.VueUseCore,p.Three))})(this,function(p,c,h,g){"use strict";function te(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const ne=te(g);var k=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(k||{});const O={cameras:[]},re=45;let P;function j(){const{width:e,height:t}=h.useWindowSize(),{setState:n}=B();function a(o="Perspective",l){if(o==="Perspective"){const{near:r,far:u,fov:m}=l||{near:.1,far:1e3,fov:re};P=new g.PerspectiveCamera(m,s.value,r,u),O.cameras.push(P)}else{const{left:r,right:u,top:m,bottom:S,near:y,far:v}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};P=new g.OrthographicCamera(r,u,m,S,y,v),O.cameras.push(P)}return O.cameras.push(P),P}const s=c.computed(()=>e.value/t.value),f=c.computed(()=>O.cameras[0]);function d(){f.value instanceof g.PerspectiveCamera&&(f.value.aspect=s.value),f.value.updateProjectionMatrix()}function i(o){const l=c.inject("camera");o&&l&&(l.value=o,n("camera",l.value)),O.cameras.push(o),o instanceof g.PerspectiveCamera&&(o.aspect=s.value),o.updateProjectionMatrix()}return c.watch(s,d),{activeCamera:f,createCamera:a,updateCamera:d,pushCamera:i}}const L=c.ref({...ne});delete L.value.Scene;let x;function N(e,t="Tres"){!x&&e&&(x=e);const{createComponentInstances:n}=I(t);return{extend:s=>{L.value=Object.assign(L.value,s),n(c.ref(s)).forEach(([d,i])=>{x.component(d,i)})},catalogue:L}}const A=e=>typeof e<"u",ae=e=>typeof e=="function",b=e=>!!e&&e.constructor===Array;function oe(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function R(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const W="[TresJS \u25B2 \u25A0 \u25CF] ";function U(){function e(a,s){console.error(`${W} ${a}`,s||"")}function t(a){console.warn(`${W} ${a}`)}function n(a,s){}return{logError:e,logWarning:t,logMessage:n}}const se=["rotation","scale","position"];function I(e){const{logMessage:t,logError:n}=U();function a(i,o){!A(i)||!A(o)||Object.entries(i).forEach(([l,r])=>{const u=l.replace(/(-\w)/g,m=>m[1].toUpperCase());if(!(u==="args"||r===void 0)){se.includes(u)&&r&&(r=oe(r)),i.ref&&(i.ref=o);try{if(o[u]&&A(o[u].set))o[u].set(...b(r)?r:[r]);else{if(r===""&&(r=!0),ae(o[u])){o[u](...b(r)?r:[r]);return}o[u]=r}}catch(m){n(`There was an error setting ${u} property`,m)}}})}function s(i,o){var u;const l=i.type.name.replace(e,"");let r;return(u=i==null?void 0:i.props)!=null&&u.args?r=new o.value[l](...i.props.args):r=new o.value[l],i!=null&&i.props&&a(i.props,r),r}function f(i,o,l,r){if(r.default&&(r==null?void 0:r.default())){const u=r.default().map(m=>s(m,i));return new o(...u)}else return l.args?new o(...l.args):new o}function d(i){return Object.entries(i.value).filter(([o,l])=>{var r,u;return(u=(r=l==null?void 0:l.prototype)==null?void 0:r.constructor)==null?void 0:u.toString().includes("class")}).map(([o,l])=>{const r=`${e}${o}`,u=c.defineComponent({name:r,setup(m,{slots:S,attrs:y,...v}){const{scene:M}=z(),{pushCamera:$}=j(),C=f(i,l,y,S);return a(y,C),(C instanceof g.PerspectiveCamera||C instanceof g.OrthographicCamera)&&$(C),C.isObject3D&&(M==null||M.value.add(C)),v.expose(C),t(r,{props:m,slots:S,attrs:y,ctx:v,scene:M}),()=>{}}});return[r,u]})}return{createComponentInstances:d,processProps:a,createInstanceFromVNode:s}}const q=h.createEventHook(),G=h.createEventHook(),J=h.createEventHook(),K=new g.Clock,{pause:ie,resume:ce,isActive:ue}=h.useRafFn(()=>{const e=K.getElapsedTime(),t=K.getDelta();q.trigger({delta:t,elapsed:e}),G.trigger({delta:t,elapsed:e}),J.trigger({delta:t,elapsed:e})},{immediate:!1});function T(){return{onBeforeLoop:q.on,onLoop:G.on,onAfterLoop:J.on,pause:ie,resume:ce,isActive:ue}}const le=c.shallowRef(new g.Scene);function z(){return{scene:le}}function Q(e){const t={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(t.nodes[n.name]=n),n.material&&!t.materials[n.material.name]&&(t.materials[n.material.name]=n.material)}),t}async function fe(e,t,n,a,s){const{logError:f}=U(),d=new e;s&&s(d),n&&n(e);const o=(Array.isArray(t)?t:[t]).map(l=>new Promise((r,u)=>{d.load(l,m=>{m.scene&&Object.assign(m,Q(m.scene)),r(m)},a,m=>u(f("[useLoader] - Failed to load resource",m)))}));return b(t)?await Promise.all(o):await o[0]}async function pe(e){const t=new g.LoadingManager,n=new g.TextureLoader(t),a=s=>new Promise((f,d)=>{n.load(s,i=>f(i),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(b(e)){const s=await Promise.all(e.map(f=>a(f)));return e.length>1?s:s[0]}else{const{map:s,displacementMap:f,normalMap:d,roughnessMap:i,metalnessMap:o,aoMap:l}=e;return{map:s?await a(s):null,displacementMap:f?await a(f):null,normalMap:d?await a(d):null,roughnessMap:i?await a(i):null,metalnessMap:o?await a(o):null,aoMap:l?await a(l):null}}}const _=c.reactive({});function B(){function e(n){return _[n]}function t(n,a){_[n]=a}return{state:_,...c.toRefs(_),getState:e,setState:t}}const w=c.shallowRef(),F=c.ref(!1);function X(e,t,n){const{alpha:a=!1,antialias:s,depth:f,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:i,precision:o,premultipliedAlpha:l,stencil:r,shadows:u=!1,shadowMapType:m=g.PCFShadowMap,physicallyCorrectLights:S=!1,outputEncoding:y=g.LinearEncoding,toneMapping:v=g.NoToneMapping,toneMappingExposure:M=1,context:$=void 0,powerPreference:C="default",preserveDrawingBuffer:we=!1,clearColor:Y=R("#000000"),windowSize:Ce=!1}=n,{width:D,height:V}=Ce?h.useWindowSize():h.useElementSize(t),{pixelRatio:Z}=h.useDevicePixelRatio(),{pause:ye,resume:Se}=T(),ve=c.computed(()=>D.value/V.value),E=()=>{!w.value||(w.value.setSize(D.value,V.value),w.value.setPixelRatio(Z.value))},H=()=>{!w.value||(w.value.shadowMap.enabled=h.resolveUnref(u),w.value.outputEncoding=h.resolveUnref(y),w.value.shadowMap.type=h.resolveUnref(m),w.value.physicallyCorrectLights=h.resolveUnref(S),w.value.toneMapping=h.resolveUnref(v),w.value.toneMappingExposure=h.resolveUnref(M),w.value.setClearColor(R(h.resolveUnref(Y))))},Me=()=>{const ee=h.unrefElement(e);if(w.value||!ee)return;w.value=new g.WebGLRenderer({canvas:ee,alpha:a,antialias:s,context:$,depth:f,failIfMajorPerformanceCaveat:i,logarithmicDepthBuffer:d,powerPreference:C,precision:o,stencil:r,preserveDrawingBuffer:we,premultipliedAlpha:l});const{setState:Oe}=B();Oe("renderer",w.value),H(),E(),Se(),F.value=!0},Pe=()=>{!w.value||(w.value.dispose(),w.value=void 0,F.value=!1,ye())};return c.watch([D,V,Z],E),c.watch(()=>[u,m,y,S,v,M,Y],H),c.watch(()=>[e,t],()=>{h.unrefElement(e)&&h.unrefElement(t)&&Me()},{immediate:!0,deep:!0}),{renderer:w,isReady:F,dispose:Pe,aspectRatio:ve}}const me=c.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:Boolean},setup(e,{slots:t,attrs:n}){const{logError:a}=U(),s=c.ref(),f=c.ref(),{renderer:d,dispose:i,aspectRatio:o}=X(s,f,e),l=c.shallowRef();return c.provide("camera",l),c.provide("renderer",d),c.provide("aspect-ratio",o),t.default&&!t.default().some(r=>r.type.name==="Scene")&&a("TresCanvas must contain a Scene component."),t.default&&!t.default().some(r=>{var u;return(u=r.type.name)==null?void 0:u.includes("Camera")})&&a("Scene must contain a Camera component."),c.onBeforeUnmount(()=>i()),()=>{if(t.default)return c.h("div",{ref:f,style:{position:"relative",width:"100%",height:"100vh",...n.style}},[c.h("canvas",{ref:s,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),t.default()])}}}),de=c.defineComponent({name:"Scene",setup(e,{slots:t}){const{scene:n}=z(),a=c.inject("renderer"),{activeCamera:s}=j(),{onLoop:f}=T();return c.provide("local-scene",n),f(()=>{(a==null?void 0:a.value)&&(s==null?void 0:s.value)&&(n==null?void 0:n.value)&&a.value.render(n==null?void 0:n.value,s.value)}),()=>{if(t.default)return t.default()}}}),ge=Symbol("UseTresState"),he={install(e,t){const n=(t==null?void 0:t.prefix)||"Tres";e.component(`${n}Canvas`,me),e.component(`${n}Scene`,de);const{catalogue:a}=N(e,n),{createComponentInstances:s}=I(n);s(a).forEach(([d,i])=>{e.component(d,i)}),c.watchEffect(()=>{console.log({catalogue:a})})}};p.CameraType=k,p.UseTresStateSymbol=ge,p.default=he,p.trasverseObjects=Q,p.useCamera=j,p.useCatalogue=N,p.useInstanceCreator=I,p.useLoader=fe,p.useRenderLoop=T,p.useRenderer=X,p.useScene=z,p.useTexture=pe,p.useTres=B,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -3,9 +3,11 @@ import { VNode, VNodeTypes } from 'vue'
 
 export type TresInstance = Object3D<Event> & { [key: string]: any }
 
+export type TresCatalogue = Record<string, any>
 export type TresVNodeType = VNodeTypes & {
   name?: string | Array<string>
   __name?: string
   setup?: (props: Readonly<any>) => void
 }
 export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
+export type TresAttributes = Record<string, any> & { args?: number[] }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [