Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding types order, moved types to package #52

Merged
merged 11 commits into from
Dec 2, 2021
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "teaful",
"version": "0.9.0-canary.1",
"version": "0.9.0-canary.2",
"description": "Tiny, easy and powerful React state management (less than 1kb)",
"license": "MIT",
"keywords": [
Expand Down Expand Up @@ -51,15 +51,15 @@
}
]
},
"types": "dist/index.d.ts",
"types": "package/index.d.ts",
aralroca marked this conversation as resolved.
Show resolved Hide resolved
"scripts": {
"lint": "eslint ./package ./tests",
"format": "eslint --fix ./package ./tests ./examples",
"test": "jest ./package ./tests",
"test:example:todo-list": "jest ./examples/todo-list",
"test:examples": "jest ./examples",
"test:watch": "jest ./package ./tests --watch",
"build": "microbundle --jsx React.createElement",
"build": "microbundle --jsx React.createElement --no-generateTypes",
danielart marked this conversation as resolved.
Show resolved Hide resolved
"dev": "microbundle watch",
"prepublish": "yarn build"
},
Expand All @@ -68,7 +68,7 @@
},
"jest": {
"testEnvironment": "jsdom",
"moduleNameMapper": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
}
Expand Down
53 changes: 53 additions & 0 deletions package/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
declare module "teaful" {

import React from "react";

type HookReturn<T> = [T, (value: T) => void, () => void];
type initialStoreType = Record<string, any>;

type Hook<S> = (
initial?: S,
onAfterUpdate?: afterCallbackType<S>
) => HookReturn<S>;

type HookDry<S> = (initial?: S) => HookReturn<S>;

export type Hoc<S> = { store: HookReturn<S> };

type HocFunc<S, R extends React.ComponentClass = React.ComponentClass> = (

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wondering if we should type the R as
R extends React.ComponentType
as the ComponentType would cover both React.FunctionComponent<> | React.ClassComponent<>

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our advice is to use the useStore hook rather than the withStore HOC whenever it is a functional component. So I don't think it's wrong to have only the React.ClassComponent. In which cases would it make sense to use the withStore in a functional component?

If there is some sense that we didn't take into account then I think it's okay to change it. 🤔

component: R,
initial?: S
) => R;

type afterCallbackType<S extends initialStoreType> = (param: {
store: S;
prevStore: S;
}) => void;

type getStoreType<S extends initialStoreType> = {
[key in keyof S]: S[key] extends initialStoreType
? useStoreType<S[key]> & HookDry<S[key]> : HookDry<S[key]>;
};

type useStoreType<S extends initialStoreType> = {
[key in keyof S]: S[key] extends initialStoreType
? useStoreType<S[key]> & Hook<S[key]> : Hook<S[key]>;
};

type withStoreType<S extends initialStoreType> = {
[key in keyof S]: S[key] extends initialStoreType
? withStoreType<S[key]> & HocFunc<S>
: HocFunc<S>;
};

function createStore<S extends initialStoreType>(
initial: S,
afterCallback?: afterCallbackType<S>
): {
getStore: HookDry<S> & getStoreType<S>;
useStore: Hook<S> & useStoreType<S>;
withStore: HocFunc<S> & withStoreType<S>;
};

export default createStore;
}