Initial commit

brickpop · Feb 23, 2024 · 057f052 · 057f052
commit 057f052
Show file tree

Hide file tree

Showing 15 changed files with 8,214 additions and 0 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,21 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['18.x']
+        os: [ubuntu-latest]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - uses: oven-sh/setup-bun@v1
+      - run: bun install
+      - name: Build
+        run: bun run build
+      - name: Test
+        run: bun run test --ci --coverage --maxWorkers=2
diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml
@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+coverage
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jør∂¡
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,68 @@
+# If-Then-Else
+
+The fundamental component selector that the React team forgot to ship.
+
+Write clean UI components that can be visually read as a JS function.
+
+## Render a simple child when true
+```tsx
+<If condition={a && b && c}>
+   <p>The condition is true</p>
+</If>
+```
+
+## Render a simple child when false
+```tsx
+<If not={a && b && c}>
+   <p>The condition is false</p>
+</If>
+```
+
+## Render the first child with a matching condition
+
+```tsx
+<If condition={a && b && c}>
+  <Then>
+    <p>Condition 1 is true</p>
+  </Then>
+  <ElseIf condition={ d && e }>
+    <p>Condition 2 is true</p>
+  </ElseIf>
+  <ElseIf condition={ f || g }>
+    <p>Condition 3 is true</p>
+  </ElseIf>
+  <Else>
+    <p>The above conditions are false</p>
+  </Else>
+</If>
+```
+
+With negated conditions:
+```tsx
+<If not={a && b && c}>
+  <Then>
+    <p>Condition 1 is false</p>
+  </Then>
+  <ElseIf condition={ d && e }>
+    <p>Condition 2 is true</p>
+  </ElseIf>
+  <ElseIf not={ f || g }>
+    <p>Condition 3 is false</p>
+  </ElseIf>
+  <Else>
+    <p>No conditions match</p>
+  </Else>
+</If>
+```
+
+## Install
+
+```sh
+npm install if-then-else
+# yarn install if-then-else
+# bun install if-then-else
+```
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`.
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/example/index.tsx b/example/index.tsx
@@ -0,0 +1,61 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { If, Then, ElseIf, Else } from '../.';
+
+const App = () => {
+  const a = false,
+    b = true,
+    c = false,
+    d = true,
+    e = true,
+    f = false,
+    g = false;
+
+  return (
+    <div>
+      <If condition={a && b && c}>
+        <p>The condition is true</p>
+      </If>
+
+      <h1>Render a simple block when false</h1>
+      <If not={a && b && c}>
+        <p>The condition is false</p>
+      </If>
+
+      <h1>Render the first block with a condition that matches</h1>
+      <If condition={a && b && c}>
+        <Then>
+          <p>Condition 1 is true</p>
+        </Then>
+        <ElseIf condition={d && e}>
+          <p>Condition 2 is true</p>
+        </ElseIf>
+        <ElseIf condition={f || g}>
+          <p>Condition 3 is true</p>
+        </ElseIf>
+        <Else>
+          <p>All conditions are false</p>
+        </Else>
+      </If>
+
+      <h1>With negated conditions</h1>
+      <If not={a && b && c}>
+        <Then>
+          <p>Condition 1 is false</p>
+        </Then>
+        <ElseIf condition={d && e}>
+          <p>Condition 2 is true</p>
+        </ElseIf>
+        <ElseIf not={f || g}>
+          <p>Condition 3 is false</p>
+        </ElseIf>
+        <Else>
+          <p>No conditions matched</p>
+        </Else>
+      </If>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "react-app-polyfill": "^1.0.0"
+  },
+  "alias": {
+    "react": "../node_modules/react",
+    "react-dom": "../node_modules/react-dom/profiling",
+    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.8.4",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
+  }
+}
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": false,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "lib": ["es2015", "es2016", "dom"],
+    "types": ["node"]
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,61 @@
+{
+  "version": "0.9.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "if-then-else",
+  "author": "Jør∂¡",
+  "module": "dist/if-then-else.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/if-then-else.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/if-then-else.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.0.2",
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
+    "husky": "^9.0.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "size-limit": "^11.0.2",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
+  }
+}