Allow storybook to use typescript source rather than transpiled js code

.storybook/main.js

@@ -1,4 +1,16 @@
 module.exports = {
 	stories: ["../examples/**/*.stories.js"],
 	addons: ["@storybook/addon-knobs/register"],
+	webpackFinal: (config) => {
+		config.module.rules.push({
+			test: /\.ts/,
+			use: [
+				{
+					loader: require.resolve("ts-loader"),
+				},
+			],
+		});
+		config.resolve.extensions.push(".ts");
+		return config;
+	},
 };

examples/stories/index.stories.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
-import * as skinview3d from "../../libs/skinview3d";
+
+import * as skinview3d from "../../src/skinview3d";
 import { withKnobs, radios, number } from "@storybook/addon-knobs";
 
 export default {
@@ -7,6 +8,7 @@ export default {
 	decorators: [withKnobs],
 };
 
+console.log("s", skinview3d);
 let currentAnimation;
 
 const createViewer = () => {

package.json

@@ -38,14 +38,14 @@
 		"bundles"
 	],
 	"dependencies": {
-		"skinview-utils": "^0.5.5",
+		"skinview-utils": "^0.5.6",
 		"three": "^0.117.1"
 	},
 	"devDependencies": {
-		"@storybook/addon-knobs": "^5.3.19",
 		"@babel/core": "^7.10.4",
 		"@rollup/plugin-node-resolve": "^8.1.0",
 		"@rollup/plugin-typescript": "^5.0.0",
+		"@storybook/addon-knobs": "^5.3.19",
 		"@storybook/html": "^5.3.19",
 		"@typescript-eslint/eslint-plugin": "^3.4.0",
 		"@typescript-eslint/parser": "^3.4.0",
@@ -56,6 +56,7 @@
 		"rimraf": "^3.0.2",
 		"rollup": "^2.18.0",
 		"rollup-plugin-terser": "^6.1.0",
+		"ts-loader": "^8.0.0",
 		"typescript": "^3.9.5"
 	}
 }

src/animation.ts

@@ -1,5 +1,5 @@
 import { Clock } from "three";
-import { PlayerObject } from "./model.js";
+import { PlayerObject } from "./model";
 
 export interface IAnimation {
 	play(player: PlayerObject, time: number): void;

src/orbit_controls.ts

@@ -1,4 +1,4 @@
-import { SkinViewer } from "./viewer.js";
+import { SkinViewer } from "./viewer";
 import { Vector3 } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 

src/skinview3d.ts

@@ -1,4 +1,4 @@
-export * from "./model.js";
-export * from "./viewer.js";
-export * from "./orbit_controls.js";
-export * from "./animation.js";
+export * from "./model";
+export * from "./viewer";
+export * from "./orbit_controls";
+export * from "./animation";

src/viewer.ts

@@ -1,7 +1,7 @@
 import { applyMixins, CapeContainer, ModelType, SkinContainer, RemoteImage, TextureSource } from "skinview-utils";
 import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
-import { RootAnimation } from "./animation.js";
-import { PlayerObject } from "./model.js";
+import { RootAnimation } from "./animation";
+import { PlayerObject } from "./model";
 
 export type LoadOptions = {
 	/**