@tresjs/core 0.5.0 → 1.1.0

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 export * from './useCamera';
-export * from './useCatalog';
+export * from './useCatalogue';
 export * from './useInstanceCreator';
 export * from './useRenderLoop/';
 export * from './useRenderer/';

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

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

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

@@ -1,3 +1,7 @@
-export declare function useInstanceCreator(): {
-    createComponentInstances: () => (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<{}>>, {}>)[][];
+import { Ref } from 'vue';
+import { TresCatalogue, TresInstance, TresVNode } from '../../types';
+export declare function useInstanceCreator(prefix: string): {
+    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/env.d.ts

@@ -6,3 +6,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module '*.glsl' {}

package/dist/index.d.ts

@@ -1,9 +1,13 @@
 import { App } from 'vue';
 export * from './core';
 export * from './keys';
+export interface TresOptions {
+    prefix?: string;
+    extends?: Record<string, unknown>;
+}
 export interface TresPlugin {
     [key: string]: any;
-    install: (app: App, options?: any) => void;
+    install: (app: App, options?: TresOptions) => void;
 }
 declare const plugin: TresPlugin;
 export default plugin;

package/dist/logo-dark.svg

@@ -0,0 +1,5 @@
+<svg width="44" height="10" viewBox="0 0 44 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.14255 1.42916C5.53095 0.781817 6.46913 0.781816 6.85753 1.42915L11.0913 8.4855C11.4913 9.15203 11.0111 10 10.2338 10H1.76623C0.988935 10 0.508822 9.15203 0.908736 8.4855L5.14255 1.42916Z" fill="#82DBC5"/>
+<rect x="19" y="1" width="9" height="9" rx="1" fill="#f2f2f2"/>
+<circle cx="39.5" cy="5.5" r="4.5" fill="#EFAC35"/>
+</svg>

package/dist/tres.js

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

@@ -1,14 +1,13 @@
-import { Object3D } from 'three';
-import { VNode, VNodeTypes } from 'vue';
-export declare type TresInstance = Object3D<Event> & {
-    [key: string]: any;
-};
-export declare type TresVNodeType = VNodeTypes & {
-    name?: string | Array<string>;
-    __name?: string;
-    setup?: (props: Readonly<any>) => void;
-};
-export declare type TresVNode = VNode & {
-    children?: Array<VNode>;
-    type: TresVNodeType;
-};
+import { Object3D } from 'three'
+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": "0.5.0",
+  "version": "1.1.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -30,6 +30,7 @@
     "threejs-vue"
   ],
   "dependencies": {
+    "three": "^0.146.0",
     "vue": "^3.2.45"
   },
   "peerDependencies": {
@@ -38,7 +39,8 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^0.4.0",
+    "@tresjs/cientos": "^1.0.0",
+    "@types/three": "^0.146.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.1",
     "@vitest/ui": "^0.25.1",
@@ -54,6 +56,7 @@
     "vite": "^3.2.3",
     "vite-plugin-banner": "^0.6.1",
     "vite-plugin-dts": "^1.7.0",
+    "vite-plugin-glsl": "^0.5.3",
     "vite-plugin-require-transform": "^1.0.4",
     "vitest": "^0.25.1",
     "vue-demi": "^0.13.11"

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

@@ -1,6 +0,0 @@
-export declare function useCatalog(): {
-    extend: (objects: any) => void;
-    catalogue: {
-        [key: string]: any;
-    };
-};