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 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', 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/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..bac07209 100644 --- a/packages/cra-template-agile-typescript/template.json +++ b/packages/cra-template-agile-typescript/template.json @@ -1,12 +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", - "@agile-ts/core": "^0.0.10", - "@agile-ts/react": "^0.0.10" + "@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-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/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/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..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.10", - "@agile-ts/react": "^0.0.10" + "web-vitals": "^1.0.1" }, "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]); diff --git a/packages/event/README.md b/packages/event/README.md index 2734ba23..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 @@ -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({