Initial

Author: Ajaxy

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/typescript"
+    ],
+    [
+      "@babel/preset-env"
+    ],
+    [
+      "@babel/preset-react"
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-syntax-nullish-coalescing-operator"
+  ]
+}

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintrc

@@ -0,0 +1,79 @@
+{
+  "extends": [
+    "react-app",
+    "plugin:teactn/recommended",
+    "airbnb-typescript"
+  ],
+  "plugins": [
+    "no-async-without-await",
+    "teactn",
+    "no-null"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "max-len": [
+      "error",
+      120
+    ],
+    "array-bracket-newline": [
+      2,
+      "consistent"
+    ],
+    "no-null/no-null": 2,
+    "no-console": "error",
+    "semi": "error",
+    "no-implicit-coercion": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "arrow-body-style": "off",
+    "no-else-return": "off",
+    "no-plusplus": "off",
+    "no-void": "off",
+    "default-case": "off",
+    "no-param-reassign": "off",
+    "no-prototype-builtins": "off",
+    "no-await-in-loop": "off",
+    "no-nested-ternary": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/prefer-default-export": "off",
+    "import/named": "off",
+    "import/no-webpack-loader-syntax": "off",
+    "react/prop-types": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/button-has-type": "off",
+    "react/require-default-props": "off",
+    // Teact feature
+    "react/style-prop-object": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+    "no-async-without-await/no-async-without-await": 1,
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      {
+        "functions": false
+      }
+    ],
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/member-delimiter-style": "error",
+    "teactn/prefer-separate-component-file": "off"
+  },
+  "settings": {
+    "import/resolver": "webpack"
+  },
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "ignorePatterns": [
+    "webpack.config.js",
+    "jest.config.js",
+    "src/lib/secret-sauce"
+  ]
+}

README.md

@@ -0,0 +1,15 @@
+# Teact
+
+**Teact** is a lightweight and super-performant web framework with zero dependencies implementing React paradigm.
+
+It was originally developed as part of **Telegram JavaScript contest** and now powers the official [**Telegram Web**](https://github.com/Ajaxy/telegram-tt) client. This repo is an extracted version of the framework.
+
+### TODO
+
+Anyone is welcome to contribute.
+
+- Support packaging as a library, add **npm** support with usage examples.
+- Add unit tests.
+- Consider separating Teact and TeactN.
+- Consider extracting `useHeaveAnimationCheck`.
+- Consider making `handleErrors` less verbose or configurable.

package-lock.json

@@ -0,0 +1,28 @@
+{
+  "name": "teact",
+  "version": "1.0.0",
+  "description": "Tiny and fast alternative for React",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ajaxy/teact.git"
+  },
+  "keywords": [
+    "react",
+    "jsx",
+    "tsx",
+    "framework"
+  ],
+  "author": "Alexander Zinchuk (alexander@zinchuk.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Ajaxy/teact/issues"
+  },
+  "homepage": "https://github.com/Ajaxy/teact#readme",
+  "devDependencies": {
+    "@types/react": "^18.0.21"
+  }
+}

package.json

@@ -0,0 +1,37 @@
+declare const process: NodeJS.Process;
+
+declare namespace React {
+  interface HTMLAttributes {
+    // Optimization for DOM nodes prepends and inserts
+    teactFastList?: boolean;
+  }
+
+  interface Attributes {
+    // Optimization for DOM nodes reordering. Requires `teactFastList` for parent
+    teactOrderKey?: number;
+  }
+
+  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    loading?: 'auto' | 'eager' | 'lazy';
+  }
+
+  interface VideoHTMLAttributes {
+    srcObject?: MediaStream;
+  }
+
+  interface MouseEvent {
+    offsetX: number;
+    offsetY: number;
+  }
+}
+
+type AnyLiteral = Record<string, any>;
+type AnyFunction = (...args: any[]) => any;
+type AnyToVoidFunction = (...args: any[]) => void;
+type NoneToVoidFunction = () => void;
+
+interface HTMLElement {
+  mozRequestFullScreen?: () => Promise<void>;
+  webkitEnterFullscreen?: () => Promise<void>;
+  webkitRequestFullscreen?: () => Promise<void>;
+}

src/@types/global.d.ts

@@ -0,0 +1,3 @@
+declare namespace JSX {
+  type Element = VirtualElement;
+}

src/@types/teact.d.ts

@@ -0,0 +1,3 @@
+export const DEBUG = true;
+export const DEBUG_MORE = false;
+export const DEBUG_ALERT_MSG = 'Shoot!\nSomething went wrong, please see the error details in Dev Tools Console.';

src/config.ts

@@ -0,0 +1,9 @@
+import { useCallback, useState } from '../teact/teact';
+
+export default () => {
+  const [, setTrigger] = useState<boolean>(false);
+
+  return useCallback(() => {
+    setTrigger((trigger) => !trigger);
+  }, []);
+};

src/hooks/useForceUpdate.ts

@@ -0,0 +1,67 @@
+import { useEffect } from '../teact/teact';
+
+const ANIMATION_START_EVENT = 'tt-event-heavy-animation-start';
+const ANIMATION_END_EVENT = 'tt-event-heavy-animation-end';
+
+let timeout: number | undefined;
+let isAnimating = false;
+
+// Make sure to end even if end callback was not called (which was some hardly-reproducible bug)
+const AUTO_END_TIMEOUT = 1000;
+
+const useHeavyAnimationCheck = (
+  handleAnimationStart: AnyToVoidFunction,
+  handleAnimationEnd: AnyToVoidFunction,
+  isDisabled = false,
+) => {
+  useEffect(() => {
+    if (isDisabled) {
+      return undefined;
+    }
+
+    if (isAnimating) {
+      handleAnimationStart();
+    }
+
+    document.addEventListener(ANIMATION_START_EVENT, handleAnimationStart);
+    document.addEventListener(ANIMATION_END_EVENT, handleAnimationEnd);
+
+    return () => {
+      document.removeEventListener(ANIMATION_END_EVENT, handleAnimationEnd);
+      document.removeEventListener(ANIMATION_START_EVENT, handleAnimationStart);
+    };
+  }, [isDisabled, handleAnimationEnd, handleAnimationStart]);
+};
+
+export function isHeavyAnimating() {
+  return isAnimating;
+}
+
+export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) {
+  if (!isAnimating) {
+    isAnimating = true;
+    document.dispatchEvent(new Event(ANIMATION_START_EVENT));
+  }
+
+  if (timeout) {
+    clearTimeout(timeout);
+    timeout = undefined;
+  }
+
+  // Race condition may happen if another `dispatchHeavyAnimationEvent` is called before `onEnd`
+  function onEnd() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = undefined;
+    }
+
+    isAnimating = false;
+    document.dispatchEvent(new Event(ANIMATION_END_EVENT));
+  }
+
+  timeout = window.setTimeout(onEnd, duration);
+
+  return onEnd;
+}
+
+export default useHeavyAnimationCheck;