Create library

.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish to npm
+on:
+  release:
+    types: [published]
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 12
+          registry-url: https://registry.able.co/
+          scope: ableco
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v1
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-
+      - run: yarn install
+      - run: npm run build
+      - run: npm publish
+        env:
+          NODE_ENV: "production"
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,4 @@
+*.log
+.DS_Store
+node_modules
+dist

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "proseWrap": "always"
+}

README.md

@@ -0,0 +1 @@
+# Abledev React

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ableco/abledev-react",
+  "version": "0.0.1-alpha0",
+  "description": "",
+  "main": "dist/abledev-react.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "webpack"
+  },
+  "author": "Julio García",
+  "license": "ISC",
+  "dependencies": {
+    "react-query": "^3.19.2"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "devDependencies": {
+    "@types/node": "^16.4.13",
+    "@types/react": "^17.0.16",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "ts-loader": "^9.2.5",
+    "ts-node": "^10.2.0",
+    "tslib": "^2.3.0",
+    "typescript": "^4.3.5",
+    "webpack": "^5.49.0",
+    "webpack-cli": "^4.7.2"
+  }
+}

src/index.ts

@@ -0,0 +1,3 @@
+export { default as useMutation } from "./useMutation";
+export { default as useQuery } from "./useQuery";
+export { default as wrapRootComponent } from "./wrapRootComponent";

src/useMutation.ts

@@ -0,0 +1,30 @@
+import { useMutation as useRQMutation } from "react-query";
+
+type AnyFunction = (...args: any) => any;
+
+function useMutation<MutationKey extends AnyFunction>(
+  mutationKey: MutationKey,
+) {
+  // This is not a arbitrary convertion. queryKey works differently between the TS world
+  // and the runtime world:
+  // - In the TS world, this is a function
+  // - In the runtime world, this is a string
+  const mutationKeyAsString = mutationKey as unknown as string;
+
+  return useRQMutation(mutationKeyAsString, async (args: object = {}) => {
+    const url = new URL(`${location.origin}/abledev/call-mutation`);
+    url.search = new URLSearchParams({ key: mutationKeyAsString }).toString();
+    return fetch(url.toString(), {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(args),
+    }).then((response) => {
+      return response.json() as ReturnType<MutationKey>;
+    });
+  });
+}
+
+export default useMutation;

src/useQuery.ts

@@ -0,0 +1,21 @@
+import { useQuery as useRQQuery } from "react-query";
+
+type AnyFunction = (...args: any) => any;
+
+function useQuery<QueryKey extends AnyFunction>(queryKey: QueryKey) {
+  // This is not a arbitrary convertion. queryKey works differently between the TS world
+  // and the runtime world:
+  // - In the TS world, this is a function
+  // - In the runtime world, this is a string
+  const queryKeyAsString = queryKey as unknown as string;
+
+  return useRQQuery(queryKeyAsString, async () => {
+    const url = new URL(`${location.origin}/abledev/call-query`);
+    url.search = new URLSearchParams({ key: queryKeyAsString }).toString();
+    return fetch(url.toString()).then((response) => {
+      return response.json() as ReturnType<QueryKey>;
+    });
+  });
+}
+
+export default useQuery;

src/wrapRootComponent.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+const queryClient = new QueryClient();
+
+function wrapRootComponent(Component: React.FC) {
+  const AbledevWrapper = (props: any) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Component {...props} />
+      </QueryClientProvider>
+    );
+  };
+
+  Object.defineProperty(AbledevWrapper, "name", {
+    value: `AbledevWrapper(${Component.displayName ?? Component.name})`,
+    configurable: true,
+  });
+
+  return AbledevWrapper;
+}
+
+export default wrapRootComponent;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "ts-node": {
+    "compilerOptions": { "module": "CommonJS" },
+    "moduleTypes": {
+      "**/*.*": "cjs"
+    }
+  }
+}

webpack.config.ts

@@ -0,0 +1,58 @@
+import path from "path";
+import { Configuration } from "webpack";
+
+const distPath = path.resolve(__dirname, "dist");
+
+const config: Configuration = {
+  mode: "production",
+  entry: "./src/index.ts",
+  output: {
+    path: distPath,
+    filename: "abledev-react.js",
+    library: {
+      name: "abledev-react",
+      type: "umd",
+    },
+    globalObject: "this",
+  },
+  target: "web",
+  externals: {
+    react: {
+      root: "React",
+      commonjs: "react",
+      commonjs2: "react",
+    },
+    "react-dom": {
+      root: "ReactDOM",
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              compilerOptions: {
+                declaration: true,
+                outDir: distPath,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".ts", ".js"],
+  },
+  optimization: {
+    minimize: false,
+  },
+};
+
+export default config;