@threlte/gltf 3.0.0-next.1 → 3.0.0-next.3

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.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

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.1",
+  "version": "3.0.0-next.3",
   "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.0.0-next.133",
     "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
@@ -466,18 +472,15 @@ function parse(fileName, gltf, options = {}) {
           useDraco: options.draco
         }
       : options.transform
-      ? {
-          useDraco: true
-        }
-      : undefined
+        ? {
+            useDraco: true
+          }
+        : undefined
 
   const imports = `
 	${options.types ? `\nimport type * as THREE from 'three'` : ''}
-  ${options.stype && !options.isolated ? `import type { Snippet } from 'svelte'` : ''}
-        import { ${[
-          'T',
-          options.types && !options.isolated ? 'type Props' : ''
-        ]
+  ${options.types ? `import type { Snippet } from 'svelte'` : ''}
+        import { ${['T', options.types && !options.isolated ? 'type Props' : '']
           .filter(Boolean)
           .join(', ')} } from '@threlte/core'
         import { ${[
@@ -531,17 +534,21 @@ ${
 				${!options.preload ? imports : ''}
 
         let {
-          ref = $bindable(),
-          fallback,
+					fallback,
           error,
           children,
-          ...props
-        }${options.types && !options.isolated ? `: Props<THREE.Group> & {
-          ref?: THREE.Group
+          ${options.isolated ? '' : 'ref = $bindable(),'}
+          ${options.isolated ? '' : '...props'}
+        }${
+          options.types
+            ? `: Props<THREE.Group> & {
+          ${options.isolated ? '' : 'ref?: THREE.Group'}
           children?: Snippet<[{ ref: THREE.Group }]>
           fallback?: Snippet
           error?: Snippet<[{ error: Error }]>
-        }` : ''} = $props()
+        }`
+            : ''
+        } = $props()
 
 				${!options.preload && options.suspense ? 'const suspend = useSuspense()' : ''}
 
@@ -557,7 +564,7 @@ ${
     }
     </script>
 
-		<T.Group bind:ref dispose={false} ${!options.isolated ? '{...props}' : ''}>
+		<T.Group ${options.isolated ? '' : 'bind:ref'} dispose={false} ${!options.isolated ? '{...props}' : ''}>
 			{#await gltf}
         {@render fallback?.()}
 			{:then gltf}
@@ -567,7 +574,7 @@ ${
 			{/await}
 
       {@render children?.({ ref })}
-		</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
+      })
     )
   }