From 7b5a9d20d16462990633d0f146dbca3bd32ad3c2 Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Tue, 30 Mar 2021 14:38:09 +0200 Subject: [PATCH 1/5] fixed jest coverage config --- jest.config.base.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jest.config.base.js b/jest.config.base.js index e87caab1..cd263111 100644 --- a/jest.config.base.js +++ b/jest.config.base.js @@ -2,6 +2,7 @@ module.exports = { testEnvironment: 'node', coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$'], modulePathIgnorePatterns: ['dist', 'examples', 'node_modules'], + collectCoverageFrom: ['**/*.ts', '!**/node_modules/**', '!**/dist/**'], testMatch: ['/packages/**/tests/**/*.test.ts'], transform: { '^.+\\.ts?$': 'ts-jest', From c011773e7e64a3acbef00e2cfc9a5782901066e1 Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Tue, 30 Mar 2021 18:40:54 +0200 Subject: [PATCH 2/5] made event independent from react package --- packages/event/README.md | 12 ++++++------ packages/event/package.json | 4 +--- packages/event/src/hooks/useEvent.ts | 2 +- .../src/hooks/useIsomorphicLayoutEffect.ts | 17 +++++++++++++++++ packages/react/src/{other => hocs}/AgileHOC.ts | 0 packages/react/src/index.ts | 3 +-- packages/react/src/react.integration.ts | 2 +- 7 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 packages/event/src/hooks/useIsomorphicLayoutEffect.ts rename packages/react/src/{other => hocs}/AgileHOC.ts (100%) diff --git a/packages/event/README.md b/packages/event/README.md index 2734ba23..08819fba 100644 --- a/packages/event/README.md +++ b/packages/event/README.md @@ -27,14 +27,14 @@ MY_EVENT.trigger({name: "jeff"}); // Trigger Event ``` npm install @agile-ts/event ``` -The `event` package is an extension of AgileTs for React, which doesn't work without the [`core`](https://agile-ts.org/docs/core) -and [`react`](https://agile-ts.org/docs/react) package. -Unfortunately, we can't combine each `core`, `react` with `event` version. +The `event` package is an extension of AgileTs and doesn't work without the [`core`](https://agile-ts.org/docs/core) package, +which functions as the brain of AgileTs and is indispensable. +Unfortunately, we can't combine each `core` with `event` version. Therefore, we have created a table which shows which versions fit together without restrictions. -| @agile-ts/event | @agile-ts/core | @agile-ts/event | NPM Version | Supported React versions | Supports hook based components | -| ----------------------| ----------------------- | ------------------------ | ------------------------ | -------------------------|---------------------------------- | -| v0.0.1+ | v0.0.10+ | v0.0.10+ | v6+ | 16.8+ | Yes | +| @agile-ts/event | @agile-ts/core | NPM Version | Supported React versions | Supports hook based components | +| ----------------------| ----------------------- | ------------------------ | -------------------------|---------------------------------- | +| v0.0.1+ | v0.0.10+ | v6+ | 16.8+ | Yes | _Other Versions aren't supported anymore_ diff --git a/packages/event/package.json b/packages/event/package.json index 9e7a44fe..a8adfb4c 100644 --- a/packages/event/package.json +++ b/packages/event/package.json @@ -24,14 +24,12 @@ }, "devDependencies": { "@agile-ts/core": "file:../core", - "@agile-ts/react": "file:../react", "@types/react": "^17.0.0", "react": "^17.0.1" }, "peerDependencies": { "react": "^16.13.1", - "@agile-ts/core": "^0.0.13", - "@agile-ts/react": "^0.0.13" + "@agile-ts/core": "^0.0.13" }, "publishConfig": { "access": "public" diff --git a/packages/event/src/hooks/useEvent.ts b/packages/event/src/hooks/useEvent.ts index 6aef1f5c..4373b04e 100644 --- a/packages/event/src/hooks/useEvent.ts +++ b/packages/event/src/hooks/useEvent.ts @@ -5,7 +5,7 @@ import { SubscriptionContainerKeyType, } from '@agile-ts/core'; import { Event, EventCallbackFunction } from '../internal'; -import { useIsomorphicLayoutEffect } from '@agile-ts/react'; +import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; export function useEvent>( event: E, diff --git a/packages/event/src/hooks/useIsomorphicLayoutEffect.ts b/packages/event/src/hooks/useIsomorphicLayoutEffect.ts new file mode 100644 index 00000000..9e397c06 --- /dev/null +++ b/packages/event/src/hooks/useIsomorphicLayoutEffect.ts @@ -0,0 +1,17 @@ +import { useEffect, useLayoutEffect } from 'react'; + +// React currently throws a warning when using useLayoutEffect on the server. +// To get around it, we can conditionally useEffect on the server (no-op) and +// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store +// subscription callback always has the selector from the latest render commit +// available, otherwise a store update may happen between render and the effect, +// which may cause missed updates; we also must ensure the store subscription +// is created synchronously, otherwise a store update may occur before the +// subscription is created and an inconsistent state may be observed + +export const useIsomorphicLayoutEffect = + typeof window !== 'undefined' && + typeof window.document !== 'undefined' && + typeof window.document.createElement !== 'undefined' + ? useLayoutEffect + : useEffect; diff --git a/packages/react/src/other/AgileHOC.ts b/packages/react/src/hocs/AgileHOC.ts similarity index 100% rename from packages/react/src/other/AgileHOC.ts rename to packages/react/src/hocs/AgileHOC.ts diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index ac70be1f..ce4cc962 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,8 +1,7 @@ import reactIntegration from './react.integration'; export { useAgile } from './hooks/useAgile'; -export { AgileHOC } from './other/AgileHOC'; +export { AgileHOC } from './hocs/AgileHOC'; export { useWatcher } from './hooks/useWatcher'; -export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect'; export default reactIntegration; diff --git a/packages/react/src/react.integration.ts b/packages/react/src/react.integration.ts index 5115badb..3be25310 100644 --- a/packages/react/src/react.integration.ts +++ b/packages/react/src/react.integration.ts @@ -1,5 +1,5 @@ import { Agile, flatMerge, Integration } from '@agile-ts/core'; -import { AgileReactComponent } from './other/AgileHOC'; +import { AgileReactComponent } from './hocs/AgileHOC'; import React from 'react'; const reactIntegration = new Integration({ From 57564967f9bdb1a3fbb56e1de3441443f7536c6d Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Tue, 30 Mar 2021 18:47:53 +0200 Subject: [PATCH 3/5] fixed cra template deps --- packages/cra-template-agile-typescript/package.json | 11 ++++++++++- packages/cra-template-agile-typescript/template.json | 9 +++++++-- .../template/src/App.tsx | 3 ++- packages/cra-template-agile/package.json | 9 ++++++++- packages/cra-template-agile/template.json | 4 ++-- packages/cra-template-agile/template/src/App.jsx | 3 ++- 6 files changed, 31 insertions(+), 8 deletions(-) diff --git a/packages/cra-template-agile-typescript/package.json b/packages/cra-template-agile-typescript/package.json index d3eca701..e799968d 100644 --- a/packages/cra-template-agile-typescript/package.json +++ b/packages/cra-template-agile-typescript/package.json @@ -4,7 +4,7 @@ "author": "BennoDev", "license": "MIT", "homepage": "https://agile-ts.org/", - "description": "The official AgileTs template fro Create React App (Typescript)", + "description": "The official AgileTs template for Create React App (Typescript)", "keywords": [ "react", "create-react-app", @@ -16,6 +16,15 @@ "scripts": { "preview": "npm pack" }, + "devDependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "4.0.3", + "@types/react": "^17.0.3", + "@types/react-dom": "^17.0.3", + "@agile-ts/core": "^0.0.13", + "@agile-ts/react": "^0.0.13" + }, "publishConfig": { "access": "public" }, diff --git a/packages/cra-template-agile-typescript/template.json b/packages/cra-template-agile-typescript/template.json index 66fb64e8..f4c8957f 100644 --- a/packages/cra-template-agile-typescript/template.json +++ b/packages/cra-template-agile-typescript/template.json @@ -5,8 +5,13 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "web-vitals": "^1.0.1", - "@agile-ts/core": "^0.0.10", - "@agile-ts/react": "^0.0.10" + "typescript": "^4.2.3", + "@agile-ts/core": "^0.0.13", + "@agile-ts/react": "^0.0.13" + }, + "devDependencies": { + "@types/react": "^17.0.3", + "@types/react-dom": "^17.0.3" }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] diff --git a/packages/cra-template-agile-typescript/template/src/App.tsx b/packages/cra-template-agile-typescript/template/src/App.tsx index 5b5228f9..f3f56899 100644 --- a/packages/cra-template-agile-typescript/template/src/App.tsx +++ b/packages/cra-template-agile-typescript/template/src/App.tsx @@ -1,6 +1,7 @@ -import './App.css'; +import React from 'react'; import { MY_STATE, MY_STATE_2 } from './core'; import { useAgile } from '@agile-ts/react'; +import './App.css'; function App() { const [myState, myState2] = useAgile([MY_STATE, MY_STATE_2]); diff --git a/packages/cra-template-agile/package.json b/packages/cra-template-agile/package.json index 119b20bc..d11409ae 100644 --- a/packages/cra-template-agile/package.json +++ b/packages/cra-template-agile/package.json @@ -4,7 +4,7 @@ "author": "BennoDev", "license": "MIT", "homepage": "https://agile-ts.org/", - "description": "The official AgileTs template fro Create React App (JavaScript)", + "description": "The official AgileTs template for Create React App (JavaScript)", "keywords": [ "react", "create-react-app", @@ -16,6 +16,13 @@ "scripts": { "preview": "npm pack" }, + "devDependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "4.0.3", + "@agile-ts/core": "^0.0.13", + "@agile-ts/react": "^0.0.13" + }, "publishConfig": { "access": "public" }, diff --git a/packages/cra-template-agile/template.json b/packages/cra-template-agile/template.json index 66fb64e8..43d71315 100644 --- a/packages/cra-template-agile/template.json +++ b/packages/cra-template-agile/template.json @@ -5,8 +5,8 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "web-vitals": "^1.0.1", - "@agile-ts/core": "^0.0.10", - "@agile-ts/react": "^0.0.10" + "@agile-ts/core": "^0.0.13", + "@agile-ts/react": "^0.0.13" }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] diff --git a/packages/cra-template-agile/template/src/App.jsx b/packages/cra-template-agile/template/src/App.jsx index 5b5228f9..f3f56899 100644 --- a/packages/cra-template-agile/template/src/App.jsx +++ b/packages/cra-template-agile/template/src/App.jsx @@ -1,6 +1,7 @@ -import './App.css'; +import React from 'react'; import { MY_STATE, MY_STATE_2 } from './core'; import { useAgile } from '@agile-ts/react'; +import './App.css'; function App() { const [myState, myState2] = useAgile([MY_STATE, MY_STATE_2]); From ed1976d81c06808ad2bf75e1a01f6663d0b35446 Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Tue, 30 Mar 2021 18:49:42 +0200 Subject: [PATCH 4/5] bumped version --- .changeset/moody-jeans-attack.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/moody-jeans-attack.md diff --git a/.changeset/moody-jeans-attack.md b/.changeset/moody-jeans-attack.md new file mode 100644 index 00000000..20ec6ef2 --- /dev/null +++ b/.changeset/moody-jeans-attack.md @@ -0,0 +1,8 @@ +--- +'cra-template-agile': patch +'cra-template-agile-typescript': patch +'@agile-ts/event': patch +'@agile-ts/react': patch +--- + +fixed bugs From c70561cb453c31df05c087129983ebe7a744cc19 Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Tue, 30 Mar 2021 18:58:38 +0200 Subject: [PATCH 5/5] optimized cra template.json --- packages/cra-template-agile-typescript/README.md | 6 +++++- .../cra-template-agile-typescript/template.json | 16 ++++++++-------- packages/cra-template-agile/README.md | 4 ++++ packages/cra-template-agile/template.json | 6 +++--- packages/event/README.md | 8 ++++---- 5 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/cra-template-agile-typescript/README.md b/packages/cra-template-agile-typescript/README.md index a75eb8d5..7ff1b678 100644 --- a/packages/cra-template-agile-typescript/README.md +++ b/packages/cra-template-agile-typescript/README.md @@ -20,4 +20,8 @@ ```sh npx create-react-app my-app --template agile-typescript -``` \ No newline at end of file +``` + +## Credits + +https://github.com/facebook/create-react-app/blob/master/packages/cra-template-typescript \ No newline at end of file diff --git a/packages/cra-template-agile-typescript/template.json b/packages/cra-template-agile-typescript/template.json index f4c8957f..bac07209 100644 --- a/packages/cra-template-agile-typescript/template.json +++ b/packages/cra-template-agile-typescript/template.json @@ -1,17 +1,17 @@ { "package": { "dependencies": { + "@agile-ts/core": "^0.0.13", + "@agile-ts/react": "^0.0.13", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", - "web-vitals": "^1.0.1", - "typescript": "^4.2.3", - "@agile-ts/core": "^0.0.13", - "@agile-ts/react": "^0.0.13" - }, - "devDependencies": { - "@types/react": "^17.0.3", - "@types/react-dom": "^17.0.3" + "@types/node": "^12.0.0", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/jest": "^26.0.15", + "typescript": "^4.1.2", + "web-vitals": "^1.0.1" }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] diff --git a/packages/cra-template-agile/README.md b/packages/cra-template-agile/README.md index 0e9ccefe..c47e1de2 100644 --- a/packages/cra-template-agile/README.md +++ b/packages/cra-template-agile/README.md @@ -29,3 +29,7 @@ Use [cra-template-agile-typescript](https://github.com/agile-ts/packages/cra-tem ```sh npx create-react-app my-app --template agile-typescript ``` + +## Credits + +https://github.com/facebook/create-react-app/tree/master/packages/cra-template diff --git a/packages/cra-template-agile/template.json b/packages/cra-template-agile/template.json index 43d71315..7371aa91 100644 --- a/packages/cra-template-agile/template.json +++ b/packages/cra-template-agile/template.json @@ -1,12 +1,12 @@ { "package": { "dependencies": { + "@agile-ts/core": "^0.0.13", + "@agile-ts/react": "^0.0.13", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", - "web-vitals": "^1.0.1", - "@agile-ts/core": "^0.0.13", - "@agile-ts/react": "^0.0.13" + "web-vitals": "^1.0.1" }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] diff --git a/packages/event/README.md b/packages/event/README.md index 08819fba..18503089 100644 --- a/packages/event/README.md +++ b/packages/event/README.md @@ -2,15 +2,15 @@ > Handy class for emitting UI Events - + npm version GitHub License - + npm monthly downloads - + npm total downloads - + npm minified size