initial commit

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[*.md]
+max_line_length = off

.github/CONTRIBUTING.md

@@ -0,0 +1,12 @@
+## Contributing guidelines
+
+- Use VSCode when possible. This will ensure that documents are formatted properly (with Prettier).
+- Install recommended VSCode extensions.
+- `build`, `test` and `prettier` commands must pass in order to be able to release.
+
+## Commands
+
+- `yarn start` - Start development server
+- `yarn build` - Build for production
+- `yarn test` - Run Jest (alternatively `yarn test:watch`)
+- `yarn prettier` - Run Prettier (alternatively `yarn prettier:fix`)

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - run: yarn
+      - run: yarn prettier
+      - run: yarn test
+      - run: yarn build

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+          cache-dependency-path: '**/website/yarn.lock'
+
+      - run: yarn install --frozen-lockfile
+
+      - run: yarn build
+
+      - run: yarn install --frozen-lockfile
+        working-directory: ./website
+
+      - run: yarn build
+        working-directory: ./website
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./website/build

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/artifacts
+/dist
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierignore

@@ -0,0 +1,34 @@
+# testing
+/coverage
+/artifacts
+/test-results
+.eslintcache
+/cypress/screenshots
+/coverage
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yalc
+yalc.lock
+.yarn/*
+
+# testing
+
+# production
+build
+artifacts
+dist
+tmp
+
+# Environment
+.env
+.env.*
+
+# Format JSON files with VSCode's default formatter
+*.json
+
+/public/mockServiceWorker.js
+/.next
+.docusaurus

.prettierrc.json

@@ -0,0 +1,16 @@
+{
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "proseWrap": "preserve",
+  "singleAttributePerLine": false,
+  "trailingComma": "all",
+  "bracketSameLine": false,
+  "quoteProps": "as-needed",
+  "singleQuote": true,
+  "jsxSingleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "EditorConfig.EditorConfig"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,4 @@
+{
+  "version": "0.2.0",
+  "configurations": []
+}

.vscode/react-on.code-workspace

@@ -0,0 +1,33 @@
+{
+  "folders": [
+    {
+      "name": "🌴 Root",
+      "path": ".."
+    },
+    {
+      "name": "🌐 Website",
+      "path": "../website"
+    },
+    {
+      "name": "🌩️ Vite Example",
+      "path": "../examples/vite"
+    }
+  ],
+  "settings": {
+    "files.exclude": {
+      "website": true,
+      "examples": true
+    },
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit",
+      "source.organizeImports": "explicit"
+    },
+    "editor.formatOnSave": true,
+    "npm.packageManager": "yarn",
+    "typescript.preferences.quoteStyle": "single",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "workbench.editor.labelFormat": "medium",
+    "typescript.tsdk": "🌴 Root/node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,22 @@
+{
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start"
+    },
+    {
+      "type": "npm",
+      "script": "build",
+      "group": "build"
+    },
+    {
+      "type": "npm",
+      "script": "preview"
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "group": "test"
+    }
+  ]
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Gökhan Kurt
+
+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.

README.md

@@ -0,0 +1,10 @@
+[![npm](https://img.shields.io/npm/v/react-on?style=for-the-badge)](https://www.npmjs.com/package/react-on)
+[![NPM](https://img.shields.io/npm/l/react-on?style=for-the-badge)](https://github.com/KurtGokhan/react-on/blob/main/LICENSE)
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/KurtGokhan/react-on/ci.yml?style=for-the-badge)](https://github.com/KurtGokhan/react-on/actions/workflows/ci.yml)
+
+# JSX Middlewares
+
+JSX Middlewares allows you to change the behavior of JSX renderer by adding middlewares.
+This allows you to enhance JSX with additional features that were not possible before, such as adding support for custom attributes and Angular-like directives.
+
+[Visit the docs →](https://gkurt.com/react-on/)

examples/vite/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/vite/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/vite/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "react-on-example-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-on": "link:../.."
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@vitejs/plugin-react": "^4.0.0",
+    "sass": "^1.62.1",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5"
+  }
+}

examples/vite/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}