Demo: https://aframe-ts-webpack.netlify.com
Docs: https://edsilv.github.io/aframe-ts-webpack
An experiment to see if it's possible to update A-Frame to use webpack, esmodules, types (via TypeScript), and custom elements v1.
Creates commonjs, esmodule, UMD, and var dist builds. UMD would be the conventional method of use, i.e. window.AFRAME
.
Transpiles TypeScript to es5. Includes @webcomponents/custom-elements/custom-elements
(16k) and @webcomponents/webcomponentsjs/custom-elements-es5-adapter
(1.3k) polyfills.
custom-elements-es5-adapter
is necessary for modern browsers using custom elements transpiled to es5. Eventually when browsers are all "modern" we can change the tsconfig to "target": "es6"
and remove this polyfill.
es6 class syntax with optional static typing can be used for development. Any plain js file is a valid ts file.
Uses dts-bundle-generator
to generate a single namespaced type definition.
Generates documentation using typedoc
from code comments.
Tested in:
- IE11 (windows 10)
- Chrome (macOS High Sierra/windows 10)
- Safari (macOS High Sierra)
- Firefox (macOS High Sierra/windows 10)
- Edge (windows 10)
npm run examples
- Set up TypeScript and webpack with UMD, esmodule, commonjs, and var dist builds
- Generate type definition on build
- Format with prettier on build
- Generate documentation on build
- Bare-bones
a-scene
,a-entity
,a-node
usingcustomElements.define()
console loggingconnectedCallback
-
AFRAME.utils.isIE11
example - Set up Jest unit testing