Newnew scaffolding (#204)

Any questions should be directed to @vujita

---

Replace any ":question:" below with information about your pull request.

## Pull Request Details

Provide details about your pull request and what it adds, fixes, or
changes.

:question:

## Breaking Changes

Describe what features are broken by this pull request and why, if any.

:question:

## Issues Fixed

Enter the issue numbers resolved by this pull request below, if any.

1. :question:

## Other Relevant Information

Provide any other important details below.

:question:

---------

Signed-off-by: Vu Nguyen <[email protected]>

apps/newnew-performancetool/.eslintrc.cjs

@@ -1,7 +1,12 @@
+const path = require("path");
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: ["eslint-config-vujita/base", "eslint-config-vujita/react"],
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
   ignorePatterns: ["dist", ".eslintrc.cjs", "vite.config.ts"],
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],

apps/newnew-performancetool/package.json

@@ -7,18 +7,23 @@
     "build": "tsc && vite build",
     "dev": "vite",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "vujita-ui": "0.0.6-alpha.7"
+    "tti-polyfill": "0.2.2",
+    "vujita-ui": "0.0.6-alpha.7",
+    "web-vitals": "3.5.2",
+    "zustand": "4.5.2"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "1.0.14",
     "@types/chrome": "0.0.268",
     "@types/react": "18.2.77",
     "@types/react-dom": "18.2.7",
+    "@types/tti-polyfill": "0.2.4",
     "@typescript-eslint/eslint-plugin": "6.1.0",
     "@typescript-eslint/parser": "6.1.0",
     "@vitejs/plugin-react": "4.0.3",

apps/newnew-performancetool/src/content.tsx

@@ -0,0 +1,5 @@
+import { ttiStore } from "./stores/tti";
+
+ttiStore.subscribe(() => {
+  console.log("tti just occurred", ttiStore.getState());
+});

apps/newnew-performancetool/src/stores/tti.ts

@@ -0,0 +1,13 @@
+import ttiPolyfill from "tti-polyfill";
+import { createStore } from "zustand/vanilla";
+
+export const ttiStore = createStore<{
+  tti: number;
+}>((set) => {
+  void ttiPolyfill.getFirstConsistentlyInteractive().then((r) => {
+    set({ tti: r ?? performance.now() });
+  });
+  return {
+    tti: -1,
+  };
+});

apps/newnew-performancetool/tsconfig.json

@@ -12,14 +12,16 @@
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "paths": {
+      "newnew-performancetool/src/*": ["./src/*"]
+    },
     "resolveJsonModule": true,
     "skipLibCheck": true,
     /* Linting */
     "strict": true,
     "target": "ES2020",
     "useDefineForClassFields": true
   },
-  "extends": "../../tsconfig.json",
-  "include": ["src", "tailwind.config.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "tailwind.config.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package.json

@@ -3,7 +3,9 @@
   "private": true,
   "scripts": {
     "build": "turbo build",
+    "build:extension": "turbo build --filter newnew-performancetool",
     "build:storybook": "turbo build:storybook",
+    "build:vubnguyen": "turbo build --filter @vujita/vubnguyen",
     "check": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json,html}\"",
     "clean:modules": "pnpx turbo clean && git clean -xdf node_modules",
     "clean:workspaces": "pnpx turbo build:clean",
@@ -13,7 +15,7 @@
     "db:studio": "pnpm -F db dev",
     "dev": "turbo dev --parallel",
     "dev:db": "turbo dev --filter db",
-    "dev:extension": "turbo dev --filter perf-extension",
+    "dev:extension": "turbo dev --filter newnew-performancetool",
     "dev:preview": "turbo dev:preview",
     "dev:storybook": "turbo dev:storybook --parallel",
     "dev:vubnguyen": "turbo dev --filter vubnguyen --filter vujita-ui",