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

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,65 @@
 # @threlte/gltf
 
+## 3.0.0-next.10
+
+### Patch Changes
+
+- 60fcc29: Bump dev dependencies
+
+## 3.0.0-next.9
+
+### Patch Changes
+
+- cec4b57: update deps
+
+## 3.0.0-next.8
+
+### Patch Changes
+
+- b7045f5: Svelte dependency update
+
+## 3.0.0-next.7
+
+### Patch Changes
+
+- 946e7a8: fix parser for animated assets
+
+## 3.0.0-next.6
+
+### Patch Changes
+
+- 7a3281c: Split out gltf-related loaders into hooks for better tree shaking
+
+## 3.0.0-next.5
+
+### Patch Changes
+
+- fa8a61c: Bump Svelte compiler version
+
+## 3.0.0-next.4
+
+### Patch Changes
+
+- 54bdef9: Fix gltf parser template for isolated components
+
+## 3.0.0-next.3
+
+### Patch Changes
+
+- bb726da: fix prettier formatting
+
+## 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"
@@ -256,9 +286,10 @@ 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
+```ts
 const gltf = useGltf('/stacy.glb')
-export const { actions, mixer } = useGltfAnimations(gltf, ref)
+
+export const {(actions, mixer)} = useGltfAnimations(gltf, ref)
 ```
 
 If you want to play an animation you can do so at any time:
@@ -285,7 +316,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.10",
   "description": "GLTF to Threlte converter",
   "type": "module",
   "keywords": [
@@ -39,10 +39,10 @@
     "jsdom-global": "^3.0.2",
     "meow": "^11.0.0",
     "meshoptimizer": "^0.18.1",
-    "prettier": "^2.8.3",
-    "prettier-plugin-svelte": "^2.9.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
     "sharp": "^0.32.0",
-    "svelte": "^3.55.1",
+    "svelte": "^5.1.10",
     "three": "0.122.0",
     "three-stdlib": "^2.21.8"
   },
@@ -66,6 +66,8 @@
     ]
   },
   "scripts": {
-    "cleanup": "rimraf node_modules"
+    "cleanup": "rimraf node_modules",
+    "lint": "prettier --check .",
+    "format": "prettier --write ."
   }
 }

package/src/index.js

@@ -51,17 +51,18 @@ export default function (file, output, options) {
         gltfLoader.parse(
           arrayBuffer,
           '',
-          (gltf) => {
+          async (gltf) => {
             const raw = parse(filePath, gltf, options)
             try {
-              const prettiered = prettier.format(raw, {
-                semi: false,
-                bracketSameLine: true,
-                svelteBracketNewLine: false,
-                printWidth: options.printwidth || 120,
-                svelteBracketNewLine: true,
+              const prettiered = await prettier.format(raw, {
                 singleQuote: true,
-                parser: 'svelte'
+                trailingComma: 'none',
+                semi: false,
+                printWidth: 100,
+                parser: 'svelte',
+                plugins: ['prettier-plugin-svelte'],
+                overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
+                singleAttributePerLine: true
               })
               stream.write(prettiered)
               stream.end()

package/src/utils/Options.d.ts

@@ -0,0 +1,22 @@
+export type Options = {
+  output?: string
+  types?: boolean
+  keepnames?: boolean
+  keepgroups?: boolean
+  shadows?: boolean
+  printwidth?: number
+  meta?: boolean
+  precision?: number
+  isolated?: boolean
+  preload?: boolean
+  suspense?: boolean
+  draco?: string
+  root?: string
+  transform?: boolean
+  resolution?: number
+  simplify?: boolean
+  weld?: number
+  ratio?: number
+  error?: number
+  debug?: boolean
+}

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

@@ -1,6 +1,12 @@
 import THREE from 'three'
 import isVarName from './isVarName.js'
 
+/**
+ * @param {string} fileName
+ * @param {import('three/examples/jsm/loaders/GLTFLoader').GLTF} gltf
+ * @param {import('./Options.d.ts').Options} options
+ * @returns {string}
+ */
 function parse(fileName, gltf, options = {}) {
   const url = fileName
   const animations = gltf.animations
@@ -460,29 +466,22 @@ function parse(fileName, gltf, options = {}) {
   // 2nd pass to eliminate hard to swat left-overs
   const scene = printThrelte(gltf.scene)
 
-  const useGltfOptions =
-    options.transform && options.draco
-      ? {
-          useDraco: options.draco
-        }
-      : options.transform
-      ? {
-          useDraco: true
-        }
-      : undefined
+  const useGltfOptions = {
+    draco: options.transform && options.draco ? (options.draco ? options.transform : true) : false
+  }
 
   const imports = `
 	${options.types ? `\nimport type * as THREE from 'three'` : ''}
-        import { ${[
-          'T',
-          options.types && !options.isolated ? 'type Props, type Events, type Slots' : ''
-        ]
+	${hasAnimations ? `import { Group } from 'three'` : ''}
+  ${options.types ? `import type { Snippet } from 'svelte'` : ''}
+        import { ${['T', options.types && !options.isolated ? 'type Props' : '']
           .filter(Boolean)
           .join(', ')} } from '@threlte/core'
         import { ${[
           'useGltf',
           hasAnimations ? 'useGltfAnimations' : '',
-          options.suspense ? 'useSuspense' : ''
+          options.suspense ? 'useSuspense' : '',
+          useGltfOptions.draco ? 'useDraco' : ''
         ]
           .filter(Boolean)
           .join(', ')} } from '@threlte/extras'
@@ -490,7 +489,7 @@ function parse(fileName, gltf, options = {}) {
 
   const useGltf = `${options.suspense ? 'suspend(' : ''}useGltf${
     options.types ? '<GLTFResult>' : ''
-  }('${url}'${useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''})${
+  }('${url}'${useGltfOptions.draco ? `, { dracoLoader: useDraco(${typeof useGltfOptions.draco === 'string' ? `'${useGltfOptions.draco}'` : ''}) }` : ''})${
     options.suspense ? ')' : ''
   }`
 
@@ -507,7 +506,6 @@ ${parseExtras(gltf.parser.json.asset && gltf.parser.json.asset.extras)}-->
 ${
   options.preload
     ? `
-
 <script context="module"${options.types ? ' lang="ts"' : ''}>
 	${imports}
 
@@ -530,23 +528,31 @@ ${
     <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(),
-          ...props
-        }${options.types && !options.isolated ? ': Props<THREE.Group>' : ''} = $props()
+					fallback,
+          error,
+          children,
+          ${options.isolated ? '' : 'ref = $bindable(),'}
+          ${options.isolated ? '' : '...props'}
+        }${
+          options.types
+            ? `: ${options.isolated ? '' : 'Props<THREE.Group> & '} {
+          ${options.isolated ? '' : 'ref?: THREE.Group'}
+          children?: ${options.isolated ? 'Snippet' : 'Snippet<[{ ref: THREE.Group }]>'}
+          fallback?: Snippet
+          error?: Snippet<[{ error: Error }]>
+        }`
+            : ''
+        } = $props()
 
 				${!options.preload && options.suspense ? 'const suspend = useSuspense()' : ''}
 
+				${hasAnimations && options.isolated ? 'const ref = new Group()' : hasAnimations ? 'ref = new Group()' : ''}
+
         ${options.types && !options.preload ? printThrelteTypes(objects, animations) : ''}
 
         ${!options.preload ? `const gltf = ${useGltf}` : 'const gltf = load()'}
+
     ${
       hasAnimations
         ? `export const { actions, mixer } = useGltfAnimations${
@@ -556,17 +562,17 @@ ${
     }
     </script>
 
-		<T.Group bind:ref dispose={false} ${!options.isolated ? '{...props}' : ''}>
+		<${hasAnimations ? 'T is={ref}' : 'T.Group'} ${!hasAnimations && !options.isolated ? 'bind:ref' : ''} dispose={false} ${!options.isolated ? '{...props}' : ''}>
 			{#await gltf}
-				<slot name="fallback" />
+        {@render fallback?.()}
 			{:then gltf}
 				${scene}
-			{:catch error}
-				<slot name="error" {error} />
+			{:catch err}
+        {@render error?.({ error: err })}
 			{/await}
 
-			<slot {ref} />
-		</T>
+      {@render children?.(${options.isolated ? '' : '{ ref }'})}
+		</${hasAnimations ? 'T' : '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
+      })
     )
   }