https://github.com/paulhax/aframe-typescript-hot-loader
A-Frame WebGL toolkit example bundling Typescript and Javascript components with Webpack hot reloading.
https://github.com/paulhax/aframe-typescript-hot-loader
aframe threejs typescript virtualreality webpack webvr
Last synced: about 1 month ago
JSON representation
A-Frame WebGL toolkit example bundling Typescript and Javascript components with Webpack hot reloading.
- Host: GitHub
- URL: https://github.com/paulhax/aframe-typescript-hot-loader
- Owner: PaulHax
- License: mit
- Created: 2019-10-19T03:53:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-21T01:07:06.000Z (over 2 years ago)
- Last Synced: 2025-02-01T11:32:42.137Z (over 1 year ago)
- Topics: aframe, threejs, typescript, virtualreality, webpack, webvr
- Language: JavaScript
- Homepage:
- Size: 1.31 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aframe-typescript-hot-loader
Modifed example from https://github.com/supermedium/aframe-super-hot-loader. Thanks Kevin Ngo!
- Bundle Typescript and Javascript A-Frame components.
- Modify files and see the effect without refreshing thanks to Hot Module Replacment.
- ESLint and Prettier.
- Deploy to Github pages.
Also stole: https://github.com/olioapps/aframe-typescript-toolkit
## Getting Started
```
yarn install
yarn start
```
Point browser to localhost:3000
## Testing Components
Often you want to develop components independently from the main app. One way:
Make a directory under the test directory and put a app.ts and index.html in it. Say the directory is test/color-comp.
To run the Webpack dev server there:
```
yarn start --testDir color-comp
```
The --testDir argument sets the Webpack entry point and contentBase (aka static assests root) to that directory.
## Deploy to Github Pages
Setup the remote repo, then yarn deploy
```
git remote add origin [your repo URL here]
yarn deploy
```
------------
Kind of a heavy toolbelt, don't fall in deep water.
Helpful links (IMHO):
- https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb
- https://github.com/babel/babel-eslint/issues/663
- https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fde8e78611fd8f21f80425ed2e3ad160f8afb927/types/aframe/test/aframe-tests.ts
- https://github.com/olioapps/aframe-typescript-toolkit