Tram-One · JRJurman · Nov 10, 2021 · Oct 21, 2021 · Oct 21, 2021 · Oct 21, 2021
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -31,7 +31,7 @@ jobs:
           fingerprints:
             - "64:3e:d4:d8:4b:95:68:79:d3:3b:ab:b1:5c:fa:2d:3d"
 
-      - run: npm install
+      - run: npm ci
 
       - save_cache:
           paths:

diff --git a/configs/rollup.config.cjs.js b/configs/rollup.config.cjs.js
@@ -1,6 +1,7 @@
 const filesize = require('rollup-plugin-filesize')
 const commonjs = require('rollup-plugin-commonjs')
 const pkg = require('../package.json')
+const typescript = require('@rollup/plugin-typescript')
 
 const external = Object.keys(pkg.dependencies)
 	.concat([
@@ -11,12 +12,13 @@ const external = Object.keys(pkg.dependencies)
 	])
 
 const plugins = [
+	typescript(),
 	commonjs(),
 	filesize()
 ]
 
 export default {
-	input: 'src/tram-one',
+	input: 'src/tram-one.ts',
 	external,
 	plugins,
 	output: {

diff --git a/configs/rollup.config.umd.js b/configs/rollup.config.umd.js
@@ -4,11 +4,13 @@ const filesize = require('rollup-plugin-filesize')
 const globals = require('rollup-plugin-node-globals')
 const resolve = require('rollup-plugin-node-resolve')
 const { terser } = require('rollup-plugin-terser')
+const typescript = require('@rollup/plugin-typescript')
 // const sizes = require('rollup-plugin-sizes')
 
 const pkg = require('../package.json')
 
 const plugins = [
+	typescript(),
 	resolve({
 		preferBuiltins: true,
 		browser: true
@@ -25,7 +27,7 @@ const plugins = [
 // domino is a package used by belit to support server side rendering,
 // it does not need to be included in browser builds, which will have document
 export default {
-	input: 'src/tram-one',
+	input: 'src/tram-one.ts',
 	external: ['domino'],
 	output: {
 		name: 'tram-one',

diff --git a/docs/badges/cjs.svg b/docs/badges/cjs.svg
diff --git a/docs/badges/umd.svg b/docs/badges/umd.svg
diff --git a/integration-tests/test-app/account.js → integration-tests/test-app/account.ts b/integration-tests/test-app/account.js → integration-tests/test-app/account.ts
@@ -1,11 +1,11 @@
-const { registerHtml, useUrlParams } = require('../../src/tram-one')
+import { registerHtml, useUrlParams } from '../../src/tram-one'
 
 const html = registerHtml()
 
 /**
  * component to test url parameters
  */
-module.exports = () => {
+export default () => {
 	const { account, loggedIn = 'No' } = useUrlParams('/:account')
 	return html`
 		<div>

diff --git a/integration-tests/test-app/click-tracker.js → integration-tests/test-app/click-tracker.ts b/integration-tests/test-app/click-tracker.js → integration-tests/test-app/click-tracker.ts
@@ -1,11 +1,11 @@
-const { registerHtml, useStore } = require('../../src/tram-one')
+import { registerHtml, useStore } from '../../src/tram-one'
 
 const html = registerHtml()
 
 /**
  * component to test local state management
  */
-module.exports = () => {
+export default () => {
 	const totalClicks = useStore({ clicks: 0 })
 	const incrementClicks = () => totalClicks.clicks++
 	return html`

diff --git a/integration-tests/test-app/index.html b/integration-tests/test-app/index.html
@@ -5,6 +5,6 @@
 	</head>
 	<body>
 		<div id="parcel-page"></div>
-		<script src="./index.js"></script>
+		<script type="module" src="./index.ts"></script>
 	</body>
 </html>
diff --git a/integration-tests/test-app/index.js → integration-tests/test-app/index.ts b/integration-tests/test-app/index.js → integration-tests/test-app/index.ts
@@ -1,14 +1,22 @@
-const { registerHtml, start } = require('../../src/tram-one')
+import { registerHtml, start } from '../../src/tram-one'
+import title from './title'
+import logo from './logo'
+import clicktracker from './click-tracker'
+import startupwait from './startup-wait'
+import tab from './tab'
+import account from './account'
+import tasks from './tasks'
+import mirrorinput from './mirror-input'
 
 const html = registerHtml({
-	'title': require('./title'),
-	'logo': require('./logo'),
-	'click-tracker': require('./click-tracker'),
-	'startup-wait': require('./startup-wait'),
-	'tab': require('./tab'),
-	'account': require('./account'),
-	'tasks': require('./tasks'),
-	'mirror-input': require('./mirror-input')
+	'title': title,
+	'logo': logo,
+	'click-tracker': clicktracker,
+	'startup-wait': startupwait,
+	'tab': tab,
+	'account': account,
+	'tasks': tasks,
+	'mirror-input': mirrorinput
 })
 
 /**

diff --git a/integration-tests/test-app/logo.js → integration-tests/test-app/logo.ts b/integration-tests/test-app/logo.js → integration-tests/test-app/logo.ts
@@ -1,11 +1,11 @@
-const { registerSvg } = require('../../src/tram-one')
+import { registerSvg } from '../../src/tram-one'
 
 const svg = registerSvg()
 
 /**
  * component to test svg functionality
  */
-module.exports = () => {
+export default () => {
 	return svg`
     <svg class="logo" viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg" style="max-width: 10em">
       <circle cx="5" cy="5" r="4" role="logo">

diff --git a/integration-tests/test-app/mirror-input.js → integration-tests/test-app/mirror-input.ts b/integration-tests/test-app/mirror-input.js → integration-tests/test-app/mirror-input.ts
@@ -1,13 +1,14 @@
-const { registerHtml, useGlobalStore } = require('../../src/tram-one')
+import { registerHtml, useGlobalStore } from '../../src/tram-one'
+import submirrorinput from './sub-mirror-input'
 
 const html = registerHtml({
-	'sub-mirror-input': require('./sub-mirror-input')
+	'sub-mirror-input': submirrorinput
 })
 
 /**
  * component to test url parameters
  */
-module.exports = () => {
+export default () => {
 	const mirrorable = useGlobalStore('mirrorable-input', { value: '' })
 
 	const onEvent = event => {

diff --git a/integration-tests/test-app/startup-wait.js → integration-tests/test-app/startup-wait.ts b/integration-tests/test-app/startup-wait.js → integration-tests/test-app/startup-wait.ts
@@ -1,11 +1,11 @@
-const { registerHtml, useStore, useEffect } = require('../../src/tram-one')
+import { registerHtml, useStore, useEffect } from '../../src/tram-one'
 
 const html = registerHtml()
 
 /**
  * component to test effects on mount
  */
-module.exports = () => {
+export default () => {
 	const initialWait = useStore({ isDone: false })
 
 	// after the element first renders, run effect to set isDone to true

diff --git a/...ration-tests/test-app/sub-mirror-input.js → ...ration-tests/test-app/sub-mirror-input.ts b/...ration-tests/test-app/sub-mirror-input.js → ...ration-tests/test-app/sub-mirror-input.ts
@@ -1,14 +1,16 @@
-const { registerHtml, useGlobalStore } = require('../../src/tram-one')
+import { registerHtml, useGlobalStore } from '../../src/tram-one'
 
 const html = registerHtml({
 	'sub-mirrorable-input': require('./sub-mirror-input')
 })
 
+type InputObject = { value: string }
+
 /**
  * component to test url parameters
  */
-module.exports = () => {
-	const mirrorable = useGlobalStore('mirrorable-input')
+export default () => {
+	const mirrorable = useGlobalStore('mirrorable-input') as InputObject
 
 	const onEvent = event => {
 		mirrorable.value = event.target.value

diff --git a/integration-tests/test-app/sub-tab.js → integration-tests/test-app/sub-tab.ts b/integration-tests/test-app/sub-tab.js → integration-tests/test-app/sub-tab.ts
@@ -1,15 +1,23 @@
-const { registerHtml, useEffect, useGlobalStore, useStore } = require('../../src/tram-one')
+import { registerHtml, useEffect, useGlobalStore, useStore } from '../../src/tram-one'
 
 const html = registerHtml()
 
+type TabState = {
+	tabWasUpdated: boolean,
+	tabWasDismissed: boolean,
+	shouldDisplayTab: boolean,
+	isTabLocked: boolean,
+	loading: boolean
+}
+
 /**
  * Component for testing effects and global state
  * It can be removed by clicking "Dismiss".
  * Its effects can be refreshed (cleaned up) by clicking "Lock Tab"
  */
 module.exports = () => {
 	// global state that controls if the tab is shown and what it shows
-	const tabState = useGlobalStore('tab-state')
+	const tabState = useGlobalStore('tab-state') as TabState
 
 	// local tab state for testing local effect changes
 	const previousLockState = useStore({ locked: false })

diff --git a/integration-tests/test-app/sub-title.js → integration-tests/test-app/sub-title.ts b/integration-tests/test-app/sub-title.js → integration-tests/test-app/sub-title.ts
@@ -1,11 +1,11 @@
-const { registerHtml } = require('../../src/tram-one')
+import { registerHtml } from '../../src/tram-one'
 
 const html = registerHtml()
 
 /**
  * component to test basic rendering
  */
-module.exports = (props, children) => {
+export default (props, children) => {
 	return html`
 		<h2>${children}</h2>
 	`

diff --git a/integration-tests/test-app/tab.js → integration-tests/test-app/tab.ts b/integration-tests/test-app/tab.js → integration-tests/test-app/tab.ts
@@ -1,4 +1,4 @@
-const { registerHtml, useGlobalStore, useEffect } = require('../../src/tram-one')
+import { registerHtml, useGlobalStore, useEffect } from '../../src/tram-one'
 
 const html = registerHtml({
 	'sub-tab': require('./sub-tab')
@@ -15,7 +15,7 @@ const defaultTabState = {
 /**
  * component to test global state and control sub-tab (which has cleanup effects)
  */
-module.exports = () => {
+export default () => {
 	const tabState = useGlobalStore('tab-state', defaultTabState)
 
 	// immediately update the state (verifies effects on mount)

diff --git a/integration-tests/test-app/tasks.js → integration-tests/test-app/tasks.ts b/integration-tests/test-app/tasks.js → integration-tests/test-app/tasks.ts
@@ -1,11 +1,11 @@
-const { registerHtml, useStore } = require('../../src/tram-one')
+import { registerHtml, useStore } from '../../src/tram-one'
 
 const html = registerHtml()
 
 /**
  * component to test url parameters
  */
-module.exports = () => {
+export default () => {
 	const tasks = useStore([])
 	const newTask = useStore({ label: `Task Number ${tasks.length}`, type: 'Projects' })
 

diff --git a/integration-tests/test-app/title.js → integration-tests/test-app/title.ts b/integration-tests/test-app/title.js → integration-tests/test-app/title.ts
@@ -1,14 +1,15 @@
-const { registerHtml } = require('../../src/tram-one')
+import { registerHtml } from '../../src/tram-one'
+import subtitle from './sub-title'
 
 const html = registerHtml({
 	// sub-title to test multiple instances of the same tag
-	'sub-title': require('./sub-title')
+	'sub-title': subtitle
 })
 
 /**
  * component to test basic rendering
  */
-module.exports = (props, children) => {
+export default (props, children) => {
 	const { subtitle = '' } = props
 	return html`
 		<header>

diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,8 @@
 module.exports = {
 	setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-	testEnvironment: 'jsdom'
+	testEnvironment: 'jsdom',
+	transform: {
+    '^.+\\.ts?$': 'ts-jest'
+  },
+	moduleFileExtensions: ['ts', 'js']
 }