Merge pull request #1 from rkrupinski/example

example

README.md

@@ -1 +1,64 @@
 # @rkrupinski/react
+
+An experimental, lightweight [React](https://react.dev/) alternative.
+
+- [Getting started](#getting-started)
+
+## Getting started
+
+Install:
+
+```
+yarn add @rkrupinski/react
+```
+
+Make sure to set:
+
+```json
+{
+  "jsx": "react"
+}
+```
+
+in your `tsconfig.json` -> `"compilerOptions"`.
+
+Now you're all set:
+
+```tsx
+/* @jsx createElement */
+/* @jsxFrag Fragment */
+
+import {
+  render,
+  useState,
+  useEffect,
+  createElement,
+  Fragment,
+  type FC,
+} from "@rkrupinski/react";
+
+const App: FC = () => {
+  const [clicked, setClicked] = useState(0);
+
+  useEffect(() => {
+    console.log(`Clicked ${clicked} times`);
+  }, [clicked]);
+
+  return (
+    <>
+      <h1>Hello!</h1>
+      <button
+        onClick={() => {
+          setClicked((c) => c + 1);
+        }}
+      >
+        {clicked}
+      </button>
+    </>
+  );
+};
+
+const root = document.querySelector("#root") as HTMLElement;
+
+render(<App />, root);
+```

package.json

@@ -4,11 +4,12 @@
     "packages/*"
   ],
   "scripts": {
-      "clean": "wsrun -mc clean",
-      "typecheck": "wsrun -mc typecheck",
-      "lint": "wsrun -mc lint",
-      "test": "wsrun -mc test",
-      "build": "wsrun -tc build"
+    "clean": "wsrun -mc clean",
+    "typecheck": "wsrun -mc typecheck",
+    "lint": "wsrun -mc lint",
+    "test": "wsrun -mc test",
+    "start": "wsrun -mc start",
+    "build": "wsrun -tc build"
   },
   "devDependencies": {
     "wsrun": "5.2.4"

packages/example/.prettierrc.json

@@ -0,0 +1 @@
+"@rkrupinski/prettierconfig"

packages/example/README.md

@@ -0,0 +1,3 @@
+# @rkrupinski/react
+
+- [Docs](https://github.com/rkrupinski/react#readme)

packages/example/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "start": "parcel src/index.html --open",
+    "build": "parcel build src/index.html"
+  },
+  "dependencies": {
+    "@rkrupinski/react": "*",
+    "todomvc-app-css": "2.4.2"
+  },
+  "devDependencies": {
+    "@rkrupinski/prettierconfig": "1.0.1",
+    "parcel": "2.9.3"
+  }
+}

packages/example/src/components/TodoInput/TodoInput.tsx

@@ -0,0 +1,43 @@
+/* @jsx createElement */
+
+import {
+  createElement,
+  useState,
+  useCallback,
+  type FC,
+} from '@rkrupinski/react';
+
+export type TodoInputProps = {
+  onNewTodo: (text: string) => void;
+};
+
+export const TodoInput: FC<TodoInputProps> = ({ onNewTodo }) => {
+  const [text, setText] = useState('');
+
+  const handleInput = useCallback(
+    (e: any) => {
+      setText(e.target.value);
+    },
+    [setText],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: any) => {
+      if (e.keyCode !== 13) return;
+
+      onNewTodo(e.target.value);
+      setText('');
+    },
+    [onNewTodo, setText],
+  );
+
+  return (
+    <input
+      value={text}
+      onInput={handleInput}
+      onKeyDown={handleKeyDown}
+      className="new-todo"
+      placeholder="What needs to be done?"
+    />
+  );
+};

packages/example/src/components/TodoInput/index.ts

@@ -0,0 +1 @@
+export * from './TodoInput';

packages/example/src/components/TodoItem/TodoItem.tsx

@@ -0,0 +1,26 @@
+/* @jsx createElement */
+
+import { createElement, type FC } from '@rkrupinski/react';
+
+import type { Todo } from '../../types';
+
+export type TodoItemProps = {
+  data: Todo;
+  onToggle: (todo: Todo) => void;
+  onDestroy: (todo: Todo) => void;
+};
+
+export const TodoItem: FC<TodoItemProps> = ({ data, onToggle, onDestroy }) => (
+  <li className={data.completed ? 'completed' : ''}>
+    <div className="view">
+      <input
+        className="toggle"
+        type="checkbox"
+        checked={data.completed}
+        onChange={() => onToggle(data)}
+      />
+      <label>{data.body}</label>
+      <button className="destroy" onClick={() => onDestroy(data)} />
+    </div>
+  </li>
+);

packages/example/src/components/TodoItem/index.ts

@@ -0,0 +1 @@
+export * from './TodoItem';

packages/example/src/components/TodoList/TodoList.tsx

@@ -0,0 +1,25 @@
+/* @jsx createElement */
+
+import { createElement, type FC } from '@rkrupinski/react';
+
+import type { Todo } from '../../types';
+import { TodoItem } from '../TodoItem';
+
+export type TodoListProps = {
+  todos: Todo[];
+  onToggle: (todo: Todo) => void;
+  onDestroy: (todo: Todo) => void;
+};
+
+export const TodoList: FC<TodoListProps> = ({ todos, onToggle, onDestroy }) => (
+  <ul className="todo-list">
+    {todos.map(todo => (
+      <TodoItem
+        key={todo.id}
+        data={todo}
+        onToggle={onToggle}
+        onDestroy={onDestroy}
+      />
+    ))}
+  </ul>
+);

packages/example/src/components/TodoList/index.ts

@@ -0,0 +1 @@
+export * from './TodoList';

packages/example/src/components/TodoNav/TodoNav.tsx

@@ -0,0 +1,26 @@
+/* @jsx createElement */
+
+import { createElement, type FC } from '@rkrupinski/react';
+
+import { view, type View } from '../../types';
+
+export type TodoNavProps = {
+  current: View;
+  onChange: (newView: View) => void;
+};
+
+export const TodoNav: FC<TodoNavProps> = ({ current, onChange }) => (
+  <ul className="filters">
+    {view.map(v => (
+      <li key={v}>
+        <a
+          className={v === current ? 'selected' : ''}
+          href={`#${v}`}
+          onClick={() => onChange(v)}
+        >
+          {v}
+        </a>
+      </li>
+    ))}
+  </ul>
+);

packages/example/src/components/TodoNav/index.ts

@@ -0,0 +1 @@
+export * from './TodoNav';

packages/example/src/components/ToggleAll/ToggleAll.tsx

@@ -0,0 +1,36 @@
+/* @jsx createElement */
+/* @jsxFrag Fragment */
+
+import {
+  createElement,
+  Fragment,
+  useCallback,
+  type FC,
+} from '@rkrupinski/react';
+
+export type ToggleAllProps = {
+  all: boolean;
+  onToggle: (all: boolean) => void;
+};
+
+export const ToggleAll: FC<ToggleAllProps> = ({ all, onToggle }) => {
+  const handleToggle = useCallback(
+    (e: any) => {
+      onToggle(e.target.checked);
+    },
+    [onToggle],
+  );
+
+  return (
+    <>
+      <input
+        id="toggle-all"
+        className="toggle-all"
+        type="checkbox"
+        checked={all}
+        onChange={handleToggle}
+      />
+      <label for="toggle-all" />
+    </>
+  );
+};

packages/example/src/components/ToggleAll/index.ts

@@ -0,0 +1 @@
+export * from './ToggleAll';

packages/example/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@rkrupinski/react</title>
+    <script type="module" src="index.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>