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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @threlte/gltf
 
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/gltf",
-  "version": "3.0.0-next.2",
+  "version": "3.0.0-next.4",
   "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"
   },

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/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,14 +472,14 @@ 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'` : ''}
+  ${options.types ? `import type { Snippet } from 'svelte'` : ''}
         import { ${['T', options.types && !options.isolated ? 'type Props' : '']
           .filter(Boolean)
           .join(', ')} } from '@threlte/core'
@@ -528,16 +534,16 @@ ${
 				${!options.preload ? imports : ''}
 
         let {
-          ref = $bindable(),
-          fallback,
+					fallback,
           error,
           children,
-          ...props
+          ${options.isolated ? '' : 'ref = $bindable(),'}
+          ${options.isolated ? '' : '...props'}
         }${
-          options.types && !options.isolated
-            ? `: Props<THREE.Group> & {
-          ref?: THREE.Group
-          children?: Snippet<[{ ref: THREE.Group }]>
+          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 }]>
         }`
@@ -558,16 +564,16 @@ ${
     }
     </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}
 				${scene}
-			{:catch error}
-        {@render error?.({ error })}
+			{:catch err}
+        {@render error?.({ error: err })}
 			{/await}
 
-      {@render children?.({ ref })}
+      {@render children?.(${options.isolated ? '' : '{ ref }'})}
 		</T.Group>
 	`
 }