/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

Primary LanguageTypeScript

aframe-ts-webpack

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)

examples

npm run examples

todo

  • 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 using customElements.define() console logging connectedCallback
  • AFRAME.utils.isIE11 example
  • Set up Jest unit testing