use ink

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Paul Henschel
+Copyright (c) 2020 Paul Henschel
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

cli.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+'use strict'
+const React = require('react')
+const importJsx = require('import-jsx')
+const { render } = require('ink')
+const meow = require('meow')
+
+const App = importJsx('./src/components/App')
+
+const cli = meow(
+  `
+	Usage
+	  $ gltfjsx [Model.js] [options]
+
+	Options
+		--types, -t     Add Typescript definitions
+		--verbose, -v   Verbose output w/ names and empty groups
+		--precision, -p Number of fractional digits (default: 2)
+		--draco, -d     Draco binary path
+		--root, -r      Sets directory from which .gltf file is served
+
+	Examples
+	  $ gltfjsx model.glb
+`,
+  {
+    flags: {
+      types: { type: 'boolean', alias: 't' },
+      verbose: { type: 'boolean', alias: 'v' },
+      precision: { type: 'number', alias: 'p', default: 2 },
+      draco: { type: 'string', alias: 'd' },
+      root: { type: 'string', alias: 'r' },
+    },
+  }
+)
+
+if (cli.input.length === 0) {
+  console.log(cli.help)
+} else {
+  render(React.createElement(App, { file: cli.input[0], ...cli.flags }))
+}

package.json

@@ -1,69 +1,90 @@
 {
-  "name": "@react-three/gltfjsx",
-  "version": "3.0.3",
-  "description": "gltf to jsx",
-  "scripts": {
-    "test": "node src/test"
-  },
-  "keywords": [
-    "gltf",
-    "jsx",
-    "react",
-    "fiber",
-    "three",
-    "threejs"
-  ],
-  "author": "Paul Henschel",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pmndrs/gltfjsx.git"
-  },
-  "bugs": {
-    "url": "https://github.com/pmndrs/gltfjsx/issues"
-  },
-  "homepage": "https://github.com/pmndrs/gltfjsx#readme",
-  "bin": {
-    "gltfjsx": "./src/index.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npx lint-staged"
-    }
-  },
-  "prettier": {
-    "semi": false,
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "jsxBracketSameLine": true,
-    "tabWidth": 2,
-    "printWidth": 120
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "prettier --write"
-    ]
-  },
-  "dependencies": {
-    "draco3dgltf": "1.3.6",
-    "is-var-name": "^2.0.0",
-    "jsdom": "^16.4.0",
-    "jsdom-global": "3.0.2",
-    "prettier": "2.1.2",
-    "three": "0.121.1",
-    "yargs": "16.0.3"
-  },
-  "devDependencies": {
-    "fast-glob": "^3.2.4",
-    "fs-extra": "^9.0.1",
-    "glTF-Sample-Models": "https://github.com/KhronosGroup/glTF-Sample-Models",
-    "husky": "4.3.0",
-    "import-jsx": "^4.0.0",
-    "lint-staged": "10.4.0",
-    "react": "^16.13.1"
-  },
-  "collective": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/react-three-fiber"
-  }
+	"name": "@react-three/gltfjsx",
+	"version": "3.0.3",
+	"description": "gltf to jsx",
+	"scripts": {
+		"test": "node src/test"
+	},
+	"keywords": [
+		"gltf",
+		"jsx",
+		"react",
+		"fiber",
+		"three",
+		"threejs"
+	],
+	"author": "Paul Henschel",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/pmndrs/gltfjsx.git"
+	},
+	"bugs": {
+		"url": "https://github.com/pmndrs/gltfjsx/issues"
+	},
+	"homepage": "https://github.com/pmndrs/gltfjsx#readme",
+	"bin": "cli.js",
+	"files": [
+		"cli.js"
+	],
+	"engines": {
+		"node": ">=10"
+	},
+	"dependencies": {
+		"draco3dgltf": "^1.3.6",
+		"glTF-Sample-Models": "https://github.com/KhronosGroup/glTF-Sample-Models",
+		"import-jsx": "^4.0.0",
+		"ink": "^3.0.7",
+		"is-var-name": "^2.0.0",
+		"jsdom": "^16.4.0",
+		"jsdom-global": "^3.0.2",
+		"meow": "^7.1.1",
+		"prettier": "^2.1.2",
+		"react": "^16.13.1",
+		"three": "^0.121.1",
+		"use-error-boundary": "^2.0.4"
+	},
+	"devDependencies": {
+		"@ava/babel": "^1.0.1",
+		"@babel/preset-env": "^7.11.5",
+		"@babel/preset-react": "^7.10.4",
+		"@babel/register": "^7.11.5",
+		"chalk": "^4.1.0",
+		"eslint-config-xo-react": "^0.23.0",
+		"eslint-plugin-react": "^7.21.3",
+		"eslint-plugin-react-hooks": "^4.1.2",
+		"fast-glob": "^3.2.4",
+		"fs-extra": "^9.0.1",
+		"husky": "^4.3.0",
+		"ink-testing-library": "^2.1.0",
+		"lint-staged": "^10.4.0"
+	},
+	"babel": {
+		"presets": [
+			"@babel/preset-env",
+			"@babel/preset-react"
+		]
+	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "npx lint-staged"
+		}
+	},
+	"prettier": {
+		"semi": false,
+		"trailingComma": "es5",
+		"singleQuote": true,
+		"jsxBracketSameLine": true,
+		"tabWidth": 2,
+		"printWidth": 120
+	},
+	"lint-staged": {
+		"*.{js,jsx,ts,tsx}": [
+			"prettier --write"
+		]
+	},
+	"collective": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/react-three-fiber"
+	}
 }

readme.md

@@ -11,19 +11,18 @@ With gltfjsx the full graph is declarative and immutable. It creates look-up tab
 ## Usage
 
 ```bash
-$ npx @react-three/gltfjsx model.gltf [Model.js] [options]
-```
-
-### Options
-```bash
-  --types, -t         Adds Typescript definitions                [boolean]
-  --verbose, -v       Verbose output w/ names and empty groups  [boolean] [default: false]
-  --precision, -p     Number of fractional digits               [number ] [default: 2]
-  --draco, -d         Draco binaries                            [string ] [default from Google CDN]
-  --root, -r          Sets directory from which .gltf is served [string ]
-  --silent, -s        No console output                         [boolean]
-  --help              Show help                                 [boolean]
-  --version           Show version number                       [boolean]
+Usage
+  npx @react-three/gltfjsx [Model.js] [options]
+
+Options
+  --types, -t     Add Typescript definitions
+  --verbose, -v   Verbose output w/ names and empty groups
+  --precision, -p Number of fractional digits (default: 2)
+  --draco, -d     Draco binary path
+  --root, -r      Sets directory from which .gltf file is served
+
+Examples
+  npx @react-three/gltfjsx model.glb -t
 ```
 
 ### Requirements

src/components/App.js

@@ -0,0 +1,58 @@
+'use strict'
+const React = require('react')
+const { Text, Box } = require('ink')
+const importJsx = require('import-jsx')
+const gltfjsx = require('../gltfjsx')
+const ErrorBoundary = importJsx('./ErrorBoundary')
+
+function Conversion({ file, ...config }) {
+  let nameExt = file.match(/[-_\w]+[.][\w]+$/i)[0]
+  let name = nameExt.split('.').slice(0, -1).join('.')
+  let output = name.charAt(0).toUpperCase() + name.slice(1) + (config.types ? '.tsx' : '.js')
+
+  const [done, setDone] = React.useState(false)
+  const [log, setLog] = React.useState([])
+
+  React.useEffect(() => {
+    async function run() {
+      try {
+        await gltfjsx(file, output, { ...config, setLog, timeout: 0, delay: 40 })
+        setDone(true)
+      } catch (e) {
+        setDone(() => {
+          throw e
+        })
+      }
+    }
+    run()
+  }, [])
+
+  return (
+    <>
+      {!done && (
+        <Box>
+          <Text color="black" backgroundColor="white">
+            {' Parse '}
+          </Text>
+          <Text> {(log[log.length - 1] || '').trim()}</Text>
+        </Box>
+      )}
+      {done && (
+        <Box>
+          <Text color="black" backgroundColor="green">
+            {' Done: '}
+          </Text>
+          <Text> {output}</Text>
+        </Box>
+      )}
+    </>
+  )
+}
+
+module.exports = function App(props) {
+  return (
+    <ErrorBoundary>
+      <Conversion {...props} />
+    </ErrorBoundary>
+  )
+}

src/components/ErrorBoundary.js

@@ -0,0 +1,23 @@
+'use strict'
+const React = require('react')
+const { Text, Box } = require('ink')
+const { useErrorBoundary } = require('use-error-boundary')
+
+module.exports = function App({ children }) {
+  const { ErrorBoundary, didCatch, error } = useErrorBoundary()
+  return (
+    <>
+      {didCatch ? (
+        <Box>
+          <Text color="white" backgroundColor="red">
+            {' '}
+            ERROR{' '}
+          </Text>
+          <Text> {error}</Text>
+        </Box>
+      ) : (
+        <ErrorBoundary>{children}</ErrorBoundary>
+      )}
+    </>
+  )
+}

src/components/Test.js

@@ -0,0 +1,70 @@
+'use strict'
+const React = require('react')
+const { Text, Box } = require('ink')
+const importJsx = require('import-jsx')
+const fg = require('fast-glob')
+const fs = require('fs-extra')
+const gltfjsx = require('../gltfjsx')
+const ErrorBoundary = importJsx('./ErrorBoundary')
+
+fs.removeSync('.test')
+fs.mkdirSync('.test')
+
+const config = { types: false, precision: 2, verbose: false, draco: undefined, silent: true }
+const entries = fg.sync(['node_modules/glTF-Sample-Models/2.0/**/*.{gltf,glb}'], { dot: true })
+
+function TestGltfs() {
+  const [file, setFile] = React.useState()
+  const [done, setDone] = React.useState(false)
+  const [log, setLog] = React.useState([])
+
+  React.useEffect(() => {
+    async function run() {
+      try {
+        for (let file of entries) {
+          let nameExt = file.match(/[-_\w]+[.][\w]+$/i)[0]
+          let output = '.test/' + nameExt.charAt(0).toUpperCase() + nameExt.slice(1) + (config.types ? '.tsx' : '.js')
+          setFile(nameExt)
+          await gltfjsx(file, output, { ...config, setLog, timeout: 0, delay: 0 })
+        }
+        fs.removeSync('.test')
+        setDone(true)
+      } catch (e) {
+        setDone(() => {
+          throw e
+        })
+      }
+    }
+    run()
+  }, [])
+
+  return (
+    <>
+      {!done && (
+        <Box>
+          <Text color="black" backgroundColor="white">
+            {' Parse '}
+          </Text>
+          <Text> {file}</Text>
+          <Text> {(log[log.length - 1] || '').trim()}</Text>
+        </Box>
+      )}
+      {done && (
+        <Box>
+          <Text color="black" backgroundColor="green">
+            {' Done: '}
+          </Text>
+          <Text> No errors</Text>
+        </Box>
+      )}
+    </>
+  )
+}
+
+module.exports = function App() {
+  return (
+    <ErrorBoundary>
+      <TestGltfs />
+    </ErrorBoundary>
+  )
+}