From 0d10f4a7da54aa251b94240cb62aefb99e24710e Mon Sep 17 00:00:00 2001 From: nflnkr <105123049+nflnkr@users.noreply.github.com> Date: Tue, 13 Feb 2024 16:06:19 +0300 Subject: [PATCH] fix peer dependencies export QuizView component from package fix readme --- .dockerignore | 1 + .gitignore | 3 +- README.md | 45 ++++++++++--- .../components/QuizView.tsx | 4 +- lib/index.ts | 3 + package.json | 63 ++++++++++++------- src/widget.tsx | 15 +---- vite.config.package.ts | 21 ++++++- 8 files changed, 106 insertions(+), 49 deletions(-) rename src/WidgetApp.tsx => lib/components/QuizView.tsx (93%) diff --git a/.dockerignore b/.dockerignore index b0542ba..36d88eb 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,4 +1,5 @@ /dist +/dist-package /widget Makefile README.md diff --git a/.gitignore b/.gitignore index a302ba2..5d68f75 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ lerna-debug.log* node_modules dist +dist-package dist-ssr widget *.local @@ -22,4 +23,4 @@ widget *.ntvs* *.njsproj *.sln -*.sw? \ No newline at end of file +*.sw? diff --git a/README.md b/README.md index 832c5d6..71500bf 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,49 @@ -# Виджет +## Виджет +### Сборка ```bash yarn build:widget ``` -# Npm-пакет -## Перед использованием и публикацией -```bash -# заменить TOKEN на актуальный токен -npm config set //penahub.gitlab.yandexcloud.net/api/v4/packages/npm/:_authToken=TOKEN -npm config set //penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/:_authToken=TOKEN +### Использование +```html + ``` -## Публикация +## Npm-пакет +### Перед использованием и публикацией +```bash +npm config set //penahub.gitlab.yandexcloud.net/api/v4/packages/npm/:_authToken=INSTANCE_TOKEN +npm config set //penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/:_authToken=PROJECT_TOKEN +``` +### Публикация ```bash yarn publish ``` -## Использование +### Установка Добавить в корень проекта файл .yarnrc с содержимым ``` "@frontend:registry" "https://penahub.gitlab.yandexcloud.net/api/v4/packages/npm/" ``` -Установка ```bash yarn add @frontend/squzanswerer ``` +Peer dependencies: +```bash +yarn add @emoji-mart/data @emoji-mart/react @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers axios emoji-mart immer moment nanoid notistack react-dom react-error-boundary react-router-dom react swr use-debounce zustand +``` +### Использование +```ts +import { QuizView } from "@frontend/squzanswerer"; + +export default function Component() { + // ... + return ( + + } +} +``` diff --git a/src/WidgetApp.tsx b/lib/components/QuizView.tsx similarity index 93% rename from src/WidgetApp.tsx rename to lib/components/QuizView.tsx index 89badfd..bddf360 100644 --- a/src/WidgetApp.tsx +++ b/lib/components/QuizView.tsx @@ -2,14 +2,14 @@ import { Box } from "@mui/material"; import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react"; import { QuizIdContext } from "@contexts/QuizIdContext"; import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext"; -import QuizAnswerer from "../lib/components/QuizAnswerer"; +import QuizAnswerer from "./QuizAnswerer"; interface Props { quizId: string; } -export default function WidgetApp({ quizId }: Props) { +export default function QuizView({ quizId }: Props) { const [rootContainerSize, setRootContainerSize] = useState(() => window.innerWidth); const rootContainerRef = useRef(null); diff --git a/lib/index.ts b/lib/index.ts index e69de29..d41a930 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -0,0 +1,3 @@ +import QuizView from "./components/QuizView"; + +export { QuizView }; diff --git a/package.json b/package.json index 0c102fd..18f72aa 100755 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "squzanswerer", - "version": "0.0.0", - "private": true, + "name": "@frontend/squzanswerer", + "version": "0.0.3", "type": "module", "main": "./dist-package/index.js", "module": "./dist-package/index.js", "types": "./dist-package/index.d.ts", + "license": "MIT", "files": [ "dist-package" ], @@ -27,42 +27,61 @@ "cypress:open": "cypress open", "prepublishOnly": "npm run build:package" }, - "dependencies": { + "devDependencies": { + "@emoji-mart/data": "^1.1.2", + "@emoji-mart/react": "^1.1.1", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mui/icons-material": "^5.10.14", "@mui/material": "^5.10.14", "@mui/x-date-pickers": "^6.16.1", "@types/node": "^16.7.13", + "@types/react-dom": "^18.2.17", + "@types/react": "^18.2.43", + "@typescript-eslint/eslint-plugin": "^6.14.0", + "@typescript-eslint/parser": "^6.14.0", + "@vitejs/plugin-react": "^4.2.1", + "axios": "^1.5.1", + "cypress": "^13.6.1", + "emoji-mart": "^5.5.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "eslint": "^8.55.0", + "immer": "^10.0.3", + "moment": "^2.30.1", + "nanoid": "^5.0.3", + "notistack": "^3.0.1", + "react-dom": "^18.2.0", + "react-error-boundary": "^4.0.12", + "react-router-dom": "^6.21.3", + "react": "^18.2.0", + "swr": "^2.2.4", + "typescript": "^5.2.2", + "use-debounce": "^9.0.4", + "vite-plugin-dts": "^3.7.2", + "vite": "^5.0.8", + "zustand": "^4.3.8" + }, + "peerDependencies": { + "@emoji-mart/data": "^1.1.2", + "@emoji-mart/react": "^1.1.1", + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/icons-material": "^5.10.14", + "@mui/material": "^5.10.14", + "@mui/x-date-pickers": "^6.16.1", "axios": "^1.5.1", "emoji-mart": "^5.5.2", "immer": "^10.0.3", "moment": "^2.30.1", "nanoid": "^5.0.3", "notistack": "^3.0.1", - "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.12", "react-router-dom": "^6.21.3", + "react": "^18.2.0", "swr": "^2.2.4", - "typescript": "^5.2.2", "use-debounce": "^9.0.4", - "vite-plugin-dts": "^3.7.2", "zustand": "^4.3.8" - }, - "devDependencies": { - "@emoji-mart/data": "^1.1.2", - "@emoji-mart/react": "^1.1.1", - "@types/react": "^18.2.43", - "@types/react-dom": "^18.2.17", - "@typescript-eslint/eslint-plugin": "^6.14.0", - "@typescript-eslint/parser": "^6.14.0", - "@vitejs/plugin-react": "^4.2.1", - "cypress": "^13.6.1", - "eslint": "^8.55.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.5", - "typescript": "^5.2.2", - "vite": "^5.0.8" } } diff --git a/src/widget.tsx b/src/widget.tsx index 535ef4d..849b061 100644 --- a/src/widget.tsx +++ b/src/widget.tsx @@ -1,5 +1,5 @@ -import WidgetApp from "./WidgetApp"; import { Root, createRoot } from "react-dom/client"; +import { QuizView } from "../lib"; let root: Root | undefined = undefined; @@ -14,7 +14,7 @@ const widget = { root = createRoot(element); - root.render(); + root.render(); }, unmount() { if (root) root.unmount(); @@ -22,14 +22,3 @@ const widget = { }; export default widget; - -/* - -*/ diff --git a/vite.config.package.ts b/vite.config.package.ts index eb9da00..017ff36 100644 --- a/vite.config.package.ts +++ b/vite.config.package.ts @@ -2,10 +2,14 @@ import react from "@vitejs/plugin-react"; import { resolve } from "path"; import { defineConfig } from "vite"; import dts from "vite-plugin-dts"; +import { alias } from "./vite.config"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), dts({ include: ["lib"] })], + resolve: { + alias, + }, build: { lib: { entry: resolve(__dirname, "lib/index.ts"), @@ -16,15 +20,30 @@ export default defineConfig({ copyPublicDir: false, rollupOptions: { external: [ + "@emoji-mart/data", + "@emoji-mart/react", "@emotion/react", "@emotion/styled", "@mui/icons-material", "@mui/material", + "@mui/x-date-pickers", "axios", + "emoji-mart", + "immer", + "moment", + "nanoid", + "notistack", + "react-dom", + "react-error-boundary", "react-router-dom", "react", + "swr", + "use-debounce", "zustand", ], }, - } + }, + define: { + "process.env": process.env, + }, });