Tram-One, now with Types! Typescript! v11.0.0

.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:

.eslintrc.js

@@ -0,0 +1,48 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	env: {
+		// allow document, window, etc (these are expected as a frontend-library)
+		browser: true,
+	},
+	plugins: ['jest', '@typescript-eslint'],
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+	rules: {
+		// some of the dependencies do not support module imports... yet
+		'@typescript-eslint/no-var-requires': 'off',
+		// as a library, we have to sometimes just expect anything
+		'@typescript-eslint/no-explicit-any': 'off',
+	},
+	overrides: [
+		// allow module.exports for config, testing, and docs
+		{
+			files: [
+				'./*.js', // top level config
+				'./docs/runkit_example.js', // runkit example
+				'./integration-tests/broken-app/**.js', // tests that still need runtime import/export
+			],
+			env: {
+				commonjs: true,
+			},
+		},
+
+		// configure test files to be in the jest environment
+		{
+			files: ['integration-tests/**/*', 'performance-tests/**/*'],
+			env: {
+				jest: true,
+			},
+			rules: {
+				'@typescript-eslint/no-empty-function': 'off',
+			},
+		},
+
+		// local scripts are expected to run on local machines with node
+		{
+			files: ['dev-scripts/**/*.js'],
+			env: {
+				node: true,
+			},
+		},
+	],
+};

.gitignore

@@ -4,20 +4,8 @@ dist
 # Coverage Report
 coverage
 
-# docma docs
-docs/website
-
-# Logs
-logs
-*.log
-*.log.*
-
 # Dependency directory
 node_modules
 
-# SSL certificates
-.ssl
-
 # parcel test app files
-dist
 .parcel-cache

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	useTabs: true,
+	singleQuote: true,
+	printWidth: 120,
+};

configs/rollup.config.cjs.js

@@ -1,28 +1,25 @@
-const filesize = require('rollup-plugin-filesize')
-const commonjs = require('rollup-plugin-commonjs')
-const pkg = require('../package.json')
+import filesize from 'rollup-plugin-filesize';
+import commonjs from 'rollup-plugin-commonjs';
+import pkg from '../package.json';
+import typescript from '@rollup/plugin-typescript';
 
-const external = Object.keys(pkg.dependencies)
-	.concat([
-		'type/function/ensure',
-		'type/object/ensure',
-		'type/string/ensure',
-		'type/value/ensure'
-	])
+const external = Object.keys(pkg.dependencies).concat([
+	'type/function/ensure',
+	'type/object/ensure',
+	'type/string/ensure',
+	'type/value/ensure',
+]);
 
-const plugins = [
-	commonjs(),
-	filesize()
-]
+const plugins = [typescript(), commonjs(), filesize()];
 
 export default {
-	input: 'src/tram-one',
+	input: 'src/tram-one.ts',
 	external,
 	plugins,
 	output: {
 		file: pkg.commonjs,
 		exports: 'named',
 		format: 'cjs',
-		interop: false
-	}
-}
+		interop: false,
+	},
+};

configs/rollup.config.umd.js

@@ -1,38 +1,40 @@
-const builtins = require('rollup-plugin-node-builtins')
-const commonjs = require('rollup-plugin-commonjs')
-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 sizes = require('rollup-plugin-sizes')
+import builtins from 'rollup-plugin-node-builtins';
+import commonjs from 'rollup-plugin-commonjs';
+import filesize from 'rollup-plugin-filesize';
+import globals from 'rollup-plugin-node-globals';
+import resolve from 'rollup-plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+// import sizes from 'rollup-plugin-sizes'
 
-const pkg = require('../package.json')
+import pkg from '../package.json';
 
 const plugins = [
+	typescript(),
 	resolve({
 		preferBuiltins: true,
-		browser: true
+		browser: true,
 	}),
 	builtins(),
 	commonjs(),
 	globals(),
 	builtins(),
 	terser(),
 	// sizes(), // useful for finding large dependencies
-	filesize()
-]
+	filesize(),
+];
 
 // 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',
 		exports: 'named',
 		file: pkg.umd,
 		globals: { domino: 'domino' },
-		format: 'umd'
+		format: 'umd',
 	},
-	plugins
-}
+	plugins,
+};

dev-scripts/badge.js

@@ -1,7 +1,7 @@
 module.exports = (label, value) => {
-	const labelWidth = label.length * 11
-	const valueWidth = 58 + (value.length * 4)
-	const labelOffset = 16.5
+	const labelWidth = label.length * 11;
+	const valueWidth = 58 + value.length * 4;
+	const labelOffset = 16.5;
 	return `<svg xmlns="http://www.w3.org/2000/svg" width="${valueWidth}" height="20">
   <linearGradient id="b" x2="0" y2="100%">
     <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
@@ -22,5 +22,5 @@ module.exports = (label, value) => {
     <text x="59" y="14">${value}</text>
   </g>
 </svg>
-`
-}
+`;
+};

dev-scripts/build-size-badges.js

@@ -1,26 +1,26 @@
-const path = require('path')
-const fs = require('fs')
-const badge = require('./badge')
+const path = require('path');
+const fs = require('fs');
+const badge = require('./badge');
 
-const buildPath = 'dist'
-const destPath = 'docs/badges'
-const units = ['B', 'kB', 'MB', 'GB']
+const buildPath = 'dist';
+const destPath = 'docs/badges';
+const units = ['B', 'kB', 'MB', 'GB'];
 
 // get filesize and transform to correct unit
-const getSize = fileName => {
-	const bytes = fs.statSync(path.resolve(buildPath, fileName)).size
-	const n = Math.floor(Math.log(bytes) / Math.log(1024))
-	const formatted = (bytes / (1024 ** n)).toFixed(2)
-	return `${formatted} ${units[n]}`
-}
+const getSize = (fileName) => {
+	const bytes = fs.statSync(path.resolve(buildPath, fileName)).size;
+	const n = Math.floor(Math.log(bytes) / Math.log(1024));
+	const formatted = (bytes / 1024 ** n).toFixed(2);
+	return `${formatted} ${units[n]}`;
+};
 
 // generate an SVG string and write it to dest
-const generateBadge = label => {
-	const value = getSize(`tram-one.${label}.js`)
-	const svg = badge(label, value)
-	const dest = path.resolve(destPath, `${label}.svg`)
-	fs.writeFile(dest, svg, err => err && process.stdout.write(err))
-}
+const generateBadge = (label) => {
+	const value = getSize(`tram-one.${label}.js`);
+	const svg = badge(label, value);
+	const dest = path.resolve(destPath, `${label}.svg`);
+	fs.writeFile(dest, svg, (err) => err && process.stdout.write(err));
+};
 
-generateBadge('cjs')
-generateBadge('umd')
+generateBadge('cjs');
+generateBadge('umd');

docs/runkit_example.js

@@ -1,13 +1,13 @@
-const { registerHtml } = require('tram-one')
+const { registerHtml } = require('tram-one');
 
-const html = registerHtml()
+const html = registerHtml();
 const home = () => {
 	return html`
 		<main>
-			<h1> Tram-One </h1>
-			<h2> A Modern View Framework for Vanilla Javascript </h2>
+			<h1>Tram-One</h1>
+			<h2>A Modern View Framework for Vanilla Javascript</h2>
 		</main>
-	`
-}
+	`;
+};
 
-home().outerHTML
+home().outerHTML;

integration-tests/broken-app/broken-hook.js

@@ -1,10 +1,10 @@
-const { registerHtml, useEffect } = require('../../src/tram-one')
+const { registerHtml, useEffect } = require('../../src/tram-one');
 
-const html = registerHtml()
+const html = registerHtml();
 
 // other hooks also generate the same error
 // so we don't need to check those, just useEffect is fine
-useEffect(() => {})
+useEffect(() => {});
 
 /**
  * broken component misplaced hook
@@ -14,5 +14,5 @@ module.exports = () => {
 		<header>
 			<h1 class="title">Home Page</h1>
 		</header>
-	`
-}
+	`;
+};