Merge pull request #4 from hyperse-io/feat/track

Feat/track

.changeset/two-buckets-cheer.md → .changeset/young-walls-sing.md

@@ -1,6 +1,9 @@
 ---
+"@hyperse/next-example": patch
 "@hyperse/track-docs": patch
 "@hyperse/track": patch
 ---
 
-add docs website
+1、fix bug
+2、add website
+

.github/workflows/coverage-pr.yml

@@ -0,0 +1,34 @@
+name: "PR Build and Test"
+on:
+  pull_request:
+
+jobs:
+  build-and-test:
+    permissions:
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: "Install Node"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+      - name: 📥 Install Dependencies
+        run: yarn --frozen-lockfile
+
+      - name: "Build"
+        run: yarn build
+
+      - name: run coverage
+        run: yarn test:coverage
+
+        # Remove node_modules to see if this action runs entirely compiled
+      - name: "Remove Node Modules"
+        run: rm -rf node_modules
+
+      - name: "PR Test Reports"
+        uses: hyperse-io/vitest-coverage-reporter@v1.0.13
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          include-all-projects: "false"
+          name: "PR Test Reports"

.gitignore

@@ -122,6 +122,10 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
+# Misc
+.DS_Store
+*.pem
+
 # yarn v2
 .yarn/cache
 .yarn/unplugged

.husky/pre-commit

@@ -1,5 +1,7 @@
 #!/bin/sh
-. "$(dirname -- "$0")/_/husky.sh"
 
+yarn run test:coverage 
+yarn generate-coverage-report --type readme
+git add .
 yarn lint-staged-files --debug
 

README.md

@@ -1,6 +1,9 @@
-# @hyperse/track
+<div align="center">
+<img alt="logo" width="196px" src="https://raw.githubusercontent.com/hyperse-io/track/main/website/static/img/logo-readme.svg?sanitize=true"/>
+<h1 align="center">hyperse data tracker engine</h1>
+</div>
 
-<p align="left">
+<p align="center">
   <a aria-label="Build" href="https://github.com/hyperse-io/track/actions?query=workflow%3ACI">
     <img alt="build" src="https://img.shields.io/github/actions/workflow/status/hyperse-io/track/ci-integrity.yml?branch=main&label=ci&logo=github&style=flat-quare&labelColor=000000" />
   </a>
@@ -13,120 +16,49 @@
   <a aria-label="Licence" href="https://github.com/hyperse-io/track/blob/main/LICENSE">
     <img alt="Licence" src="https://img.shields.io/github/license/hyperse-io/track?style=flat-quare&labelColor=000000" />
   </a>
+  <a aria-label="Discord" href="https://discord.com/invite/tj3ahjXXzM">
+    <img alt="Discord" src="https://img.shields.io/discord/1249658585227460703?label=Discord&color=5865F2" />
+  </a>
+  <a aria-label="Twitter" href="https://x.com/hyperse_net">
+    <img alt="Twitter" src="https://img.shields.io/badge/Twitter-black?logo=x&logoColor=white" />
+  </a>
 </p>
 
-A typed, smart, scalable , powerful data collection engine written in typescript
+<img alt="uml" src="https://raw.githubusercontent.com/hyperse-io/track/main/website/static/img/uml.svg"/>
 
-## Usage
+<!-- hyperse-vitest-coverage-reporter-marker-readme -->
 
-### Create TrackBuilder
+## Coverage Report
 
-Create a builder to load the track
+<table> <thead> <tr> <th align="center">Status</th> <th align="left">Category</th> <th align="right">Percentage</th> <th align="right">Covered / Total</th> </tr> </thead> <tbody> <tr> <td align="center">🔵</td> <td align="left">Lines</td> <td align="right">100%</td> <td align="right">185 / 185</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Statements</td> <td align="right">100%</td> <td align="right">185 / 185</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Functions</td> <td align="right">98.18%</td> <td align="right">54 / 55</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Branches</td> <td align="right">93.75%</td> <td align="right">75 / 80</td> </tr> </tbody> </table>
 
-```ts
-export type Context = {
-  env: 'prod' | 'uat';
-  platform: 'android' | 'ios';
-  ip: string;
-  userId: string;
-};
-
-export type EventData = {
-  registry: {
-    userName: string;
-    mobile: string;
-    pwd: string;
-    email: string;
-  };
-  addCart: {
-    price: number;
-    goodsId: string;
-    goodsName: string;
-    count: number;
-  };
-};
-
-const trackBuilder = await createTrackBuilder<Context, EventData>({
-  createCtx() {
-    // Used to build a global context
-    return Promise.resolve(context);
-  },
-  eventData: {
-    // Generic EventData-type data is deeply merged during the transform phase
-  },
-  // The formatStrategy for logger
-  formatStrategy: formatStrategy,
-});
-```
+## Prerequisites
 
-### Create Adapter
+Before you begin, make sure you have the following installed:
 
-Create a adapter by createAdapterBuilder function
+- Node.js (recommended version 16.x or higher)
+- npm (comes with Node.js)
 
-```ts
-const adapterBuilder = await createAdapterBuilder<Context, InputOption>();
-
-const adapter = await adapterBuilder
-  .init(() => {
-    // Initialization adapter
-  })
-  .before((ctx) => {
-    // Execute before the adapter track function
-  })
-  .isTrackable(() => {
-    // Determine whether the adapter is trackable
-    return true;
-  })
-  .transform((ctx, eventType, eventData) => {
-    // Transform the eventData
-    return eventData;
-  })
-  .after((ctx) => {
-    // Execute after the adapter track function
-  })
-  // Return a adapter instance
-  .build();
-```
+## Installation
 
-> <span style="color:orange">The createAdapterBuilder function can accept an optional parameter (TrackAdapter) to handle eventdata escalation logic. By default, the ReportAdapter provided by Track is used</span>
-
-### Report data through track
+```ts
+// npm
+npm i @hyperse/track
 
-- Load the adapter in track
+// yarn
+yarn add @hyperse/track
+```
 
-- Event Data is reported through the track method provided by track
+## Documentation
 
-```ts
-await trackBuilder
-  .before((ctx) => {
-    // Execute before the track function
-  })
-  .after((ctx) => {
-    // Execute after the track function
-  })
-  .transform((ctx, eventData) => {
-    // Global Transform the eventData
-    return eventData;
-  })
-  .useAdapter(() => {
-    // Load all adapters
-    return {
-      reportData: adapter,
-    };
-  })
-  // Filter the adapter used to process eventData
-  .select(['reportData'])
-  // EventType: previewGoods
-  // EventData: eventData
-  .track('previewGoods', eventData);
-```
+You can find the Track documentation [on the website](https://hyperse-io.github.io/track/).
 
-## Errors
+Check out the [Sample Example](https://hyperse-io.github.io/track/docs/intro/sample-example) page for a quick start.
 
-## Development
+## Contributing
 
-yarn install
+Contributions are welcome! If you encounter any issues or have ideas for improvements, feel free to open an issue or submit a pull request.
 
-## Testing
+## License
 
-yarn test
+Code released under [Track LICENSE](https://github.com/hyperse-io/track/blob/main/LICENSE)

examples/next-example/README.md

@@ -0,0 +1,15 @@
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/next-example/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

examples/next-example/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

examples/next-example/app/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { fetchGoodsList, GoodsRecord } from './service';
+
+export default function Home() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const onAddToCart = (item: GoodsRecord) => {
+    console.log('onAddToCart', JSON.stringify(item));
+    // await reportTrack().select('reportAdapter').track('addCart', {
+    //   price: 25.99,
+    //   goodsId: '23432252',
+    //   goodsName: 'Long Chair',
+    //   count: 1,
+    // });
+  };
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between gap-4">
+      {mounted &&
+        fetchGoodsList().map((item, index: number) => {
+          return (
+            <div
+              key={index}
+              className="flex h-80 w-4/5 max-w-md flex-col gap-1 rounded-2xl bg-gray-50 p-3"
+            >
+              <div className="h-48 rounded-xl bg-gray-700"></div>
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-row justify-between">
+                  <div className="flex flex-col">
+                    <span className="text-xl font-bold text-gray-700">
+                      {item.goodsName}
+                    </span>
+                    <p className="text-xs text-gray-700">ID: {item.goodsId}</p>
+                  </div>
+                  <span className="font-bold  text-red-600">${item.price}</span>
+                </div>
+                <button
+                  className="rounded-md bg-sky-800 py-2 text-gray-50 hover:bg-sky-700"
+                  onClick={() => onAddToCart(item)}
+                >
+                  Add to cart
+                </button>
+              </div>
+            </div>
+          );
+        })}
+    </main>
+  );
+}

examples/next-example/app/service.ts

@@ -0,0 +1,20 @@
+import Mock from 'mockjs';
+
+export interface GoodsRecord {
+  goodsName: string;
+  goodsId: string;
+  price: number;
+}
+
+export const fetchGoodsList = (): GoodsRecord[] => {
+  const data = Mock.mock({
+    'list|10-20': [
+      {
+        goodsName: '@cword(3,5)',
+        goodsId: '@id()',
+        price: '@float(10, 100, 2, 2)',
+      },
+    ],
+  });
+  return data.list;
+};

examples/next-example/eslint.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig, nextjs } from '@hyperse/eslint-config-hyperse';
+
+export default defineConfig([
+  ...nextjs,
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+]);

examples/next-example/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.