rewrite the implementation to not rely on context updates but use subscriptions instead

.github/workflows/test.yml

@@ -12,18 +12,19 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [12.x, 14.x]
+                node-version: [16.x]
 
         steps:
             - uses: actions/checkout@v1
             - name: Use Node.js ${{ matrix.node-version }}
               uses: actions/setup-node@v1
               with:
                   node-version: ${{ matrix.node-version }}
-            - name: yarn install, build, and test
+            - name: build and test
               run: |
                   yarn install
-                  yarn build
-                  yarn test
+                  make build
+                  make test
+                  make lint
               env:
                   CI: true

Makefile

@@ -0,0 +1,27 @@
+DEFAULT_GOAL: build
+
+clean:
+	make -C packages/demo $@
+	make -C packages/react-sunbeam $@
+
+build: clean
+	make -C packages/react-sunbeam $@
+	make -C packages/demo $@
+
+dev: build
+	yarn concurrently -n sunb,demo -c red,blue \
+	"make -C packages/react-sunbeam ${@}" \
+	"make -C packages/demo ${@}"
+
+lint:
+	make -C packages/react-sunbeam $@
+	make -C packages/demo $@
+
+type-check:
+	make -C packages/react-sunbeam $@
+	make -C packages/demo $@
+
+test:
+	make -C packages/react-sunbeam $@
+
+PHONY: clean build dev type-check test

README.md

@@ -1,11 +1,8 @@
 <div align="center">
-<div align="center"><img src="https://user-images.githubusercontent.com/1524432/66853526-c8c8d200-ef7f-11e9-8fcf-65da77392158.png" width="170" height="170" alt="Sunbeam Logo"/></div>
+<div align="center"><img src="./packages/react-sunbeam/logo.svg" width="170" height="170" alt="Sunbeam Logo"/></div>
 <h1 align="center">React Sunbeam Monorepo</h1>
 <p>
-    Spatial navigation and focus management system for React apps
-</p>
-<p align="center">
-    <a href="https://lerna.js.org/"><img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="Maintained with Lerna"></a>
+    Spatial navigation and key press management for React apps
 </p>
 </div>
 

package.json

@@ -3,56 +3,20 @@
     "workspaces": [
         "packages/*"
     ],
-    "scripts": {
-        "build": "lerna run build",
-        "commit": "git-cz",
-        "commit:retry": "git-cz --retry",
-        "dev": "yarn build && lerna run --parallel --stream dev",
-        "clean": "lerna run clean",
-        "lint": "lerna run lint",
-        "release": "yarn build && lerna publish --conventional-commits",
-        "test": "lerna run test",
-        "type-check": "lerna run type-check",
-        "uninstall": "lerna clean && rimraf ./node_modules"
-    },
-    "husky": {
-        "hooks": {
-            "pre-commit": "pretty-quick --staged && yarn type-check && yarn lint && yarn test",
-            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-            "pre-push": "yarn type-check && yarn lint && yarn test"
-        }
-    },
-    "commitlint": {
-        "extends": [
-            "@commitlint/config-conventional"
-        ],
-        "rules": {
-            "scope-case": [
-                0
-            ],
-            "header-max-length": [
-                2,
-                "always",
-                100
-            ]
-        }
-    },
-    "config": {
-        "commitizen": {
-            "path": "cz-conventional-changelog"
-        }
-    },
     "repository": "git+https://github.com/vovaguguiev/react-sunbeam.git",
     "author": "Vova Guguiev <[email protected]>",
     "devDependencies": {
-        "@commitlint/cli": "^11.0.0",
-        "@commitlint/config-conventional": "^11.0.0",
-        "commitizen": "^4.2.2",
-        "cz-conventional-changelog": "^3.3.0",
-        "husky": "^4.3.0",
-        "lerna": "^3.22.1",
-        "prettier": "^2.1.2",
-        "pretty-quick": "^3.1.0",
-        "rimraf": "^3.0.2"
+        "@typescript-eslint/eslint-plugin": "^4.7.0",
+        "@typescript-eslint/parser": "^4.7.0",
+        "eslint": "^7.13.0",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-react": "^7.21.5",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "jest": "^26.6.3",
+        "jest-ts-webcompat-resolver": "^1.0.0",
+        "prettier": "^2.2.1",
+        "ts-jest": "^26.4.4",
+        "typescript": "^4.1.2"
     }
 }

packages/_redirects

@@ -0,0 +1 @@
+/*    /demo/index.html   200

packages/demo/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    parserOptions: {
+        project: "./tsconfig.json",
+        tsconfigRootDir: __dirname,
+    },
+}

packages/demo/Makefile

@@ -0,0 +1,24 @@
+DEFAULT_GOAL: build
+
+clean:
+	rm -rf dist
+
+build: clean
+	yarn tsc
+
+dev:
+	make --jobs=2 watch serve
+
+watch:
+	yarn tsc --watch --preserveWatchOutput
+
+serve:
+	deno run --allow-net --allow-read https://deno.land/x/[email protected]/mod.ts .. -p 3333 -n --entry /demo/index.html
+
+lint:
+	yarn eslint src --ext .ts,.tsx
+
+type-check:
+	yarn tsc --noEmit
+
+PHONY: build dev watch serve lint type-check

packages/demo/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <title>ReactSunbeam demo</title>
         <link
             href="https://fonts.googleapis.com/css?family=Fira+Code:400,700|DM+Serif+Display&display=swap"
@@ -13,17 +14,60 @@
             margin: 0;
             background-color: #fffcf5;
         }
-        @keyframes hovering {
-            from {
-                transform: translate(0px, 0px);
-            }
-            to {
-                transform: translate(-4px, -4px);
-            }
-        }
     </style>
     <body>
-        <div id="app"></div>
-        <script src="./src/apps/index.tsx"></script>
+        <!--
+            JSPM Generator Import Map
+            Edit URL: https://generator.jspm.io/#U2VgYGCvD0pNTC5RCC5JLCpJLWJwKC7JLEnOSC3WLwKJOxjoGeqZMKQVJeamFunm5pdk5uc5GOsZGugZM2RkFpfkF1U6mOoZ6BkwgJXrpuTnOhiaAwUMoQJF+aVAY8HipnpGcHUQYWQhqDYAPBIY+pQA
+        -->
+        <script type="importmap">
+            {
+                "imports": {
+                    "app": "/demo/dist/apps/index.js",
+
+                    "react-sunbeam": "../react-sunbeam/dist/index.js",
+
+                    "@stitches/react": "https://ga.jspm.io/npm:@stitches/[email protected]/dist/index.mjs",
+                    "framer-motion": "https://ga.jspm.io/npm:[email protected]/dist/dev.framer-motion.cjs.js",
+                    "history": "https://ga.jspm.io/npm:[email protected]/dev.main.js",
+                    "react": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                    "react-dom": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                    "react-router": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                    "react-router-dom": "https://ga.jspm.io/npm:[email protected]/dev.index.js"
+                },
+                "scopes": {
+                    "https://ga.jspm.io/": {
+                        "@babel/runtime/helpers/inheritsLoose": "https://ga.jspm.io/npm:@babel/[email protected]/helpers/inheritsLoose.js",
+                        "@emotion/is-prop-valid": "https://ga.jspm.io/npm:@emotion/[email protected]/dist/is-prop-valid.browser.cjs.js",
+                        "@emotion/memoize": "https://ga.jspm.io/npm:@emotion/[email protected]/dist/memoize.browser.cjs.js",
+                        "framesync": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
+                        "hey-listen": "https://ga.jspm.io/npm:[email protected]/dist/dev.index.js",
+                        "history": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                        "hoist-non-react-statics": "https://ga.jspm.io/npm:[email protected]/dist/hoist-non-react-statics.cjs.js",
+                        "isarray": "https://ga.jspm.io/npm:[email protected]/index.js",
+                        "mini-create-react-context": "https://ga.jspm.io/npm:[email protected]/dist/cjs/dev.index.js",
+                        "object-assign": "https://ga.jspm.io/npm:[email protected]/index.js",
+                        "path-to-regexp": "https://ga.jspm.io/npm:[email protected]/index.js",
+                        "popmotion": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
+                        "prop-types": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                        "react-is": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                        "resolve-pathname": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                        "scheduler": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+                        "scheduler/tracing": "https://ga.jspm.io/npm:[email protected]/dev.tracing.js",
+                        "style-value-types": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
+                        "tiny-invariant": "https://ga.jspm.io/npm:[email protected]/dist/dev.tiny-invariant.cjs.js",
+                        "tiny-warning": "https://ga.jspm.io/npm:[email protected]/dist/dev.tiny-warning.cjs.js",
+                        "tslib": "https://ga.jspm.io/npm:[email protected]/tslib.js",
+                        "value-equal": "https://ga.jspm.io/npm:[email protected]/dev.index.js"
+                    }
+                }
+            }
+        </script>
+        <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
+        <script type="module" src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
+        <script type="module">
+            import "app"
+        </script>
+        <div id="app" />
     </body>
 </html>

packages/demo/package.json

@@ -1,39 +1,14 @@
 {
     "name": "demo",
-    "version": "1.0.4",
-    "main": "index.js",
-    "repository": "git+https://github.com/wzrdzl/react-sunbeam.git",
-    "author": "Vladimir Guguiev <[email protected]>",
-    "license": "MIT",
+    "version": "1.0.0",
     "private": true,
-    "scripts": {
-        "build": "parcel build index.html",
-        "dev": "parcel index.html --port 1234",
-        "type-check": "tsc --noEmit"
-    },
-    "dependencies": {
-        "framer-motion": "^2.9.4",
-        "history": "^5.0.0",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1",
-        "react-router": "^5.2.0",
-        "react-router-dom": "^5.2.0",
-        "react-sunbeam": "^1.0.4"
-    },
     "devDependencies": {
-        "@types/react": "^16.9.56",
-        "@types/react-dom": "^16.9.9",
-        "@types/react-router-dom": "^5.1.6",
-        "parcel-bundler": "^1.12.4",
-        "typescript": "^4.0.5"
-    },
-    "alias": {
-        "scheduler/tracing": "scheduler/tracing-profiling"
-    },
-    "browserslist": [
-        ">5%",
-        "not dead",
-        "not ie <= 11",
-        "not op_mini all"
-    ]
+        "@stitches/react": "^0.1.4",
+        "@types/react": "^17.0.0",
+        "@types/react-dom": "^17.0.0",
+        "@types/react-router-dom": "5.1.6",
+        "concurrently": "^6.0.0",
+        "framer-motion": "^3.10.3",
+        "react-router": "^5.2.0"
+    }
 }