fix peer dependencies

export QuizView component from package fix readme
2024-02-13 16:06:19 +03:00 · 2024-02-13 16:06:19 +03:00 · 0d10f4a7da
commit 0d10f4a7da
parent 41c8da0177
8 changed files with 106 additions and 49 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,4 +1,5 @@
 /dist
+/dist-package
 /widget
 Makefile
 README.md
--- a/.gitignore
+++ b/.gitignore
@ -9,6 +9,7 @@ lerna-debug.log*

 node_modules
 dist
+dist-package
 dist-ssr
 widget
 *.local
--- 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
+<script type="module">
+    import widget from "https://s.hbpn.link/export/pub.js";
+
+    widget.create({
+        selector: "widget-container",
+        quizId: "...",
+    })
+</script>
 ```
-## Публикация
+## 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 (
+        <QuizView quizId={quizId} />
+    }
+}
+```
--- a/lib/components/QuizView.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<number>(() => window.innerWidth);
    const rootContainerRef = useRef<HTMLDivElement>(null);

--- a/lib/index.ts
+++ b/lib/index.ts
@ -0,0 +1,3 @@
+import QuizView from "./components/QuizView";
+
+export { QuizView };
--- 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"
    }
 }
--- 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(<WidgetApp quizId={quizId} />);
+        root.render(<QuizView quizId={quizId} />);
    },
    unmount() {
        if (root) root.unmount();
@ -22,14 +22,3 @@ const widget = {
 };

 export default widget;
-
-/*
-<script type="module">
-    import widget from ".../widget.js";
-
-    widget.create({
-        selector: "widget-container",
-        quizId: "...",
-    })
-</script>
-*/
--- 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,
+    },
 });