@threlte/gltf 3.0.0-next.0 → 3.0.0-next.2

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "semi": false,
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+  "singleAttributePerLine": true
+}

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @threlte/gltf
 
+## 3.0.0-next.2
+
+### Patch Changes
+
+- 958c375: Fix T.Group parser error
+
+## 3.0.0-next.1
+
+### Patch Changes
+
+- 36128d5: Replace events with callback props and slots with snippets
+
 ## 3.0.0-next.0
 
 ### Major Changes

package/README.md

@@ -116,9 +116,16 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb
 </script>
 
 {#if $gltf}
-  <T is={ref} {...$$restProps}>
+  <T
+    is={ref}
+    {...$$restProps}
+  >
     <T.Group name="Scene">
-      <T.Group name="Stacy" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
+      <T.Group
+        name="Stacy"
+        rotation={[Math.PI / 2, 0, 0]}
+        scale={0.01}
+      >
         <T is={$gltf.nodes.mixamorigHips} />
         <T.SkinnedMesh
           name="stacy"
@@ -166,7 +173,11 @@ You can re-use it, it will re-use geometries and materials out of the box:
 Or make the model dynamic. Change its colors for example:
 
 ```svelte
-<T.Mesh geometry={$gltf.nodes.robot.geometry} material={$gltf.materials.metal} material.color="green" />
+<T.Mesh
+  geometry={$gltf.nodes.robot.geometry}
+  material={$gltf.materials.metal}
+  material.color="green"
+/>
 ```
 
 Or exchange materials:
@@ -181,7 +192,10 @@ Make contents conditional:
 
 ```svelte
 {#if condition}
-  <T.Mesh geometry={$gltf.nodes.robot.geometry} material={$gltf.materials.metal} />}
+  <T.Mesh
+    geometry={$gltf.nodes.robot.geometry}
+    material={$gltf.materials.metal}
+  />}
 {/if}
 ```
 
@@ -193,7 +207,7 @@ You don't need to do anything if your models are draco compressed, since `useGlt
 
 #### ⚡️ Auto-transform (compression, resize)
 
-With the `--transform` flag it creates a binary-packed, draco-compressed, texture-resized (1024x1024), webp compressed, deduped, instanced and pruned *.glb ready to be consumed on a web site. It uses [glTF-Transform](https://github.com/donmccurdy/glTF-Transform). This can reduce the size of an asset by 70%-90%.
+With the `--transform` flag it creates a binary-packed, draco-compressed, texture-resized (1024x1024), webp compressed, deduped, instanced and pruned \*.glb ready to be consumed on a web site. It uses [glTF-Transform](https://github.com/donmccurdy/glTF-Transform). This can reduce the size of an asset by 70%-90%.
 
 It will not alter the original but create a copy and append `[modelname]-transformed.glb`.
 
@@ -218,7 +232,16 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb -t
 
   export const ref = new Group()
 
-  type ActionName = 'pockets' | 'rope' | 'swingdance' | 'jump' | 'react' | 'shrug' | 'wave' | 'golf' | 'idle'
+  type ActionName =
+    | 'pockets'
+    | 'rope'
+    | 'swingdance'
+    | 'jump'
+    | 'react'
+    | 'shrug'
+    | 'wave'
+    | 'golf'
+    | 'idle'
   type GLTFResult = {
     nodes: {
       stacy: THREE.SkinnedMesh
@@ -232,9 +255,16 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb -t
 </script>
 
 {#if $gltf}
-  <T is={ref} {...$$restProps}>
+  <T
+    is={ref}
+    {...$$restProps}
+  >
     <T.Group name="Scene">
-      <T.Group name="Stacy" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
+      <T.Group
+        name="Stacy"
+        rotation={[Math.PI / 2, 0, 0]}
+        scale={0.01}
+      >
         <T is={$gltf.nodes.mixamorigHips} />
         <T.SkinnedMesh
           name="stacy"
@@ -257,8 +287,7 @@ Command: npx gltfjsx@0.0.1 ./stacy.glb -t
 If your GLTF contains animations it will add [@threlte/extras's `useGltfAnimations`](https://threlte.xyz/extras/use-gltf-animations) hook, which extracts all clips and prepares them as actions:
 
 ```svelte
-const gltf = useGltf('/stacy.glb')
-export const { actions, mixer } = useGltfAnimations(gltf, ref)
+const gltf = useGltf('/stacy.glb') export const {(actions, mixer)} = useGltfAnimations(gltf, ref)
 ```
 
 If you want to play an animation you can do so at any time:
@@ -285,7 +314,6 @@ gltfLoader.load(url, (gltf) => {
 })
 ```
 
-
 ## Contributing
 
 Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/gltf",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0-next.2",
   "description": "GLTF to Threlte converter",
   "type": "module",
   "keywords": [
@@ -66,6 +66,8 @@
     ]
   },
   "scripts": {
-    "cleanup": "rimraf node_modules"
+    "cleanup": "rimraf node_modules",
+    "lint": "prettier --check .",
+    "format": "prettier --write ."
   }
 }

package/src/utils/glftLoader.js

@@ -1,4 +1,4 @@
 const THREE = (global.THREE = require('three'))
 require('../bin/GLTFLoader')
 
-module.exports = THREE.GLTFLoader
+module.exports = THREE.GLTFLoader

package/src/utils/parser.js

@@ -473,10 +473,8 @@ function parse(fileName, gltf, options = {}) {
 
   const imports = `
 	${options.types ? `\nimport type * as THREE from 'three'` : ''}
-        import { ${[
-          'T',
-          options.types && !options.isolated ? 'type Props, type Events, type Slots' : ''
-        ]
+  ${options.stype && !options.isolated ? `import type { Snippet } from 'svelte'` : ''}
+        import { ${['T', options.types && !options.isolated ? 'type Props' : '']
           .filter(Boolean)
           .join(', ')} } from '@threlte/core'
         import { ${[
@@ -507,7 +505,6 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
 ${
   options.preload
     ? `
-
 <script context="module"${options.types ? ' lang="ts"' : ''}>
 	${imports}
 
@@ -530,17 +527,22 @@ ${
     <script${options.types ? ' lang="ts"' : ''}>
 				${!options.preload ? imports : ''}
 
-        ${options.types && !options.isolated ? 'type $$Events = Events<THREE.Group>' : ''}
-        ${
-          options.types && !options.isolated
-            ? 'type $$Slots = Slots<THREE.Group> & { fallback: {}; error: { error: any } }'
-            : ''
-        }
-
         let {
           ref = $bindable(),
+          fallback,
+          error,
+          children,
           ...props
-        }${options.types && !options.isolated ? ': Props<THREE.Group>' : ''} = $props()
+        }${
+          options.types && !options.isolated
+            ? `: Props<THREE.Group> & {
+          ref?: THREE.Group
+          children?: Snippet<[{ ref: THREE.Group }]>
+          fallback?: Snippet
+          error?: Snippet<[{ error: Error }]>
+        }`
+            : ''
+        } = $props()
 
 				${!options.preload && options.suspense ? 'const suspend = useSuspense()' : ''}
 
@@ -558,15 +560,15 @@ ${
 
 		<T.Group bind:ref dispose={false} ${!options.isolated ? '{...props}' : ''}>
 			{#await gltf}
-				<slot name="fallback" />
+        {@render fallback?.()}
 			{:then gltf}
 				${scene}
 			{:catch error}
-				<slot name="error" {error} />
+        {@render error?.({ error })}
 			{/await}
 
-			<slot {ref} />
-		</T>
+      {@render children?.({ ref })}
+		</T.Group>
 	`
 }
 

package/src/utils/transform.js

@@ -1,5 +1,13 @@
 import { NodeIO } from '@gltf-transform/core'
-import { simplify, weld, dedup, resample, prune, textureCompress, draco } from '@gltf-transform/functions'
+import {
+  simplify,
+  weld,
+  dedup,
+  resample,
+  prune,
+  textureCompress,
+  draco
+} from '@gltf-transform/functions'
 import { ALL_EXTENSIONS } from '@gltf-transform/extensions'
 import { MeshoptDecoder, MeshoptEncoder, MeshoptSimplifier } from 'meshoptimizer'
 import draco3d from 'draco3dgltf'
@@ -12,7 +20,7 @@ async function transform(file, output, config = {}) {
     'draco3d.decoder': await draco3d.createDecoderModule(),
     'draco3d.encoder': await draco3d.createEncoderModule(),
     'meshopt.decoder': MeshoptDecoder,
-    'meshopt.encoder': MeshoptEncoder,
+    'meshopt.encoder': MeshoptEncoder
   })
 
   const document = await io.read(file)
@@ -28,7 +36,7 @@ async function transform(file, output, config = {}) {
     // Resize and convert textures (using webp and sharp)
     textureCompress({ targetFormat: 'webp', encoder: sharp, resize: [resolution, resolution] }),
     // Add Draco compression.
-    draco(),
+    draco()
   ]
 
   if (config.simplify) {
@@ -36,7 +44,11 @@ async function transform(file, output, config = {}) {
       // Weld vertices
       weld({ tolerance: config.weld ?? 0.0001 }),
       // Simplify meshes
-      simplify({ simplifier: MeshoptSimplifier, ratio: config.ratio ?? 0.75, error: config.error ?? 0.001 })
+      simplify({
+        simplifier: MeshoptSimplifier,
+        ratio: config.ratio ?? 0.75,
+        error: config.error ?? 0.001
+      })
     )
   }