chore: breaking changes

Author: xiejay97

.vscode/launch.json

@@ -11,7 +11,7 @@
       "request": "launch",
       "args": ["--extensionDevelopmentPath=${workspaceFolder}/dist/packages/vscode-extension"],
       "outFiles": ["${workspaceFolder}/dist/packages/vscode-extension/**/*.js"],
-      "preLaunchTask": "watch:vscode-extension"
+      "preLaunchTask": "build:vscode-extension"
     }
   ]
 }

.vscode/tasks.json

@@ -4,9 +4,9 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "watch:vscode-extension",
-      "type": "npm",
-      "script": "watch:vscode-extension",
+      "label": "build:vscode-extension",
+      "type": "shell",
+      "command": "yarn nx build vscode-extension --watch",
       "problemMatcher": "$tsc-watch",
       "isBackground": true,
       "presentation": {

nx.json

@@ -23,7 +23,7 @@
     "default": {
       "runner": "@nrwl/nx-cloud",
       "options": {
-        "cacheableOperations": ["build-base", "build", "lint", "test", "e2e"],
+        "cacheableOperations": ["build", "lint", "test", "e2e"],
         "accessToken": "ZTE4ZjVjMDMtNmJiOS00MmRlLThiMTQtMzczNjlmOGY5MWNhfHJlYWQtd3JpdGU="
       }
     }

package.json

@@ -7,28 +7,26 @@
   "license": "MIT",
   "scripts": {
     "build:affected": "nx affected --target=build --parallel=5",
-    "build:executors": "tsc --project tools/tsconfig.json",
-    "build:icons": "node ./tools/ui-icons.js",
+    "build:icons": "ts-node -P ./tools/tsconfig.json ./tools/ui-icons.ts",
     "build:vscode-extension": "nx build vscode-extension && cd dist/packages/vscode-extension && yarn install && vsce package --yarn",
-    "check-update": "yarn upgrade-interactive --latest",
     "lint:affected": "nx affected --target=lint --parallel=5",
     "lint:style": "stylelint **/*.{css,scss,html,md}",
     "lint:style:fix": "yarn lint:style --fix",
     "prepare": "husky install && chmod ug+x .husky/*",
     "prepublishOnly": "nx run-many --target=build --parallel=5 --exclude=site,vscode-extension",
-    "prepublish:vscode-extension": "yarn build:vscode-extension",
-    "publish:vscode-extension": "cd dist/packages/vscode-extension && vsce publish --yarn",
-    "site:serve": "nx serve site",
-    "sort-package-json": "npx sort-package-json 'package.json' 'packages/*/package.json'",
+    "publish:vscode-extension": "yarn build:vscode-extension && cd dist/packages/vscode-extension && vsce publish --yarn",
+    "serve:site": "nx serve site",
     "test:affected": "nx affected --target=test --parallel=5",
-    "version": "npx prettier lerna.json --write",
-    "watch:vscode-extension": "nx build vscode-extension --watch"
+    "util:check-update": "yarn upgrade-interactive --latest",
+    "util:sort-package-json": "npx sort-package-json 'package.json' 'packages/*/package.json'",
+    "version": "npx prettier lerna.json --write"
   },
-  "dependencies": {
+  "devDependencies": {
     "@ant-design/icons-svg": "^4.2.1",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@nrwl/cli": "14.5.6",
+    "@nrwl/cypress": "14.5.6",
     "@nrwl/eslint-plugin-nx": "14.5.6",
     "@nrwl/jest": "14.5.6",
     "@nrwl/linter": "14.5.6",
@@ -50,15 +48,20 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/vscode": "^1.70.0",
+    "@types/yaml-front-matter": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "@vscode/test-electron": "^2.1.5",
+    "axios": "^0.27.2",
+    "axios-mock-adapter": "^1.21.2",
     "babel-jest": "^27.5.1",
     "codesandbox": "^2.2.3",
     "core-js": "^3.24.1",
+    "cypress": "^10.2.0",
     "dayjs": "^1.11.5",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-jsx-a11y": "^6.6.1",

packages/hooks/package.json

@@ -32,6 +32,5 @@
   "publishConfig": {
     "access": "public",
     "directory": "../../dist/packages/hooks"
-  },
-  "title": "DevUI"
+  }
 }

packages/hooks/project.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/hooks",
+  "sourceRoot": "packages/hooks/src",
   "projectType": "library",
   "tags": ["scope:shared"],
   "targets": {
@@ -10,7 +10,7 @@
       "options": {
         "outputPath": "dist/packages/hooks",
         "tsConfig": "packages/hooks/tsconfig.lib.json",
-        "main": "packages/hooks/index.ts",
+        "main": "packages/hooks/src/index.ts",
         "updateBuildableProjectDepsInPackageJson": false,
         "assets": [
           {

packages/hooks/src/createGlobalState.ts

@@ -0,0 +1,41 @@
+import type { ImmerHook } from './useImmer';
+
+import { freeze, produce } from 'immer';
+
+import { useForceUpdate } from './useForceUpdate';
+import { useUnmount } from './useUnmount';
+
+export function createGlobalState<S>(): () => ImmerHook<S | undefined>;
+export function createGlobalState<S>(initialValue: S): () => ImmerHook<S>;
+export function createGlobalState<S>(initialValue?: S): () => ImmerHook<S | undefined> {
+  const store = {
+    state: freeze(typeof initialValue === 'function' ? initialValue() : initialValue, true),
+    setState(updater: any) {
+      const prev = store.state;
+      if (typeof updater === 'function') {
+        store.state = produce(store.state, updater);
+      } else {
+        store.state = freeze(updater);
+      }
+      if (!Object.is(store.state, prev)) {
+        for (const update of store.updates) {
+          update();
+        }
+      }
+    },
+    updates: new Set<() => void>(),
+  };
+
+  return () => {
+    const forceUpdate = useForceUpdate();
+    if (!store.updates.has(forceUpdate)) {
+      store.updates.add(forceUpdate);
+    }
+
+    useUnmount(() => {
+      store.updates.delete(forceUpdate);
+    });
+
+    return [store.state, store.setState];
+  };
+}

packages/hooks/index.ts packages/hooks/src/index.tspackages/hooks/index.ts renamed to packages/hooks/src/index.ts

@@ -1,10 +1,17 @@
+export { createGlobalState } from './createGlobalState';
 export { useAsync } from './useAsync';
+export { useEvent } from './useEvent';
+export { useEventCallback } from './useEventCallback';
 export { useElement } from './useElement';
+export { useEventListener } from './useEventListener';
 export { useEventNotify } from './useEventNotify';
 export { useForceUpdate } from './useForceUpdate';
 export { useForkRef } from './useForkRef';
 export { useImmer } from './useImmer';
 export { useLockScroll } from './useLockScroll';
+export { useMediaMatch } from './useMediaMatch';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useLocalStorage } from './useLocalStorage';
 export { useMount } from './useMount';
+export { useResize } from './useResize';
 export { useUnmount } from './useUnmount';

packages/hooks/src/useAsync.ts

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+
+import { useUnmount } from './useUnmount';
+
+class AsyncInstance {
+  protected clearFns = new Set<() => void>();
+
+  clearAll() {
+    for (const clear of this.clearFns) {
+      clear();
+    }
+  }
+
+  setTimeout(handler: TimerHandler, timeout?: number) {
+    const tid = window.setTimeout(handler, timeout);
+    const clear = () => {
+      clearTimeout(tid);
+    };
+    this.clearFns.add(clear);
+
+    return clear;
+  }
+
+  requestAnimationFrame(...args: Parameters<typeof requestAnimationFrame>) {
+    const tid = requestAnimationFrame(...args);
+    const clear = () => {
+      cancelAnimationFrame(tid);
+    };
+    this.clearFns.add(clear);
+
+    return clear;
+  }
+}
+
+export class Async extends AsyncInstance {
+  private instances = new Set<AsyncInstance>();
+
+  create(): AsyncInstance {
+    const instance = new AsyncInstance();
+    this.instances.add(instance);
+    return instance;
+  }
+
+  override clearAll() {
+    for (const clear of this.clearFns) {
+      clear();
+    }
+
+    for (const instance of this.instances) {
+      instance.clearAll();
+    }
+  }
+}
+
+export function useAsync(): Async {
+  const async = useMemo(() => new Async(), []);
+
+  useUnmount(() => {
+    async.clearAll();
+  });
+
+  return async;
+}

packages/hooks/useElement.ts packages/hooks/src/useElement.tspackages/hooks/useElement.ts renamed to packages/hooks/src/useElement.ts

@@ -1,33 +1,20 @@
 import { isString } from 'lodash';
-import { useMemo, useRef } from 'react';
-
-import { SSR_ENV } from '@react-devui/utils';
 
 import { useForceUpdate } from './useForceUpdate';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 export type DElementSelector = string | (() => HTMLElement | null);
 
 export function useElement(selector: DElementSelector): HTMLElement | null {
-  const rendered = useRef(false);
   const getEl = () => (isString(selector) ? (document.querySelector(selector) as HTMLElement | null) : selector());
+  const el = typeof window === 'undefined' ? null : getEl();
 
-  const initEl = useMemo(() => {
-    if (SSR_ENV) {
-      return null;
-    } else {
-      return getEl();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const forceUpdate = useForceUpdate();
   useIsomorphicLayoutEffect(() => {
-    rendered.current = true;
-
-    if (getEl() !== initEl) {
+    if (getEl() !== el) {
       forceUpdate();
     }
   }, []);
 
-  return rendered.current ? getEl() : initEl;
+  return el;
 }