Setup for 1.0

Author: PythonCoderAS

README.md

@@ -1,11 +1,24 @@
-# typescript-project-template
-Template repo for new TypeScript projects.
+# simple-tsx
 
-This repo assumes the following:
+A simple way to use `.tsx` files without Babel or React!
 
-* Source code lives in the `src` directory.
-* The main export is located in `src/index.ts`.
-* Tests live in the `test` directory.
-* Each test is name `<name>.test.ts`.
-* The `npm_token`, `app_id`, and `app_private_key` secrets are present in the repo.
-* The code will be a CommonJS module.
+## Installation
+
+npm: `npm install --save simple-tsx`
+yarn: `yarn add simple-tsx`
+
+## Usage
+
+In your `tsconfig.json` file, add these following values to the `compilerOptions` section:
+
+```json
+    "jsx": "react",
+    "jsxFactory": "SimpleTSX.createElement",
+    "jsxFragmentFactory": "SimpleTSX.createFragment",
+```
+
+In each of your `.tsx` files, put the following import line on top:
+
+```tsx
+import * as SimpleTSX from "simple-tsx";
+```

package-lock.json

@@ -1,7 +1,7 @@
 {
-  "name": "<package-name>",
+  "name": "simple-tsx",
   "version": "1.0.0",
-  "description": "<package-description>",
+  "description": "A simple way to write tsx files. No babel required!",
   "main": "dist/index.js",
   "type": "commonjs",
   "types": "dist/index.d.ts",
@@ -13,17 +13,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/PythonCoderAS/<package-name>.git"
+    "url": "git+https://github.com/PythonCoderAS/simple-tsx.git"
   },
   "keywords": [],
   "author": "PythonCoderAS",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/PythonCoderAS/<package-name>/issues"
-  },
-  "homepage": "https://github.com/PythonCoderAS/<package-name>#readme",
-  "dependencies": {
+    "url": "https://github.com/PythonCoderAS/simple-tsx/issues"
   },
+  "homepage": "https://github.com/PythonCoderAS/simple-tsx#readme",
   "devDependencies": {
     "@types/chai": "^4.3.2",
     "@types/chai-as-promised": "^7.1.5",
@@ -36,6 +34,7 @@
     "eslint-config-pythoncoderas-combo": "^1.1.3",
     "mocha": "^10.0.0",
     "prettier": "^2.7.1",
+    "subprocess-test-utils": "^1.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4"
   }

package.json

@@ -0,0 +1,11 @@
+import Element, { ComponentFunction } from "./element";
+
+export default function createElement<
+  T extends Record<string, string | ((event: Event) => unknown)>
+>(tag: string | ComponentFunction<T>, props: T, ...children: Element[]) {
+  if (typeof tag === "string") {
+    return new Element(tag, props, ...children);
+  }
+
+  return tag(props, ...children);
+}

src/createElement.ts

@@ -0,0 +1,6 @@
+export default function createFragment(
+  props: unknown,
+  ...children: Element[]
+): Element[] {
+  return children;
+}

src/createFragment.ts

@@ -0,0 +1,30 @@
+import { AttributesType } from "./types";
+
+export default class Element {
+  element: HTMLElement;
+
+  constructor(
+    name: string,
+    attributes: AttributesType | null,
+    ...children: Element[]
+  ) {
+    this.element = document.createElement(name);
+    const trueAttributes = attributes || {};
+    Object.entries(trueAttributes).forEach(([key, value]) => {
+      if (key.startsWith("on") && key.toLowerCase() in window) {
+        this.element.addEventListener(
+          key.toLowerCase().substring(2),
+          value as EventListener
+        );
+      } else {
+        this.element.setAttribute(name, value.toString());
+      }
+    });
+    children.forEach((child) => this.element.appendChild(child.element));
+  }
+}
+
+export type ComponentFunction<T extends Record<string, unknown>> = (
+  props: T,
+  ...children: Element[]
+) => Element;

src/element.ts

@@ -0,0 +1,5 @@
+export { default as createElement } from "./createElement";
+export { default as createFragment } from "./createFragment";
+export { default as Element, ComponentFunction } from "./element";
+export * from "./utils";
+export * from "./types";

src/index.ts

@@ -0,0 +1,3 @@
+export type AttributesType = {
+  [key: string]: string | ((event: Event) => unknown);
+};

src/types.ts

@@ -0,0 +1,16 @@
+import Element from "./element";
+
+export function setElement(container: HTMLElement, element: Element): void {
+  container.replaceChildren(element.element);
+}
+
+export function appendElement(container: HTMLElement, element: Element): void {
+  container.appendChild(element.element);
+}
+
+export function appendElementLeft(
+  container: HTMLElement,
+  element: Element
+): void {
+  container.insertBefore(element.element, container.firstChild);
+}

src/utils.ts

@@ -0,0 +1,13 @@
+import { expect, use } from "chai";
+import * as chaiAsPromised from "chai-as-promised";
+import { runScript } from "subprocess-test-utils";
+
+use(chaiAsPromised);
+
+describe("simple-tsx tests", () => {
+  it("compiles correctly", async () => {
+    expect(
+      runScript("bash", ["-c", "cd tests/test-project && npm run build"])
+    ).to.eventually.equal(true);
+  });
+});