Tram-One, now with Types! Typescript! v11.0.0 (#175)

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

@@ -0,0 +1,51 @@
+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 framework, we have to sometimes just expect anything
+		'@typescript-eslint/no-explicit-any': 'off',
+		// we shouldn't have console logs in our project
+		'no-console': 'error',
+	},
+	overrides: [
+		// allow module.exports for config, testing, and docs
+		{
+			files: [
+				'**/*.cjs', // any file with the cjs extension
+				'./*.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,9 @@ 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
+.parcel-dist

.prettierrc.cjs

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

README.md

@@ -12,11 +12,14 @@
   </a>
 </div>
 <div align="center">
-  <a href="https://www.npmjs.com/package/tram-one">
-    <img src="https://github.com/Tram-One/tram-one/raw/master/docs/badges/cjs.svg?sanitize=true" alt="Common JS build size">
+  <a href="https://unpkg.com/tram-one/dist/tram-one.cjs">
+    <img src="https://github.com/Tram-One/tram-one/raw/master/docs/badges/cjs.svg?sanitize=true" alt="Common JS build">
+  </a>
+  <a href="https://unpkg.com/tram-one/dist/tram-one.js">
+    <img src="https://github.com/Tram-One/tram-one/raw/master/docs/badges/umd.svg?sanitize=true" alt="UMD build">
   </a>
-  <a href="https://unpkg.com/tram-one/dist/tram-one.umd.js">
-    <img src="https://github.com/Tram-One/tram-one/raw/master/docs/badges/umd.svg?sanitize=true" alt="UMD build size">
+  <a href="https://unpkg.com/tram-one/dist/tram-one.mjs">
+    <img src="https://github.com/Tram-One/tram-one/raw/master/docs/badges/umd.svg?sanitize=true" alt="ES Module build">
   </a>
   <a href="https://discord.gg/dpBXAQC">
     <img src="https://img.shields.io/badge/discord-join-83ded3.svg?style=flat" alt="Join Discord">
@@ -30,6 +33,7 @@ Modern View Framework for Vanilla Javascript
 <br>
 
 ## Summary
+
 Tram-One is a Modern View Framework that has advance features like hooks, observables, and JSX-like template components, all in plain vanilla javascript.
 
 Tram-One takes inspiration from frameworks like Choo, React, and Svelte, and provides a rich feature set without additional libraries.
@@ -39,32 +43,36 @@ Tram-One takes inspiration from frameworks like Choo, React, and Svelte, and pro
 [If you have any questions from this page or about Tram-One, or just want to say hi, join our Discord!](https://discord.gg/dpBXAQC)
 
 ```javascript
-import {registerHtml, start} from 'tram-one'
+import { registerHtml, start } from '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>
-    </main>
-  `
-}
-
-start('#app', home)
+	return html`
+		<main>
+			<h1>Tram-One</h1>
+			<h2>A Modern View Framework For Vanilla Javascript</h2>
+		</main>
+	`;
+};
+
+start('#app', home);
 ```
 
 ### Why?
+
 Tram-One is a project that emphasizes vanilla JS and HTML syntax, while providing the features of modern JS frameworks. It is born out of love of the JSX syntax, and an attempt to build something unique with existing open source libraries.
 
 While Tram-One makes use of many dependencies, an effort has been made to expose those dependencies in a way that will hopefully
 encourage other developers to mix-and-match their own libraries, make improvements, and potentially
 build off of what is here to make their own front-end frameworks!
 
+### Is Tram-One for Javascript or Typescript?
+
+Both! While the source code and type checking exist in Typescript, smart editors (such as Visual Studio Code), will make use of
+the Typescript annotations regardless of what language you work in!
+
 ## This Repo and the Tram-One Org
+
 This repo contains the main Tram-One framework, which can be installed and
 used to make web-apps. [The Tram-One org](https://github.com/Tram-One)
 includes many of the dependencies as well as the websites and generators for the project.

configs/rollup.config.cjs.js

@@ -1,28 +1,17 @@
-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 plugins = [
-	commonjs(),
-	filesize()
-]
+const plugins = [typescript(), commonjs(), filesize()];
 
 export default {
-	input: 'src/tram-one',
-	external,
+	input: 'src/tram-one.ts',
 	plugins,
 	output: {
 		file: pkg.commonjs,
-		exports: 'named',
 		format: 'cjs',
-		interop: false
-	}
-}
+		interop: 'auto',
+		sourcemap: true,
+	},
+};

configs/rollup.config.mjs

@@ -0,0 +1,25 @@
+import filesize from 'rollup-plugin-filesize';
+import dts from 'rollup-plugin-dts';
+
+import pkg from '../load-package.cjs';
+import typescript from '@rollup/plugin-typescript';
+
+export default [
+	{
+		input: 'src/tram-one.ts',
+		plugins: [typescript(), filesize()],
+		output: {
+			file: pkg.module,
+			format: 'es',
+			sourcemap: true,
+		},
+	},
+	{
+		input: 'src/tram-one.ts',
+		plugins: [dts()],
+		output: {
+			file: pkg.types,
+			format: 'es',
+		},
+	},
+];

configs/rollup.config.umd.js

@@ -1,38 +1,36 @@
-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',
-	external: ['domino'],
+	input: 'src/tram-one.ts',
 	output: {
 		name: 'tram-one',
 		exports: 'named',
 		file: pkg.umd,
-		globals: { domino: 'domino' },
-		format: 'umd'
+		format: 'umd',
 	},
-	plugins
-}
+	plugins,
+};

dev-scripts/badge.js → dev-scripts/badge.cjs

@@ -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.cjs

@@ -0,0 +1,27 @@
+const path = require('path');
+const fs = require('fs');
+const badge = require('./badge.cjs');
+
+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]}`;
+};
+
+// generate an SVG string and write it to dest
+const generateBadge = (label, fileName) => {
+	const value = getSize(fileName);
+	const svg = badge(label, value);
+	const dest = path.resolve(destPath, `${label}.svg`);
+	fs.writeFile(dest, svg, (err) => err && process.stdout.write(err));
+};
+
+generateBadge('cjs', 'tram-one.cjs');
+generateBadge('umd', 'tram-one.js');
+generateBadge('mjs', 'tram-one.mjs');